【转】2017年前端开发回顾 – gitconnected

本文转载自:众城翻译   译者:Bin   链接:http://www.zcfy.cc/article/a-recap-of-front-end-development-in-2017-gitconnected-4712.html?t=new

2017年前端开发回顾

在2017年,前端领域再次以狂热的步伐发展。下文列出了过去一年里最引人瞩目的一系列事件。

React 16 和 MIT 许可协议

React 继续主导前端领域。2017年React发布了一个最受期望的版本—— 版本 16 。 它包含了 fiber 架构,支持异步 UI 渲染。这个版本还提供了以错误边界为首的 许多其它功能 ,这样就可以更容易地管理应用意想不到的故障。

令人惊讶的是,过去一年 React 最重要的改进并不是增加了新的功能,而是变更它的开源许可协议。 Facebook 放弃了导致其它公司远离 React 的 BSD 协议,而是采用了 用户友好的 MIT 协议 。此外,Jest、Flow、Immutable.js和 GraphQL 也同样采用 MIT 协议。

React核心团队和顶级贡献者包括:Dominic GannawayDan AbramovSophie AlpertSebastian MarkbågePaul O’ShannessyAndrew ClarkCheng Lou、Clement Hoang, Probably Flarnie、Brian Vaughn。

React v16.0 – React 博客 _我们很高兴发布了 React v16.0 版本!We’re excited to announce the release of React v16.0! 这些改变是一些长期的功能需求……_reactjs.org

渐近式的 Web 应用

我们一直在寻找消除 Web 和其它客户端差距的方法。Google 通过将Web 升级到渐近式 Web 应用(PWA’s),带头发起了增强网页应用的运动,这项运动在2017年得到了广泛而迅速的接受。PWA 应用可以最大程度地利用现代浏览器技术,从而提供一个更像移动应用的网页体验。它改善了性能、支持离线和提供了一些在之前只有移动应用可用的功能,例如:消息推送。 PWA’s 的核心是manifest.json 文件和应用 service workers的结合。

渐进式 Web 应用:好的体验随处可见 (Google I/O ‘17)

Yarn 的采用改善了 JS 包生态

NPM 自从发布以来已经成长了不少,但是它依然缺失一些重要的功能,而这正是 Yarn 要增加的。Yarn 的关键贡献是包缓存、确保确定性构建的锁文件、并行操作和扁平化依赖。 这些功能已经推出就取的相当大的成功,因此NPM 在5.0发布版本中也实现了这些功能。 至今为止,Yarn 已经有超过 10 亿下载(目前每月125万下载),并拥有惊人的 28,000+ GitHub stars。哪怕你还没有使用 Yarn ,你或许也感觉到了JavaScript 包管理作整体上已经有了很大改进,感谢Yarn!

Yarn _快速的、可靠的、安全的依赖管理。_yarnpkg.com

CSS Grid 布局

Grids 最终得到 CSS 原生支持,浏览器很快采用了它。在过去, CSS 中网格系统需要使用表格、floatflex和 inline-block来创建。原生 CSS 网格布局能够将一个页面划分为主要区域,并为内容创建行和列。你可以看下 Rachel Andrew 的 https://gridbyexample.com/ 网站开始学习。

CSS Grid Layout _CSS 网格布局擅长将一个页面划分为主要区域,或者根据大小和位置定义关系……_developer.mozilla.org

WebAssembly 在所有主要浏览器里得到支持

现在所有的浏览器都支持 WebAssembly (我们通常简单地称为wasm) 啦!Wasm 是针对浏览器客户端脚本的更为底层的 字节码 格式。因为它更为底层,因此在拥有高性能的同时,提供了一个JavaScript API,让前端开发师了拥有了更容易的切入点。Firefox 最近宣称在所有浏览器中支持 Wasm 。

所有的浏览器现在都添加了 WebAssembly 的支持 – The Mozilla Blog _苹果和微软在最新的 Safari 和 Edge版本中添加了 WebAssembly 的支持,所以所有四个主要………_blog.mozilla.org

无服务端架构

在2017年,无服务应用的流行以狂热的速度成长起来。它们提供了在低成本下增加性能的方法。客户端完全和服务端解耦,允许你聚焦在应用上而不是基础设施上。一个常见的实现是使用 AWS API Gateway 结合 AWS Lambda 函数作为一个 BaaS (backend as a service,后端即服务)服务,提供给客户端调用。你可以通过 Adnan Rahić 的这篇优秀的介绍开始起步学习。

基于 Node.js 无服务应用的速成课A crash course on Serverless with Node.js _不管的开发背景如何,在过去的一年,你都不可避免得听到 Serverless 这个词。该词……_hackernoon.com

Vue.js 继续流行

即便 React 非常成功,Vue (由Evan You创建)的流行热度不减。该框架提供了一个组件基础的架构,是 React 最主要的替代者之一。目前它已经被许多大型公司采用,包括在去年开始使用这个框架的GitLab

CSS-in-JS 和 准备即将来临的 CSS 圣战

在我们见证 JavaScript 快速进化后,生态开始趋于稳定。不可避免地为了赶上现代 web 应用的需求,我们也将要看到在 CSS 上的同样快的进步。在2017年,主要的进步是 CSS-in-JS 的明显改进和采用,所有的样式不是通过样式表而是通过代码构建的。目前还不清楚这是否会成为前端社区的最终方向,但这是目前最新的方法,而这种方法也似乎解决了构建基于组件的应用程序时遇到的许多问题。

