What is React?
By now, you’ve probably seen this “React” buzzword making its mark across the internet. But, if you’re fairly new to the world of web development, you might be asking “what exactly is React and why do I keep hearing about it?!”.
At its heart, React (also known as React.js or ReactJS) is a JavaScript library that makes building user interfaces a breeze. It’s completely changed our approach to the technical design and build of user interfaces, allowing them to be defined with small components as the building blocks. It can be used everywhere, from static marketing websites through to fully-fledged web applications (SPAs) and mobile apps for iOS and Android.
Now — on the face of it — that doesn’t exactly sound too revolutionary. It’s just another tool in a developer’s arsenal to get the job done, right? Well, to truly understand why React has gained so much popularity, you’ll need some context on the world of web development prior to its release.
A quick history lesson…
In the world of web development, “separation of concerns” is a design principle that’s associated with good application architecture. It basically means that each area of “concern” (e.g. the business logic or the user interface) is designed completely independent of each other. This allows for easy replacement down the line. Clever!
In front-end web development, it was largely accepted that the separation of HTML, CSS and JavaScript was a good thing. For years, we’ve been striving to keep these as independent of each other as possible – all in the name of what we understood to be best practice. However, in doing so, we unknowingly restricted ourselves.
In fact, by following the above, we’ve achieved separation of technologies — not concerns. HTML, CSS and JavaScript all play a vital role in how we interact with the web — and they all have the same concern: to render a view. JavaScript is concerned with HTML and CSS, and therefore, are inextricably linked! By bringing all three technologies together, React has caused a fundamental shift, setting it apart from traditional approaches.
This line of thinking has triggered a completely new wave of front-end web development, empowering developers to build user interfaces quicker, better, and in a much more scalable and maintainable fashion. #Win.
Why is it so good?
Typically, almost all websites will have interactive components that modify, restructure or style the content that you can see in your browser. Take Google, for instance. The search box component allows you to enter keywords which then cause search results to be rendered below. Without React, doing this required working with the DOM (Document Object Model) API to tell the browser exactly what to display at every stage. This is complicated and involves writing lots of JavaScript to handle the necessary interactions and changes to the content. Applications written in this kind of way use what is known as an “imperative syntax”: a series of instructions that describe exactly how you want things to be done.
However, React wraps this imperative syntax and gives back a super easy way to define these interactions — meaning we no longer need to get our hands dirty in lots of DOM API calls. React makes use of a “declarative syntax” which is better explained as describing what you want something to do (as opposed to how you want something done). For example, consider writing an imperative list of instructions to tell someone how to drive to Heathrow Airport from your current location. It would look something like this:
– Open the offside car door
– Get in the driver’s seat
– Close the offside car door
– Buckle up your seatbelt
– Start the engine
– Release the handbrake
– Etc, etc…
Six instructions in and we’ve not even hit the road yet! In comparison, if we approach this with a declarative list, it might look something along the lines of:
– Take the DeLorean
– Head south down the M1
– Exit at junction 6A and merge onto the M25
– Follow signs for Heathrow Terminal 5
– Drop the car off at the Short Stay Car Park 2
You can begin to see why we’d favour the second approach. And this is the fundamental reason React has taken the world by storm. React’s real power lies in its declarative style of structuring code.
How will it improve the customer experience?
When we write our applications declaratively, the code becomes significantly more predictable and much easier to interpret. Opening a React component and knowing exactly how it’s going to behave is incredibly powerful. Developers are now empowered to make changes more easily and with greater confidence. They don’t need to spend a ton of time trying to understand the entire codebase before they make a change to one small piece of it.
Additionally, when you can change your code more confidently, it ends up being more reliable and defect rates are reduced. More features can be added quickly and with significant confidence which has a massive impact on the success of your business. Rapid, iterative development of features goes hand-in-hand with an agile delivery approach, ultimately allowing products to be shipped and released to market quicker.
What’s in store for the future?
These days, most front-end JavaScript libraries and frameworks tend to gain traction for a couple of years and then quickly find themselves abandoned for the cool new kid on the block. This happens so regularly now that the development community has coined the term “JavaScript fatigue” because it’s so hard to keep up. However, React’s usage only seems to have grown in popularity since its initial release in May 2013 and currently doesn’t show any signs of slowing.
September saw the release of a full ground-up rewrite of React (codenamed “Fiber”) which largely focuses on performance improvements and will likely pave the way for more gains in the near future (e.g. asynchronous rendering, for the nerds amongst us!). Facebook also recently open sourced the project under an MIT licence which is brilliant news for everyone involved and will only encourage a higher uptake from organisations with stricter licensing requirements.
React is already used extensively across the web, powering big names such as eBay, Airbnb, Instagram and more. However, that’s only the tip of the iceberg. Facebook has another library — React Native — which essentially brings the concepts of React to mobile apps. React Native allows native iOS and Android applications to be built with React components, which means code can be shared across your entire digital offering. This is arguably better compared to development frameworks like Ionic or Cordova that run inside a “web view” — especially if performance is crucial. React Native enables the creation of mobile apps similar to those built using the native language of the platform itself. This results in a much more intuitive user experience because the standard controls and design principles offered by iOS and Android can be utilised.
I’m always apprehensive when it comes to making predictions — even more so because the JavaScript landscape has become so fluid and fast-paced these days. But when looking at long-standing libraries and frameworks such as jQuery and Angular, they always have a few things in common:
– Backed by big companies and actively maintained
– Contribution encouraged by the developer community
– Educational resources, public events and conferences
– A thriving and diverse wider ‘ecosystem’ of packages
– Satisfying developer experience
– Open source
React definitely ticks all of the above boxes and it’s clear that Facebook is heavily invested in it. In my opinion, I would say React is here to stay for a while yet. Well…at least until 2020!