澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

何去何从,将要到临的2018有如何的只求

2017 前端技术发展回顾

2017/12/20 · 基础技术 · 前端

原文出处: Trey Huffine   译文出处:hijiangtao   

前端领域在 2017 年再次以狂热的节奏向前发展。以下列出过去的一年中最值得关注的一系列事情。 

前端领域在 2017 年再次以狂热的节奏向前发展。以下列出过去的一年中最值得关注的一系列事情。

2017年,前端开发继续飞速发展。以下是在过去的一年中非常值得关注的一些事件和趋势整理,主要参考了国内外的一些报道和文章,希望能对大家在思考 2018 年的趋势和走向上有所帮助。欢迎指正、评论和补充。

2017年前端有什么样变化?即将来临的2018有什么样的期待?

澳门新浦京娱乐场网站 1React 16 和 MIT 协议

React 继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 – React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性,这次发布使得 React 可以更容易的管理意外的程序故障。

让人意外的是,React 在去年所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议。Facebook 放弃了导致很多公司远离 React 的 BSD 协议,转而采用用户用好的MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

核心团队和主要贡献者包括 Dominic Gannaway,Dan Abramov,Sophie Alpert,SebastianMarkbåge,Paul O’Shannessy,Andrew Clark,Cheng Lou,Clement Hoang,Probably Flarnie,Brian Vaughn。

React v16.0 – React Blog

React 16 和 MIT 协议

1、React 16 和 MIT 许可证

2017年,React 继续在前端领域占据主导地位,备受期待的 React 16 也正式发布。该版本包含可实现异步 UI 渲染的 fiber 架构,以及更便捷的错误管理。

不过,React 更引人关注的不是其新特性,而是开源许可证的更改。Facebook 放弃了导致很多企业拒绝使用其开源项目的 BSD 专利许可模式,并采用了对用户友好的 MIT 许可证。同时,Jest、Flow、Immutable.js 和 GraphQL 等项目也更改为了 MIT 许可证。

>> 相关阅读:

  • React 16.0.0 发布,去除专利条款,改用 MIT 许可证
  • Facebook 被集体“声讨”,要求更改 ReactJS 许可

澳门新浦京娱乐场网站 2

作者:hijiangtao

Progressive Web Apps

我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个 manifest.json 文件和对 service workers 的利用。

Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)

澳门新浦京娱乐场网站 3

2、下一代 Web 应用模型 — PWA

PWA(Progressive Web App)是 Google 于 2016 年提出的概念,2017 年已被迅速采用。PWA 旨在增强 Web 体验,可显著提高加载速度、可离线工作、可被添加至主屏、全屏执行、推送通知消息等等。这些特性将使得 Web 应用渐进式接近原生 App。

>> 相关阅读:

  • 您的第一个 Progressive Web App
  • Chrome Web App 已被谷歌干掉 未来将主推 PWA

澳门新浦京娱乐场网站 4

链接:

Yarn 的采用改善了 JS 包管理的生态系统

NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn 的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的 28000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

Yarn

React 继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 –React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性,这次发布使得 React 可以更容易的管理意外的程序故障。

3、Yarn 快速普及,NPM 跟上脚步

Facebook 与 Exponent、 Google 和 Tilde 合作开发的 Yarn 在2016年10月发布以后,迅速蹿红。Yarn 可以看做是对 NPM 缺失的一些关键特性的补充,能够更快速地安装软件包和管理依赖关系,并且可以在跨机器或者无网络的安全环境中保持代码的一致性。据悉,Yarn 下载量目前已超过10亿次(每月下载量达到125万次)。Yarn 的成功,使得 NPM 在 5.0 版本中也加入了上述的这些特性。

>> 相关阅读:

  • npm v5.0.0 正式发布,改进了稳定性
  • Facebook 新推 Yarn,或取代 npm 客户端

澳门新浦京娱乐场网站 5

来源:知乎

CSS 网格布局

网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被 tablesfloatflex 以及 inline-block 实现过。原生的 CSS 网格布局擅长于将一个页面划分成几个主要的区域,并为内容创建列和行。查看 Rachel Andrew 写的 开始学习。

CSS Grid Layout

让人意外的是,React 在去年所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议。Facebook 放弃了导致很多公司远离 React 的 BSD 协议,转而采用用户用好的MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

4、WebAssembly 受主流浏览器支持

