At Railsware, we always aim to use the best pieces of stack out there. This allows us to quickly build great, robust products and iterate on them rapidly. Our engineers are also encouraged to experiment with new technologies so it should come as no surprise that a few years ago ReactJS started quickly conquering our codebase. Since most of our products these days ship with React under the hood, we feel it’s about time to share why we use ReactJS in our projects.
Why use ReactJS? What is it in the first place?
While often considered a JavaScript framework like Angular or Vue.js, React is actually a frontend open source library. It’s used specifically for large, complex web interfaces as well as single-page applications. Created first by Jordan Walke, a software engineer at Facebook, it was quickly implemented in Facebook’s newsfeed back in 2011. A year later Facebook’s Instagram.com followed, and that’s when it all started. These days, hundreds of thousands (if not millions) of websites are powered by this library and thousands more are born every single day.
In fact, ever since the launch of React, we’ve seen an explosive growth in the usage of lightweight but powerful JavaScript libraries. Users more and more often want to use faster, more dynamic web pages, while developers opt for modern and flexible environments without tons of boilerplate in the package. That’s why ReactJS is an obvious choice for many. To explain why, let’s go over the top reasons why we use React.
Simplicity
The first thing that gets so many people to use ReactJS in their projects is probably its simplicity. React is a JavaScript library so if a developer is familiar with JS functions, they will have an easier start with ReactJS.
With this library, developers define interfaces with an HTML-like syntax called JSX. As a result, HTML and CSS code is produced. React’s API is very small, yet powerful, and all you need to do before you start is to learn a few basic functions.
const AppHeaderBlock = () => ()Inventory
The example of a React component, implemented in JSX.
A little bit of a learning curve appears when you want to use React with other JS libraries, such as Redux, Material UI or Enzyme. While not a part of the React stack, such libraries add additional capabilities and allow you to manage React components more easily. The most common libraries are well documented and should cause no trouble to any developer.
Simplicity of React comes with certain benefits for businesses. Those already relying on other JavaScript frameworks will have an easier transition to React. Even if your goal is to just try the library, without committing to a full-fledged transition, this also won’t be difficult. And if you need to scale in the future or change the development team, the abundance of ReactJS developers on the market will make things a lot easier. You can check out marketplaces such as YouTeam for more information.
Developers love it
True story. The recent research performed by StateofJS.com shows that JavaScript developers are really happy about using React in their projects, comparing it favorably to its closest competitors such as Angular or Vue.js (Check out a detailed comparison of ReactJS vs Angular). What’s more, at the time of writing, nearly two-thirds of thousands asked said that they used ReactJS and would use it again.
This should have gigantic meaning for anyone planning to run any software product for the next few years. If developers are so excited about React, this means there will be more and more of them out there. This, as a result, means that there will be big ecosystem of various React libraries and tools to enhance the development. As a result, ReactJS will become more powerful with each one added. There will also be a lot of talent on the market, ready to build new projects and support existing ones. ReactJS is here to stay.
Reusable elements
This is where the real beauty of React comes from. If you’ve ever used some design tools like Sketch, you must know how easy and intuitive building interface elements is. You draw a rectangle and resize it to your liking. You then insert some copy inside and group them together as a ‘text field’. Then, you duplicate the group several times, draw an attention-grabbing button with copy and wrap it all up with a frame and a header. You then group it all as a ‘contact form’. Whatever business this project is for, you’ll likely reuse this contact form multiple times throughout the project. It absolutely doesn’t make sense to design the form from scratch every time you need one so obviously a decent designer will just insert already grouped elements with just a few clicks.
Development used to be much more complex than that but ReactJS gives us the tools to do exactly the same thing. Each React project is built using the so-called reusable components. This means that each element of the interface that you’ve already built, can be used anywhere in your project by just calling from other components. You write such a function once and can reuse it anywhere. What’s more, you can group these elements into sections or pages and insert them anywhere around the project with the same functions.
Reusable elements in ReactJS also follow a simple mental model. If a component is given the same data multiple times, it will always yield the very same set of HTML and CSS. Such capability, called idempotence, makes it easy to reason about and to test.
Consider this common example: all of the buttons in your application must be styled in the same way. In ReactJS, you can define a component and reuse it anywhere instead of copy-pasting the same code over and over again.
const BrandedButton = ({icon, title, onClick}) => (
)
// from now on, use it as:
Besides being easier to write (and read), this component brings a very important benefit: its presentation is separated from its semantics. Designers are free to build a component library without worrying about business logic and engineers can construct interfaces from the components, knowing they’ll look good without any effort.
All of these come with a lot of advantages for any business. Thanks to reusable components, your platform is consistent and, as a result, easy to navigate for users. There’s less code to be written without losing any functionalities and this inevitably leads to faster development. It’s also simpler to add new features and test them as you have tons of code already written and ready to be reused.
Easy to update components, individually or in bulk
ReactJS also allows you to quickly iterate on any element. You want to modify the colour of all buttons throughout the website? A few seconds and it’s done. Want to stop redirecting from each case study to an outdated landing page? Swapping all the old links with the new ones is a breeze. Of course, if you wish to only modify one or a few of components, you can do it without affecting any other elements of your project.
The logic behind each component can be defined by a developer once and React will just use it to display elements exactly where we wanted them to be, across the entire project. For example, avatars can have the same hover or onClick behaviours throughout the website. It might not seem like a big difference but for anyone used to having 5-10 different ways of showing users’ avatars, it is! Another example can be formatting dates in a desirable format. As long as a single component is used for that, the format will be consistent on the entire project. Maintaining the code base just got a lot easier!
Virtual DOM
In many front-end frameworks, DOM (Document Object Model) is a tree-shaped HTML representation of all elements of a web application, built into a parent-child structure. Whenever there is a change in the state of any element (for example, a button is clicked or a form submitted), DOM gets immediately updated. This way, it always represents the current UI of a website. A single manipulation of a DOM is fast. But with every change, both a parent and its children get updated. It’s fine on simple websites but once a project gets complex, it causes very frequent updates to multiple elements, effectively slowing down the website. This, as a result, makes for a rather poor user experience.
ReactJS optimises this by leveraging its Virtual DOM to speed up the websites. Virtual DOM (vDOM), as the name suggests, is not a real DOM but its virtual representation. Whenever any element of a website is modified, a vDOM is updated. The updated VDOM is then compared against a real DOM using a reconciliation algorithm from React. This process is used to calculate the minimal set of changes to be applied to the actual DOM. Rather than update dozens of elements whenever a change is made, ReactJS updates only a single element that was just modified, significantly cutting the time of the operation.
As a result, it speeds up the page significantly. It’s hardly a secret that faster pages tend to result in higher conversion rates and better user experience. This, consequently, tends to bring higher sales, more signups and lower drop off rates.
React Native and Mobile Apps
A revolutionary thing that came with React was the ability to build mobile iOS and Android apps, without the need to hire new developers. React’s port to mobile, known as React Native, lets you write fully featured, fully native mobile applications in Javascript. This lets developers reuse code from your web application in ReactJS to speed up mobile development. Everything but the presentation can be shared with the mobile app. A ReactJS developer might also use various JS libraries that they’re already familiar with. Once a shared codebase is ready, a developer starts building native iOS or Android components. Despite differences between both platforms, a good React developer can handle all platforms after a bit of research.
While there’s a lot of discussion on whether such apps can replace native apps (we covered the React Native vs Native App development comparison), we believe React Native apps are a great addition to a web project. Such development significantly cuts Time to Market and lets you outpace the competitors at no additional expense. You’ll still need to write a bit of platform-specific code but you’ll also get to reuse many components, saving you even more time.
When to use ReactJS?
The above mentioned reasons make for a compelling case to use React in many different scenarios. The obvious choice will be sites relying heavily on user interaction with the elements. This will be especially true if the state of components frequently changes – navigation pops up and disappears, users log in, content or e.g. buttons change after users’ interaction. Thanks to Virtual DOM, React will be able to manage each of these changing states easily and dynamically present the content to end users.
React will be also a great choice if a website comes with a very complex structure that might be hard to keep track of with a traditional, imperative approach. As the application scales, React will allow you to easily keep track of all the interactions.
When not to use ReactJS?
Over the years, the React library became so robust and flexible that it can be used for nearly any frontend project. There might be, however, cases when using React is possible but there are likely just better suited approaches. This will mostly apply to very simplistic pages with few elements, such as landing pages or simple websites with little customization or without lots of dynamic content and rich stateful interactions. For such projects, a simple HTML generated by a backend and a bit of JavaScript might be enough. With the abundance of simple and inexpensive web generators, such sites can be brought to life in no time. Deploying ReactJS could be simply overkill. But, if you plan to add much more interaction to the website in the near future, go for ReactJS from the beginning.
Don’t use React with heavy, complex admin panels. A much better approach are typical backend frameworks that are more tightly coupled to database structure. React works best with a lot of workflows and interactions, you likely won’t need much of that. To code typical admin panel functionalities such as tables or user permissions, backend frameworks will require much less code than framework-focused ReactJS. As such, it might be easier to stick with backend frameworks from the get-go and keep React for more frontend-focused developments.
Finally, as mentioned in the beginning React is fairly easy to learn for any JavaScript developer. There is, however, a higher learning curve if your developers never worked with JS before and it’s something to consider. ReactJS follows the flux architecture and this concept might be harder to grasp for developers used to different approaches (like MVC for example).
Summary
ReactJS is in many ways a revolutionary approach to building both frontend and mobile apps. It’s quickly grown to be the favourite tool for many JavaScript developers and it looks like it’s here to stay. We absolutely love using it with our products and will definitely continue doing so for years to come. If you’re still hesitating between React and other frameworks/libraries, give us a shout and we’ll be happy to suggest the best approach.