春节后的第一篇文章就此开始~这篇文章已经发表在前端早读课上公众号也许再过一个月就过时了。2016年结束了。你可能想知道你是否错过了一些重要的事情？别着急，让我们来回顾一下2016年前端的主流。通过对比过去12个月Github新增的star数量，让我们看看哪些项目最受关注。2015年，React是当之无愧的王者。Redux赢得了与Flux的战争，攻占了Flux之城。那么，谁将成为2016年的JavaScript明星呢？我们利用bestof.js.org来分析所涉及的项目技术。（bestof.js.org列出了一系列与web平台相关的最佳项目）1.2016年最受欢迎的项目通过对比去年最火的10个项目，你可以对web前端的发展有个大概的了解2016年技术，你会发现：3UI框架：Vue.js、React和Angular2新的node.js包管理工具：Yarn桌面应用领先级解决方案：Electron快速入门React解决方案：创建ReactApp移动框架:ReactNative最著名的CSSToolkit:Bootstrap基于函数式编程思想的状态管理库:Redux强大灵活的图表库:D3这展示了2016年JavaScript应用的全面性和多样性。2016年的王者是...Vue.JS获得去年有超过25,000颗星，这意味着每天有72颗星，比包括React和Angular在内的任何其他框架都多。Vue.JS于10月发布了2.0版本，其中添加了VirtualDOM渲染方法以获得更好的性能。Vue.JS已经在很多大公司（包括国内最大电商阿里巴巴）的生产环境中投入使用，大家可以放心使用。现在Vue.JS已经有了比较成熟的生态，包括路由（vue-router）和状态管理库（Vuex）。看来Vue.JS结合了React（组件化思维）和Angular（html模板增强语法）的精髓。2.前端框架这个前端框架列表可能是2016年JavaScript疲劳的罪魁祸首之一。似乎每个月都有新的竞争者出现，推动JavaScript的创新。准确地说，这里涉及两种不同类型的框架：一体化框架具有创建现代Web应用程序所需的所有功能，包括路由、数据检索和状态管理。例如AngularJS、Angular2、Ember或Aurelia。专注于UI层的轻量级解决方案，例如React、Vue.JS和Inferno等。我们已经提到了Vue.JS（#1），让我们看看其他竞争者。React及其竞争对手React排名第2，没有前端会忽视React及其丰富的生态系统。React如此流行以至于其他库总是试图从最差的中提取最好的，并在构建和浏览器渲染方面提高效率。Inferno是此类库中最受欢迎的项目，它声称是最快的React替代品。Preact在排行榜上仅次于Inferno，也是React的一个很好的替代品。它的生态系统相当成熟，例如具有离线缓存、路由和兼容模板功能的样板，您可以使用该样板在您的Preact项目中使用现有的React库。Angular1和2Angular现在分为2个存储库，因为Angular2是Angular1的完全重写，尽管一些概念仍然相同。Angular2基于TypeScript和ES6编写，使其更加“现代”和“精致”。AngularJS项目是指它的fork1.x，它仍然在许多项目中使用，并且还会流行一段时间。.Ember也值得一提，虽然没有进入前十，但其生态系统依然庞大。因此，在2016年，开发人员似乎更喜欢轻量级框架和自定义解决方案，而不是具有所有功能的打包一体机框架。3.Node.js框架2016年，创建和部署node.js应用程序从未如此简单。可以使用：NowWebtask.ioStdlib类似于Gomix的工程项目，降低了进入node.js世界的门槛。它使任何人只需单击几下即可直接在浏览器中编写和共享node.js代码。那么，如果您必须编写一个Web应用程序，您会选择哪个框架？当您想使用node.js编写Web应用程序时，Express通常被认为是首选的Web服务器之一。大多数node.js开发人员都熟悉它的设计理念（小核心但可通过各种中间件扩展）。KoaKoa的设计理念与Express类似，只是它使用ES6的生成器来避免回调地狱问题。FeathersFeathers是一个非常灵活的“面向服务端”架构设计方案，非常适合构建node.js微服务。NodalNodal框架旨在解决连接到PostgreSQL数据库的无状态分布式服务问题。KeystoneKeystone是最好的MongoDB数据管理和运行终端解决方案之一，主要用于处理从MongoDB数据库传来的内容。管理界面直接从模型生成，具有所有CRUD操作和良好的过滤。SailsS??ails是一个完整的MVC框架，其灵感来自RubyonRails（因此得名Sails！）。它已经发布了很长一段时间，并与所有类型的数据库、SQL或非SQL兼容。LoopbackLoopback是另一个成熟的框架，具有许多特性，包括需要令牌验证的权限和与任何数据库的兼容性。最强大的功能是它的API检测功能。此功能允许开发人员以直观的方式检测所有API端点。在此过程中，开发人员还可以检测所有用户令牌。如果你想开发一个新的API，那就太好了。4.React模板生成器React是一个很棒的UI库，但是将React与现代Web开发工作流工具一起使用需要进行大量配置。那么，您如何开始构建一个真正的应用程序呢？React模板生成器和其他入门工具包给了我们答案。CreatingaReactApp为了满足这种需求，Facebook提供了一个名为CreateReactApp的轻量级路由，可以用来轻松启动一个新的React项目。DanAbramov（Redux的创建者，目前在Facebook）为找到构建简单性和自配置性之间的平衡做出了很多贡献。比如不需要复杂的样式方案（纯CSS），不需要服务端渲染，应用依然可以很好的打包。同时，开发体验也很好。与竞争对手的主要区别在于，如果您使用CreateReactApp，它会成为您项目中的依赖项，您只能看到应用程序的代码，而隐藏其他黑魔法。当然，您可以自由选择何时升级依赖项，而这不仅仅是开始。ReactTemplateGenerator称为React样板的生成器具有您需要的一切，包括Redux和一些不错的本机功能，利用WebWorker技术。它允许开发人员创建所谓的渐进式Web应用程序（或PWA）：Web应用程序在本地运行，使用一种称为ServiceWorker的技术，您可以在NicolásBevacqua的这篇文章中阅读。Next.jsNext.js，由Zeit忙碌的开发人员创建，具有服务器端渲染功能，可用于创建“通用应用程序”（或我们在2015年所说的同构应用程序），这意味着应用程序无论基本上是同一组代码可以在客户端和服务器上运行。5.MobileJavaScript无处不在，现在您可以使用Web开发人员技术（HTML、JavaScript、CSS）来创建移动应用程序。ReactNative借助ReactNative，您可以基于React开发人员所熟悉的相同代码以及相同的思想和方法构建适用于iOS和Android平台的移动应用程序。想要了解更多关于构建iOS和Andriod平台应用的信息，请前往官方教程。其他解决方案，基于Cordova，往往依赖Webview来渲染页面，但本身并不流畅。“WriteOnceRunEverywhere...”开发者的梦想终于实现了！IonicIonic是“混合”应用程序概念的先驱。本质上，它基于Cordova来捕获移动设备的各种功能。它非常成熟，拥有庞大的生态系统。NativeScriptNativeScript与ReactNative的目的相同（使用网络技术开发真正的移动应用程序）。它有NativeScriptCore和NativeScript+Angular2两种形式，2017年还有一个差不多完成的项目：Weex，一个基于Vue.JS的跨平台移动端UI框架。6.编译器我们这里所说的编译器（或“转换器”）是那些将其他语言（或JavaScript的超集）转换成JavaScript的编译器。他们将代码转换为“标准JavaScript”代码，即浏览器（或node.js）可以执行的代码。例如，编译器允许开发人员使用最新版本的JavaScript(ES6)而无需担心浏览器兼容性问题。TypeScript的领先转译器是TypeScript，它为Web开发人员带来了Java和C#开发人员使用的静态类型。Angular2添加了许多基于TypeScript的特性（tractions）。在JavaScript中使用类型也有优点和缺点，您可以阅读以下两篇文章来思考您的观点。YouMightNotNeedTypeScriptTypeScript：缺失的介绍Babel和Webpack一样，Babel基本上已经成为编译ES6代码和使用React(JSX)库等模板的标准工具。本来只是用来编译ES6的，现在在那些插件的帮助下，变成了一个比较通用的转码工具。FlowFlow不是编译器，它只是用来“标记”JavaScript代码的静态类型检测工具。基本上，在您的代码中使用Flow只是为Facebook项目的代码中使用的已知类型添加注释（阅读更多关于使用Flow编写模块的信息）。既然Facebook已经成为开源世界的主角之一（React、ReactNative、Flux、Immutable、Jest...等开源项目），这里面的意义就太多了。CoffeeScript在过去的几年里，基于Python和Ruby语法的CoffeeScript以其精巧的语法成为了最流行的编译器，但到了2016年，它就不再那么流行了，许多开发者正在从CoffeeScript转向ES6和Babel。7.构建工具在2016年，很难想象没有经过任何构建过程的Web应用程序。您经常需要通过构建来转换模板和优化资源，以确保您的Web应用程序在生产环境中正常运行。WepackWebpack是构建单页应用的主要工具，与React生态很好的兼容。新发布的版本2增加了一些具有前瞻性的功能（见本介绍）。GulpGulp是一个通用的任务运行器，可以用来处理任何形式（包括文件系统）的自动化过程，因此，它不是Webpack或Browserify的直接竞争对手。与Grunt类似，Gulp通过组合任务来工作：您可以让它压缩和组合一系列资源。但与Webpack和Browserify不同的是，它不处理模块化的JavaScript代码。但它与Webpack配合得很好，即使开发更喜欢使用npm脚本。BrowserifyBrowserify，很多node.js开发者都喜欢它，因为它很简单。基本上，它利用几个node.js包来生成一个简单的构建文件作为输出。但似乎像Webpack这样更自配置的工具更适合web应用开发。并且...2017年，一个模块化的处理工具正在兴起，更加强调性能问题，那就是rollup。它使用具有称为“Treeshaking”功能的ES6模块来创建仅包含代码中使用的函数的包，而不是整个类库。8.测试框架Jasmine和Mocha是最著名的两个测试框架，但AVA和Jest在2016年发展得更快。AVAAVA由多产的SindreSorhus创建，专注于性能（并行测试）和ES6。AVA的语法类似于Tape和Node-tap等标准测试框架。JestJest是另一个Facebook项目，在上周引起了很多关注。在React社区中，它的知名度很高，越来越多的人正在迁移到Jest（参见这个故事），并且在2017年，它有可能成为最流行的测试框架。Jest内置了很好的模拟数据能力，而其他测试框架需要依赖类库，如Sinon.js。9.IDE关于IDE，不得不提的是2个最流行的开源IDE是使用web技术开发的。VisualStudioCode在我们的统计结果中，微软的VisualStudioCode名列前茅。它与TypeScript和node.js集成得很好。一些开发人员提到了开发速度的提高，这要归功于“IntelliSence”功能（集成突出显示和自动完成），它为TypeScript和node.js提供了良好的集成环境。一些开发人员认为IDE的“IntelliSense”功能（即突出显示和自动完成）加快了开发速度。说到“开源”和“微软”，就不再矛盾了！Github推广的AtomAtom是使用Electron创建的（类似于其他桌面应用程序，包括桌面客户端），这并不输给VisualStudioCode。这是关于Atom的一件有趣的事情：它主要是用CoffeeScript编写的！10.StaticWebGeneratorStaticWebGenerator（或“SSG”）是一个用来生成一系列html、css和JavaScript文件的工具。您可以将这些文件部署在任何简单的Web服务器（Apache或NGNX）上，无需战斗或设置数据库或使用任何Web框架。正如Gatsby网站所说：像1995年那样构建网站像1995年那样构建网站。静态网页快速、强大且易于维护。SSG很受欢迎，因为有很多免费建站的好方法：GithubpagesGitlabpagesNetlifySurgeNowstaticHexo2016年用node.js建站最流行的SSG是Hexo。它是一站式SSG，类似于Wordpress等CMS系统，可用于创建博客等。它有很多特性，包括国际化插件。Gatsby的新加入者Gatsby是一个非常有趣的解决方案，与其竞争对手不同，它利用React生态系统生成静态html文件。您可以选择与React组件、markdown文件和服务器端渲染集成，这使它非常强大。结论尽管JavaScript疲劳和所有戏剧性事件（还记得“left-pad”门吗？），2016年对社区来说是个好年头，Vue.JS和ReactNative爆炸式增长，Yarn和CreateReactApp应运而生。我们讨论了2016年Github上引领潮流的项目，但真正重要的是开发人员的满意度。所以，如果您想要更多好东西，请查看SachaGreif的JavaScript现状调查，该调查收集了9,000多份回复！是时候想想2017年了，谁是下一个JavaScript之星？以下是我在2016年喜欢的10个项目和想法的选择，这些项目和想法将在2017年继续蓬勃发展：node.js包管理工具现状这里“ProgressiveWebApplication”概念Node.js“微服务”解决方案，可以更好的实现部署，比如NowNode.js的升级：最新版本已经实现对ES6语法的良好支持了最后一个是GraphQL：我所有的朋友都告诉我会有大事发生！