WebAssembly (wasm)在今年受到了所有主流浏览器的支持,包括 Chrome、Firefox、Safari 和 Edge 。wasm 源于 Mozilla 发起的 Asm.js 项目,用于补充 JavaScript,其本地解码速度比 JS 解析快得多,让高性能的 Web 应用在浏览器上运行成为可能,比如视频游戏、计算机辅助设计、视频和图像编辑、科学可视化等等。而且由于 wasm 字节码(Bytecode)较一般程序代码小许多倍,意谓着这项标准可节省移动设备的使用带宽,有助于改善网页加载速度,且字节码更适合浏览器读取。wasm 还提供了一个JavaScript API,为前端开发人员提供了一个更容易的切入点。

>> 相关阅读:

  • 主流浏览器都加入了 WebAssembly 支持
  • 抢先一步,Rust 构建版支持直接编译 WebAssembly

澳门新浦京娱乐场网站 6

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

WebAssembly 在所有主流浏览器中都得到了支持

WebAssembly(或者 wasm)正登陆所有主流浏览器。wasm 是一个用于浏览器内客户端脚本处理接近原生的 字节格式 。由于其接近原生,它具有令人难以置信的性能,但也提供了一个 JavaScript API,以使得前端开发人员有一个更容易的切入点。Firefox 最近宣布对它的支持已经被所有(译者注:此处所有应该是指所有主流)浏览器内置。

WebAssembly support now shipping in all major browsers – The Mozilla Blog

核心团队和主要贡献者包括Dominic Gannaway澳门新浦京娱乐场网站,,Dan Abramov,Sophie Alpert,SebastianMarkbåge,Paul O’Shannessy,Andrew Clark,Cheng Lou,Clement Hoang,Probably Flarnie,Brian Vaughn。

5、Angular 发布了 v4,以及……v5

由于采用语义化版本控制,Angular 在今年跨越了两个大版本:于 3月23日 发布的 Angular 4 以及于 11月1日 发布的 Angular 5。Angular 4 优化了视图引擎、减少代码体积;Angular 5 中包含了一些用户期待已久的改进,像是编译器的改进,能更快的构建/重建;新的 @angular/service-worker 包能够更好的构建渐进式 Web 应用程序。

>> 相关阅读:

  • Angular 5.0.0 发布,Web 前端框架
  • Angular 4.0.0 正式版发布, Web 前端框架
  • 没有 Angular 3 ,Angular 4 计划2017年3月发布

在即将过去的2017年里,我们回顾:

Serverless 架构

Serverless 应用在 2017 年以狂热的节奏流行开来。他们提供了一种以降低成本来提升性能的方法。你的客户端与服务端完全分离,这允许你可以专注在你的应用而不是基础设施上。一个常见的实现是将 AWS API 网关与 AWS Lambda 函数结合使用,后者作为一个 BaaS (后端作为一个服务)在你的客户端使用。你可以从 Adnan Rahić 的精彩介绍开始。

A crash course on Serverless with Node.js

React v16.0 – React Blog

6、Vue.js 继续流行

既然说到了 React ,说到了 Angular ,自然不能落下 Vue 。2017年,Vue 依然越来越受欢迎,该框架提供基于组件的架构,是 React 在因许可证问题被抵制时的主要替代方案之一。它已经被包括 GitLab 在内的许多大型公司采用,在 Stack Overflow 上的关注度居高不下。

澳门新浦京娱乐场网站 7

>> 相关阅读:

  • Vue.js 框架成为 WordPress 弃用 React 后的最佳选择
  • 翻译 | 我们为什么以及是如何从 Angular.js 迁移到 Vue.js ?

逃不过的三大框架

Vue.js 在流行中继续成长

即便 React 获得了巨大成功,Vue(作者尤雨溪)仍然越来越受欢迎。该框架提供了易基于组件的架构,是 React 的主要替代方案之一。它已经被包括 GitLab 在内的大公司所采用,该公司回顾了在过去的一年里使用该框架的故事。

澳门新浦京娱乐场网站 8

Progressive Web Apps

7、CSS-in-JS 在争议中沉淀

React 的出现,打破了以前“关注点分离”的网页开发原则,因其采用组件结构,组件强制要求把 HTML、CSS、JavaScript 写在一起。随着 React 的走红和组件模式深入人心,这种"关注点混合"的新写法逐渐成为主流。表面上,React 的写法是 HTML、CSS、JavaScript 混合在一起。实际上并不是,其实是用 JavaScript 在写 HTML 和 CSS,React 是在 JavaScript 里面实现了对 HTML 和 CSS 的封装。由于 CSS 的封装非常弱,导致了一系列的第三方库,用来加强 React 的 CSS 操作,它们统称为 CSS in JS,意思就是使用 JS 语言写 CSS。

