Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "JavaScript Technology Stack Analysis". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

React

React can be said to be in the limelight:

Componentization makes applications easier to develop and maintain

The learning curve is smooth, the core API is concise and clear, and is easy to learn.

JSX grammar is unconventional and gives full play to the energy of JavaScript.

Naturally adapted to Flux and Redux

The community is active and creative, and offers many excellent development tools.

Unidirectional data flow is more suitable for complex applications and of higher quality than bidirectional data binding.

Support server-side rendering

Although React is not a full-fledged expert compared to feature-rich frameworks such as Ember, Aurelia, and Angular, React's development environment is more robust. For now, using React is no longer a technology choice, but a business activity that provides more efficient and effective productivity.

When you want to develop mobile applications, because you have learned the React syntax, you can directly start React Native development of cross-platform applications.

Redux

Now that we have the ability to develop view layers, we need to use other tools to manage the state and lifecycle of our application. The recommended tool here is Redux.

In order to cooperate with React,Facebook, Flux, a tool for managing one-way data flow, is developed. Although Flux basically supports single data flow, it also brings other problems, such as how to save the state, where to initiate Ajax requests and so on.

In order to solve these problems, a series of frameworks that emulate Flux model are derived: Fluxible, Reflux, Alt, Flummox, Lux, Nuclear, Fluxxor.

One implementation that is currently widely supported by the development community is Redux.

In Redux, most components are purely functional, with only one centralized storage and resource center. The instance method of Redux is responsible for the operation and maintenance of the entire data. Compared with Flux, Redux's thinking is clearer.

More importantly, Redux is very easy to learn. Dan Abramov, the author of Redux, is an excellent teacher who has produced a series of Redux video tutorials. By watching these videos, you can become an expert on Redux. I have seen a zero-foundation React team quickly develop a beta product in just a few weeks, and the code is very robust and sophisticated.

The ecosystem around Redux is as robust as Redux itself. The reselect,Redux development community provides developers with everything from the magical devtool to the powerful memory tool.

Developers may instinctively try to abstract a Redux template, which has many benefits, but please encapsulate the template on the basis of recognizing the requirements, rather than blindly try.

ES6 and Babel

It's time to abandon CoffeeScript because many of its features have similar syntax in ES6, and ES6 is the implementation standard that represents the future direction of JavaScript.

At present, most of the features of ES6 are supported by * browsers. Babel is a powerful conversion tool for converting ES6 to ES5. In addition, the degree of transcoding can be adjusted according to the target browser.

So is there a type system? Both TypeScript and Flow provide a static type system for JavaScript. Using static type checking can effectively catch errors and reduce the amount of testing. For the time being, I suggest taking a wait-and-see attitude.

TypeScript is trying to move JavaScript towards C # or Java, but lacks many advanced type system features, such as algebraic data types (algebraic data types). In addition, it does not handle null as efficiently as Flow.

Flow, by contrast, is more powerful and catches more types of errors, but it is difficult to configure. In addition, its support for new features of JavaScript is weaker than that of Babel, and it does not support Windows systems.

From my personal point of view, the type system is not a crucial part of front-end development (which may be controversial here). Let's wait and see until the type system is more robust and Babel-friendly.

ESLint

Another undisputed tool is ESLint. ESLint supports ES6 syntax and provides the React plug-in, which is no longer just a code review tool. At present, JSLint is out of date, and ESLint can replace JSHint and JSCS.

Developers can configure ESLint according to their own needs, but here I suggest to configure it according to the development specifications of AirBNB, or you can use ESLint airbnb config directly. Of course, there are still some shortcomings in this specification, but maintaining the consistency of the overall code of the team can effectively improve the readability of the code.

When you are familiar with ESLint, it is recommended that developers try the rules in depth. The more errors ESLint catches, the more stable the product is.

NPM,CommonJS and ES6 modules

Forget Bower and take over with NPM. Build tools like Browserify and Webpack indirectly improve the status of NPM in web development. With NPM, version management will be easier and will have more contact with the Node.js ecosystem. At present, the treatment of CSS is not perfect enough.

You might consider how to perform a build on the deployment server. Unlike Ruby's Bundler, NPM uses wildcards to retrieve files, and third-party packages can make arbitrary changes during code development and before the project is released. Use shrinkwrap files to freeze third-party dependencies in the project, and I recommend using User's shrinkwrap to improve output consistency. In addition, developers can also consider using tools like Sinopia to host their own private NPM servers.

Babel converts the ES6 module syntax to CommonJS. CommonJS is a practical syntax, which means stability and generality, and static code analysis can be implemented using mechanisms like tree shaking (which is already supported by Webpack 2.0 and Rollup).

Webpack

Unless you are willing to add hundreds of script tags to the page, you should try to package the page's resources with a build tool. In addition, you need some tools to enable browsers to support NPM third-party packages. Here, I recommend you use Webpack.

A year ago, developers had a lot of tools to choose from, such as JavaScript-based RequireJS, Browserify and Webpack solutions, and RollupJS, which claims to be able to optimize ES6 modules.

After trying all the tools, I strongly recommend that developers choose Webpack:

Various situations can be dealt with through configuration.

Support the mainstream module loading method (AMD,CommonJS,globals)

The internal mechanism can repair the damaged module

Can handle CSS

Comprehensive caching system

Support for hot overload

Most resources can be loaded

Provide an efficient performance optimization solution

Webpack is also very good at handling large single-page applications, supporting code segmentation and lazy loading.

But it is worth noting that the learning curve of Webpack is extremely steep. But once you have learned it, you have mastered the big build system.

