Why Frontend Developers prefer React?
Those who are learning frontend programming must have heard of React or ReactJS, right? So what is React? Why is React used so much nowadays? This article will discuss some of the top reasons why Frontend developers prefer using React more than others?
React (Reactjs or React.js) is the most popular JavaScript library for building user interfaces created by a collaboration between Facebook and Instagram. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base for developing single page or mobile applications. One of the unique features of React is that rendering of data can be done not only at the Server layer, but also at the Client layer.
It is used by big companies and startups such as: Netflix, Airbnb, Instagram and New York Times..etc. ReactJS offers many advantages to programmers, making it a better choice than other frameworks like Angular.
ReactJS divides complex user interfaces into individual components, allowing multiple users to work on each component simultaneously, thus speeding up development time and improving application development time.
Replacing the MVC model by component composition turns the architecture into a tree, which is totally compatible with the DOM tree. Putting everything from logic to UI to a single component may look like violating the “single responsibility principle”, but it turns out surprisingly justifiable. Each component can be perfectly presented for a DOM Element making architecture much more intuitive (now DOM, components and files structure are all trees, yeah!) and debugging is more efficient because just looking at the UI can limit the scope for finding bugs.
Beside that, react automatically re-renders UI on data change. This saves developers a lot of time, because everything we should care about is data. This, again, makes debugging a breeze because you don’t have to worry about so many other things like controllers, event listeners, views,.... as developers do with MVC.
React only allows one-way data binding. This is like a downside for newcomers, but in my opinion, this feature allows tracing bugs much more easily. When a bug happens, you just need to trace back from the current component to their ancestors. Because each component has only 1 parent, one-way binding is literally one-way. Meanwhile, each component can have unlimited children, this makes two-way binding is actually so-many-way-binding and you will be in a maze when finding bugs!
With React 16, react-hooks was introduced and opened a whole new world for React developers, allowing them to build an application using only functional programming instead of OOP. Lots of developers have claimed that functional programming will be the next programming paradigm. I’m not sure about that, but I’m sure that learning functional programming will be so useful for developer’s skills and mindset.
JSX, as its name, is a syntax extension for JavaScript. It is used with ReactJS to describe what the user interface should look like. Using JSX, we can write HTML structures in the same file that contains JavaScript code. This makes the code easier to understand and debug, as it avoids the use of complex JavaScript DOM structures.
For example with the code below:
const name = 'spiritlabs';
const greet = <h1>Hello, {name}</h1>;
Being a JavaScript data format, lightweight and used to represent the content of the DOM - Document Object Model at a given time. How do Virtual DOM and ReactJS DOM interact?
When the state of an object changes in a ReactJS application, the VDOM is updated. It then compares its previous state and then only updates those objects in the real DOM instead of updating all objects.
This makes web applications run much faster than continuously directly updating on real DOM.
Learning React is beginner-friendly, it allows newcomers to develop websites with ease by just composing a lot of components together, no boilerplate, no architectures, no events delegation, no dangerous innerHtml,... Just encapsulate everything in a component and reuse it! But React also allows advanced users to implement complex features with its flexibility.
React is created by facebook’s team for building UI for facebook - one of the largest websites in the world. And if react is scalable enough for facebook, it’s likely scalable enough for our sites :)
Community is always the key criterion for choosing a library/framework. And React’s community is no doubt the largest and the most active one. This saves react developers a lot of time from reinventing the wheel. Just choose a suitable stack around react and then focusing on the business model.
When comparing with Vuejs - another component-based framework, the only formidable competitor, which even has more github stars than React - community matter. There are more than 30k npm packages built with React, meanwhile the figure for Vue is about 15k, and the more packages mean the more problems have been already solved.
And one more little thing, the large community also means high hiring demand, how sweet it is!
In the past, building and maintaining websites and apps simultaneously for a project can cost an arm and a leg, because it required a large team with widely different skill sets. But with react native, everything has changed. Now we can build websites, android and IOS apps with just react.
Beside saving a huge amount of time developing different apps for android and IOS, website and mobile teams can communicate more effectively and even do tasks interchangeably.
Most of the modern JS UI Frameworks are client-side renderer and therefore not search-friendly. But thanks to the community, there are tons of solutions out there to make SEO a breeze. Take Next.js as an example, if you’re good at React, learning Nextjs or even migrating your whole code base from React to NextJs is simple.
Although React has several advantages, there are some drawbacks to using it, such as:
JSX, as we mentioned above, is JavaScript extended syntax, which sometimes doesn't seem like a great idea for web application development as it involves a lot of complexity. Components are not native HTML but written in JSX. So it takes time to wait for the React development team to adjust.
As mentioned above, automatically re-rendering can save us a lot of time for coding and debugging, but many re-renderings affect the performance. Fortunately, react gives us some optional functionality to improve this. But trust me, you rarely need them!
Integrating new features can become a headache for some new developers. One thing that caused a lot of trouble was creating documentation and tutorials for this new functionality. To make the situation better, some JavaScript developers write their own tutorials for specific tools used in projects.
React’s flexibility can be considered as a double-edged sword. It allows developers to approach the problems in so many different ways, opening up chances for someone to come up with new amazing solutions or architectures. But it also confuses developers, especially newcomers, because there are no “official” criteria for building things.
Abstraction is unavoidable to build complex applications, but too much abstraction can lead developers to wrong paths. React is an architecture, a solution, but not a web development standard. Overuse and over dependence on react’s magic delude developers that they can make a website without knowing how things really work behind the scenes. And when the magic changes or disappears, we may have to start learning “another magic” from the beginning.
To learn more about how Spirit Labs' full-stack development process can help accelerate time to launch and help your business meet its tech goals, get in touch with us today.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Credit: Hieu Nguyen - R&D Lead & Technical PM