CSS in JS 的出现带来了很多争议,有不少人认为是在重复造轮子,或者说是没有找到其优势。CSS-IN-JS 是不是未来的方向我们暂且不议,但其在2017年已得到明显的采用。

澳门新浦京娱乐场网站 9

React 继续在前端领域占据着主导地位,并在 2017 年发布了最受期待的版本之一 -React 16。 它包含了可以实现异步 UI 渲染的 fiber 架构。通过提供包括错误边界在内的很多其他特性。但 React 在这一年中所取得最重要的成就不是它推出的新特性,而是修改了它的开源协议:BSD 协议 ->MIT 协议。除此外,Jest、Flow、Immutable.js 和 GraphQL 授权也都改为 MIT 协议。

CSS-in-JS 以及为即将到来的 CSS 圣战做准备

在我们目睹了 JavaScript 的快速发展之后,生态系统开始稳定下来。 不可避免的是,我们也会在 CSS 领域看到同样的不断进步,因为它赶上了现代 web 应用的需求。在 2017 年,主要的进步来自 CSS-in-JS 的明显改进与采用,其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向,但这是目前最新的方法,似乎解决了构建基于组件的应用程序时遇到的许多问题。

2017 年见证了 styled-components(由 Max Stoiber、Glen Maddern 和 Phil Plückthun 创建) 在流行程度上逐渐占据主导地位。Emotion(由 Kye Hohenberger 创建)是最新的 JavaScript 库之一,但它已经被迅速采用。另一个可选方案是 glamorous(由 PayPal、Kent C. Dodds 和一群热情的贡献者创建),它封装了 glamor 库。查看这篇文章,一篇关于许多CSS-in-JS 的可选方案的总结。

A Brief History of CSS-in-JS: How We Got Here and Where We’re Going

我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个manifest.json文件和对service workers的利用。

8、静态网站卷土重来

2017 ,静态网站卷土重来。Gatsby 等框架使你能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该是一个复杂的现代 Web 应用,静态网站生成器能够提供的服务器端渲染和无与伦比的速度,正式其优势所在。

静态网站生成器还引发了另一个被称为 JAMStack 的趋势:“JavaScript,APIs,Markup”。 JAMStack 使用相同的静态预构建 HTML 文件以及可重复使用的 API 和 JavaScript 来处理请求/响应周期内的任何动态编程,旨在提供更好的性能,更高的安全性,更低的扩展成本和更优的开发人员体验。

澳门新浦京娱乐场网站 10

Angular市场占有率持续下滑(相较于 React ),发布了V4(3月23日)以及V5(11月2日),在 V4 中看到了 Angular Universal  成为官方项目的一部分以及 Angular Animation 从核心包中被抽离出来,V5 中则对 PWA 支持进行了改进、对编译器优化达到更快地构建等。

静态网站生成方案

2017 见证了静态网站卷土重来。像 Gatsby 这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记(原文 prebuilt markup),静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子,React 官方文档就是用 Gatsby 构建的。

静态网站生成方案引发了另一个被称为 JAMStack 的趋势:“JavaScript, APIs, Markup”。JAMStack 使用相同的静态预构建 HTML 文件以及可重复使用的 API JavaScript 来处理请求/响应周期内任何的动态构建。Netlify 是开始使用 JAMStack 和免费静态主机的绝佳选择。Brian Douglas写了一篇很棒的文章,通过构建 Hacker News 应用对比了 JAMStack 和服务器端渲染应用的不同。

Modern static site generation with Gatsby

Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)

9、GraphQL 继续挑战 REST

虽然很多人认为 GraphQL 在2017年依然没有火起来,但不可否认的是 GraphQL 已逐渐占据了一席之地。不再管理多个端点并获取不必要的数据,GraphQL 允许客户端声明式地定义所需的数据,并从单个端点检索所有数据。这也正式它在刚出现时被认为是革命性的 API 工具的原因,因为它可以让客户端在请求中指定希望得到的数据,而不像传统的 REST 那样只能呆板地在服务端进行预定义。

澳门新浦京娱乐场网站 11

即便 React 获得了巨大成功,Vue(作者尤雨溪)也仍然越来越受欢迎。该框架提供了非常友好、简单的 API,是 React 的主要替代方案之一。它已经被包括GitLab在内的大公司所采用,该公司回顾了在过去的一年里使用该框架的故事。

