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?!”.
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!
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?
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?
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.
- 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!