It was 1999 and the Internet was all about the squeaks and scratches of a dial-up modem. Back then, the world wide web was simple. You visit a website, you’d get a page, you’d read it in full and learnt something new. On the other hand, software was something that came on a disk and had to be installed on your computer.
Fast forward to today, and the concept of locally installed software is diminishing by the day. In its place, are rich desktop- like applications that run in a web browser such as Chrome. Who would’ve thought, the document flavoured internet of yesteryears would become a rich and interactive playground that is nothing short of a stellar experience? But here we are, with all our files, presentations, documents and virtually every facet of personal and professional lives sitting high up in the cloud, available everywhere, anywhere and anytime. There are even photoshop clones and 3D CAD applications that work in your web browser.
The dream of building desktop class applications that do not need to be installed, isn’t new. In fact, this takes us back once again, to 1999 and a one-bedroom apartment atop Telegraph Hill in San Francisco where Marc Benioff and his colleagues created Salesforce, a CRM application that broke the mould and became the first ever Software-as-a-Service.
Today, almost everything can be done from the comfort of a web browser, thanks to rapid advancements in browsers and the way they work with HTML5, CSS3 and JavaScript - the holy trinity that defines our web. Instead of writing the server rendered applications of yesteryears, today we have single page applications (SPAs) that are delivered to your browser where they live and run, offering the user a brilliant experience. But, just how do you build these comprehensive applications?
JavaScript Frameworks, Libraries & More
The brain, the logic and the action that makes a web application tick is obviously the result of a powerful JavaScript engine in your browser and the code you write. But just how do you write efficient JavaScript applications? Gone are the days when JavaScript was limited to form validators and other knick knacks. Today, we’ve got comprehensive applications spanning thousands of lines of code and with that kind of complexity, plain vanilla JavaScript suddenly starts to look really daunting. The prospect of writing everything from scratch isn’t an enticing formula and that’s not just limited to the JavaScript world. Look around and every language and platform offers frameworks and libraries that bring in opinions, battle tested workflows and an accelerated and developer friendly workflow to get the job done faster and better than wrestling with the core language alone.
In the world of web applications, we’ve come a long way from those days of jQuery which offered abstractions and helpers to quickly do what otherwise would take a lot of boilerplate code. But what jQuery couldn’t do is optimize the JavaScript - DOM bottleneck. You see, your JavaScript code may be fast, but it still has to talk to the Document Object Model (DOM) which gets your HTML document to play along. This is not the most efficient thing and has been the subject and reason for the existence of many web application frameworks and libraries. Besides that, most jQuery code ended up looking like code spaghetti which just worked until you had to visit it again for upgrades and feature additions.
This is where frameworks and libraries such as Angular, React, Vue, Ember and many more offer a vaccine and solution for building comprehensive applications that are way more than the scripts of yore. But out of all these, React, a JavaScript library by Facebook is clearly headed for victory.
React - The King
While the market is saturated with frameworks and libraries that promise the gift of rapid application development and over-the-top performance, if there is one solution that stands out, it is React - a JavaScript library by Facebook, designed to help you rapidly build user interfaces and web applications. React is not strongly opinionated and this is just one of several reasons why its marching ahead of its peers, to become the numero uno choice for building high performance web applications. This is why, everyone from Facebook, Airbnb, Twitter to Microsoft and many more rely on React to power up their core products. So, let’s discover 10 reasons why React and not anything else should be on your menu, if you’re a web developer aiming to excel in the global web applications market:
- Composability: There was a time and place for monolithic applications. In simple words, huge applications were written so cohesively that scaling them up wasn’t really an easy task. Thankfully, these have passed into oblivion with the advent of the modern web application library or framework. React leads the pack by offering a component driven and composable architecture that allows developers to write micro units or features that can be composed together to create huge applications that can grow and scale without the fear of breaking apart.
Whenever a new feature needs to be added or upgraded, simply build a new component or work with an existing one and you’re effecting a change that is easy to maintain and powerful. What’s even better is that with React, a component could be as simple as a regular JavaScript function. So, you’re really leveraging your knowledge of JavaScript instead of rummaging around a complicated and opinionated syntax.
- Turbocharged performance: React isn’t jQuery, which means that with React isn’t some fancy syntactic sugar over plain vanilla JavaScript. React brings true blue performance to the table by incorporating an in-memory representation of the browser’s real DOM. This is known as a virtual DOM and React uses it to perform all DOM manipulation computations before committing the final set of changes to the real DOM.
This means that the only time React will interact with the slow DOM is when it has to commit the final change which would be the sum total of multiple batched manipulations and changes, all of which are computed quickly in the Virtual DOM, in memory. This enables React to massively improve performance and is one of the reasons why React is used in some of the most performance heavy websites including Facebook itself. The underlying engine that delivers this performance is known as React Fiber.
Data driven architecture: What if you could focus on the data that drives the UI rather than the intricacies of DOM manipulation? Well that is what React allows you to do with its data driven architecture where data drives changes to the UI. You modify data and the UI updates for you. This is known as stateful and declarative programming and is a delight to work with. It allows you to focus on what matters most - the data that the application works with and not the wiring that drives the underlying changes to DOM. Moreover, React features a unique one-way data flow architecture which makes it a breeze to understand how data moves even in complex applications that contain several hundred components.
The amazing synthetic event system: React incorporates a unique synthetic event system that abstracts the underlying browser’s event system and provides a common and uniform API for developers to work with. As a result, you don’t have to worry about browser specific behaviours, nor do you have to worry about low level optimizations to ensure events are handled with performance. React manages all that for you.
Medium agnostic: React, the core library is not bound to a specific medium. This means that while you’d use React for building applications for the DOM i.e. your web browser, you can use React to build content for virtually any render-able medium. This is why we have the React Native project which allows you to leverage your knowledge of React for building native mobile apps for iOS and Android. And you can even write your own renderers for any specific medium or platform.
Renders on the server too: One of the pain points associated with building JavaScript applications is the fact that unlike websites of the late 90s and the early 2000s, a JavaScript single page application renders in the user’s web browser, which means search engines find it difficult to crawl for content. This spells doom for search engine optimization and digital marketing initiatives, which are a critical part of any organization’s marketing strategy today. Thankfully, React offers a brilliant solution to this problem by allowing you to render apps on the server which are instantly visible to search engines and offer seamless transition to the faster browser version of the same application which delivers user end performance, which is why you picked React in the first place. The result is a win-win for all.
Modern toolchain and a stellar developer experience: One of the things that serves as a barometer of success and prevalence in the tech world, is the developer experience. React offers not only a fantastic developer experience but also allows you to create your own toolchain for advanced case scenarios. As a developer, you work with modern and cutting-edge JavaScript features while the standard toolchain takes care of compilation, bundling and packaging. The end result is a fantastic developer experience that React developers can vouch for, making it the library of choice for the enterprise and start-up world alike.
A vibrant ecosystem: React has been embraced by the open source ecosystem with such magnificence that a huge number of ecosystem tools and solutions are available that allow you to notch up your applications with advanced workflows such as a global state management, handling side effects and even complete frameworks that completely abstract all the intricacies of web application development and allow you, the developer to write React code to build complete and comprehensive applications quickly. With ecosystem solutions like React Router, Redux, Next.js, Redux Saga, React Three Fiber and several more, React is a 100% power packed solution with its own army of super hero solutions that allow you to do anything that your browser permits.
A clear and defined roadmap for the future: Unlike several other web application frameworks and libraries, React is a battle hardened solution that is used not only by Facebook but by thousands of leading enterprise organizations worldwide. Facebook has always offered a clear and defined roadmap for the evolution of React and they’ve always stood by it. This includes a stable API with very gradual deprecations which make it really easy for developers to evolve their products along with the evolution of React. A stable product means less or negligible surprises and is thus a key factor in choosing a library or framework for your next big enterprise product.
Good old JavaScript: React doesn’t force you to learn a new language for writing web applications. It doesn’t even enforce an opinionated syntax. Your fundamental knowledge of modern JavaScript is enough to write brilliant web applications. At the same time, should you wish to leverage your knowledge of compile to JavaScript languages like TypeScript, then React offers first class support in its stellar toolchain. This again ties into a brilliant developer experience.
As you can see, React is a clear winner when it comes to choosing a weapon for building your next big web product. And why just web, with React, you can even learn to build mobile applications using JavaScript. With a rock-solid team at Facebook and a community of thousands of fans and developers worldwide, React is the most performant, stable and progressive solution to learn and adopt in this ultra-fast tech driven economy.