GraphQL 的火爆并使我们重新思考 API 的构建

GraphQL 似乎在 REST 之上迅速占据了一席之地,Samer Buna 甚至声称 REST 已经死亡。GraphQL 允许客户端声明式的定义所需的数据,并从一个断点中检索所有需要数据,而不是管理多个端点以及获取不必要的数据。

它非常流行,GitHub 已经使用 GraphQL 编写了最新版本的 API,与此同时为了使 GraphQL 对所有开发人员可用,许多公司正在开发产品,例如 Johannes Schickling 开发的 Graphcool 框架。

GraphQL: A query language for APIs.

Yarn 的采用改善了 JS 包管理的生态系统

10、TypeScript 和 Flow 受追捧

2017年,TypeScript 受到了很多 JavaScript 开发者的追捧。TypeScript 由微软创建,也是新版 Angular 采用的语言,其强类型正是优势所在。 而 Flow 则提供了一种更加灵活的方式来引入类型,而不需要进行重构。

澳门新浦京娱乐场网站 12

本文由开源中国整理,转载请注明出处。

澳门新浦京娱乐场网站 13

<img src="" data-caption="" data-size="normal" data-rawwidth="1132" data-rawheight="779" class="origin_image zh-lightbox-thumb" width="1132" data-original=";

React Router 4

由 Ryan Florence 和 Michael Jackson 创建的 React Router,从为 React 提供的一个路由演变为一个真正的 React Router – 一个简单使用 React 组建的声明式路由。这是 React 团队认可的第一个版本。它的 API 已经稳定下来,React Training 团队已经表示在该项目的整个生命周期中不会看到任何大的突变。

澳门新浦京娱乐场网站 14

NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn 的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的28000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

澳门新浦京娱乐场网站 15

Angular 发布了 v4 版本,紧接着发布了 v5

在臭名昭著的因为没有维护 SEMVER 跳过了版本 3 之后,Angular 4 于3月23日正式发布。在第4版中,Angular 团队采纳了社区项目 Angular Universal – 它提供了一种服务器端渲染 Angular 应用的方法 – 作为 Angular 项目官方的一部分。Angular Animation 包从 @angular/core 中抽离出来,为了只在需要的时候导入。视图引擎中的前期编译在性能上已经重构,“在最大多数情况下将能减少 60% 左右的生成代码。”

v5 中看到了额外的期待已久的改进。归功于新的 @angular/service-worker 包,使用 Angular v5 创建一个 Progressive Web App 比以往的任何版本都要更加容易。Angular 编译器也得到了改进,在开发过程中实现了更快的构建/重建,Angular Router 现在公开了所有新的生命周期钩子,包括 ActivationStartActivationEndResolveStartResolveEnd

Yarn

注:上图为三大框架过去一年中在 NPM 的下载量对比图,以下类似的框架/包对比图均采用 npmtrends 一年内下载量进行对比,同时附有 GitHub 上 star/fork 等状态信息。

TypeScript 和 Flow

TypeScript 赢得了很多 JavaScript 开发者的追捧,而 Flow 提供了一种在不需要激进的重构下更为灵活的方式来引入类型。JavaScript 中缺少类型一直是很多人的抱怨所在。TypeScript 由 Microsoft 创建,是新版 Angular 中的一项要求。Flow 是 Facebook 的工作结晶。

CSS 网格布局

ECMAScript

gitconnected 为开发人员创建了交流社区

gitconnected 发起为开发人员和软件工程师创建社区。它提供了协作、分享文章和与其他开发者进行讨论的能力。此外,你可以在个性化的个人资料页面上无缝地显示项目和宣传页。 不要错过与其他人分享你的兴趣、互相帮助学习和成长的机会。

gitconnected – The community for developers and software engineers

译者注:原文作者为 gitconnected 创始人,故对于最后一条事件是否具备前端年度代表性事件的影响力判断有失公允。但为了保留原文完整,故依旧做了翻译。

网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被tables、float、flex以及inline-block实现过。原生的 CSS 网格布局擅长于将一个页面划分成几个主要的区域,并为内容创建列和行。查看 Rachel Andrew 写的https://gridbyexample.com/开始学习。

在一个详尽的提案过程结束之后,六月份发布了 ECMAScript 规范的2017年版本,其中包括一些开创性的功能,如异步功能,共享内存和原子操作(atomic operations)。其中,共享内存将使 JavaScript 中的高性能并行计算更容易处理,而且效率更高。拥有共享内存的并行架构对于任何想用 WebGL 和 web worker 创建游戏的人来说都是巨大的诱惑。

