9 Benefits of ReactJS Services: The Ultimate Guide (2018)

ReactJS Services

Since its introduction, ReactJS has arguably been the most talked about thing amongst web developers since Ruby on Rails. While countless new tools are emerging every day, it’s hard to single out any individual new project that is making as much of an impact as React.  Despite its relative adolescence (React just turned 5 a few months ago), it is radically changing software development.

There is one main source of confusion when first investigating React. This confusion is due to comparing React to frameworks such as Angular or Rails. While often referred to as a framework, React’s official documentation declares the project a “JavaScript library for building user interfaces”. In comparison to a Model – View – Controller framework such as Rails, React is just the View layer. Despite not being a fully-fledged MVC framework, React does what it does incredibly well. For some approaches, this makes a monolithic MVC framework unnecessary for many projects.

Arising out of a need to build stable, performant and production-ready user interfaces, the developers of React aim to simplify many common issues encounter when building modern web applications. To this end, we will take a look at many of the benefits that React offers in this article .

1. Developed by Facebook

Developed by the Facebook engineering team, the React JavaScript Library is lead by some of the best developers in the world. Regardless of one’s opinion of the company, there is assurance in using a project by one of the top software companies. An institution like Facebook can better ensure project longevity and issue support for the framework. React is more than a pet project offered by hobbyists — it is production-ready software Facebook is using in their own products.

During initial release, React was using a BSD license with some troubling clauses related to patent litigation. The BSD license was a deal-breaker for many. Facebook since switched to the MIT license, a common license for open source projects with very few restrictions. This license change has had major contributions to wider adoption of React en masse.

2. The Virtual DOM

Manipulating the DOM is one of the most common uses of JavaScript on the web. The DOM, or Document Object Model, is a representation of every element on a page or application. While DOM manipulation is at the heart of any interactive web experience, it is computationally expensive. This leads to slow response times when not handling efficiently. One of the biggest benefits of React is addressing inefficiencies of DOM manipulation.

In conventional apps, the entire DOM gets updated when anything changes. This is true even for areas of an app that don’t need to get updated. Instead of interacting with the DOM directly, React offers a separate, “Virtual DOM”. Any changes in component state are “diff’d” (compared) first in the Virtual DOM. Only a new state change results in actual DOM updating. The Virtual DOM results in enormous performance gains. React apps are far more responsive than when relying on traditional DOM manipulation.

3. Reusability

Components are at the heart of the React ecosystem. Everything in a web app is a component, whether it be an image, a navigation bar or an input field. Components combine and mix together to create larger and more intricate components. This modularity lends itself to reusability — chances are the web app you’re building will reuse many of the same components such as images or buttons. As a practical example, you can write a reusable image component with all its styles and user interaction apart of component declaration. Then, you can re-use an <Image /> component, supplying whatever info is unique to the component instance. In the case of an<Image /> component, an example might be <Image src={image.url} />.

You can use React to build reusable components work across multiple projects. This not only saves development’s time but also cuts down on your codebase.

4. PropTypes

Anything you pass to a component is one of two things: props or state. State is information about different information that changes dynamically in a component. Examples of state might be “total” in a calculator app that updates after each calculation. Props pass to a component for each instantiation. For example, you would likely pass a reusable image component a different src prop for each instance.

PropTypes are a feature of React that makes it possible to specify requirements and other info about a component’s props. PropTypes make it possible to specify the type of props the component expects, or if they’re required. The React workflow improves in two major ways from this. Firstly, PropTypes are serving as a testing layer to ensure that components are receiving the right info (such as a string for a URL). Secondly, PropTypes make it easy for you to re-use other developer’s components. In a way, PropTypes are serving as internal documentation for a component, giving you a better idea of what type of info they’re supposed to display.

5. Universality

The issues that React is aiming to address (performance, modularity, state management) are incredibly effective beyond just web apps. Aside from web applications, React is being used to develop native mobile applications and IoT devices via React Native. Even VR experiences via React 360 are being made. Aside from a few minor differences, this means that the same technology apply to almost anything without having to use a different tech stack. A completed web app easily translates into a native mobile app with little additional development.

6. Functional Programming

An important principle of React is that it is essentially just used for building UI components. That’s all React is really doing. Given this principle, a React component should just take in input (component state, or other data passed in to the component as “props”) and render that state. This way of thinking of a React component as essentially a “shell” that takes in data comes from the principles of functional programming, a programming paradigm widely championed for its efficiency, maintainability and predictability.

In React, stateless components are components taking in state and render UI, without storing their own state. You can think of any stateless component as a “pure function”. A pure function has many attributes, but the primary aspects include 2 things: 1. Make no changes to the global scope (computer science refers to this as “side effects”). 2. Return the exact same output given the same input (or arguments). In contrast to other paradigms such as Object Oriented Programming, Functional Programming is an ideal way to build up complex applications from smaller components.

