These 5 Tips Will Change The Way You Build React Apps
🚀 Tip #1: SSR
SSR stands for Server-Side Rendering and if you’re writing your Web Server using Node, React makes this easy. SSR can significantly speed up your React App’s time to “First Meaningful Paint”, a metric that is critical to improving your web site’s overall user experience. If your site feels fast, your users will thank you with increased engagement.
If you’re wondering how to achieve SSR bliss, FreeCodeCamp has published an excellent post on how to do it that is a perfect starting point.
⚙️ Tip #2: Service Workers (PWA)
“Progressive Web Apps start with a traditional web site/application and progressively enhance with modern features. When sites are secure they can leverage ServiceWorkers to provider users with offline support, Push notifications can help re-engage users, and Web App Manifests let users install PWAs alongside native apps.”
Want to know more about service workers & PWA? This video provides an excellent demonstration of the game-changing capabilities they make available.
🔐 Tip #3: Localhost HTTPS
HTTPS is everywhere. If you’re creating a website or app and deploying it to the cloud, you’re most likely going to be serving it using HTTPS. Encrypted HTTP communication is quickly becoming a ubiquitous standard.
Your local development environment should emulate (as much as possible) your deployment environment. Most hosting providers use HTTPS as a default, so setting up your local environment to serve your site over HTTPS will help you rest assured that there will be no surprise bugs when your site is deployed.
Again, FreeCodeCamp comes to the rescue with this simple recipe for setting up and using HTTPS locally. Enjoy!
💦 Tip #4: “Code Splitting” with @loadable/component
There is a golden rule of web performance that goes something like this: “do your best eliminate unnecessary data-on-the-wire”.
A typical React app can contain dozens of files which are usually bundled together into a single script upon deployment. If you’re not careful, you could end up making your users wait as their browser downloads your multi-megabyte React app, all in one go, before rendering anything on the screen.
Why should your users load your whole app at once? Why can’t we fetch and execute JavaScript only when it’s needed?
How? Start with the documentation:
🔥 Tip #5: Tachyons & Styled-Components
This last tip is my favourite. There are many ways to write CSS in JS, and none has ever felt quite right until I stumbled on this technique. Styled Components is the best CSS in JS library, in my opinion. Combined with Tachyons design atoms, you’ve got an unbeatable combo. Oh, and it works with code-splitting and SSR without much effort to boot. Perfect!
🏋️ Bonus Round: Web Workers
Web workers bring a taste of multi-threading to the web. JavaScript is single-threaded, meaning it can only deliver one CPU instruction at a time. Modern CPUs have multiple cores (and tons of threads), which JavaScript ignores. Unless you’re using Web Workers!
If you’re using React, you can interact with Web Workers using an ingenious HOC developed by ghengeveld. Here it is:
🤖 AI: The Future of Web Performance
One last thing. Machine Learning techniques are rapidly encroaching into multiple domains. Here’s an example of a ML algorithm which dynamically determines which JavaScript resources to “prefetch” based on google analytics data. Amazing.
React is the “model that keeps on fitting” for developing software user interfaces. By using the techniques listed here, you can be sure you’re taking advantage of the latest web-platform technologies and best practices for creating React apps with top-of-the-line user experience and performance. These techniques can be easily set up at the beginning of a project or added later. There’s no excuse not to.
Thanks for reading!
If you liked this post and want to keep learning about web and app development with RED Academy, be sure to follow us on Medium or check out our website.