2018,我们应该期待些什么

  • 在我们想出如何处理基于组件应用中的样式的最佳方式时,CSS 的战斗就会激化。
  • 越来越多的公司采用具有统一代码库的移动解决方案,如 React Native 或 Flutter。
  • 因为离线能力和无缝的移动端体验,web 变得更加原生。
  • WebAssembly 可以取得长足的进步,提供一个更好的 web 体验。
  • GraphQL 正在并继续挑战 REST。
  • 由于不再有对开源协议上的争议,React 强化了它的地位(是的,甚至更多)。
  • Flow 和 TypeScript 采取更强大的举措,使 JavaScript 更具结构。
  • Containerization 的影响在前端架构中变得越来越普遍。
  • 虚拟现实使用类似 A-Frame、React VR 和 Google VR 这样的库正在向前迈进。
  • 人们使用区块链和 web3.js(由 Marek Kotewicz 和 Fabian Vogelsteller 创建)构建了一些非常酷的应用程序。

如果我遗漏了任何大事件,请评论告知,我一定会加上的!


译者:我一直在维护一个项目 FE-Cookbook,个人想通过这个项目把自己持续关注的前端相关内容汇总收集,一方面方便自己和其他同学日后查看、另一方面希望与有同样兴趣的同学一起将该项目完善壮大。本项目持续更新中,如果觉得有用欢迎给项目添加 Star;如果觉得有任何需要改进或者需要完善的地方,欢迎贡献代码提请 PR,针对无冲突的内容我会快速合并。更多项目请关注我的 GitHub。

2 赞 6 收藏 评论

澳门新浦京娱乐场网站 16

CSS Grid Layout

该版本在2017年12月已经被所有主流浏览器所支持,Edge 表示将从 v16 版本开始对这些功能进行支持。由于 Node 不支持 web worker,所以他们也没有对共享内存的支持,但他们正在重新思考该项决定。

WebAssembly 在所有主流浏览器中都得到了支持

WebAssembly

WebAssembly(或者wasm)正登陆所有主流浏览器。wasm 是一个用于浏览器内客户端脚本处理接近原生的字节格式。由于其接近原生,它具有令人难以置信的性能,但也提供了一个JavaScript API,以使得前端开发人员有一个更容易的切入点。Firefox 最近宣布对它的支持已经被所有(译者注:此处所有应该是指所有主流)浏览器内置。

所有主流浏览器现在都支持 WebAssembly,五月份 Chrome 开始支持,Firefox 则是从三月份就开始支持,Edge 是十月份。 Safari 则在第十一次发布中开始支持。Chrome for Android 和 Safari Mobile 也支持 WebAssembly。详情可以参考WebAssembly support now shipping in all major browsers – The Mozilla Blog

WebAssembly support now shipping in all major browsers – The Mozilla Blog

Progressive Web Apps

Serverless 架构

我们一直在寻找弥补 web 和其他客户端之间体验差距上的解决方案。Google 一直主导通过将 web 应用转换为 Progressive Web Apps(PWA) 来增强它的能力,而这一方法在 2017 年迅速获得采用。一个 PWA 应用利用现代浏览器技术来提供更像移动应用程序的 web 体验。它提供了改进的性能和离线体验,以及以前仅可用于移动的功能,例如推送通知。 PWA 的基础是一个manifest.json文件和对service workers的利用。详情见Progressive Web Apps: Great Experiences Everywhere (Google I/O ‘17)。

Serverless 应用在 2017 年以狂热的节奏流行开来。他们提供了一种以降低成本来提升性能的方法。你的客户端与服务端完全分离,这允许你可以专注在你的应用而不是基础设施上。一个常见的实现是将 AWS API 网关与 AWS Lambda 函数结合使用,后者作为一个 BaaS (后端作为一个服务)在你的客户端使用。你可以从Adnan Rahić的精彩介绍开始。

包管理器

A crash course on Serverless with Node.js

Bower市场占有率持续下降,它的最后一次发布在2016年11月,之后官方正式推荐用户使用 NPM 用于管理前端项目中的软件包。

Vue.js 在流行中继续成长

