Jack Franklin rebuilt his (p)React-based pomodoro app in Svelte and wrote up a nice comparison of his experiences with both:
This is not a post declaring Svelte to be better than React, or vice-versa. This is a post where I’ll tell you about my preferences, and what I find easier or harder with either framework. I’m not here to pick a fight!
In this post, I’d like to share alternative approaches for dealing with conditional rendering in React. I will try to list out the pros and cons of 3 different approaches (doesn’t mean couldn’t be more!) and hopefully this can be useful for you someday.
Oh, and join us in the #jsparty channel of our community slack where we’re giving away three FREE e-book copies of Eric’s new book! 🎁
Before React, there was Angular and before that, there was jQuery – all frameworks that have fallen by the wayside. It’s just a matter of time before something comes along and takes the mantle as the new hotness. Or so they say.
I’m not so sure. In fact, I think React will be with us for many years to come.
He sites React Native’s success as one reason React will remain relevant, amongst others. I’m not so sure.
I believe React The Idea (uni-directional data flow through declarative component trees) is here to stay, but I’m not so convinced that React The Software won’t be soon replaced like its predecessors were.
You may be wondering why this is a good idea. Thankfully, the README starts by answering that question:
- Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
- Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
- Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem
At this point, we may need to adjust Atwood’s Law, which states:
I think a
This is Josh Comeau’s personal suite of “best practices.”
If you work with styled-components, or a similar tool like Emotion, my hope is that this article will help you get the most out of it. I’ve distilled years of experimentation and practice into a few practical tips and techniques. If you apply these ideas, I genuinely believe you’ll be a happier CSS developer ✨
We didn’t do too much coverage of Rails 6.1 release last week, but here’s a great write-up on the GitHub blog about how they landed a couple small PRs into the framework that dramatically changed how the company is building views with ViewComponent.
This comment was particularly noteworthy, methinks:
Inspired by our experience building component-based UI with React, we set off to build a framework to bring these ideas to server-rendered Rails views.
Good ideas propagate. Regardless of what comes next in the web UI world (or React goes from here), this single idea is so profound for building frontends that it will be React’s lasting legacy.
Ron Perris from Snyk this checklist of React security best practices to help you and your team find and fix security issues in your React applications. I’ll show you how to automatically test your React code for security-related errors and automatically fix them.
Aleph.js doesn’t need webpack or other bundler since it uses the ESM imports syntax. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module, there’s no time wasted to re-bundle every changes, and instantly updates in the browser by HMR (Hot Module Replacement) with React Fast Refresh.
The “$X but for Deno” meta trend is starting to pick up steam. Expect more like this in 2021 and beyond.
Timelines are hard to get right and React-Chrono looks really well done. It has 3 modes (vertical, horizontal, and vertical alternating where cards alternate between left and right side of timeline), lets you include images & videos, and is highly customizable.
I am a huge proponent of a couple of specific ideas. One is that you should always try to understand what problems a specific tool is trying to solve… And another is that you need to understand exactly what problems you are trying to solve in your own application right now, and pick the tools that solve your problem best.
Ben Ilegbodu joins Divya, Suz, & Amal to talk about introducing TypeScript at Stitch Fix, why TypeScript and React work well together, building component libraries, and more.
Trends come and go and sometimes we forget to look at the value of tools for what they are. In an exploration of how to write React in a way that felt more pleasant, I rediscovered an old front-end tool, and thought it was worth sharing it.
At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.
The library boasts small bundle sizes due to package splitting, is un-opinionated about integrations like state management and animations (if that’s a feature for you), and is explicitly not a charting library.
As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.
Redux maintainer Mark Erikson joins Jerod and Amal for an in-depth conversation around the React community’s fav state management solution. We learn how Mark came to be maintainer of Redux, why and how Redux Toolkit came about, when to go with Redux vs other options, and much more.
ALSO: prop drilling, the grep factor, & lasagna mode (oh my)
If you plan on using Tailwind and building with React or Vue (or Alpine coming soon), it’s a no-brainer to start with these free UI components by the Tailwind team.
Many of these “vs” style articles are too shallow or narrowly-focused to be of much use. Not this one. It even has a table of contents. Dive in deep for the full analysis or jump straight to the end for the
if/then framework selection advice.
Arwes is a web framework to build user interfaces for web applications based on science fiction and cyberpunk styles guidelines, animations and sounds effects. The idea is to provide an user experience as if you were using futuristic out of a movie interfaces for your project.
The sounds are perfect.
I tried a lot of different ways to add TS support to Kea. At the end of the day what was needed was just not possible without an extra type generation step. I’ll document the failed attempts in a blog post one day. The issue boils down to the fact that each block inside a logic (e.g.
reducers) gets the logic itself as a parameter (
reducers: logic => (...)). That kind of loopy stuff is just not possible with TS right now. At least not to the level that it has to be for it to work in Kea (think of selectors that depend on each other). Ultimately, all of the pure-TS attempts I tried would have yielded a partial solution.
Thus kea-typegen was born. Even if it’s just a step along the way (TS compiler plugins a’la babel someday?) and still missing many features, it’s already really useful. It uses the TypeScript compiler API to analyse your source files and print out complete types (interfaces) for them.
Marius also recorded a video of the process in action.
Antoni Kepinski, who was a guest of ours on JS Party #85:
I wrote a short tutorial on how to embed Changelog’s podcast player into a React application so that it doesn’t affect the performance and accessibility of the site.
While I do understand that Changelog isn’t interested in
How-to's and tutorials, I feel like this one can be an exception, as it is related directly to Changelog and its podcasts ;)
Antoni is correct! How-to’s and tutorials aren’t something we share often. It’s not that they aren’t useful, it’s just that they aren’t really news and they are rarely noteworthy. But I’ll make an exception this time. 😉
It took me just 3 minutes to fully understand the concepts of React Hooks thanks to this great post.
That’s a ringing endorsement, if I’ve ever seen one. If React Hooks are new (or confusing) to you, give this 3 minutes of your time. 😀
Blitz.js creator Brandon Bayer joins Jerod to dive deep into the foundational principles of this fullstack React framework. We talk about its inspiration (Ruby on Rails), its differentiation (a “no-API” data layer), and its aspirations (built-in auth, plugins, recipes, and more).
This provides responsive UI components from 15 different app categories (commerce, blog, pricing, etc) with dark/light modes and differing color variants.