以下是我对知乎问题“2017年前端有哪些变化？对即将到来的2018年有何期待？”的回答，整理分享给大家。如有遗漏，请在评论中指出。原文如下：即将到来的2017年，我们回顾：逃脱不了React的三大框架继续占据前端领域的霸主地位，并发布了2017年最受期待的版本之一——React16。它包括一个支持异步UI渲染的纤程架构。通过提供许多其他功能，包括错误界限。但React在这一年最重要的成就并不是它推出的新特性，而是它的开源协议的修改：BSD协议->MIT协议。此外，Jest、Flow、Immutable.js和GraphQL许可证也已更改为MIT许可证。Angular市场份额持续下降（与React相比），发布了V4（3月23日）和V5（11月2日），在V4中看到AngularUniversal成为官方项目的一部分，并且从核心包中提取了AngularAnimation，在V5中，PWA支持得到改进，编译器优化已实现更快的构建等。即使React取得了巨大成功，Vue（YuxiYou）仍在流行。该框架提供了一个非常友好、简单的API，是React的主要替代品之一。它已被包括GitLab在内的大公司采用，它讲述了过去一年使用该框架的故事。注：上图是过去一年NPM上三大框架的下载量对比图。以下同类框架/包对比图是使用npmtrends一年内的下载量对比，附上GitHub上的star/fork等状态信息。ECMAScript在经过详尽的提案过程后，于6月发布了2017版ECMAScript规范，其中包括异步函数、共享内存和原子操作等突破性功能。除其他事项外，共享内存将使JavaScript中的高性能并行计算更易于处理且更高效。具有共享内存的并行架构对于任何想要使用WebGL和网络工作者创建游戏的人来说都是一个巨大的诱惑。该版本已于2017年12月得到所有主流浏览器的支持，Edge表示将从v16版本开始支持这些功能。由于Node不支持网络工作者，他们也不支持共享内存，但他们正在重新考虑这个决定。WebAssembly所有主流浏览器现在都支持WebAssembly，Chrome从5月开始，Firefox从3月开始，Edge在10月开始。Safari在第十一个版本中开始支持它。ChromeforAndroid和SafariMobile也支持WebAssembly。有关详细信息，请参阅WebAssembly支持现在在所有主要浏览器中发布-Mozilla博客ProgressiveWebApps我们一直在寻找解决方案，以弥合Web和其他客户端之间的体验差距。谷歌一直带头通过将网络应用程序转换为渐进式网络应用程序(PWA)来增强网络应用程序的能力，这种方法在2017年得到迅速采用。PWA应用程序利用现代浏览器技术提供更像移动应用程序的网络体验。它提供了改进的性能和离线体验，以及以前只能在移动设备上使用的功能，例如推送通知。PWA的基础是manifest.json文件和服务工作者的使用。有关更多详细信息，请参阅渐进式Web应用程序：无处不在的出色体验（GoogleI/O'17）。包管理器Bower的市场份额继续下降。它的最后一次发布是在2016年11月，之后正式推荐用户使用NPM来管理前端项目中的包。NPM自最初发布以来已经存在了相当长的一段时间，但它仍然缺少Yarn希望添加的一些关键功能。Yarn的主要贡献是包缓存、确保确定性构建、并行性和依赖性的锁定文件。这些功能非常成功，以至于NPM在其5.0版本中实现了它们。Yarn的下载量超过10亿次（目前每月下载量为125万次），并拥有惊人的29,000多个GitHub星数。即使您不使用Yarn，自Yarn发布以来，JavaScript包管理总体上也有了显着改进。为了应对Yarn的出现，NPM以v5版本进行了回击，该版本显着提高了性能（包括上述Yarn发布的功能）。样式布局网格布??局最终被CSS采用为标准，并且浏览器正在快速采用它。过去，网格系统是用CSS实现的，包括tables、float、flex和inline-block。2017年见证了样式化组件（由MaxStoiber、GlenMaddern和PhilPlückthun创建）的流行。Emotion（由KyeHohenberger创建）是最著名的JavaScript库之一，但它已被迅速采用。另一个选项是glamorous（由PayPal、KentC.Dodds和一群热情的贡献者创建），它包装了魅力库。在过去几年中，SASS、Less和Stylus等CSS预处理器变得流行起来。PostCSS于2014年推出，真正起飞是在2017年，是目前最流行的CSS预处理器。另一方面，在2017年，主要进步来自CSS-in-JS的明显改进和采用，其中所有样式都是通过代码而不是样式表构建的。目前还不清楚这是否会成为前端社区的最终方向，但这是目前最好的方式。PostCSS仍然是领先的CSS预处理器，但许多正在转向CSS-in-JS解决方案。注：评论中有同学提到PostCSS是一个后处理器。根据定义，CSS后处理器是处理CSS并最终生成CSS的预处理器。属于广义的CSS预处理器。由于我的答案的定位和参考文献中的引用，我这里就不细分了，把PostCSS作为一个预处理器来考虑。细心的同学可以进一步细分。工程模块化工具Webpack2于今年2月发布。它带来了重要的特性，如ES6模块（不再需要Babel转换import语句）和treeshaking（消除捆绑中未使用的代码）。此后不久，V3发布了一项名为“作用域提升”的功能，将所有webpack模块放入一个JavaScript包中，大大减小了它的大小。7月，Webpack团队获得了Mozilla开源支持计划的资助，为WebAssembly提供全面支持。作为一个有趣的项目，Parcel在GitHub上仅仅十天就获得了10,000颗星。它主要通过利用多个CPU内核和高效的文件系统缓存来实现这一点。它还对抽象语法树进行操作，而不是像Webpack那样对字符串进行操作。此外，Rollup的发展也不容小觑。4月，React团队从Gulp转向Rollup进行开发。此外，Webpack团队还推荐在某些方面使用Rollup而不是Webpack。TypeScriptJavaScript中缺少类型一直是许多人的抱怨。为了解决这些问题，TypeScript应运而生。它由Microsoft创建，TypeScript-可扩展的JavaScript。JavaScript中缺少类型一直是很多人的抱怨。为了解决这些问题，TypeScript应运而生。它由微软创建，由于其出色的性能赢得了许多JavaScript开发人员的青睐，而Flow提供了一种更灵活的方式来引入类型而无需彻底重构，后者是Facebook的成就。应用状态管理Redux仍然是React项目推荐的状态管理解决方案，在2017年增长了五倍（NPM下载量）。Mobx也增长迅速，被一些高利润的公司使用，如IBM，Bankof美国和Lyft。此外，MobX团队正在努力将Redux和MobX的优点结合到一个新项目中——mobx-state-tree(MST)。GraphQLGraphQL似乎正在迅速超越REST，SamerBuna甚至声称REST已死。GitHub已经使用GraphQL编写了其最新版本的API，与此同时，许多公司正在开发产品以使GraphQL可供所有开发人员使用，例如JohannesSchickling开发的Graphcool框架。静态网站生成场景2017年见证了静态网站的卷土重来。Gatsby等框架使您能够使用React和其他现代工具构建静态网站。并非每个网站都需要或应该是一个复杂的现代Web应用程序。由于使用预构建标记（原始预构建标记），静态网站生成解决方案使您能够获得服务器端渲染和出色速度的好处。如果你正在寻找一个很好的例子，官方的React文档是用Gatsby构建的。在即将到来的2018年，我们期待：基于组件应用的样式是不是最好的CSS组织方式？关于此内容的讨论可能会加剧。越来越多的公司采用具有统一代码库的移动解决方案，例如ReactNative、Flutter或Weex。由于离线能力和无缝的移动体验，Web变得更加原生，随着Apple在ServiceWorker上发布SafariTechnologyPreview46的发布说明，PWA可能会在2018年得到全面支持。WebAssembly可以在提供更好的Web体验方面取得长足进步。GraphQL正在并将继续挑战REST。React加强了它的地位，因为不再有关于开源许可证的争议。Flow和TypeScript采取更强有力的措施使JavaScript更加结构化。虚拟现实正在使用A-Frame、ReactVR和GoogleVR等库向前发展。人们正在使用区块链和web3.js（由MarekKotewicz和FabianVogelsteller创建）构建一些非常酷的应用程序。随着构建方案的不断发展，Webpack、Rollup，以及后起之秀Parcel，在构建方案的份额上扮演着这样的轮回。本回答写作过程中参考了以下内容：2017前端：重要部分2017前端开发回顾基于第二篇参考文章的翻译已经翻译成中文，有兴趣的同学也可以点击以下链接查看。