styled-components (由 Max StoiberGlen MaddernPhil Plückthun 创建) 走在了2017的流行前沿。Emotion (由 Kye Hohenberger 创建) 是最新可用库之一,但是它已经被快速采用。另一个值得考虑的选择是 glamorous (由 PayPal、Kent C. Dodds 和 许多积极的 贡献者) ,包装了 glamor 库。查看 这篇文章 了解对许多可用 CSS-in-JS 选项的总结。

CSS-in-JS 的一个简短历史:如何到了这个阶段以及将要如何发展 _一个无主张、高水平的关于 CSS-in-JS 发展故事的论述_levelup.gitconnected.com

静态网站生成器

2017年静态网站卷土重来。Gatsby 等框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 Web 应用。由于预建标记的使用,静态网站生成器能为您提供服务器端渲染和无与伦比的速度。如果你正在寻找一个好的demo,React 的官方文档 本身就是用 Gatsby 构建的。

静态站点的产生引发了另一个被称为 JAMStack 的趋势:“JavaScript,APIs,Markup”。 JAMStack 使用相同的静态预构建 HTML 文件以及可重复使用的 API 和 JavaScript 来处理请求/响应周期内的任何动态编程。Netlify 是你开始免费使用 JAMStack 和静态主机的一个好选择。Brian Douglas 通过构建 Hacker News 克隆站写了一篇优秀的文章 comparing the JAMStack vs. server side rendered apps 。

使用 Gatsby 静态站点生成器 _在这篇文章,我将要谈论静态站点生成器 – 它们如何进化以及为什么我为什么从 Ghost 迁移……_www.gatsbyjs.org

GraphQL 的探索——我们是时候改重新思考下API的设计了

GraphQL 正迅速地占领 REST 领地,Samer Buna 甚至宣称 REST 已经死亡。 GraphQL 所做的并不是管理多个端点并获取一些不必要的数据,而是允许客户端声明式地定义所需的数据,并从单个端点检索所有数据。

它如此流行以至于GitHub 已经用 GraphQL 写了它 最新版本 API ,许多公司也正在创建使它对所有开发者更加易用的产品,如 Johannes Schickling 的流行框架 Graphcool 。

GraphQL: 一个 API 的查询语言。 _GraphQL 在你的 API 中提供了一个完整的描述,给了客户端准确请求它们所需数据的能力……_graphql.org

React Router 4

Ryan Florence 和 Michael Jackson 的创建的 React Router 从仅仅是针对 React 的一个路由库变成了真正的 React Router ,只需使用 React 组件即可启用申明式路由。这是由React 团队背书的第一版本,此版本的API 已经稳定下来了,React Training 团队表示在项目的整个生命周期不会有任何大的改动。

Angular 发布了 v4,很快 v5 即发布

因为维护 SEMVERA 版本,在跳过众所周知的版本 3 后,在3月23日 Angular v4 正式发布。在v4 中,Angular 团队采纳了社区项目 Angular Universal,并作为 Angular 官方项目的一部分,它提供服务端渲染 Angular 应用的方法。基于性能的考虑, Angular Animation 包也被 @angular/core 排除在外,只有在需要的时候才会导入。在 View Engine 中的Ahead Of Time 编译已被重构,“在大多数例子中,为你的组件的生成代码减少近60%”。

版本 5 增加了期待许久的改进。感谢 @angular/service-worker 包的存在,用 Angular v5 创建一个 Progressive Web App 相比先前版本更加容易。Angular 编译器也做了改善,使它能够更快地在开发期间构建或重新构建;Angular Router 现在暴露了所有新的生命周期函数,包括 ActivationStart、ActivationEnd、ResolveStart 和 ResolveEnd。

TypeScript 和 Flow

TypeScript 在众多 JavaScript 开发者中已经得到了狂热的追随,而 Flow 提供了不需要大范围重构、更灵活的引入类型方式。在 Javascript 中类型的缺失让很多人不满。微软创建了TypeScript,并在新版 Angular 中使用,而Flow 则是 Facebook 的产物。

gitconnected 为开发者创建社区

gitconnected 可以为开发者和软件工程师创建社区。它提供了合作、分析文章以及和其他开发者创建讨论的功能。另外,你还可以在个性化的简介页面无缝地展示你的项目、档案。不要失去和其他人联系的机会,分享你的兴趣,互相帮助,一起学习、成长。

gitconnected – 针对开发这和软件工程师的社区 _分享文章,参与讨论 – gitconnected 使你和其它开发者保持联系……_gitconnected.com

2018年值得期待的:

  • CSS 的激烈角逐,为我们指出在组件基础的应用中处理样式最好的方式。
  • 更多的公司采用如 React Native 或 Flutter 拥有一套代码库的移动端解决方案。
  • 有离线能力和相似移动端体验的 Web 应用会变得更接近原生。
  • WebAssembly 能够做出更大的进步,提供更好的 web 体验。
  • GraphQL 持续挑战 REST。
  • 现在没有授权许可协议的担心,React 在巩固它的地位,甚至会加强。
  • Flow 和 TypeScript 得到更强的掌握,让 JavaScript 代码更容易组织。
  • 前端架构中容器化影响会更盛行。
  • 使用像 A-FrameReact VR 和 Google VR 的库,虚拟现实会大步向前。
  • 人们使用区块链和web3.js (由 Marek Kotewicz 和 Fabian Vogelsteller 创造) 构建一些相当酷的应用。

如果我错过了什么重要的东西,请留下评论,我一定会加上!