I haven’t been so excited since the early days of jQuery. React is a JavaScript library initially developed by Instagram/Facebook for building user interfaces. Since it has received a lot of attention recently with companies like Netflix, Walmart, Tesco, Airbnb and Flipboard moving significant amounts of their UI code over to it, it’s a good idea to see what all the fuss is about.
There’s other opinions out there that discuss pros and cons of JavaScript frameworks. In this particular article it discusses the lack of longevity in frameworks and includes this cheeky image:
What the author of the article doesn’t address is jQuery. jQuery isn’t “hot” right now but its usage dwarfs all of these frameworks. It’s been around longer than all of the frameworks that are discussed in the article.
For me, React is like the Second Coming of jQuery. I believe the primary driver for the adoption of a JavaScript framework is its philosophy.
JS Framework History 101
The Rise of jQuery
In the mid-2000s there was a tonne of excitement around the emergence of these amazing JavaScript frameworks. There was Prototype, MooTools and some others. When jQuery came along, it was different to the others in key ways. It heavily promoted the use of CSS selectors, which web developers at the time were getting to grips with and promoted the philosophy of progressive enhancement. Meaning if you switched JavaScript off your site is still indexed by search engines, read by screen readers and most importantly, the functionality of your site shouldn’t be broken. It encouraged the separation of content and behaviour like CSS did with content and style. People could get behind that.
These other frameworks started to implement some of the philosophies that jQuery introduced – but they were playing catch up, they didn’t have the same vision and focus from the get go.
History is Repeating with React
React applications are built up by using discrete components. You declare your components and add any functionality to them. They’re great for creating dynamic user interfaces and can be used over and over again.
Without going into too much detail, unlike it’s contemporary frameworks it focuses on one-way data-binding, meaning when the “state” of the application changes it re-renders the parts of the user interface that the state touched. It does this by using a Virtual DOM and comparing it to the DOM in the browser and only applying the differences. But that isn’t why you should be excited, you should be getting excited because React has allowed for the first time, a practical way to create “Universal” or “Isomorphic” JavaScript applications.
A Universal JavaScript app is where the client and the server code are the same and you no longer have to deal with a templating language for your Express or Rails app. Instead of using ERB, Jade or any other templating language, you just use React. You can get React to render out your components to a string. This string can be sent to a client via an HTTP response’s body. On the client-side React kicks in to add any event handlers, still using the same code that you used on the server for the components! This is an incredible time saver and should reduce code duplication, too. When I say code duplication, I mean you’re not creating the views in one language and then jumping into React to reimplement some of that functionality. The added benefit of rendering on the server is all the reasons why jQuery was good. Your pages will be indexed as they should, and you can always progressively enhance it with more JavaScript. As web developers and designers we should be more thoughtful for all of our users, not just the ones that have JavaScript enabled.
Conclusion
In the more modern era of frameworks, React is making similar ripples to what jQuery did back in the day. The way React has implemented the Virtual DOM to apply differences to the real DOM and how it’s being used on the server-side for rendering has not gone unnoticed. Several other frameworks are copying these principles for performance and allowing for graceful degradation of their frameworks with server-side rendering. Their APIs are changing to meet React’s API, like the frameworks of old emulating jQuery’s API. In the end, jQuery’s principles and philosophies won, it kept a generation of JavaScript developers from migrating to these modern frameworks. With React the jQuery developers can safely join the modern web development community and enjoy the productivity boost that React brings and keep true to the principles that they learned with jQuery. In other words, React is like jQuery, but better, your code isn’t duplicated on the server and the client, it’s the same code and logic.
With strong philosophies like these React here to stay!