八大前端JavaScript趋势和工具

JavaScript的世界正在快速发展。html

前端开发(和网络开发)的世界正在以极快的速度发展。现在,若是不借助前端或Webpack、React Hooks、Jest、Vue和NG元素,你会很快被远远抛下。不过,状况正在发生改变。前端

尽管开发人员和技术人员在前端领域中的数量逐年上升,生态系统却有标准化的趋势。新技术和工具的出现正在改变当下的规则。react

整体趋势确定会是一种基于组件构成的用户界面标准化,会影响从样式到测试甚至状态管理的全部方面,而且整体具备更好的模块度。这将包括围绕web组件、ES模块、组件焦点工具等技术构建。git

如下是对将来几年前端开发的一些不彻底预测,仅供参考。github

1. 与框架无关的Web组件web

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

这大致上表明了将来。由于这些纯web组件与框架无关,能够在没有框架或任何框架拼写标准化的状况下工做。由于不使用JS语言,并受到不少浏览器的支持。其bundle的大小和消耗也将是最优的,并且VDOM呈现震撼人心。编程

这些组件提供自定义元素,这是一个容许定义新的html标签的Javascript应用程序编程接口,用于指定布局的HTML模板,固然还有本质上特定于组件的影子DOM。promise

在这个领域中须要了解的主要工具是Lit-html(https://github.com/Polymer/lit-html)  (和Lit-element,https://lit-element.polymer-project.org/), StencilJS(https://github.com/ionic-team/stencil),浏览器

SvelteJS(https://github.com/sveltejs/svelte) 固然还有 Bit(https://bit.dev/),用于可重用的能够在任何地方直接共享、使用和开发的模块组件。网络

当考虑到用户界面开发的将来,以及组件时代中模块度、可重用性、封装性和标准化的原则时,web组件就是答案。

2. 框架冲突的将来?

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

如今,在NPM下载中React仍然是前端中的“女王”)

咱们不会深刻探讨“哪一个更好,为何更好”,相反,若是退回一步的话,你会注意到更重要更宏大的部分。围绕组件的前端技术的整体“市场份额”正在增加。新开发人员也在快速涌入,工具的使用空间也愈来愈大。

那么将来5年内哪一个框架会成为支配呢?没有人知道。但能够确定地说,它将是在原生JS生态系统中发挥做用的最佳位置,web组件在其中支配着文档对象模型dom。React在NPM中下载量最高。然而——看看这些数字。彷佛在实际web使用中差距很是小。

使人震惊吧?

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

实际上,Vue和React在实际使用中很接近

随着将来与框架无关的web组件的标准化,很多人都想知道可能会对用户界面框架冲突产生的影响。事实上,咱们都知道React确实不是一个框架。

3. 组件分离,重用和构成

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

heBit组件:将来的代码共享、重用和开发

当谈到在不久的未来的前端开发和用户界面组件时,不可能忽视 Bit惊人的promise功能。

Bit(开放源)(https://github.com/teambit/bit)分离并将组件(或任何可重用的JS代码)转换为共享的构建块,可供在全部项目和应用中使用和共享。神奇的是——还可使用Bit从不一样项目开发相同组件,同时彻底控制源代码更改和整个依赖图。

简单地说,经过Bit能够当即在另外一个项目中使用一个项目中的组件,并开发和同步更改这两个组件。团队工做时,这个工做流将经过Bit的组件中心 bit.dev 增强,能够在其中组织和共享团队代码。

组件中心提供了在组件上共享和协做所需的一切,从漂亮的搜索和发现体验到实时组件playground,持续集成和持续交付的充分支持等。

经过Bit能够充分构建应用程序,即时得到团队和开源社区写入的全部组件,并当即共享新组件或建议对现有组件进行更新。

GitHub库地址:https://github.com/teambit/bit

4. ES模块和内容分发网络

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

ES模块是在浏览器中用模块工做的标准,被ECMAScript标准化。使用ES模块能够很容易地将功能封装进模块中,能够经过内容分发网络等方式使用。随着Firefox 60的发布,全部主流的浏览器都将支持ES模块,Node mteam正致力将ES模块支持添加到Node.js中。另外,用于WebAssembly的ES模块整合将在将来几年内实现。想象一下,JS组件与Bit分离,并经过 bit.dev内容分发网络使用。

5. 组件级别的状态管理

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

那么状态管理有什么新变化呢?咱们只须要在Redux中就能管理一切事务吗?

但这可能很难实现充分利用组件,使模块获得重用。React新的Context API 和 Hooks意味着不须要第三方库,即可以在功能组件级别管理状态,从而提升模块度和可重用性。

所以,展望将来,咱们能够尝试更多地从封装组件而较少从全球应用商店的角度来考虑状态管理。

6. 构成样式化组件

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

Bit模块:由独立逻辑和主题组件构成样式

过去两年有不少关于样式化组件的讨论。从内联层叠样式表或层叠样式表模块到JS中的层叠样式表和样式组件,甚至像stylable这样的中途解决方案,有不少解决方案。

将来几年,样式能够做为一种构成。这意味着,组件设计体系应该同时包含逻辑组件和主题组件,可使用Bit之类的工具构成。经过这种方式能够建立一个设计体系,根据须要进行发展和改变,不会将一个复杂的库强加给不肯意去应用的开发人员。设计工具自己如Sketch an Figma,利用will组件来达到这个目的(结合Bi获得最终的组件设计体系。

7. 用于数据驱动应用程序的GraphQL应用程序编程接口客户端

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

使人兴奋的是,在客户端有很大的可能性来经过组件使用GraphQL。使用阿波罗(https://github.com/apollographql/apollo-client)能够轻松经过GraphQL构建获取数据的用户界面组件。结合Bit能从正在处理的项目中导入和开发这些组件。

经过对应用程序编程接口的智能管理,能够简化围绕数据驱动应用程序开发的工做流,加快开发速度。因此对将来几年的展望绝对是值得的。

8. 基于组件的设计工具

知识图谱,不彻底预测:八大前端JavaScript趋势和工具

随着组件变为了设计体系,设计师和开发人员双方都在向彼此靠近。也就是从双方来看,这是可能的。

Sketch(https://medium.com/@sketchapp)已经在设计组件之间建立了依赖关系,所以能够模块化的方式设计和更新。代码组件的整合(https://github.com/airbnb/react-sketchapp)已经出现,这只是时间问题。

Figma这类的工具是完全基于可重用的用户界面元素构建的。Framer Team(https://medium.com/@framerteam)正在为编写代码的设计人员构建一个工具,可以在必定程度上控制将用户界面元素转换为可重用的React组件。

经过Bit能够将设计的组件转换为可重用的构建块,并能够在任何地方直观发现、使用甚至开发,从而弥补与开发人员之间的差距。Bit +组件设计工具将来大有可为。经过内容分发网络使用Bit和web组件是个完整的构成。

 

来源商业新知网,原标题:不彻底预测:八大前端JavaScript趋势和工具

本站公众号
   欢迎关注本站公众号,获取更多信息