阅读 143

2019年大前端年度总结

近年来,Web 应用在整个软件与互联网行业承载的责任越来越重,软件复杂度和维护成本越来越高,Web 技术,尤其是 Web 客户端技术,迎来了爆发式的发展。

在过去的一年中,前端开发的世界再次迅速发展,本文总结了2019年以来前端和Web开发的主要事件和趋势。

关键词:TypeScript、PWA、WebAssembly、Serverless、Flutter、CSS-in-JS
复制代码

TypeScript 使用率激增

2019年是TypeScript的一年。TypeScript不仅成为在JS代码中添加数据类型的最佳选择,而且许多开发人员会选择在个人项目和工作中使用它。

在年初发布的StackOverflow调查中,TypeScript与Python并列第二,成为最受欢迎的语言,仅次于Rust。可以预见,在2020年,它的地位将进一步攀升。

最受欢迎的语言.jpg

TypeScript 已经席卷了整个 Web 开发世界——前端和后端皆是如此。一些开发人员认为 TS 只是跟风炒作的产物,觉得它会步 CoffeeScript 后尘;但 TypeScript 已被证明可以解决 JS 开发人员面临的一大核心问题,而且它的使用率看来只增不减。

TypeScript 与所有主流文本编辑器的集成,为 Web 开发人员提供了更好的开发体验。JavaScript 开发人员将 TypeScript 视为一种工具,它可以减少错误,还可以通过(提供自带描述的)类型和对象接口更轻松地读取代码。

值得注意的是,TypeScript 在 2019 年的 NPM 下载量超越了 React,其流行程度可见一斑。此外,它的下载量也比 Flow 和 Reason 等竞争对手高得多。

下一代Web应用:PWA

老生常谈,我们先对比一下生活中WebAPP 和 原生APP的优劣:
  1. web APP 对比 原生APP 的优势,开发成本低,适配多种移动设备,不用IOS 安卓多套代码,迭代更新容易,省去了审核、发包、各种渠道发布带来的时间损耗,无需安装成本,拿来即用。
  2. 当然原生APP也有它独到的优势,这些web app所没有的优势我们也不知道以后会不会有突破!

PWA解决的问题

  • 能够显著提高应用加载速度
  • 甚至让 web 应用可以在离线环境使用 (Service Worker)
  • web 应用能够像原生应用一样被添加到主屏、全屏执行 (Web App Manifest)
  • 进一步提高 web 应用与操作系统集成能力,让 web 应用能在未被激活时发起推送通知 (Push API 与 Notification API) 等等。

推送Push Notification Push API 的出现则让推送服务具备了向 web 应用推送消息的能力,它定义了 web 应用如何向推送服务发起订阅、如何响应推送消息,以及 web 应用、应用服务器与推送服务之间的鉴权与加密机制;由于 Push API 并不依赖 web 应用与浏览器 UI 存活,所以即使是在 web 应用与浏览器未被用户打开的时候,也可以通过后台进程接受推送消息并调用 Notification API 向用户发出通知。

WebAssembly成为连接Web的第四种语言

什么是WebAssembly? WebAssembly 是由主流浏览器厂商组成的 W3C 社区团体 制定的一个新的规范。 它的缩写是".wasm",.wasm 为文件名后缀,是一种新的底层安全的二进制语法。

可以接近原生的性能运行,并为诸如C / C ++等语言提供一个编译目标,以便它们可以在Web上运行。它也被设计为可以与JavaScript共存,允许两者一起工作。

能突破前端3D game 、 VR/AR 、 机器视觉、图像处理等运行速度瓶颈。

WebAssembly 是一种新的字节码格式,目前主流浏览器都已经支WebAssembly。和 JS 需要解释执行不同的是,WebAssembly 字节码和底层机器码很相似,可以快速装载运行,因此性能相对于 JS 解释执行而言有了极大的提升。也就是说WebAssembly 并不是一门编程语言,而是一份字节码标准,需要用高级编程语言编译出字节码放到 WebAssembly 虚拟机中才能运行,浏览器厂商需要做的就是根据 WebAssembly 规范实现虚拟机。

