zoukankan      html  css  js  c++  java
  • 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则成为了重要的知识。

  • 相关阅读:
    HDU 5585 Numbers
    HDU 3308 LCIS
    POJ 2991 Crane
    POJ 1436 Horizontally Visible Segments
    POJ 3667 Hotel
    HaiHongOJ 1003 God Wang
    【SDOI 2008】 递归数列
    5月19日省中提高组题解
    【HDU 1588】 Gauss Fibonacci
    【POJ 3233】Matrix Power Series
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12886356.html
Copyright © 2011-2022 走看看