【CSDN编者按】2018 年前端开发继续飞速发展,前端工程师的薪资更是水涨船高,本文就整理了 2018 年度前端开发领域的重大事件,包括:WebAssembly 发布标准核心的 1.0 版本;React、jQuery、Angular 和 Vue 分占下载量前四位;React 继续统治网页开发领地;Vue 延续 2017 年的热度持续火爆;Javascript 未来的发展趋势等等…希望借助此文,能帮助前端开发者站在 2019 的技术高地,拔得头筹。下面来一探究竟。
作者 | Trey Huffine
译者 | 苏本如
责编 | 郭芮
出品 | CSDN(ID:CSDNnews)
以下为译文:
WebAssembly 发布标准核心的 1.0 版本
WebAssembly通常被认为是网页技术的未来。它通过在网页上运行二进制格式的文件来提高网页性能、减小文件大小和支持多种语言的网页开发。
到2017年底,所有主流浏览器都宣布支持WebAssembly,随后WebAssembly在2018年2月发布了下面3个重大更新:
升级核心规范至1.0版;
支持WebAssembly的JavaScript接口;
支持WebAssembly的Web API。
React、jQuery、Angular 和 Vue 占据下载量前四位
下图显示了前端开发库下载量的最新变化:
React 延续统治地位!
React已经主导了网页开发多年,它在2018年也没有放缓它的步伐。根据Stackoverflow的调查,它仍然是最受欢迎的代码库之一。
React的核心团队在升级代码库和增加新特性上非常积极。在整个2018年,我们看到了React的新版本v16上出现了很多新特性,包括新的lifecycle方法、新的上下文API、指针事件、Lazy函数和React.memo方法。然而,最受关注的两个特性是React Hooks和Suspense API。
React Hooks已经收到了很多正面的反馈,许多开发人员都喜欢这个新特性。React Hooks是用useState函数向功能组件添加状态的一种方法,它还可以管理lifecycle事件。此前,
在2018年React大会上,主讲人Ryan Florence就公开展示了使用React Hooks让他的示例代码干净了90%,最新版本的React其中的几个hooks api可以大幅减少react functional组件的代码量。
React Suspense也是一个很大的改变,它提供了一个在React组件内部管理数据获取的方法。React Suspense作用于Lazy函数背后来管理组件的代码分割,它的最终目标是能够通过Suspense API来管理所有异步加载,例如API请求,它还允许缓存请求的结果。
下面的这个示例展示了当isFetching标志值被设置为true时屏幕上出现了许多等待加载的“转圈圈”效果。使用Suspense可以对UI进行细粒度的控制,通过fallback组件来显示哪个组件正在加载,还要等待多长时间完成加载以及如何管理导航。
许多人甚至认为有了React Suspense,Redux就不需要了。
想了解React Suspense的更多信息,可以看看Dan Abramov的关于使用Suspense API来构建应用程序的演讲:https://medium.com/@dan_abramov。
Vue 的 Github 点赞数力压 React
Vue自2017年爆发后,在2018年持续火爆。事实上Vue在GitHub上收到的点赞次数甚至已经超过了React。
虽然Vue深受喜爱,它的实际使用量仍然比React和Angular落后不少。然而Vue拥有狂热的用户群,而且这个用户群还在不断增长,这样看来Vue会在未来几年内迅速成为一股不可忽视的力量。
Evan You(Vue 的创作者)建议大家尝鲜 Vue 3.0
Vue的新版本3.0正在开发中。其创作者Evan You在2018年11月份的Vue多伦多大会上对新的3.0版作了介绍,他的演讲的幻灯片已经在网络流传,演讲视频也很快就能看到。
Angular 继续流行,新版本 v7 已发布
Angular在10月份发布了新版本v7。从早期的采用MVC架构的AngularJS 到现代的使用组件的Angular开发库,Angular成长显著,它的使用量也随着这种成长不断增加。
虽然Angular不像我们从React和Vue上看到的那样有众多狂热的粉丝,但它仍是专业项目的热门选择。许多开发人员在使用React时会感到疲劳,因为它要求工程师在管理构建pipeline的同时,做出许多依赖项和架构上的决策。
而Angular不一样,为了帮助保证代码规范化,Angular不需要开发人员作很多决定。Angular是一个高度规范的完整框架,CLI(命令行接口)管理所有构建步骤。对于专业环境的另一个好处是Angular需要TypeScript,Angular认为TypeScript对前端开发来说不仅价值巨大,而且前景美好。
注:@angular/core表示新的Angular,angular表示旧的AngularJS。
GraphQL 热度持续提升,继续挑战 REST
尽管GraphQL已经在像GitHub这样的主流公司占据了一席之地,但它并没有像某些人预测的那样迅速起飞。
根据StateofJS的调查结果,只有1/5的前端开发人员使用过GraphQL,然而令人吃惊的是,62.5%的开发人员听说过GraphQL并希望使用它。
CSS-in-JS 的应用持续增加
前端网页开发感觉已经走上了一条用JavaScript统一所有内容的道路,这在采用CSS-in-JS中得到了体现,其中样式是使用JavaScript字符串创建的。这允许我们通过导入/导出使用普通JS语法来共享样式和依赖性。它还简化了动态样式,因为CSS-in-JS组件可以将props插入其样式字符串。
下面是一个经典CSS与CSS-in-JS中对比的例子。
使用经典CSS管理动态样式,我们必须管理组件中的类名,并基于state/props对其进行更新,我们还需要一个CSS类来管理这些变量:
// Component JS fileconst MyComp = ({ isActive }) => { const className = isActive ? ‘active’ : ‘inactive’; return
HI
}// CSS file.active { color: green; }.inactive { color: red; }
而使用CSS-in-JS,我们不再需要管理CSS类。我们只需将props传递给样式化组件,它就可以处理动态样式化。这样做代码更加清晰,并且通过允许CSS基于props管理动态样式,我们可以更清楚地分离对样式和React的关注。现在的代码读起来就像正常的React和JavaScript代码一样了:
const Header = styled.divcolor: ${({ isActive }) => isActive ? 'green' : 'red'};
;const MyComp = ({ isActive }} => (HI)
CSS-in-JS的两个主要库是styled-components和emotion。Styled-components已经存在很长时间了,并且已经得到很多的应用,Emotion正在迅速普及,因为许多开发人员发现它是首选的库。事实上,Kent C.Dodds甚至不再更新他的CSS-in-JS库(Glamorous)以支持Emotion。
Vue还在使用单文件组件时,通过将scoped属性添加到组件的style标签上,来实现对有作用域的CSS的支持,Vue将使用CSS-in-JS技术来限定样式的作用域,以便它们不会被其他组件误用。
Angular也通过“视图封装”来支持CSS作用域,这是默认打开的。
CLI 工具让开发者变得轻松
人人皆知,紧跟最新的开发库,正确地配置应用程序,以及做出正确的架构决策,这一切会让人变得精疲力竭。这种痛苦催生了CLI(命令行界面)管理工具包,保证了开发人员能将精力集中在应用程序上。
CLI工具包已经成为开发人员在2018年创建应用程序的主要方式。流行的框架包括Next.js(React的服务端渲染(SSR))、Create-React-App(客户端React)、Nuxt.js(Vue的服务端渲染(SSR))、Vue CLI(客户端Vue)、Expo CLI for React Native,当然默认地也包括Angular。
静态网站随着前端简化和性能优化不断增长
随着JavaScript的不断进化,每个人都喜欢学习最新最棒的开发库,但现在事情已经解决了,我们意识到并不是每个网站都需要一个复杂的单页应用程序(SPA)。这就导致了静态网站生成器的不断增长。
这些工具允许开发者在喜欢的库(如React或Vue)中编写代码,但是在构建期间生成静态HTML文件,允许我们立即为用户提供完全构造的页面。
静态网站很棒,因为它们是性能和简单的理想组合。通过构建时生成的HTML文件,我们可以立即向用户发送页面,而无需处理服务端渲染(SSR)或客户端渲染(CSR)代码,从而允许他们几乎立即加载网页。然后,客户端下载必要的JavaScript文件,以便马上看到页面效果。
静态网站非常适合构建个人网站或博客,但它们可以很容易地扩展到更庞大的应用上。我们已经看到了构建静态网站的流行框架的兴起,比如Gatsby, React Static和VuePress。
事实上,静态网站已经变得如此流行,以至于Gatsby实际上已经成立了一家公司,并在去年获得了风险资金以资助其开源库的开发。
无服务器架构一直是 Web 开发的流行语
随着静态网站的日益普及,我们也看到后端在不断发展以迎合这种变化。在过去几年中,无服务器架构一直是Web开发中的流行语,因为它能够将客户端和服务器端代码解耦,以较低的成本运行。
无服务器思想的实际应用是JAMStack(使用JavaScript、API和Markup构建的技术堆栈)。JAMStack建立在上一节讨论的静态网站概念之上。由于预先构建的模块化标记,它能够快速实现网页加载,并通过使用服务器端可重用的API,让静态网站在客户端成为一个动态SPA。在2018年,我们甚至看到了第一次JAMStack的编程马拉松——freeCodeCamp、Netlify和GitHub联合举办了一场现场和连线编程马拉松,允许人们在GitHub总部编写代码或与世界各地的其他开发人员协同工作。
为了理解JAMStack构建的网站在保持性能的同时可以扩展到多大规模,Quincy Larson向大家解释了freecodecamp.org网站是如何用JAM构建出来的:https://medium.com/@quincylarson。
TypeScript 将取代 JavaScript!
JavaScript因为没有静态变量而受到批评。试图纠正此问题的两个主要开发库是TypeScript和Flow,TypeScript似乎更受欢迎。
事实上,StackOverFlow的调查显示,TypeScript以67%对61.9%的评分打败了JavaScript而成为最受欢迎的开发语言。而根据State of JS的调查显示,超过80%的开发人员希望使用TypeScript或者已经很开心地使用它,而只有34%的开发人员正在使用或想要使用Flow。
所有迹象表明,TypeScript是解决JS中静态变量问题的最好解决方案,很多人不会想用JavaScript。TypeScript的npm下载量在2018年大幅增长,而Flow的下载量则无起色。
TypeScript看起来正在从狂热的崇拜转向广泛的应用。
AMP(加速移动页面)实现了快速增长
AMP是专门为移动设备构建的页面,在2018年得到了大幅的增长。
Webpack4 于 2018 年初发布
Webpack 3发布后仅仅8个月,Webpack 4就面世了。
Webpack 4继续追求简单化和更快速的构建,它声称作了98%的改进。它增加了很多默认配置项,在没有插件的情况下处理更多的功能,并且不再需要启动配置文件。Webpack现在还支持WebAssembly,并允许开发者直接导入WebAssembly文件。
Babel 发布了新版本 7.0
Babel 6发布近3年后,版本7.0在2018年发布了。
Babel开发库能将符合ECMAScript6(ES6)标准的JavaScript代码向下转换成符合ES5标准,从而使我们的JavaScript代码能跨浏览器兼容。Babel在介绍新版本的文章中指出,版本7.0在如下方面作了改变:“运行更快,提供了升级工具,提供了JS配置文件,支持配置‘覆盖’,提供了更多代码压缩的选项,支持JSX片段,支持TypeScript,提供新的proposals等等!”
Babel也开始在@babel命名空间下限定其包的作用域。
VS Code 支配文本编辑器/IDE 领地
对于追溯到Vim和emacs的开发人员来说,文本编辑器和IDE是主战场。随着Electron的诞生,基于插件的开源编辑器爆炸式增长,Atom占据了早期的市场份额。
然而,VS Code最近被证明是2018年开发人员和整体领先编辑的最佳选择。
2018 年度前端领域最具影响力的文章纵览
下面是2018年的一些最佳文章:
https://levelup.gitconnected.com/top-web-development-articles-of-2018-bd5c3900110b
Addy Osmani展示了2018年JavaScript的成本(性能)分析:
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4
从11月的React大会上我们了解React的未来:
https://reactjs.org/blog/2018/11/13/react-conf-recap.html
Airbnb分享他们两年来使用React Native的体验:
https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
Google让我们一窥Google Photos的UI构建:
https://medium.com/google-design/google-photos-45b714dfbed1
Microsoft Edge决定采用Google网页浏览器Chromium的技术:
https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/
Ryan Dhal(Node创建者)分享了他在Node.js上犯的错误:
2019 年度大预测!
随着基础的建立和不断改进的网络体验,WebAssembly将焕发青春;
React继续领跑,Vue和Angular的用户持续增长;
CSS-in-JS取代普通CSS,成为默认的网页样式化方法;
原生网页组件会被开发人员再次重视;
性能仍是关注焦点,而PWA和代码分割将成为每个应用程序的标准;
PWA的采用使Web应用具备离线能力和无缝的桌面/移动体验,更接近原生App;
CLI工具和框架的应用将持续增长,以便开发人员集中精力在功能实现上;
更多的公司将采用具有统一代码库的移动解决方案,如React Native或Flutter;
主流容器化工具(如Docker、Kubernetes)在前端开发中将变得更加普遍;
GraphQL一飞冲天,将被更多的公司采用;
TypeScript取代标准JavaScript,成为默认选择;
虚拟现实通过使用诸如A-Frame、React VR和Google VR向前大步迈进。