JavaScript 的世界正在快速发展.
前端开发 (和网络开发) 的世界正在以极快的速度发展. 如今, 如果不借助前端或 webpack,React Hooks,Jest,vue 和 NG 元素, 你会很快被远远抛下. 不过, 情况正在发生改变.
尽管开发人员和技术人员在前端领域中的数量逐年上升, 生态系统却有标准化的趋势. 新技术和工具的出现正在改变当下的规则.
总体趋势肯定会是一种基于组件构成的用户界面标准化, 会影响从样式到测试甚至状态管理的所有方面, 并且总体具有更好的模块度. 这将包括围绕 Web 组件, ES 模块, 组件焦点工具等技术构建.
以下是对未来几年前端开发的一些不完全预测, 仅供参考.
1. 与框架无关的 Web 组件
这大体上代表了未来. 因为这些纯 Web 组件与框架无关, 可以在没有框架或任何框架拼写标准化的情况下工作. 因为不使用 JS 语言, 并受到很多浏览器的支持. 其 bundle 的大小和消耗也将是最优的, 而且 VDOM 呈现震撼人心.
这些组件提供自定义元素, 这是一个允许定义新的 html 标签的 JavaScript 应用程序编程接口, 用于指定布局的 HTML 模板, 当然还有本质上特定于组件的影子 DOM.
在这个领域中需要了解的主要工具是 Lit-HTML, StencilJS,
SvelteJS 当然还有 Bit, 用于可重用的可以在任何地方直接共享, 使用和开发的模块组件.
当考虑到用户界面开发的未来, 以及组件时代中模块度, 可重用性, 封装性和标准化的原则时, Web 组件就是答案.
2. 框架冲突的未来?
现在, 在 NPM 下载中 React 仍然是前端中的 "女王"
我们不会深入探讨 "哪个更好, 为什么更好", 相反, 如果退回一步的话, 你会注意到更重要更宏大的部分. 围绕组件的前端技术的总体 "市场份额" 正在增长. 新开发人员也在快速涌入, 工具的使用空间也越来越大.
那么未来 5 年内哪个框架会成为支配呢? 没有人知道. 但可以肯定地说, 它将是在原生 JS 生态系统中发挥作用的最佳位置, Web 组件在其中支配着文档对象模型 dom.React 在 NPM 中下载量最高. 然而 -- 看看这些数字. 似乎在实际 Web 使用中差距非常小.
令人震惊吧?
实际上, Vue 和 React 在实际使用中很接近
随着未来与框架无关的 Web 组件的标准化, 不少人都想知道可能会对用户界面框架冲突产生的影响. 事实上, 我们都知道 React 确实不是一个框架.
3. 组件分离, 重用和构成
heBit 组件: 未来的代码共享, 重用和开发
当谈到在不久的将来的前端开发和用户界面组件时, 不可能忽视 Bit 惊人的 promise 功能.
Bit(开放源)分离并将组件 (或任何可重用的 JS 代码) 转换为共享的构建块, 可供在所有项目和应用中使用和共享. 神奇的是 -- 还可以使用 Bit 从不同项目开发相同组件, 同时完全控制源代码更改和整个依赖图.
简单地说, 通过 Bit 可以立即在另一个项目中使用一个项目中的组件, 并开发和同步更改这两个组件. 团队工作时, 这个工作流将通过 Bit 的组件中心 bit.dev 加强, 可以在其中组织和共享团队代码.
组件中心提供了在组件上共享和协作所需的一切, 从漂亮的搜索和发现体验到实时组件 playground, 持续集成和持续交付的充分支持等.
通过 Bit 可以充分构建应用程序, 即时获得团队和开源社区写入的所有组件, 并立即共享新组件或建议对现有组件进行更新.
4. ES 模块和内容分发网络
ES 模块是在浏览器中用模块工作的标准, 被 ECMAScript 标准化. 使用 ES 模块可以很容易地将功能封装进模块中, 可以通过内容分发网络等方式使用. 随着 Firefox 60 的发布, 所有主流的浏览器都将支持 ES 模块, Node mteam 正致力将 ES 模块支持添加到 Node.JS 中. 另外, 用于 WebAssembly 的 ES 模块整合将在未来几年内实现. 想象一下, JS 组件与 Bit 分离, 并通过 bit.dev 内容分发网络使用.
5. 组件级别的状态管理
那么状态管理有什么新变化呢? 我们只需要在 Redux 中就能管理一切事务吗?
但这可能很难实现充分利用组件, 使模块得到重用. React 新的 Context API 和 Hooks 意味着不需要第三方库, 便可以在功能组件级别管理状态, 从而提高模块度和可重用性.
因此, 展望未来, 我们可以尝试更多地从封装组件而较少从全球应用商店的角度来考虑状态管理.
6. 构成样式化组件
Bit 模块: 由独立逻辑和主题组件构成样式
过去两年有很多关于样式化组件的讨论. 从内联层叠样式表或层叠样式表模块到 JS 中的层叠样式表和样式组件, 甚至像 stylable 这样的中途解决方案, 有很多解决方案.
未来几年, 样式可以作为一种构成. 这意味着, 组件设计体系应该同时包含逻辑组件和主题组件, 可以使用 Bit 之类的工具构成. 通过这种方式可以创建一个设计体系, 根据需要进行发展和改变, 不会将一个复杂的库强加给不愿意去应用的开发人员. 设计工具本身如 Sketch an Figma, 利用 will 组件来达到这个目的(结合 Bi 得到最终的组件设计体系.
7. 用于数据驱动应用程序的 GraphQL 应用程序编程接口客户端
令人兴奋的是, 在客户端有很大的可能性来通过组件使用 GraphQL. 使用阿波罗可以轻松通过 GraphQL 构建获取数据的用户界面组件. 结合 Bit 能从正在处理的项目中导入和开发这些组件.
通过对应用程序编程接口的智能管理, 可以简化围绕数据驱动应用程序开发的工作流, 加快开发速度. 所以对未来几年的展望绝对是值得的.
8. 基于组件的设计工具
随着组件变为了设计体系, 设计师和开发人员双方都在向彼此靠近. 也就是从双方来看, 这是可能的.
Sketch 已经在设计组件之间创建了依赖关系, 因此可以模块化的方式设计和更新. 代码组件的整合已经出现, 这只是时间问题.
Figma 这类的工具是彻底基于可重用的用户界面元素构建的. Framer Team 正在为编写代码的设计人员构建一个工具, 能够在一定程度上控制将用户界面元素转换为可重用的 React 组件.
通过 Bit 可以将设计的组件转换为可重用的构建块, 并可以在任何地方直观发现, 使用甚至开发, 从而弥补与开发人员之间的差距. Bit + 组件设计工具未来大有可为. 通过内容分发网络使用 Bit 和 Web 组件是个完整的构成.
这里推荐一下我的前端学习交流群: 767273102, 里面都是学习前端的从最基础的 HTML+CSS+JavaScript.jQuery,Ajax,node,angular 等到移动端 HTML5 的项目实战的资料都有整理, 送给每一位前端小伙伴. 最新技术, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
来源: http://www.jianshu.com/p/964765272160