7. Declarative vs Imperative Programming

While not an approach specific to React, declarative programming is a programming paradigm frequently promoted and favored by JavaScript developers. In simple terms, declarative programming focuses on the “what” or end result of a given piece of code. Imperative programming centers around the “how”.

An Example

To give an example, let’s say you’re telling a friend that you’re going to go to the movies. A declarative approach to this situation would be simply telling them, “I’m going to go see movie A at 7:30pm tonight.”. The imperative version of this same situation would involve detailing each and every step along the way. “I’m going to get in my car and drive to the movie theater at 123 Movie St., then I’m going to go up to the ticket counter and purchase a ticket. Upon getting a ticket I will hand it to the attendant at the door, etc…”

Much of the code you will encounter in JavaScript and other languages is imperative. However, there are often ways to make software development more declarative. Declarative code has many benefits for developers, such as better clarity, readability, fewer bugs (issues like “off-by-one” errors).

Declarative Programming in JavaScript

Common practices in modern JavaScript, such as using “higher order functions” like .map, .filter and .reduce are a good example of declarative programming. Used much like a for loop to iterate over an array, higher order functions can accomplish the same tasks with fewer lines of code. (Click to Tweet this tip)

React encourages this declarative approach considerably. While writing imperative code in a React project is possible, an imperative style would be fairly bad practice when there are better options available. React takes advantage of declarative methods such as higher order functions and ternary operators, abstracting away code can that can be more simply understood.

8. Plain JavaScript (+ JSX)

As I touched upon above, React relies heavily on many of the built-in features of regular JavaScript. In contrast to frameworks such as Angular, which have a far larger set of tools unique to the framework, much of React is simply modern JavaScript. (Click to Tweet this tip) This aspect makes React quite approachable to anyone familiar with ECMAScript 2015 and later. ES6 classes , arrow functions, , ternary operators, template literals and more are all heavily utilized in React.

One part of the React ecosystem that is not regular JavaScript is JSX. Essentially an inline markup that looks like common HTML, JSX allows mixing together code in the same file that renders to regular JavaScript, HTML and CSS. Since JSX is not yet supported by any modern browsers, JSX gets transpiled into regular JavaScript in order to be valid code (typically via a tool such as Babel). This aspect of the development process can be confusing at first, but the added benefits of JSX more than make up for the initial setup requirements.

9. (True) Separation of Concerns

If you’re bothered by the idea of mixing HTML, CSS and JavaScript together in the same file, you’re not alone. Computer Science has a long standing design principle known as the “Separation of Concerns”. This principles states that code should encapsulate and restrict its own individual concern. This is the primary reason why you shouldn’t write inline CSS styles in an HTML file. It makes for difficult to maintain, messy code.

Mixing HTML and CSS with JavaScript seems to be in direct conflict with this principle. However, it actually makes complete sense when you consider the modular approach of components in React. Components in React should be reusable and self-contained, and therefore should include all details relevant to its rendering. This approach makes it immediately apparent what a component does and how it should look, without having to reference multiple files. (Click to tweet this tip)

Writing HTML in JSX is pretty much the de facto practice for developers in React. The equivalent JavaScript is far too convoluted to be either preferable or practical. However, there are more than a few options for including CSS in a React project. Writing CSS within a  .css file is a valid approach, and likely the ideal choice when getting started with React. As a consequence of JSX, though, numerous “CSS-in-JS” libraries have emerged. CSS-in-JS takes advantage of writing your CSS within JSX, combined with all of JavaScript’s possibilities. There are many proponents of the CSS-in-JS approach, with styled-components and emotion being some popular options.

Conclusion

The enormous success of React is a culmination of getting many things right. The unique approach it takes in addressing common UI challenges has struck a chord in software development. To be fair, React didn’t necessarily “invent” many of these solutions. These approaches are the culmination of features and practices available in modern JavaScript. The React engineering team has packaged these approaches in a relatively simple library applicable to many real world situations.

As with any new web framework or tool, one question always arises for developers. “Is this a fundamental change in the direction of technology or merely a passing fad?” Similarities between React and frameworks such as Vue.js, Hyperapp, and Choo seem to suggest some consensus on UI and state management. Each takes a declarative and functional approach to building UI components. In the case of Vue, a Virtual DOM appears to address the same common issues. Given the institutional support of Facebook, React is a safe bet when picking technology to handle UI in web applications.

Post a Comment

Comments are moderated. Your email is kept private. Required fields are marked *

© 2019 Sunlight Media LLC