The future of WEB development: React, Falcor and ES6

The future of WEB development: React, Falcor and ES6

Widen is a digital asset management solution provider. Today, its technology stack is also very traditional, including server-side Java, browser-side Angularjs, jersey that provide rest API support, and various libraries such as jquery, underscore, Lodash, jquery UI, and Bootstrap. In a recent article, Ray Nicholus, chief developer of the company, presented a future-oriented web development technology stack to replace existing tools.

While they are accustomed to and trust the existing technology stack, Ray wants to introduce a new collection of technologies to achieve the following goals:

• A new, shiny approach: As a developer, he hopes to gain a new perspective and progress with a new toolset.

• Brevity: He doesn't like the steep learning curve of the AngularJS 1.x, and what's more disappointing is that AngularJS V2 's learning curve is steeper. Java also has such a feature. In addition, he wants to avoid boilerplate code as much as possible, applications can be quickly applied without compromising scalability, and the front end can easily be described as a set of independent, dedicated components. He also wants a better way to replace traditional rest APIs that are difficult to maintain and improve.

• Efficient: He wants to eliminate the unnecessary request and response overhead caused by the traditional rest API.

• Elegance: He wants to write elegant, easy-to-read code. Finding and modifying data on the user interface is intuitive, and it's best that developers only need to consider their own data model, without worrying about the API endpoints available.

Abandoning the existing technology stack means that developers have to go out of their comfort zone, and some may be conflicted about the need or complexity of new choices. Ray had a similar idea, but when he had a deep understanding of react, webpack and Falcor, he changed the idea that it was a future-oriented web development technology stack, and that some of the upcoming software products would use all the techniques discussed below:

• React:ray that the difference between React and Angular&ember lies in its limited scope of application and space occupancy. Angular&ember is positioned as a framework, while react is primarily as an application "view." React does not include dependency injection or "service" support, does not require "jq-lite", and does not rely on jquery. Developers can write tags directly using jsx without ember handlebars. React maintains a "virtual dom" and updates the real DOM with it, avoiding unnecessary rearrangement and redrawing. In short, he is very fond of react the use of this relatively exclusive characteristics. Moreover, react allows him to cut down complex applications into smaller components.

• Falcor: This is an open source, very new library by Netflix. Unlike the traditional rest API, it provides only one endpoint. With it, developers no longer need to request different data from different server endpoints, but instead request different model data to the same endpoint. The server side can identify the request parameters and invoke the appropriate router function by Falcor router. In other words, Falcor provides a more intuitive API, which is the developer's data model. This ensures that the server never returns unnecessary model data, saving bandwidth. Falcor clients can also use cached data to serve continuous requests, reducing server response times. To learn more about Falcor, you can view videos of Jafar Husain.

• Webpack: As a module binder, Webpack can provide further support for react component modularity. It makes it easy for developers to compress and connect CSS and JavaScript, and make debugging work much easier by generating a source map. When the configuration is complete, Webpack monitors the code, and each time the code changes, it generates a new bundles. The client does not need to import a large number of CSS or JS files, but only imports bundles, reducing the number of HTTP requests when the page loads. In addition, Webpack provides a number of plug-ins, for example, using Jsx-loader to convert JSX to JavaScript, using Babel-loader to convert ES6 code into code compatible with ES5.

• ES6: ECMAScript 2015, the latest specification for JavaScript, defines a number of important new features, such as FAT arrow functions, classes, string interpolation, block scopes, and so on. For more information, see the ECMAScript 6 Reference guide on the Mozilla Developer network.

To help readers understand these techniques better, Ray uses them to create a single-page application and explains in detail how the entire creation process works and how the related technologies work. Interested readers can read the original text and download the application's source code from GitHub.

RELATED LINKS

• Reactjs Details: Please click here
• Reactjs: please click here.

The future of WEB development: React, Falcor and ES6