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

I believe many inexperienced people are at a loss about the seven front-end JavaScript trends and tools you should know in 2020. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

The JavaScript world is developing rapidly.

The world of front-end development (and Web development) is growing rapidly. Today, if you are not above the Webpack,React Hooks,Jest,Vue and NG elements, you will begin to feel the gap is getting wider and wider. But things are changing.

Although the number of developers and technicians in the front-end jungle is surging every year, the ecosystem is still eager to standardize. The emergence of new technologies and tools has changed the rules of the game.

It is safe to say that the overall trend will be UI standardization, a component-based combination that will be affected from styles to testing and even state management, and will lead to better modularity in general. This will include technologies built around Web components, ES modules, component-centric tools, and so on.

This is a short but partial observation of the state of front-end development in the next few years. Naturally, it will lose a million things, so feel free to jump below and add your insights.

1. Framework agnostic Web components

So basically, this is the future. Why? Because these pure Web components are framework-independent and can work without a framework or any standard spelling of the framework. Because they are not JS tired and are supported by modern browsers. Because their bundle size and usage will be the best, and the VDOM rendering will be amazing.

These components provide Custom Element, a Javascript API that allows you to define a new html tag, HTML template to specify the layout, and, of course, Shadow DOM, which is component-specific in nature.

The well-known tools in this area are Lit-html (and Lit-element), StencilJS,SvelteJS, and, of course, Bit, for reusable modular components that can be directly shared, used, and developed anywhere.

Considering the future of the era of component development and the principles of modularity, reusability, encapsulation and standardization, Web components are the answer. Learn more below.

two。 The future of framework war?

Yeah, in NPM downloads React is still queen. For now.

Therefore, we are not really going to delve into who will be better and why, and you will find more answers to that question below. Instead, we will take a step back and pay attention to the wider scope. The overall "market share" of front-end technologies around components is growing. All the time. The number of new developers is also growing rapidly, and there is more room for the use of tools.

Isn't that shocking?

Vue and React are, in fact, quite close in real-world usage.

With the standardization of framework-independent Web components in the future, one may be curious about its possible impact on UI framework wars. Yes, React is not a framework... We know.

Delve deeper into the framework for benchmarking using real data:

3. Component isolation, reuse and composition

> heBit components: futuristic code sharing, reuse and development

When it comes to FrontEnd development and UI components in the near future, you can't ignore the amazing prospects and capabilities of Bit.

The team shares the reusable code component bit

In short, with Bit, you can immediately use components from one project in another project, make development and changes from two projects, and synchronize changes. When working as a team, Bit.dev is the component center of Bit, which enhances this workflow where you can organize and share your team's code.

The center provides everything you need to share and collaborate on components, from elegant search and discovery experiences to live component playgrounds, comprehensive CI / CD support, and more.

With Bit, you can build applications that have complete and instant access to all components that the team and the open source community have written, and instantly share new components or recommend upgrades to existing components. Wow.

4. ES module and CDN

ES Modules is a standard standardized by ECMAScript for using modules in browsers. With ES modules, you can easily encapsulate functionality into modules that can be used through CDN, and so on. With the release of Firefox 60, all major browsers will support ES modules, and Node mteam is working to add ES module support to Node.js. In addition, ES modules will be integrated for WebAssembly in the next few years. Imagine that JS components are isolated from Bit and consumed through bit.dev and CDN.

5. State management

So. What are the new changes in state management? In the end, we have to go through all the goods in the Redux global store anyway, right?

However, this may make it difficult to take full advantage of the modularity and reusability of components. React's new Context API and Hooks mean that you don't need third-party libraries and can manage state at the functional component level, improving modularity and reusability. Therefore, looking ahead, we may think more about encapsulating components than the global application store to think about state management. It's just an idea.

5. Stylized components

> Modular with Bit: separate logic and theme components, compose your styling

As a result, there has been a lot of discussion around style components over the past two years. There are many options, from inline CSS or CSS modules to CSS and stylized components in JS, and even stylized halfway solutions.

When thinking about styles for the next few years, I like to think of styles as a combination. This means that our component design system should include logical components and theme components that can be combined using tools such as Bit. In this way, you can create a design system that can be changed and changed as needed without creating a tedious library for developers who do not want to adopt it. The design tool itself (such as Sketch a Figma) will leverage components for this purpose (combine them with Bit, and you will have the final component design system. This is very exciting.

6. GraphQL API client for data-driven applications

As a result, using GraphQL through components opens up exciting possibilities for customers. With Apollo, you can easily build UI components that get data through GraphQL. When used in conjunction with Bit, you can import and develop these components directly from the consumption project you are working on.

Through the intelligent management of API, we can simplify the workflow of data-driven application development and speed up the development of work. Therefore, it is definitely worth studying in depth for a few years.

7. Component-based design tools

As components become our design system, the gap between designers and developers will be bridged. This will be possible from both ends of the equation (from the designer's and developer's point of view).

Draw created dependency links between design components so that you can design and update the design in a modular manner. Integration with code components has begun to sprout, and it's only a matter of time. Tools like Figma are built from scratch based on reusable UI elements. The Framer team is designing tools for coders and has a degree of control to transform UI elements into reusable React components. With Bit, you can turn your designed components into reusable building blocks that can be found, used, or even developed visually anywhere, thus bridging the gap for developers. Bit + component design tools are a powerful future. Using Bit and Web components through CDN means full functionality.

After reading the above, have you mastered the seven front-end JavaScript trends and tools you should know in 2020? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.