2020年大厂青睐的前端知识介绍

近年来，前端的发展日新月异。前端由最初的html、css、js和占据垄断地位的jQuery，逐渐工程化，增加了许多知识和概念，前端开发逐渐向泛客户端开发发展。

我们来介绍一下现在最流行的前端技术有哪些。

 

一、Typescript

ts是js的超集，在js的基础上增加了类型系统和ES6+的支持。

js是弱类型的语言，增加类型系统后便可以在编译时就对程序中的错误进行校验，无需到运行时再进行debug。

ts支持ES6+的新特性，ts会将新特性都编译成ES3的代码。

使用ts进行开发，可以完全不使用ts的语法，直接使用js，在开发过程中一点一点的学习和使用ts的语法即可。

使用ts进行开发，看似需要加入一些另外的代码，但是这与Java的单元测试一致，投入与产出是成正比的。

 

二、服务端渲染

当前使用的方式主要是客户端渲染（CSR，Client Side Rendering），但是使用CSR在下载htm和js、渲染组件时会造成较长时间的白屏。

因此，服务端渲染（SSR，Server Side Rendering）便提出来了。

SSR是把第一次渲染由客户端转移到服务端，从而减少白屏时间。

React使用next.js来实现SSR，Vue使用nuxt.js来实现SSR。

更进一步，还有服务端预渲染（SSG，Static Site Generator）的概念，这里不做详细介绍了。

 

三、Serveless

Serveless并非真正的无服务器，而是开发者无需关心Server上的一些兼容性、维护问题，仅需关心业务本身。

Servless包括FaaS（Function as a Service）和BaaS（Backend as a Service）。

以小程序云开发为例，开发者可以通过http直接对数据库和文件进行增删改查。

 

四、Flutter

Flutter目前可以用于开发安卓和ios的APP，还有Web端。其推出目的是为了前端一统。

在Flutter出现之前，APP开发主要是采用H5（WebView+JSBridge）和RN。

H5的性能跟APP相差很多，但是H5页面具有灵活性。

混合开发时，使用原生的WebView组件嵌入单独部署的H5页面，若H5页面需要调用照相机等设备，则原生通过JSBridge向js提供API。

RN是打包成js bundle，在启动APP时，通过JIT（Just In Time）解析成原生应用。

相较之下，Flutter是在编译的时候就编译生成（AOT，Ahead Of Time）了原生应用，进一步提高了APP的性能。

Flutter采用的是谷歌自己开发的语言——Dart（突进）。

 

五、多端统一开发方案

如今，小程序平台层出不穷，如何一次开发，多端运行成为重要的问题。

于是，出现了小程序框架taro（京东研发，React生态）和uni-app（Vue生态）。

实现原理即比较小程序平台的差距，将某个平台的代码分析生成AST（Abstract Syntax Tree，编译原理的知识），再翻译成另一个平台的代码。

谷歌拥有自己的轻应用——PWA，所以不涉足小程序开发框架。

 

六、前端工程化

如今，前端工程化包括创建项目、编码、测试、提交、部署的流程步骤。每个节点都可以用使用一些小工具。

创建项目可以使用Plop，编码可以使用webpack或gulp，提交可以使用Git hooks，部署可以实现CI（持续集成）/CD（持续发布）和自动发布。

 

七、前后端分离最佳实践

如今，前端的边界不断模糊，甚至需要负责服务端的应用层部分，进行请求合并和转发等操作。

这便是最近提出的BFF（Backend For Frontend）架构。在这个过程中，node.js则成为了重要的知识。