Ryan Chartrand’s React vs. Vue.js Argument Makes Sense – Buckle Up Kids – Innovation Will Speed Up In 2018!
React vs. Vue.js
Let’s get straight to the good stuff: This time last year, not many had faith that Vue would ever become a big competitor to React when it comes to company adoption, but it was impossible to ignore Vue this year, even sending Angular into the shadows in terms of developer hype.
As we look ahead to 2018, we’re about to embark on an intense 2 years filled with a lot of excitement for Vue.
But let’s not forget React still has the financial backing of one of the richest companies in the world, not to mention some incredibly talented maintainers. Both core teams also collaborate and inspire one another.
So what’s giving Vue the spotlight?
Vue is doing all the things that make developers really happy:
- Vue is lightweight, easy to learn, has incredible tooling, has great state management and routing built-in (!), etc.
Vue’s community certainly isn’t as large as React yet, but communities grow based on whether the core team has great ambassadors and listens to its community (both of which are in place).
When it comes to pleasing developers, let’s not forget Facebook’s epic fail this year with the BSD + Patents license snafu that went over really well with developers.
Sure, Twitter wars never killed a framework, but we’ve seen before how mismanagement (ex: Angular 2 delay) can create a window of opportunity to allow an alternative to step in and take the spotlight.
We’ve actually reached the point where you might as well start every project with Vue to simplify life, and that’s an impressive accomplishment by their core team.
Here’s a great write-up on React vs. Vue vs. Angular from this year.
The likely end scenario? Facebook does what it does best: copy the innovators and the world continues to use React.
Every JS developer should still consider learning Vue.js, as it’s made a big enough splash to where we are starting to see the requests for Vue.js developers for hire come in, meaning you can create some value for yourself in the short-term at least.
And then there’s Next.js, which we’ll call ‘insurance for React.’
React coupled with Next.js gets you much closer to the Vue experience in terms of tooling, code splitting, routing and state management, allowing you to also retain the massive React ecosystem and support.
Next is also especially useful for server-side rendered apps built in React, an increasing trend on its own.
Plus, add in Now.js (created by the same team) and you have a super fast way to deploy your React apps.
As the Vue vs. React battle continues, expect to see more and more adoption of Next in tandem with React to make everyone in the React camp feel more comfortable.
Despite Angular’s growing difficulties at pleasing developers, it will still continue to be a widely used framework in 2018.
Many companies adopted Angular 1.0 years ago, and as they look to migrate to something better in 2018-19, they’ll be looking at React or Vue.js as potential alternatives than Angular 2.
Angular’s remaining advocates have taken the stance that Angular will be the JS framework of choice for the enterprise because big companies like OS projects backed by a big company (Google). But can’t the same argument be made about React and Facebook?
It’s always worth paying attention to anything that Facebook is using in production.
In 2017, they also released reason-react which creates bindings for React so you can actually write Reason code that compiles to idiomatic ReactJS.
So imagine not needing to install Babel (+ many plugins), Flow, etc. and only needing the power of OCaml + Reason (which now supports React bindings). That’s a big trend waiting to explode.
Reason gained far more attention this year in the JS realm than most other compile-to-js languages (sorry Elm, we still love you anyway), so it’s definitely one to keep watching and playing with in 2018.
GraphQL is a query language for APIs (think: a modern take on REST).
GraphQL lived up to the hype in 2017, as major companies like Yelp, Spotify, Github, Walmart, NYTimes, etc. all now have GraphQL-based APIs.
Some of these APIs are even exclusively GraphQL, with no REST option even available. Put simply: innovative companies are placing their bets on GraphQL.
RESTful APIs are certainly far from dead, but again, looking at the trends of where startups are moving, GraphQL is a popular option.
Alternatives like Falcor, on the other hand, are barely ever discussed anymore.
This is definitely the time to start learning GraphQL if you want to get jobs at innovative companies.
Redux, Relay Modern and Apollo
But GraphQL really shook things up for Redux, primarily when it comes to data fetching.
But as one developer points out about Recolay/Apollo/Redux:
These frameworks and their benefits do not have to be mutually exclusive. In fact, using them together can provide a nice separation of concerns that is so important in web development.
This means you can still use Redux in tandem with Relay, using Redux for local state and some complex non-server state and then Relay for fetching.
Storybook is an environment for defining, developing, and testing UI components.
It went from practically dead at the start of the year, to massively popular in mid-2017 thanks to a huge community effort. It’s such an inspiring story of how open source work should evolve and worth reading about.
It’s so incredibly useful (and even fun to use), letting you build and test UI components in isolation. It’s like a living UI styleguide that actually provides real value to the developer.
You’ve likely come across an open source project using Storybook already, but to see it in action for yourself, check out the Storybook for Airbnb’s date picker.
If you want to stand out as a developer in 2018, then show up to an interview with a Storybook from your last project.
As the name suggests, Prettier is a code formatter that makes your code much more readable and, well, pretty.
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
foo( reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne() );
With more than 18,000 stars on Github, developers are loving this simple and valuable project.
It’s also used on a ton of other projects you likely already love, like Webpack, React, Next.js, Babel and more.
Then again, you could just become a Go developer and not even need to install this.
Jest and Enzyme
As you’ll see here, Jest is now dominating Jasmine in downloads.
Jest’s Snapshots feature really took off in 2017, making it far less painful to deal with testing. Watch this talk from React Conf 2017 to learn all about it.
Jest’s Snapshots + Enzyme’s super simple API for testing React components makes for a great testing combo that will continue to rise in popularity in 2018.
Webpack has risen to become the most popular asset bundler. Webpack has also had an INCREDIBLE year.
This time last year, Webpack barely even had documentation and most developers had no idea how to get started with it.
Then, by the start of the year, I wrote about how incredible it was that Webpack had raised $15,000 in 3 months (and how happy we were to be one of its earliest sponsors) to support the project. They now have hundreds of thousands of dollars in funding.
Not only is Webpack paving the future of how open source projects can thrive, but the project’s development has maintained its massive momentum throughout the year.
And with Sean Larkin thankfully still leading the Webpack movement, there’s really no end in sight for what Webpack is capable of achieving next.
Because of how well supported this project it is (and how much they care about their community), it makes it the easiest trend to predict for 2018.
But with every massive trend, there is a rising force of disgruntled developers.
Parcel, a competing bundler, is gaining momentum rather quickly with 12,000 Github stars out of the gate in 2017 and going directly after Webpack.
Parcel’s pitch is that all other bundlers have become too bloated, while Parcel works twice as fast at bundling as Webpack (10 times faster when using its cache).
It also goes after Webpack’s somewhat confusing configuration setup, as with Parcel, there is no configuration needed.
“Just point it at the entry point of your application, and it does the right thing.”
Although simplifying configuration and improving speed are both great improvements, I wouldn’t be surprised if Webpack doesn’t copy these improvements by the first half of 2018.
Similar to Vue vs. React, the little guy will always innovate faster, but it’s up to the big guy to be inspired by that innovation and improve their projects.
Ever since Kyle went full-time on Gatsby last year, it’s really started to pick up momentum.
There’s no better proof of that than the fact that the React website itself is built using Gatsby.
Gatsby is all about performance and delivering the fastest possible web experience in React.
This diagram from their website gives you an idea of how it works:
Gatsby also uses progressive web tech that prefetches resources for other pages, so browsing is lightning fast.
Although Gatsby isn’t going to dominate the industry by any means, it’s a fantastic solution for building fast static sites that will continue to rise in popularity.
For more on Gatsby, read this post.
We were also happy to sponsor Gatsby’s development this year.
Babel needs no introduction at this point and remains a trend essentially by default.
All in all, it was a good year again for Babel, primarily focused on building Babel 7 (hopefully launching early 2018). Most importantly, they wrote a song 🙂
But for now, Babel should continue strong throughout 2018.
We were also happy to sponsor Babel this year.
Flow & Typescript
We likely won’t see one destroy the other in 2018, as both have survived together, serving different use cases.
Flow, built by Facebook, is the preferred choice for React developers since it easily integrates with Babel, also commonly used in React projects.
TypeScript, built by Microsoft, is popular among Angular 2+ developers as it’s the primary language.
2018 will likely be dull in terms of advancements from these two, and the real question in the following years will become whether something like Reason replaces them both.
I like the way one redditor described Immutable.js:
immutableJS ensures that developers on large teams don’t do something stupid.
Put simply: Immutable.js, another Facebook project, makes sure state isn’t mutated by using immutable (unchangeable) objects.
As our redditor friend pointed out, this can be incredibly useful in a large team of developers that can screw up state unintentionally.
There are some pretty big limitations to using Immutable.JS, but limitations that might not matter depending on your needs. You can read more about them here.
With 20,000 stars on Github now, Immutable.js has risen in popularity in 2017 and can be expected to continue to rise in 2018 as developers start to take the time to understand the concept and the tradeoffs.
Think of it like Flash meets jQuery.
Now, I realize using those two words in the same sentence doesn’t help sell this increasingly popular library.
But the more you dive into this project, the more you discover a group of people who had serious gripes with both jQuery and Flash and simply needed to make things better.
And Popmotion is truly a better experience with a lot of innovation around web animation just starting to boil. This is one to watch in 2018 for sure.
Check out their site to start getting teased into trying it.
React Native & Electron
Some notable apps built on Electron include: Slack, Atom, Github Desktop and Discord.
And popular apps built with React Native include: Facebook, Instagram, Airbnb and UberEATS.
Bonus: Web Assembly
But keep this on your radar, as everyone is looking very closely at this now.
2018 Study Materials
After looking at all of the trends ahead, here’s what we’d recommend you consider learning in 2018 to remain competitive as a remote developer and unleash your potential:
- Be daring, learn Vue.js
- Every React developer should learn Next.js
- Start learning Reason (and ReasonReact) and try it out on a side project.
- GraphQL is a must for your 2018 to-do list.
- Followed by learning Relay Modern, the go-to option for data fetching in React+GraphQL apps.
- Storybook! Storybook! Storybook!
- Install Prettier on a project and make your code more readable.
- Learn and use Jest snapshots in tandem with Enzyme on a React project.
- Learn Flow (React developers) or TypeScript (Everyone else).
- Consider Gatsby for building something from Markdown -> Static pages.
- Build a mobile app using React Native.
- Build a desktop app using Electron.
- Play around with Popmotion to create a smooth animation.
Import this list of resources as a Todoist project: