2018前端开发五大趋势

1. Vue.js

就在两年前，很难想象Vue.js可以忍受迅猛发展的React系统的竞争。通过深思熟虑且久经时间考验的Angular是一回事，可是Vue ......咱们没想到这个 开发 环境成为前端技术工具列表中的佼佼者。 对于那些不熟悉Vue的读者，让咱们简要介绍一下它的制胜之道。

为什么Vue.js居于榜首？首先，很容易学习而且拥有灵活的建立前端代码的环境，这使得代码编写的出错率较低。Vue的开发者Evan You曾在Angular工做过。 他肯定后者对于UI的构建而言没必要要且繁琐，他大胆地建立了一个入口门槛很低的前端建立解决方案，所以Vue出现。 它旨在帮助那些编程经验不多的设计人员将全部工做都用于建立功能界面。 此外，Vue.js支持声明式呈现，异步DOM更新，双向数据绑定，以及严格遵照Web组件规范和HTML模板的简单集成。

到目前为止，Vue.js的特性被一个小型的社区支持（相比于React和Angular这种当前特别流行的库来讲，这是经过 [React] 和 [Angular]的消息来源获得的）。通常来讲，若是Angular甚至是React——Javascript最流行的库之一——对你来讲过于复杂，并且看起来至关严格和不灵活，那你绝对应该在2018年就结识Vue。

2.Angular

尽管咱们在2018年看到的顶级Javascript库的竞争趋势直接在Angular和Vue.js之间展开，但前者在来年的实用性不会减小。若是你以前尚未使用Angular工做（至少是使用Angular 2），那么你必定要熟悉它的优势。让咱们开始吧。

首先，这个框架须要Javascript与HTML和CSS。第二，它是团队协做的理想选择，由于它建立的应用程序能够明确划分为组件 - 业务逻辑和前端。这是可能的，由于开发环境是基于MVVM（模型－视图－视图－模型）模式下的。第三，Angular是建立可扩展应用程序的理想选择，支持与第三方库的简单集成。这个框架常常用于构建动态的移动应用，由于它使用了双向数据绑定，这种方法增长了带有丰富动画元素的应用程序的响应能力。

如今，让咱们来讨论一下Angular的缺点。第一件事情，也是开发人员常常提到的，就是在移动设备上的高耗电量（不过与其余框架相比，经过正确的代码优化，能够减小这个问题）和高入门门槛（若是你是从头开始使用Angular开始工做，那么你要准备好去花费1.5到2个月的时间去学习它的大量文档）。

若是咱们总结一下上述不一样的框架所克服的各类问题，咱们能够说Angular是一个久经考验的框架，经过适当的模块化处理，使得它能够构建出可扩展的解决方案（这足以从相关的demo中证实）。所以，咱们自信的推断，尽管每一年都有愈来愈多的JS框架进入IT市场，Angular依然是近几年来最好的Javascript框架之一。

3. GraphQL

GraphQL是一种有着奇怪语法的API查询语言，由Facebook开发者们开发。它的目的是超越传统的REST APIs的功能，同时简化多个源传输的数据集合。

让咱们举个具体的列子。想象一下，你须要在正在构建的社交网络框架中显示帖子列表，以及用户的喜爱（点赞、收藏等）。在实现方面，这个例子很简单，你只需从下一个 [数据库] 端点发出请求。可是，因为这些数据可能来自不一样的来源（例如，若是帖子存储在 MongoDB或Redis中），生成的应用将比温馨的工做慢得多。此外，若是您考虑到，随着时间的推移，数据的大小会增长，所以须要更多的存储空间，你会意识到，REST API早晚会耗尽其效率。这就是GraphQL的用武之地，使用GraphQL而不是使用单独的端点来访问每一个资源。你可使用单个端点，该端点可以同时处理涉及多个数据源的复杂查询。与REST模型相比，GraphQL是一个智能的我的助理，使用你指定的源地址，提供所需的内容。

GraphQL的实力也获得了证实：2017年，它被Github，Spotify，Walmart等知名公司所采用。

4.Gatsby

若是你的预算比较紧张，可是同时又但愿在你的项目中只使用高级技术，那么你必定要尝试 Gatsby。Gatsby 是 Kyle Matthews 为静态网站的建立而构建的新型解决方案。

它如何优于同行？与 Jekyll，Hugo 或 Hexo 等流行解决方案不一样，这个静态生成器不使用模板，而是信赖于 Webpack 和 React 组件（注意 React 官网自己也是在 Gatsby 的帮助下编写的）。所以，你能够得到自动更新和即时页面转换等优点。从1.0版本开始，Gatsby 使用了上面提到的 GraphQL。所以，在构建过程，它能够从多个 GraphQL API 中得到数据，而后使用它们建立一个彻底静态的 React 客户端应用程序。如今，让咱们从枯燥的特征列表转移到真正的问题，看看 Gatsby 是否适合你。

Web 开发者使用现成的引擎并不老是那么容易。即便是最受欢迎的那些，好比 Joomla 或 Wordpress，也会以须要及时更新或安全性不足的形式给它们的用户带来麻烦（经验丰富的黑客在攻击你的网站上未更新的关键插件时会遇到些麻烦，这是为了在之后的欺诈活动中使用它）。主题也是许多内容管理系统的弱点。相反，开发者更喜欢使用单独的模块，这些模块能够在未来根据本身的须要重写。此外，CMS 在性能优化方面会限制其用户（是的，最早进的，能够更快的让你建立网站的解决方案；然而，在多个用户大量请求服务的状况下，并不容易加快使用现成引擎所编写的网站）。这就是为何静态网站在这些年变得如此流行。除了咱们上面描述的明显的优点外，这种页面有一个重要的缺点 —— 它的内容不容易被编辑。静态网站生成器专门用于解决此问题，Gatsby 是其中最好的，感谢 GraphQL。咱们坚持认为，任何在职的前端工程师在 2018 年至少都能掌握这个流行工具的基本知识。

5. Storybook

Storybook 是开发者在与 React 打交道过程当中一个有用的开源工具。特别是，得亏 StoryBook，你能够在独立的环境中设计和策划应用程序外的 UI 组件，而且在建立新的 UI 组件时它会发生变化。若是这个功能对你来讲并不过重要，那么让咱们考虑一下 Storybook 将帮助解决几个严重问题的状况。

今天，许多有用的工具支持简单快速地建立功能性客户端 - [服务器] 系统，包括最着名的 Meteor、Firebase、GraphQL 和 Falcor。全部这些工具使编程过程基础化，应用程序可快速响应。虽然 React 及其热门的重加载功能对于 UI 建立的开发者来讲是一个很大的帮助，但设计阶段仍然需大量的时间和编写很多代码行。

设想一下，你有一个待办事项列表的组件。它拥有几个状态（一个空列表，一个部分填充的列表，列表中全部元素都被填充，列表中仅有一些元素被填充），咱们须要适配每一个元素的 UI。即便你能够建立一个通用代码来根据每一个状态转换应用程序界面，你仍然须要记录它（不然对其余团队成员而言是很难理解的）。Storybook 如何在这里提供帮助？

如前所述，React Storybook容许您在应用程序以外开发和测试UI组件，并容许团队中的其余开发人员继续使用它们。 也就是说，有时会加速界面开发的过程。

2018年JS趋势：总结

咱们很是但愿咱们的名单可以引发您对来年最显着的前端发展趋势的关注。另外一方面，若是您已阅读本参考资料，以为对您有帮助，或者以为楼主有哪里不对的地方，欢迎加群：866109386，你们一块儿讨论。