扣丁学堂解析2018年HTML5前端开发五大趋势

今天扣丁学堂HTML5开发给大家介绍一下关于2018年HTML5前端开发五大趋势的详解，希望对同学们学习HTML5开发未来发展趋势有所帮助，下面我们一起开看一下吧。

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个月的时间去学习它的大量文档)。那些喜欢“简洁”Javascript编码的开发者在刚接触Angular时

如果我们总结一下上述不同的框架所克服的各种问题，我们可以说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组件，并允许团队中的其他开发人员继续使用它们。 也就是说，有时会加速界面开发的过程。