NPM 自从最初发布以来已经有了相当长的一段时间,但它仍然缺少一些关键特性,而这正是 Yarn 希望补充的。Yarn的主要贡献是包缓存,一个确保确定性构建的锁文件,并行操作以及依赖关系。这些功能非常成功,以致于 NPM 在其 5.0 版本中实现了它们。Yarn 下载量超过 10 亿次(目前每月下载量达到了 125 万次)并拥有惊人的29000 多个 GitHub stars。即使你没在使用 Yarn,JavaScript 的包管理整体上由于 Yarn 的发布也得到了显著地提升 。

即便 React 获得了巨大成功,Vue(作者尤雨溪)仍然越来越受欢迎。该框架提供了易基于组件的架构,是 React 的主要替代方案之一。它已经被包括GitLab在内的大公司所采用,该公司回顾了在过去的一年里使用该框架的故事。

针对 Yarn 的出现,NPM回击以 v5 版本的发布,这个版本显著提高了性能(包括上述的 Yarn 发布的功能) 。

澳门新浦京娱乐场网站 17

<img src="" data-caption="" data-size="normal" data-rawwidth="1139" data-rawheight="736" class="origin_image zh-lightbox-thumb" width="1139" data-original=";

CSS-in-JS 以及为即将到来的 CSS 圣战做准备

澳门新浦京娱乐场网站 18

在我们目睹了 JavaScript 的快速发展之后,生态系统开始稳定下来。 不可避免的是,我们也会在 CSS 领域看到同样的不断进步,因为它赶上了现代 web 应用的需求。在 2017 年,主要的进步来自 CSS-in-JS 的明显改进与采用,其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向,但这是目前最新的方法,似乎解决了构建基于组件的应用程序时遇到的许多问题。

样式布局

2017 年见证了styled-components(由Max Stoiber、Glen Maddern和Phil Plückthun创建) 在流行程度上逐渐占据主导地位。Emotion(由Kye Hohenberger创建)是最新的 JavaScript 库之一,但它已经被迅速采用。另一个可选方案是glamorous(由 PayPal、Kent C. Dodds 和一群热情的贡献者创建),它封装了glamor库。查看这篇文章,一篇关于许多CSS-in-JS 的可选方案的总结。

网格布局最终被 CSS 采纳为标准,浏览器也正在快速地采用它。过去,网格系统在 CSS 中曾被tables、float、flex以及inline-block实现过。

A Brief History of CSS-in-JS: How We Got Here and Where We’re Going

2017 年见证了styled-components(由Max Stoiber、Glen Maddern和Phil Plückthun创建) 在流行程度上逐渐占据主导地位。Emotion(由Kye Hohenberger创建)是最新的 JavaScript 库之一,但它已经被迅速采用。另一个可选方案是glamorous(由 PayPal、Kent C. Dodds 和一群热情的贡献者创建),它封装了glamor库。

静态网站生成方案

在过去的几年里,像SASS,Less和Stylus这样的CSS预处理器已经流行起来。PostCSS 于2014年推出,而在2017年真正火爆起来,成为目前最受欢迎的 CSS 预处理器。

2017 见证了静态网站卷土重来。像Gatsby这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记(原文 prebuilt markup),静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子,React 官方文档就是用 Gatsby 构建的。

另一方面,在 2017 年,主要的进步来自 CSS-in-JS 的明显改进与采用,其中所有样式都是通过代码而不是样式表进行构建的。目前还不清楚这是否将成为前端社区的最终方向,但这是目前最新的方法。

静态网站生成方案引发了另一个被称为 JAMStack 的趋势:“JavaScript, APIs, Markup”。JAMStack 使用相同的静态预构建 HTML 文件以及可重复使用的 API JavaScript 来处理请求/响应周期内任何的动态构建。Netlify是开始使用 JAMStack 和免费静态主机的绝佳选择。Brian Douglas写了一篇很棒的文章,通过构建 Hacker News 应用对比了JAMStack 和服务器端渲染应用的不同。

PostCSS 仍然是首选的 CSS 预处理器,但是很多都在切换到 CSS-in-JS 解决方案。

Modern static site generation with Gatsby

注:评论中有同学谈到 PostCSS 是后处理器,根据定义,CSS 后处理器是对 CSS 进行处理,并最终生成 CSS 的预处理器,它属于广义上的 CSS 预处理器。由于本人回答时的定位以及参考的文献中所指,故这里不做细分,认定 PostCSS 为预处理器。细致的同学可以做进一步的细分。

GraphQL 的火爆并使我们重新思考 API 的构建

再注:评论中有同学认为 PostCSS 由于可以搭配其他方案一起使用,所以认为如上描述其实不准确的。本人在作答时,想法是对比不同方案在今年的变化和流行程度,所以在严谨性方面可能会有欠考虑。具体细节希望同学们在使用的时候详细考究。

