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则成为了重要的知识。

  • 相关阅读:
    值得收藏的146条经典民间偏方[转]
    删除暴风文件夹内的stormliv.exe
    【转】VLAN技术浅谈
    [转载]双击.dsw文件时另开VC6.0,而不会关掉原来已打开的项目的解决办法(转载)
    JVM系列1:Java内存区域
    并发系列3:Lock锁以及核心类AQS
    并发系列1:并发基础知识
    JVM系列2:垃圾收集器与内存分配策略
    JVM系列3:类加载机制
    源码解析之AQS源码解析
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12886356.html
Copyright © 2011-2022 走看看