To React or not to React?
Google Trends Reactjs data retrieved from https://www.google.com/trends/explore#q=ReactJS&date=1%2F2013%2043m&cmpt=q&tz=Etc%2FGMT%2B5
The React paradigm shift
- DOM API’s were inconsistent across browser vendors. With the introduction of jQuery, making changes to the DOM became much simpler. jQuery abstracted those differences so that developers could use consistent API. It also became easier to extend jQuery in the form of a plugin. A big wave of jQuery plugins made it easy to include enhancements on a web page with minimal effort.
- To maintain application state in sync with the DOM is not (or was not) an easy task. You need to track that state and update the DOM accordingly. There was no unified model on how to solve this problem. Frameworks and libraries tried to solve the problem by introducing templates (views) and making it easier to keep the user interface (UI) and application state in sync with the DOM. That was a step forward. As a result, various frameworks and libraries (BackboneJS, AngularJS, EmberJS, KnockoutJS, etc.) were gaining popularity. Some were less prescriptive and others very opinionated. However, one commonality is that you have to maintain templates, bindings or some other similar techniques, that are parsed and compiled and then applied at the runtime.
ReactJS introduced a completely new paradigm of dealing with the state of UI. All you need to worry about is the React component state, then that state is expressed as UI. There is no need to directly interact with the DOM.
Separation of UI and the DOM has other benefits as well. For example, the same programming model can be used in other environments, not only the web. Instead of rendering the DOM, it renders what is appropriate to the targeted environment. React Native and its rising popularity is living proof. As Facebook puts it, “Learn once, write anywhere.”
Other features that contributed to React’s success is the ability to compose components. Other attempts to compose components (angular directives, knockout templates), were awkward and it was difficult to pinpoint what was missing.
Components and composability
React also introduced the concept of a component, which is not new. However, implementation is elegant and simple. There is one unified and simple way of how components work together. You pass data via props, which is a set of properties that the component receives, and you can mix components by including them between component tags.
The application state and UI separation, as well as the components and their composability, are what I believe to be the secret sauce that made React so successful. This simplicity contributed to the explosive growth of the whole ecosystem.
React does not dictate how to structure your application. Rather, it's a recipe for how to combine small building blocks. Think of React Components as lego blocks (HTML tags) that you can connect in endless ways to build what you need. You can then take other blocks built by other communities or build new, custom blocks yourself.
Is React ready for prime time?
There is no question in my mind that React is ready. It's already in production and currently used by many companies.
W3C has been working on Web Components Specification for a while. React currently enables these concepts of components. Someday, we will get there by having native browser support for custom elements, shadow DOM, and HTML imports. When that day comes, I have no doubt that there will be new ways to develop great applications and websites—we aren’t there yet.
JSX and decomplexifying code
React and the full ecosystem
If we are not taking advantage of the full ecosystem, then we are not taking full advantage of what React has to offer.
“The future is already here — it's just not very evenly distributed.” (William Gibson)
Besides syntax, features that are unavailable today are being addressed by usage of polyfills — "A piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively."1
NPM also addresses the issue of tracking and maintaining dependencies that are used in a project. As of this writing, there are more than 15,000 published React-related components on NPM.
Bundlers such as Browserify or Webpack transform and bundle files so that they are ready to be consumed by the browser.
How do all these tools work together?
- Use imported component
- Transpile ES6 and JSX into code that is supported by today’s runtime environment
- Lint the code while transpiling to ensure consistent code style and avoid known issues
- Bundle all required dependencies into single file
There are plenty of sample setups or actual projects in the open.
React enables you to focus on how to present your application state in a simple and predictable way. The learning curve for adapting React is minimal and there are numerous components readily available that in many cases probably already does what you need.
The following characteristics apply to React:
- Relatively tiny - concise and small API
- Library agnostic - has no dependencies
- Easy to learn
- Efficient - virtual DOM concept lends itself for rendering optimizations
- Universal - can be used on client or server side
Are you already using React? If no, why not?
 Retrieved from: https://remysharp.com/2010/10/08/what-is-a-polyfill