做网站都需要年服务费吗,网站建设的实施制作阶段包括,深圳外贸英文网站设计公司哪家好,wordpress网易云音乐本文是我对中文版 risingstars2016 的整理#xff0c;而本人就是中文版的译者#xff0c;首发于知乎专栏 前端周刊。共 21384 字#xff0c;读完需 30 分钟#xff0c;速读需 5 分钟。长江后浪推前浪#xff0c;如果你能花 30 分钟读完我 6 个小时翻译的内容#xff0c;相… 本文是我对中文版 risingstars2016 的整理而本人就是中文版的译者首发于知乎专栏 前端周刊。共 21384 字读完需 30 分钟速读需 5 分钟。长江后浪推前浪如果你能花 30 分钟读完我 6 个小时翻译的内容相信你不会被后浪拍死在沙滩上对 2017 该学什么有个清晰的认识。近几年 JS 社区创新和演化的速度是有目共睹的几个月前比较时髦的技术很可能现在已经过时了。2016 已经过去你有没有担心错过了什么重要的内容在这篇调查报告中我们会为你解读社区的主流趋势。 我们将从数量上来分析哪些项目 2016 年获得比较多的关注具体的做法是比较各项目 2016 年在 Github 上新增 star 的数量。 回顾 2015 年React 无疑占据了统治地位而 Redux 则在众多牛毛的 Flux 实现中脱颖而出。那么 2016 年哪些项目最受开发者关注呢 目录 最受欢迎项目前端框架Node.js 框架React 项目模板移动开发编译工具构建工具测试框架IDE静态网站生成器 1. 最受欢迎项目 仔细观察 2016 年排名前 10 的项目你就能对 WEB 社区的演化方向有个直观的把握概括如下 3 个 UI 框架Vue.JS, React and Angular 21 个新的 Node.js 包管理器Yarn创建桌面应用的首选Electron创建 react 新项目的首选Create React App1 个移动开发框架React Native最受欢迎的 CSS 工具箱Bootstrap函数式编程风格的状态管理库Redux强大兼具灵活的绘图库D3 上面这些项目覆盖的领域无疑证明了 JS 的通用性印证了那句话能被 JS 编写的迟早都会被 JS 编写。 2016 年的最佳项目是... ? Vue.JS 2016 年新增超过 25000 个 star意味着平均每天新增 72 个 star超过了所有同类项目的流行速度比如 React 和 Angular。 采用 Virtual DOM 来增强性能的 Vue.JS v2 于 2016 年 10 月发布。 Vue.JS 已经被不少大公司用在了生产环境中比如中国最大的电子商务网站里巴巴所以你可以将 Vue.JS 作为一个安全的选择。 围绕着 Vue.JS 的社区生态也日趋成熟包括路由库vue-router和状态管理库Vuex。 Vue.JS 兼具了 React 和 Angular 1 两者的优点其中 React 的基本思想是组件式开发而 Angular 1 是模板增强。 2. 前端框架 前端框架的百花齐放也许是出现 JS 疲劳 的原因所在新的框架、工具和库层出不穷把创新的车轮推向前进。 概括来讲前端框架可以分为两大类 大而全的框架包括创建现代 WEB 应用的所有功能特性比如路由、数据获取、状态管理典型项目有Angular 1、Angular 2、Ember 和 Aurelia。小而美、聚焦在 UI 层面的解决方案典型项目有 React、Vue.JS、Inferno... 前文中我们已经探讨了排名第 1 的项目 Vue.JS下面来看看其他竞争者 React 及其竞争者 React 排名第 2所有开发者都知道 React 有着庞大的社区和完整的生态系统。 React 设计思想非常流行受 React 启发而诞生了大量类 React 项目这些项目继承 React 优点的同时有非常大的改进比如各种能提高性能和缩短构建时间的瘦身版本。 Inferno 在类 React 项目中是最受欢迎的它自己则标榜是所有竞争者中性能最快的。 Preact 也是一个非常不错的选择它也有不错的生态比如各种脚手架、路由甚至还有一个 compact 模块让任何能在 React 环境运行的库在 Preact 中运行。 Angular 1 和 Angular 2 Angular 项目已经被拆分成两个仓库因为 Angular 2 几乎是 Angular 1 的全面重写虽然两者在部分概念上是相同的。 Angular 2 全部用 TypeScript 编写这样它利用 ES6 语法特性提供了现代的、全面的 WEB 框架。 Angular 1 (在 Github 上称作 AngularJS) 目前仍然被大量的项目使用目测会持续流行一段时间。 此外不得不提的 Ember, 虽然社区和生态都很大但是没有排到前 10 名。 整体来看相比于那些开箱即用的大而全的框架开发者更青睐自己组合使用那些小而美的轻量级解决方案因为这样给了他们更大的自由度。 3. Node.js 框架 2016 年创建和部署 Node.js 应用变得空前的容易比如下面这些解决方案 NowWebtask.ioStdlib 类似于 Gomix 的项目则把 Node.js 的门槛降到不能再低只要通过浏览器简单的点击拖拽就都能轻而易举的编写和分享 Node.js 代码。 那么如果想创建一个 WEB 应用我们该选哪个框架呢 Express Express 已经成为开发 Node.js WEB 应用的标准框架大多数工程师都很熟悉他的设计思想极简的内核但能让你用各种中间件来扩展他的功能。 Koa Koa设计思想非常类似 Express区别在于它是使用 ES6 中的 generator 编写的这种写法解决了大家所熟知的回调地狱 问题。 Feathers Feathers是用来实现面向服务架构的一种灵活的解决方案非常适合创建 Node.js 微服务。 Nodal Nodal用来创建基于 PostgreSQL 的无状态的、分布式的服务。 Keystone Keystone是我所知的快速搭建基于 MongoDB 的管理后台的最佳解决方案Keystone.js 基于数据模型的定义即可自动生成后台界面支持常见的增删改查操作和灵活的数据过滤。 Sails Sails是一个全能的 MVC 框架主要是受到 Ruby on Rails 启发他已经存在很长时间支持各种数据库不管是 SQL 还是 No-SQL。 Loopback Loopback内置了很多特性的成熟框架支持基于 token 的认证支持各种数据库。 Loopback 的“杀手锏”功能是 API 浏览器该功能能让开发者用非常直观的方式查看所有的 API 接口如果你需要创建 API 服务的话它无疑是个很好的选择。 4. React 项目模板 React 是非常棒的 UI 库但是基于现代 WEB 应用开发工作流创建 React 应用时仍然需要大量的配置才能把所有的部分拼凑到一起如何创建一个“真实”的 React 应用呢各种 React 项目模板boilerplates和启动工具箱starter kits就是来解决这个问题的典型的有下面几个 Create React App Facebook 开源的轻量级的解决方案使用 Create React App 创建 React 应用非常的简单。Create React App 的作者 Dan Abramov (也是 Redux 的作者目前供职于 Facebook) 在功能丰富和简单可靠之间取得了很好的平衡没有酷炫的样式解决方案 (仅需纯粹的 CSS) 没有服务端渲染但是 React 应用开发的其他方面都浑然一体开发者体验也非常棒。 相比于同类工具如果你使用了 Create React App它会成为你项目的依赖所有的黑科技都是不可见的你只能看到你自己的应用代码你可以随时更新这个依赖。 React boilerplate React boilerplate 则包含了 React 应用所需的一切包括 Redux 以及基于 Web Worker 实现的离线功能。使用它可以创建“渐进式 Web 应用”亦称“PWA”如果想了解更多 PWA 的知识可以阅读 Nicolás Bevacqua 的 这篇文章。 Next.js Next.js, 由来自 Zeit 的 busy folks 创建支持服务端渲染可以用来创建 universal 应用或者“同构应用”直白点说这种应用的前后端可以运行相同的代码。 5. 移动开发 JS 的通用性是毋庸置疑的现如今可以用 WEB 工程师非常熟悉的技术HTML、JS、CSS构建 Native 移动应用。下面是几个典型的解决方案 React Native 使用 React Native可以用类似于 React 思路用同一份代码构建出支持 iOS 和 Android 平台的、真正的 Native 应用想了解如何构建跨平台的更多内容建议阅读这篇教程。 其他基于 Cordova 的方案多使用 Webview 来渲染页面相比于 Native 应用运行时性能会大打折扣不过开发者那种 “Write Once Run Everywhere” 的梦想终于成真了 Ionic Ionic 是 “hybird” 应用开发领域的先锋底层基于 Cordova 来访问移动设备的系统功能社区和生态系统非常成熟。 NativeScript NativeScript 和 React Native 的目标是相同的即基于 WEB 技术构建 Native 应用其核心分为两部分NativeScript 内核NativeScript Angular 2。 展望未来... Weex 是 2017 年需要密切留意的项目他是基于 Vue.JS 的、用来创建跨平台移动应用的框架。 6. 编译工具 我们这里讨论的是把其他语言或者 JS 变体编译Compiler或转换成Transpiler标准 JS 代码的工具这些工具生产出来的代码可以在浏览器或者 Node.js 环境中执行。 最常见的场景是这类编译工具能够让开发者使用 ES6 语法编写代码而不用担心浏览器支持情况。 TypeScript 最具潜力的编译工具可能是 TypeScript 了它为 JS 带来了类似于 Java 和 C# 的静态类型而 Angular 2 完全使用 TypeScript 的事实让他看起来更诱人当然关于在 JS 使用静态类型的讨论有很多建议阅读下面这两篇文章来做出自己的决定 你可能不需要 TypeScriptTypeScript 入门手册 Babel Babel webpack 已经成了 ES6 代码转换、React 模板编译的标准工具组合Babel 最初是用来编译 ES6 的但得益于他的插件系统如今俨然已经演化成一个用途广泛几乎能实现各种代码转换的工具。 Flow Flow 并不是一个编译工具它只是一个基于 JS 代码标记的静态类型检查工具也就是说使用 Flow 时需要在代码中添加各种注释来注明需要的数据类型关于 Flow 的使用可以阅读这篇文章。 Flow 在很多 Facebook 项目的源代码中都有使用而 Facebook 已经成为开源社区的重要玩家开源了 React、React Native、 Flux、Immutable、Jest 等众多的项目相信你明白这意味着什么。 CoffeeScript CoffeeScript 的简洁语法大量借鉴了 Python 和 Ruby 的语言特性过去几年曾经是最受欢迎的编译器但 2016 年很多开发者从 CoffeeScript 转向了 ES6 Babel 组合。 7. 构建工具 2016 年“构建过程”似乎成了 WEB 项目的标配如果一个 WEB 应用没有构建过程则是难以想象的事情在构建过程中通常你需要做编译模板、静态资源合并压缩之类的事情以为生产环境做好准备。 Webpack Webpack 是构建单页应用SPA的主要工具它和 React 生态结合的非常好最新发布的 Webpack 2 带来了不少非常有前景的改进具体可以阅读这里。 Gulp Gulp 是一个通用的任务运行工具可以在任何和文件系统打交道的自动化流程中使用可以认为它并不是 Webpack 和 Browserify 的直接竞争者。 和 Grunt 类似Gulp 的主要角色是任务管理你可以让它压缩合并代码但是它不会帮你处理 JS 模块化问题而 Webpack 和 Browserify 是可以的。 当然了Gulp 可以和 Webpack 结合起来使用即使开发者倾向于使用 npm script 也是可以的实际上很多开发者就是这么做的。 Browserify Browserify 因为非常简单在 Node.js 工程师群体中比较受欢迎。简单来说它把多个 Node.js 的包作为输入然后输出单个编译后的文件。相比而言Webpack 在 WEB 应用打包方面考量更多更适合现代的 WEB 开发工作流。 展望未来... 2017 年需要留意的模块打包工具是 rollup它强调的是性能基于 ES6 的模块规范并且支持 Tree Shaking 这种黑科技构建产生的结果只包含实际业务逻辑用到的代码而不是简单的文件合并。 8. 测试框架 相比于流行了很久的测试框架 Jasmine 和 Mocha2016 年出现了 2 个更新的、并有很多人使用的测试框架AVA 和 Jest。 AVA AVA 由非常高产的 Sindre Sorhus 开发和维护其标榜的重点是性能和 ES6能够并行的运行测试。AVA 的语法非常类似 Tape 和 Node-tap。 Jest Jest又一个 Facebook 开源项目最近几个月引起了大量的开发者注意在 React 社区更加流行并且越来越多的人开始迁移到 Jest可以阅读这个故事2017 年 Jest 极有可能成为最受欢迎的测试框架。 Jest 内置了非常强大的 Mock 特性而其他的测试框架通常需要依赖第三方的 Mock 包比如 Sinon.JS。 9. IDE 说到 IDE集成开发环境Integrated Development Environment令人振奋的是最受欢迎的 2 款 IDE 都是用 WEB 技术开发的开源项目。 Visual Studio Code 微软的 Visual Studio Code 在 WEB 开发者群体中非常受欢迎因为他提供了非常棒的 TypeScript 和 Node.js 集成部分开发者甚至特别提到 Visual Studio Code 的智能感知功能极大的提高了开发效率。现在把微软和开源放在一起终于不那么违和了。 Atom Atom 由 Github 开源使用 Electron 构建在受欢迎程度上并没有落后 Visual Studio Code 太多关于 Atom 的一个有趣事实是他所使用的主要语言是 CoffeeScript。 10. 静态网站生成器 静态网站生成器SSG是指能够生成一大坨 HTML、CSS、JS 文件方便你快速部署到简单的 WEB 服务器上而不用安装和配置数据库的工具。就像 Gatsby 所标榜的 像 1995 年那样构建网站。 静态网站的特点是速度快、健壮行高、容易维护。 静态网站如此流行的重要原因是市面上有很多非常好用并且免费的静态网站托管解决方案比如 Github pagesGitlab pagesNetlifySurgeNow static Hexo 2016 年最流行的静态网站生成工具是 Hexo他有点类似于 Workdpress 这样的 CMS 系统可以用来方便的创建博客网站他还有很多其他的特性比如国际化插件。 Gatsby 新玩家 Gatsby 是一个比较有趣的解决方案相比于竞争者优秀的地方在于它使用 React 生态系统来生成静态文件可以组合 React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。 总结和展望 虽然 2016 年出现了“JS 疲劳”也发生了戏剧性的事件(如 leftpad 门)但总体来讲 2016 年对 JS 社区来说是非常重要的一年部分项目在 2016 年崛起如 Vue.JS 和 React Native还有些黑马项目 2016 年诞生如 Yarn 和 Create React App。 我们谈论了 2016 年 Github 上最受瞩目的开源项目但是真正重要的是开发者的满意度如果你想就这个话题有更量化的认识建议去看看 Sacha Greif 的调查 State of JavaScript该调查收集了超过 9000 份问卷。 接下来该思考 2017 年了哪些将会持续获得开发者的青睐哪些会成为新星呢下面是我精选的 10 个我 2016 年比较欣赏并且 2017 年会继续保持增长的项目或创意 Vue.JS还在快速增长阶段ElectronCreate React AppReact NativeGatsby (你浏览的这个页面就是用它来构建的)Yarn快速、可靠并且安全的依赖管理工具可以直接替代 npm建议阅读文章 yarn vs npmPWAProgressive Web Applications渐进式 WEB 应用Node.js 微服务的一站式部署和运行解决方案比如 NowNode.js 的进化最新版本对 ES6 语法的支持已经非常好了最后是 GraphQL我身边不少朋友说这会是一个大的进步 感谢你花时间阅读本文可以尽情把本文分享出去有疑问可以到 Github 上发起 Issue 或直接联系我们。 One More Thing 想看更多优质技术文章请订阅本专栏前端周刊发文频率每周 1~2 篇。