What about Gulp and Grunt? In contrast, Webpack is better at dealing with all kinds of resources. Gulp and Grunt are useful if you need to perform other types of build tasks. For basic tasks like running Webpack, I recommend using NPM scripts directly.

Mocha + Chai + Sinon

In JavaScript, there are a number of optional unit testing tools, each of which is stable and robust. If you are only used for unit testing, then the existing tools are fully qualified for your needs.

The common testing tools are Jasmine, Mocha, Tape, Ava, Jest and so on, each of which has its own advantages.

My requirements for a testing framework are as follows:

Can be run in a browser for easy debugging

The execution speed is fast

Easy to handle asynchronous testing

Easy to use on the command line

Third-party libraries that are compatible with arbitrary assertions and data simulations

Ava and Jest are excluded from the standard.

I like Chai assertions because of its rich variety and full-featured plug-ins, and Mocha because of its good support for async. It is strongly recommended that you use Dirty Chai to avoid some problems. Webpack's mocha-leader plug-in allows developers to automate tests.

For React, developers can refer to AirBNB's Enzyme and Teaspoon.

I love the features of Mocha very much, and if you only want the most basic features, you can refer to this article to learn about Tape.

Lodash

JavaScript does not have a core library like Java or .NET, so developers tend to reference an external library from the outside.

For now, Lodash is the best of these tools. In addition, because of its lazy execution, it is also one of the current performance tools. When using Lodash, you don't need to refer to all resources, and developers can use the functions as needed. In version 4.x, Lodash provides a "functional development" mode for developers who prefer functional programming.

If you are familiar with functional programming, you can learn about Ramda. If you decide to use this library, you may need to reference some Lodash functions.

Fetch

Many React-based applications no longer use jQuery. Unless you are maintaining an old project or using a third-party library that relies on jQuery, it is no longer necessary to use it.

I like to keep the project simple and use only fetch in my code. Fetch encapsulates this interface based on both promise,Firefox and Chrome. For other browsers, you need to provide a putty script. I recommend using isomorphic-fetch to maintain functional consistency across browsers and servers.

Of course, other excellent third-party libraries can get data asynchronously, but I think fetch is enough.

Isomorphic JavaScript

Isomorphic JavaScript refers to the JavaScript running on both the client and the server, which is often used to pre-render pages on the server to improve performance and facilitate SEO. Isomorphic JavaScript can be implemented with React, but it is not simple. It increases the complexity of the program and limits the tools and third-party libraries that developers can choose.

If you are building a B2C site, such as an e-commerce site, you may need to use homogeneous JavaScript. However, for internal sites or B2B programs, performance is not the most important, then isomorphic JavaScript is not too important.

API

Everyone seems to be thinking about how to deal with API these days. The fact that everyone is drifting with the flow of RESTfull API,SOAP is a thing of the past. At present, there are various API protocols in the industry, such as HATEOAS, JSON API, HAL, GraphQL and so on.

GraphQL gives the client the ability to make arbitrary queries. With Relay, you can better handle the state and cache of the client. However, it is difficult to create a server-side interface for GraphQL, and most of the documentation is Node.js-oriented.

Netflix's Falcor seems to provide similar capabilities to GraphQL/Relay while reducing server-side requirements, but it is currently in a developer preview state and has not yet been applied to actual development.

All known specifications have their own flaws, some are too complex, some can only handle data reads rather than that update, and some are significantly different from REST. Many developers choose to develop on their own, but they will also encounter the above problems.

I don't think there is a solution to the above, but I have my own understanding of API:

Predictable, conformance protocol

Support for getting multiple entities in one query

Support for update operation

Easy to debug

Easy to use

So far, I have not found a solution that meets all the above conditions.

If you are using RESFful, it is recommended to refer to Swagger to write API.

Electron

Electron can build desktop programs using front-end technology, and the Atom editor produced by the GitHub team is based on Electron. In essence, Electron encapsulates a Node.js, which can open a Chrome window to render UI, and can also access the local API of the operating system, and there is no sandboxie mechanism in the browser. Developers can package and distribute applications through Electron.

This is the easiest way to create cross-platform software, and you can take advantage of all the tools mentioned above. In addition, Electron has complete documentation and an active development community.

You may have heard the name nw.js. Although it has been around for many years, Electron is more stable and easy to use.

Here is a template based on Electron, React and hot reload. Give it a try.

Extend

Here are some of the things I follow on Twitter:

Dan Abramov, creator of Redux

Christopher Chedeau, a very active React developer, now works with Facebook

Jeff Morrison, one of the core contributors to Flow

Sebastian Markb å ge, one of the creators of React

Pete Hunt

React

For more interesting objects, please refer to React Influencers.

It is recommended to read Pate Hunt's Learning React!

Dan Abramov released a series of video tutorials Getting started with Redux, highly recommended! In addition, Dan has posted a watch list that is more detailed than the above.

Mark Erikson's React/Redux links collection is also a good learning material.

Use on demand

The ecological environment of JavaScript is developing rapidly and is becoming more and more powerful. React's practices are solidifying, and the responsibilities and capabilities of peripheral tools are becoming increasingly clear.

The most important thing to remember is to keep it simple and use it as needed.

If your application has only two or three screens, you don't need to use a routing system; if you're creating a single-page application, you don't even need Redux, you just need to React your own state property; if you're creating a simple CRUD program, you don't need to use Relay;. If you're learning ES6, you don't need to know much about Async/Await or decorators. If you are just learning React, you do not need to use hot reloading and server-side rendering; if you are new to Webpack, you do not need to separate code and merge multiple resources; if you are just learning Redux, you do not need to understand the use of Redux-Form and Redux-Sagas.

Keep it simple and do one thing at a time!

This is the end of the content of "Technology Stack Analysis of JavaScript". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.