A paradigm shift in UI development

ReactJS caused a welcome disruption to the JavaScript ecosystem. For front end developers, it was a paradigm shift and a sharp departure from the comfort zone of jQuery and DOM manipulation. For some older devs it was maybe time to throw in the towel, but for those who love JavaScript it felt like a renaissance in front end development.

As other librarys and frameworks such as AngularJS, VueJS, and Elm adopted ReactJS’ approach, it soon became clear that this pattern was here to stay, but what are the core concepts of this new pattern?

Decoupling the view from the DOM

This is what allows for isomorphic and/or universal apps, as the DOM no longer needs to be present to render a view. Adding immutable data structures also allows for optimizations that were not possible before.

Data driven UI & reactive views

The view is defined by the data structure, and is reactive in the sense that the view automatically updates itself when the data changes.

Component based UI

User interfaces can be broken down into components (header, footer, sidebar, etc). This is a more sensible separation of concerns, where as before it was more of a separation of technologies.

Planned improvements

A client side data caching system would allow our entire site to work offline. Currently, each page or article calls our API to obtain its data, which means the page would not render offline. With a caching system, the page could fallback on the last version of the data which would be stored locally.