GraphQL 似乎在 REST 之上迅速占据了一席之地,Samer Buna甚至声称REST 已经死亡。GraphQL 允许客户端声明式的定义所需的数据,并从一个断点中检索所有需要数据,而不是管理多个端点以及获取不必要的数据。

<img src="" data-caption="" data-size="normal" data-rawwidth="1131" data-rawheight="767" class="origin_image zh-lightbox-thumb" width="1131" data-original=";

它非常流行,GitHub已经使用 GraphQL 编写了最新版本的 API,与此同时为了使 GraphQL 对所有开发人员可用,许多公司正在开发产品,例如Johannes Schickling开发的Graphcool框架。

澳门新浦京娱乐场网站 19

GraphQL: A query language for APIs.

工程模块化工具

React Router 4

Webpack2 于今年2月份发布。 它带来了诸如 ES6 模块(不再需要 Babel 转换 import 语句)和 tree shaking (消除了打包中未使用的代码)等重要功能。 此后不久,V3 发布了一个名为“scope hoisting”的功能,将所有的 webpack 模块放入一个单独的 JavaScript 包中,从而大大缩小了它的尺寸。

何去何从,将要到临的2018有如何的只求。由 Ryan Florence 和 Michael Jackson 创建的 React Router,从为 React 提供的一个路由演变为一个真正的 React Router – 一个简单使用 React 组建的声明式路由。这是 React 团队认可的第一个版本。它的 API 已经稳定下来,React Training团队已经表示在该项目的整个生命周期中不会看到任何大的突变。

7月份,Webpack 团队从 Mozilla 开源支持计划获得了一笔赠款,以便为 WebAssembly 提供一流的支持。

澳门新浦京娱乐场网站 20

Parcel作为一个有趣的项目,在短短十天内便在 GitHub 上获得了 10000 个 star。 它主要通过利用多个 CPU 内核和一个高效的文件系统缓存来实现。 它还基于抽象语法树进行操作,而不像 Webpack 使用字符串。

Angular 发布了 v4 版本,紧接着发布了 v5

除此外,Rollup 的发展也不容小觑。4月 React 团队从 Gulp 切换到了 Rollup 进行开发。除此外,Webpack 团队也推荐在某些方面使用 Rollup 而不是 Webpack。

在臭名昭著的因为没有维护 SEMVER 跳过了版本 3 之后,Angular 4 于3月23日正式发布。在第4版中,Angular 团队采纳了社区项目 Angular Universal – 它提供了一种服务器端渲染 Angular 应用的方法 – 作为 Angular 项目官方的一部分。Angular Animation 包从@angular/core中抽离出来,为了只在需要的时候导入。视图引擎中的前期编译在性能上已经重构,“在最大多数情况下将能减少 60% 左右的生成代码。”

<img src="" data-caption="" data-size="normal" data-rawwidth="1143" data-rawheight="821" class="origin_image zh-lightbox-thumb" width="1143" data-original=";

v5 中看到了额外的期待已久的改进。归功于新的@angular/service-worker包,使用 Angular v5 创建一个 Progressive Web App 比以往的任何版本都要更加容易。Angular 编译器也得到了改进,在开发过程中实现了更快的构建/重建,Angular Router 现在公开了所有新的生命周期钩子,包括ActivationStart,ActivationEnd,ResolveStart和ResolveEnd。

澳门新浦京娱乐场网站 21

TypeScript 和 Flow

TypeScript

TypeScript赢得了很多 JavaScript 开发者的追捧,而Flow提供了一种在不需要激进的重构下更为灵活的方式来引入类型。JavaScript 中缺少类型一直是很多人的抱怨所在。TypeScript 由 Microsoft 创建,是新版 Angular 中的一项要求。Flow 是 Facebook 的工作结晶。

JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,TypeScript - JavaScript that scales.JavaScript 中缺少类型一直是很多人的抱怨所在。为了解决这些问题,TypeScript 出现。它由微软创建,由于其出色的表现赢得了很多 JavaScript 开发者的追捧,而Flow提供了一种在不需要激进的重构下更为灵活的方式来引入类型,后者是 Facebook 的成果。

gitconnected 为开发人员创建了交流社区

<img src="" data-caption="" data-size="normal" data-rawwidth="1132" data-rawheight="687" class="origin_image zh-lightbox-thumb" width="1132" data-original=";

gitconnected 发起为开发人员和软件工程师创建社区。它提供了协作、分享文章和与其他开发者进行讨论的能力。此外,你可以在个性化的个人资料页面上无缝地显示项目和宣传页。 不要错过与其他人分享你的兴趣、互相帮助学习和成长的机会。

澳门新浦京娱乐场网站 22

gitconnected – The community for developers and software engineers

应用状态管理

译者注:原文作者为 gitconnected 创始人,故对于最后一条事件是否具备前端年度代表性事件的影响力判断有失公允。但为了保留原文完整,故依旧做了翻译。

Redux 仍然作为 React 项目推荐的状态管理解决方案,并在 2017年获得了五倍的增长速度(NPM 下载量)。

2018,我们应该期待些什么

Mobx 成长的也很快,并被一些高利润公司所使用,例如 IBM,美国银行以及 Lyft。

在我们想出如何处理基于组件应用中的样式的最佳方式时,CSS 的战斗就会激化。

除此外,MobX 团队正在努力,希望在新项目——mobx-state-tree(MST) 中结合 Redux 和 MobX 的优点。

越来越多的公司采用具有统一代码库的移动解决方案,如React Native或Flutter。

<img src="" data-caption="" data-size="normal" data-rawwidth="1134" data-rawheight="686" class="origin_image zh-lightbox-thumb" width="1134" data-original=";

因为离线能力和无缝的移动端体验,web 变得更加原生。

澳门新浦京娱乐场网站 23

WebAssembly 可以取得长足的进步,提供一个更好的 web 体验。

GraphQL

GraphQL 正在并继续挑战 REST。

GraphQL 似乎在 REST 之上迅速占据了一席之地,Samer Buna甚至声称REST 已经死亡。GitHub已经使用 GraphQL 编写了最新版本的 API,与此同时为了使 GraphQL 对所有开发人员可用,许多公司正在开发产品,例如Johannes Schickling开发的Graphcool框架。

由于不再有对开源协议上的争议,React 强化了它的地位(是的,甚至更多)。

静态网站生成方案

Flow 和 TypeScript 采取更强大的举措,使 JavaScript 更具结构。

2017 见证了静态网站卷土重来。像Gatsby这样的框架使您能够使用 React 和其他现代工具构建静态网站。不是每个网站都需要或应该成为一个复杂的现代 web 应用。由于采用与预构建标记(原文 prebuilt markup),静态网站生成方案使你获得服务器端渲染的好处和绝无仅有的速度。如果你正在寻找一个很好的例子,React 官方文档就是用 Gatsby 构建的。

Containerization 的影响在前端架构中变得越来越普遍。

在即将到来的2018年中,我们期待:

虚拟现实使用类似A-Frame、React VR和Google VR这样的库正在向前迈进。

基于组件应用中的样式是否是组织 CSS 的最佳方式?有关该内容的讨论或许会激化。

人们使用区块链和web3.js(由 Marek Kotewicz 和 Fabian Vogelsteller 创建)构建了一些非常酷的应用程序。

越来越多的公司采用具有统一代码库的移动端解决方案,如React Native,何去何从,将要到临的2018有如何的只求。Flutter或Weex。

澳门新浦京娱乐场网站 24

因为离线能力和无缝的移动端体验,web 变得更加原生,再加上苹果对 Service Worker 的表态Release Notes for Safari Technology Preview 46, PWA 在2018年可能会被全面支持。

裙289683894领取资料,交流学习

WebAssembly 可以取得长足的进步,提供一个更好的 web 体验。

GraphQL 正在并继续挑战 REST。

由于不再有对开源协议上的争议,React 强化了它的地位。

Flow 和 TypeScript 采取更强大的举措,使 JavaScript 更具结构。

虚拟现实使用类似A-Frame、React VR和Google VR这样的库正在向前迈进。

人们使用区块链和web3.js(由 Marek Kotewicz 和 Fabian Vogelsteller 创建)构建了一些非常酷的应用程序。

构建方案的持续发展,Webpack ,Rollup 以及后起之秀 Parcel 等在构建方案份额中扮演这一种合久必分、分久必合的轮回。

我这里有一个大牛交流群,里面每天更新新的视频新的技术,群里有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家。如果想学习Java工程化、高性能及分布式、深入浅出。性能调优、Spring,MyBatis,Netty源码分析的朋友可以加Java进阶群:454377428,群里有阿里大牛直播讲解技术,以及Java大型互联网技术的视频免费分享给大家

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:何去何从,将要到临的2018有如何的只求