9778818威尼斯官网:前端大事件和大势回想,今年

熟悉前端开发的人应该都知道,最近几年,各种前端框架层出不从,H5开发模式也越来越流行,大前端时代也已经到来。每一年各种前端技术也应运而生,快速掌握最新的前端技术也是每一个开发者不可或缺的一门技能。如今也是新的一年的到来,去年,也就是2018年,大家也都知道,很多前端技术已成为大势所趋,比如Node.js,一门可以让Javascript运行在服务端的技术,已经逐渐发展成一个成熟的开发平台,吸引了众多的开发者;又比如三大前端框架Vue.js, AngularJS以及React.js各有特点,各有所长,使用的人也越来越多,还有Stencil,可以为你的所有应用构成一个组件库等等。所有这些新兴的前端技术,使我们的开发越来越方便。今天在这里,我就来给大家谈谈2019年的8个Web开发的趋势,希望能给各位带来一些有用的信息。

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

2017 前端技术发展回顾

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

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

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

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

9778818威尼斯官网 1

React 16 和 MIT 协议

9778818威尼斯官网 2React 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

1、React 16 和 MIT 许可证

No.1 Html, CSS, JS & Node.js

9778818威尼斯官网 3

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)

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

很多人可能会问,说Html,CSS,JS作为一种趋势不太好吧。为什么把Html, CSS, JS放在第一个?因为它们永不过时,并且是前端开发的基础,而且标准也在逐年更新,而且每年学习前端技术的人也越来越多,并且他们接触的第一门前端技术就是这三样,所以我把它们放在了第一位。之所以把Node.js也放在了这里,是因为它变得越来越重要,并且也逐渐成为了以后前端开发需要的基础技术,将在前端基础中占有一席之地。你们可以随便翻看市场上的前端招聘信息,很多都把会Node.js作为招聘条件放在了前列。所以,现在学好Node.js绝对是明智之举!No.2 GraphQL

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

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

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

Yarn

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

GraphQL,一种用于API的查询语言,你只需要向你的API发出一个GraphQL请求,就能准确获得你想要的数据。而且你可以通过GraphQL,只需要用一个请求,就可以获取到多个资源,即使在比较慢的网络连接下,使用GraphQL的应用也能表现得足够迅速。为什么要使用GraphQL?因为它简单,优美吗?这当然也是它作用的一部分,更是因为它具有极大的灵活性以及给我们的应用带来的质的提升!No.3 三大前端框架 Vue.js/Angular/React.js

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

CSS 网格布局

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

CSS Grid Layout

>> 相关阅读:

尽管它们已经成为了2018年的前端开发趋势,然而2019年它们的发展势头也定不会减,反而会越来越流行。

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

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

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

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

React 16.0.0 发布,去除专利条款,改用 MIT 许可证

9778818威尼斯官网 4

React v16.0 – React Blog

Serverless 架构

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

A crash course on Serverless with Node.js

Facebook 被集体“声讨”,要求更改 ReactJS 许可

2017年最受欢迎的框架技术

Progressive Web Apps

Vue.js 在流行中继续成长

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

9778818威尼斯官网 5

9778818威尼斯官网 6

9778818威尼斯官网 7

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

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 和一群热情的贡献者9778818威尼斯官网,创建),它封装了 glamor 库。查看这篇文章,一篇关于许多CSS-in-JS 的可选方案的总结。

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

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

2018年最受欢迎的框架技术

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

静态网站生成方案

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

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

Modern static site generation with Gatsby

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

上面两张图分别是2017年和2018年stackoverflow做的关于年度最受欢迎的框架技术调查。从上面那张图中我们可以看见,Angular在2017年最受欢迎的框架技术中排名第二,React排名第四。在下面这张图里面,从5万多分调查中我们可以发现,在最受欢迎的框架技术中,除了Node.js排在第一之外,Angular和React分别以36.9%和27.8%排在了第二位和第三位。从而可以说明这些前端框架技术的流行程度,而且React技术的流行程度也是逐年提升的。No.4 Stencil

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

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

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

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

GraphQL: A query language for APIs.

>> 相关阅读:

我从它的官网介绍中摘抄了一段关于它的描述:Stencil结合了最流行的前端框架的最佳概念,并生成100%基于标准的Web组件,可在任何现代浏览器中运行。这意味着什么?我们都知道,如今大前端时代已经到来,html css js开发随处可见,不仅仅是桌面应用,所有的手机应用现在都可以使用H5技术开发,使用Stencil,可以帮助我们快速构建想要的组件,并且这些组件可以在任何平台或者设备上运行,不需要我们考虑兼容性。而且它可以与任何主要框架(React&Angular&Vue)一起使用,或者根本不需要任何框架。No.5 JAMStack

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

React Router 4

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

9778818威尼斯官网 8

您的第一个 Progressive Web App

基于客户端JavaScript,可重用API和预建Markup的现代Web开发架构

Yarn

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

Chrome Web App 已被谷歌干掉 未来将主推 PWA

JAMstack是指使用JavaScript、API和Markup构建的技术堆栈,JAM是JavaScript、API和Markup的简称,前面第一个字母缩写,JAMstack一种基于客户端JavaScript,可重用API和预构建Markup的现代Web开发架构,需要符合下面三个标准:

