It seems like the dust has settled on the JS framework wars 1, and clear winners have seemingly emerged…
The daily announcements of a new JS framework or tool has subsided and the industry has settled on more or less the popular options.
If someone asks me for my personal recommendation on which JS framework to learn 2, after having set up and used both in production apps—I’d recommend React for professional development and Vue for a hobbyist.
Okay, so you’ve got React, what else did you need to learn? I suggest the basics of Node.js and Webpack for tooling, and then React Hooks 6 or GraphQL, depending on [where you work or want to work] 7.
It also looks like TypeScript is gaining more traction with a lot of projects using it. On top of these, if you’re responsible for setting up a project, you need to look at additional tools such as ESLint, Prettier, etc.
Then you have to learn about optimising your SPA for performance with code splitting, etc.
Does that seem like a lot of things to learn? I sure think so. “Okay, fine, I’ll learn those things, but what about the future?” you say.
There are some new tools being worked on that excite me. Not because they’re another shiny new tool to learn, but because they eliminate the need for some existing ones, especially the need to have multiple tools.
Deno is similar to Node.js, created by the same original author, Ryan Dahl, to fix existing issues with breaking changes. There are some security-by-default, backend related standard modules and performance features that differentiate it from Node.js.
But what excites me about Deno is the fact it uses ES modules, instead of CommonJS. That means they let you import paths or URLs to modules without needing the disk-space-grabbing
Deno also tries to match Browser APIs unless it’s a non-browser feature, meaning there is less to learn.
It also has TypeScript support built in, so you don’t need to set up a transpiler for that.
Rome is a Front-end toolchain. “Another one?” you ask. Yes, BUT, it consolidates many tools into a single one. “Wait, what?”
From their website:
Rome unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.
Rome has strong conventions and aims to have minimal configuration. Read more about our project philosophy.
HUZZAH! ONE-TOOL-TO-LEARN! Minimal configuration. What’s not to LOVE?
Pika and jspm
Remember when I mentioned that Deno let’s you import files instead of the
node_modules mess? Well Pika is trying to do that inside browsers. Rather than bundle and build libraries into one package, what if we could import them in-real-time in the browser itself? Pika and jspm are projects attempting to solve that problem. Of course there are caveats like not bundling increases latency. But this is exciting to me as it helps reduce bundling and optimising steps. Or at least I think it will.
Sadly, these tools are not necessarily complete, or production ready. So we may have to wait a few years for them to mature. Hopefully new people coming into Front-end development will have less tooling and optimising to worry about.
I cannot wait for the future to arrive sooner, rather than later!
1. Or is this just the calm before the storm?
2. Well, first I’d ask them if they really, really need a framework at all. These things solve specific problems and add a lot of complexity, which may not be needed.
4. Personally, I’ve found Vue a lot more learnable, and better for beginners. You don’t need to start with a build system to learn it, and instead can drop in a script to the library—like we used to do back in the day when we’d only use jQuery. React touts the same capability but gives you warnings about non-production mode, and I’ve found it slow-ish without the build in place. This may have changed now.
5. I don’t like how Angular forces you to start off with TypeScript. It’s one more barrier to entry for newbies. I’m sure there are options to setting up without TypeScript, and ways around it, but the default “Getting started” tutorial is what drives these things IMHO.
6. I mention React Hooks apart from React as previously it was popular to use Redux, but you may not need that anymore
7. I recommend Webpack, GraphQL for the same reasons as React.
Understanding the 12-Factor App Methodology
The Axioms of Software Development - Part 10
Understanding User Flows in UX (User Experience) Design
reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.
We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.
Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.
The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.
The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.