有了 WebAssembly,在浏览器上可以跑任何语言。从 Coffee 到 TypeScript,到 Babel,这些都是需要转译为 js 才能被执行的,而 WebAssembly 是在浏览器里嵌入 vm,直接执行,不需要转译,执行效率自然高得多。

WebAssembly成为连接HTML,CSS和JavaScript的Web第四种语言。经过一年的平静之后,WebAssembly在12月初被 W3C 联盟正式收编,并推荐的Web语言。

2019年,很多的公司都开始投入人力进行WebAssembly的学习个改造,相信2020年WebAssembly会经历爆发式期。

Serverless火爆

Serverless 的火爆是乎可以归因于前端。因为 Serverless 能够较完美的⽀持Node.js,使⽤ Serverless 帮助前端开发者解决了使用Node.js 过程中的诸多问题。当前的前端工程师大多都是科班出身,虽不能和正宗的服务端开发同学比,但也可写很多服务端层的业务逻辑。当前已经有很多公司在做 BFF 层,来满足这部分诉求,但依旧摆脱不掉运维、机器分配 这条拦路虎。随着 Serverless 的逐步落地,BFF 这层的代码会摆脱运维、机器分配等复杂的问题,同时大概率会由前端同学写这部分代码,服务端同学专注中台系统的实现。从业务上说,业务的试错成本也会大幅度降低。

随着 Node.js 成为前端开发者必备技能之后,云计算的不断普及会让Serverless 触不可及。当越来越多的开发者尝到研发⾼效的甜头之后,Serverless 必将对前端的研发模式产生变化。

同时,使用Serverless的同学一定会使用 TS。这也意味着,2020 不写 TS 可能真的就 Out 了。

Flutter爆炸发展元年,挑战React Native跨平台框架王者地位

Flutter在React Native发行2年后发布,目前Star数已81.1k, 超过React Native的83.2k指日可待。 但其的issue数,已稳定保持了多年的5000+。

Flutter没有像React Native那样与React Web开发人员一样拥有开发人员社区来实现共同进步,所以这个受欢迎程度是实打实的:Flutter正在使自己成为最佳的跨平台框架。

Flutter与React Native对比.jpg

CSS-in-JS势头强劲

如前所述,Facebook甚至可能将CSS-in-JS视为前端的未来,并将发布自己的库。 在传统应用中,我们添加样式需要这么做:
// Component JS file
const MyComp = ({ isActive }) => {
  const className = isActive ? 'active' : 'inactive';
  return <div className={className}>HI</div>
}
// CSS file
.active { color: green; }
.inactive { color: red; }
复制代码

使用CSS-in-JS,你将不再管理CSS类,只需传递props给样式化的组件,它便使用声明性语法处理动态样式。代码更加简洁。 现在,所有内容都像正常的React代码一样读取:

const Header = styled.div` 
  color:$ {({isActive})=> isActive吗?'green':'red'}; 
`; 
const MyComp =({isActive}} =>(
  <Header isActive = {isActive}> HI </ Header> 
)
复制代码

CSS-in-JS两个主要的库是:styled-components和emotion。

2020年的趋势预测

  1. TypeScript成为创业公司和新项目的默认选择。未来项目会越来越复杂,用了 TS 项目的风险会可控很多。
  2. 随着代码拆分和PWA的进一步利用,性能仍然是Web上最重要的一部分。
  3. WebAssembly变得越来越普遍,得到了实际采用,并被用于产品中。
  4. Flutter可能会取代React Native成为构建跨平台移动应用的最佳方式。
  5. CSS-in-JS可能会成为默认的样式设置方法,而不是普通的CSS。

后记: 小伙伴们,如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果觉得本文还不错,记得点个赞哦! 本文首发地址为: Vae's Blog