CSS 网格布局

TypeScript 和 Flow

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

9778818威尼斯官网 9

JavaScript:请求/响应周期中的任何动态编程都由JavaScript处理,完全在客户端上运行。这可以是任何前端框架,库,甚至是轻量JavaScript。

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

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

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

gitconnected – The community for developers and software engineers

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

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

API:所有服务器端进程或数据库操作都被抽象为可重用的API,使用JavaScript通过HTTPS访问。这些可以是定制的或利用第三方服务。

CSS Grid Layout

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 收藏 评论

9778818威尼斯官网 10

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

Markup:模板化标记应该在部署时预先构建,通常使用内容站点的站点生成器或Web应用程序的构建工具。为何JAMstack会逐渐流行?

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

>> 相关阅读:

更好的性能:为什么要在部署时生成页面时等待页面动态构建?当谈到最小化第一个字节的时间时,没有什么能比通过CDN提供的预构建文件更好。

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

npm v5.0.0 正式发布,改进了稳定性

安全性更高:将服务器端进程抽象为微服务API,可以减少攻击的表面区域。您还可以利用专业第三方服务的专业知识。

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

Facebook 新推 Yarn,或取代 npm 客户端

更便宜,更容易扩展:当您的部署相当于可以在任何地方提供服务的一堆文件时,扩展就是在更多地方提供这些文件的问题。CDN是完美的,通常包括扩展他们的所有计划。

Serverless 架构

9778818威尼斯官网 11

更好的开发者体验:松散耦合和控制分离允许更有针对性的开发和调试,并且为站点生成器扩展选择CMS选项消除了为内容和营销维护单独堆栈的需要。No.6 PWA(Progressive Web Apps)

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

4、WebAssembly 受主流浏览器支持

渐进式Web应用程序是具有Web可用范围的用户体验,它们是:

A crash course on Serverless with Node.js

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

可靠 - 即使在不确定的网络条件下,立即加载并且永远不会显示downasaur。

Vue.js 在流行中继续成长

>> 相关阅读:

快速 -快速响应用户交互,丝般流畅的动画,没有乱七八糟的滚动。

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

主流浏览器都加入了 WebAssembly 支持

参与 - 感觉就像设备上的自然应用程序,具有身临其境的用户体验。

9778818威尼斯官网 12

抢先一步,Rust 构建版支持直接编译 WebAssembly

在如今用户至上的时代,开发出一款面向用户的应用,给予用户最好的体验,相信是所有互联网产品的初衷。PWA就能实现这样的需求。No.7 Serverless

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

9778818威尼斯官网 13

如今,Serverless已经在Github上获得了29222个star,就已经说明了它的流行程度。为什么要使用Serverless?使用Serverless,这意味着开发人员可以单独构建处理生产就绪流量的应用程序,他们不必主动管理其应用程序的扩展。他们不必配置服务器,也不必为未使用的资源付费。他们可以通过小型敏捷团队实现项目开展。

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

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

最终,无服务器是将您的精力集中在为用户提供价值的方面。升级Linux发行版不会为用户提供价值。管理RabbitMQ服务器不会为用户提供价值。运输产品为用户提供价值。No.8 AI/Bots

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

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

如今,人工智能,机器学习等技术越来越流行,2019年也不会例外。它们将在我们以后的生活中扮演着越来越重要的角色。如何使我们的应用变得更加智能?AI/Bots给出了答案。相信以后的Web应用也会变得越来越智能化。学习这方面的知识也变得越来越重要,这意味着在将来的竞争中拥有这些能力将会更加地受到企业的青睐!

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

>> 相关阅读:

好了,对于2019年8大Web开发趋势就介绍到这里了,谢谢大家的观看!

静态网站生成方案

Angular 5.0.0 发布,Web 前端框架

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

Angular 4.0.0 正式版发布, Web 前端框架

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

没有 Angular 3 ,Angular 4 计划2017年3月发布

Modern static site generation with Gatsby

6、Vue.js 继续流行

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

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

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

9778818威尼斯官网 14

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

>> 相关阅读:

GraphQL: A query language for APIs.

Vue.js 框架成为 WordPress 弃用 React 后的最佳选择

React Router 4

翻译 | 我们为什么以及是如何从 Angular.js 迁移到 Vue.js ?

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

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

9778818威尼斯官网 15

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

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

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

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

9778818威尼斯官网 16

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

8、静态网站卷土重来

TypeScript 和 Flow

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

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

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

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

9778818威尼斯官网 17

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

9、GraphQL 继续挑战 REST

gitconnected – The community for developers and software engineers

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

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

9778818威尼斯官网 18

2018,我们应该期待些什么

10、TypeScript 和 Flow 受追捧

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

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

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

9778818威尼斯官网 19

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

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

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

9778818威尼斯官网 20

GraphQL 正在并继续挑战 REST。

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

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

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

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

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

9778818威尼斯官网 21

裙289683894领取资料,交流学习

本文由9778818威尼斯官网发布于威尼斯官网,转载请注明出处:9778818威尼斯官网:前端大事件和大势回想,今年

您可能还会对下面的文章感兴趣: