2017年前端开发回顾 – gitconnected

原文出处 A recap of front-end development in 2017 – gitconnected

2017年前端开发回顾

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

React 16 和 MIT 许可协议

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

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

核心团队和顶级贡献者包括: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 _快速的、可靠的、安全的依赖管理。_yarnpkg.com

CSS Grid 布局

Grids 最终得到 CSS 原生支持,浏览器很快采用了它。在过去,在 CSS 中网格系统使用表格、floatflexinline-block创建。原生 CSS 网格布局擅长将一个页面划分为主要区域,并为内容创建行和列。查看 Rachel Andrewhttps://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 继续流行continuing to grow in popularity

即便 React 非常成功,Vue (由Evan You创建) 继续流行。该框架提供了一个组件基础的架构,是 React 最主要的替代者之一。它被大型公司采用,包括在recaps their past year使用了该框架的GitLab

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

在我们见证 JavaScript 快速进化后,生态开始趋于稳定。不可避免地,我们也将要看到在 CSS 上的同样快的进步,为了赶上现代 web 应用的需求。在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 应用。静态网站生成器能为您提供服务器端渲染和无与伦比的速度的好处,因为您正在使用预建标记发起服务。如果你正在寻找一个好的例子,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 explodes and makes us rethink API construction

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

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

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

React Router 4

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

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

因为维护 SEMVERA 版本,在跳过众所周知的版本 3 后,在3月23日 Angular 4 官方发布。在版本 4 中,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 NativeFlutter 拥有一套代码库的移动端解决方案。

  • 有离线能力和相似移动端体验的 Web 应用会变得更接近原生。

  • WebAssembly 能够做出更大的进步,提供更好的 web 体验。

  • GraphQL 持续挑战 REST。

  • 现在没有授权许可协议的担心,React 在巩固它的地位,甚至会加强。

  • Flow 和 TypeScript 得到更强的掌握,让 JavaScript 代码更容易组织。

  • 前端架构中容器化影响会更盛行。

  • 使用像 A-Frame, React VRGoogle VR 的库,虚拟现实会大步向前。

  • 人们使用区块链和web3.js (由 Marek KotewiczFabian Vogelsteller 创造) 构建一些相当酷的应用。

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


如果你发现这篇文件很有帮助,请点击 ? Follow me 获取更多关于 React、Node.js、JavaScript 和开源软件的文章!你还可以在 Twitter 或者 gitconnected 找到我。

Recommend & share..

感谢 Dan Ward