Retail CIO Outlook Weekly Brief
Be first to read the latest tech news, Industry Leader's Insights, and CIO interviews of medium and large enterprises exclusively from Retail CIO Outlook
Advait Kulkarni, Former IT Director, Cetera Financial Group & CTO, Digistic LLCIn recent days, there has been a lot of discussion around comparison of MEAN (MongoDB, Express, AngularJS and Node) and RNG (ReactJS, NextJS and GraphQL) stacks.
Let us start with comparison of AngularJS with ReactJS. Both help developers create agile digital applications that are compliant with quick rendering and rapid development techniques. Both are highly popular tools and there is support for the latest versions of the application from major companies.
Some might argue that comparing the two is like comparing apples to oranges because while React is a performance-minded view rendering library whereas Angular is a mature framework. However most React developers will add a few libraries to React like NextJS and GraphQL to work it like a regular framework. Both ReactJS and Angular 2 are server side rendering technologies.
Feature differences between Angular and React
The main difference between AngularJS and ReactJS lies in the way state is managed. Angular has data-binding bundled in by default, whereas React is generally augmented by Redux to give unidirectional data flow and work with immutable data. Both are opposing approaches and there is no consensus on which is better whether mutable/data binding or immutable/unidirectional.
The method Angular uses to inject data into directives is via scopes. A scope in the Angular world is just an object which contains data for various controls, like directives and controllers. React injects data into its rendered views at construct time, be that when the root view is created or via a nested view. Inside the class, the data that’s passed in is accessed via the props property of the current context.
In Angular, event handlers are typically assigned to various portions of your view via directives. Event handlers in React work by setting various custom attributes on the HTML elements that are being built.
React is quite easy and simple to understand. Setting up a properly structured React project could take some time. Angular on the other hand, is not simple by any means. Its inherent complexity sometimes causes confusion and Angular specific 3rd party libraries and syntax could add to a developer’s difficulty.
Both Angular and React provide methods for rendering views by looping over some data. With Angular, it is implemented using the built-in ng-repeat directive. In React, usage of JSX provides benefits since the developer can just loop over various HTML elements and put them into an array.
Angular is easy to scale, thanks to its design as well as a powerful CLI. React is testable and therefore scalable compared to other frameworks.
Dependency injection is a point of debate as it contradicts the usual React paradigm of functional programming and immutability. But some sort of dependency injection is almost unavoidable in data-binding environments, because it aids in decoupling where there is no separate data-layer architecture. Angular supports dependency injection and one great advantage is the ability to have different lifecycles for different stores.
Angular’s performance is sensitive in terms of scope because of copy-n-compare. You cannot use large models. However, this has benefits and disadvantages. The Pros are that it makes the code simpler and more testable but the cons are that you need to break down stuff that you normally use and rebuild it again, server requests being an example. React however gives you the power of choice without the performance penalty. The outcome really depends on whether you’re a good coder or a bad coder.
In October of 2016 ZEIT open-sourced their Next.js framework which runs universal Javascript Server rendered Web Apps. It is a small framework for server-rendered universal JavaScript web apps, built on top of React, Webpack and Babel. Many attempts were made to make it practical to develop apps and websites on Node.js. Using Express and Jade, some HTML would be rendered by the server but a different codebase, powered by either jQuery or similar library, would then take over to complete the solution prior to a sync/await pattern, it was difficult to query data services in Javascript. Catching and limiting errors to the scope of the request and response was also notoriously difficult.
Lifecycle hooks allow us to handle the continuation of some rendering that originated on the server. Developers can start with a static representation of data, subscribe to real-time updates from a server, and change it as they receive updates. Next.js is a sincere effort in this direction. Every route within Next.js is simply an ES6 module that exports a function or class that extends from React. Component. The advantage of this approach over similar models, is that your entire system remains highly composable and testable. For example, a component can be rendered directly, or be imported and rendered by another top-level component. No wrappers are needed to make this system fully testable. Your test suite can simply import and shallow-render your routes.
Apart from server side rendering, the second desirable but difficult task has been splitting app’s build into smaller bundles. When a component is loaded dynamically Next. js has the ability to fetch a JSON based representation of the page which likewise contains its scripts. This means that a certain page could have an extensive list of imports that don’t affect the performance of the rest of the pages. This is definitely powerful in case of larger teams where performance penalties incurred in by a team or individual will not affect the organizational metric.
Performance The Next team has implemented a technique on top of Next.js that brings us the best of both “fully server-rendered” and “single page app”/“nothing server-rendered” worlds in that every single pre-fetch tag pre-fetches the component’s JSON representation on the background, via a Service Worker. If you navigate around, odds are that by the time you follow a link or trigger a route transition, the component has already been fetched. Furthermore, since the data is fetched by a dedicated method, developers can pre-fetch aggressively without triggering unnecessary server load or data fetching. This is a substantial benefit over naive web 1.0 preload strategies.
One of the main intentions of Next.js team was the dream of having universal isomorphic applications. Ahead-of-time bundling and compilation (anticipation) is a critical part of an effective and performant deployment. This is a key enhancement done in Next.js
GraphQL is essentially a query language for the API and a server-side runtime for executing queries by using a type system you define for your data. It helps developers eliminate the routing and data fetching activities that needed to be done. It can be used in conjunction with MongoDB or MySQL. Using GraphQL, developers can now do query introspection to learn about the available fields and types of a GraphQL schema. Since there are no API routes, developers should be able to pick the data from the Graph Nodes and resolve issues. Another unique advantage would be the ability to use any storage service as long as you configure the GraphQL layer to support it.
Read Also
