Skip to content

架构演进与架构师

前端架构升级之路

架构演进总览

  • PC时代 -> 移动时代 -> 智能时代

前端技术发展轨迹

  • 后端MVC模式 + 前端静态页面

  • Ajax 技术：前后端分离 + 前端MVC框架

    • Ajax (Asynchronous Javascript And XML)技术出现，标识前端从 Web1.0 到 Web2.0 的重要演进
    • Backbone: 第一个前端MVC框架

  • 前后端分离 + 前端MVVM框架

    • MVVM 特点：双向数据绑定或自动渲染更新
    • 简化数据与视图的依赖
    • 解决数据频繁更新的问题、虚拟DOM理念

  • 前后端分离 + SPA 单页面应用

  • NodeJS技术： 前后端同构 + SSR

    • Vue/React/Angular 三足鼎立， NodeJS 打破前端技术体系

    • 前端实现BFF层

      • 前端工程师可以自行编写后端服务，实现数据的适配（接口编排、字段裁剪）
      • 前端工程师可以实现SSR（服务端渲染）技术
      • 前端工程师可以实现后端各种领域服务

    • Vue/React 推出同构方案：SSR 架构模式

  • Serverless： 前端向后工程化、基础设施完善的开发体系

    • Serverless 理念解决问题：前端（NodeJS）无需关注服务器的运维、部署、发布、监控。
    • 将服务器的运维功能交给Serverless平台进行管理；
    • 研发人员只专注于实现云函数，即可完成功能开发。

里程碑（代表性技术）

  • 数据源聚合和字段裁剪方案（GraphQL技术）

  • UI 搭建技术（组件化架构）

    • 组件化方法（原子组件）
    • 一体化组件方案（模版库）
    • 配置化解决方案（Low code/No code）
    • 搭建方案（机器学习智能化）

  • 单体应用的工程方案

    • 微前端：前端应用聚合

  • 平台化方案

    • PWA
    • 小程序
    • 快应用

  • 移动端跨端方案

    • PhoneGap
    • Ionic
    • React Native
    • Flutter

现代化的前端技术架构

  • 当前背景

    • 始终无法脱离对应终端和宿主依赖
    • javascript 已发展成为成熟语言，还会引入新的特性和功能：TypeScript、Elm、PureScript、ReasonML
    • 前端的用户体验和富媒体技术愈发成为应用关键

  • 技术方向特点

    • 1、组件化 是基本的UI架构模式
    • 2、依托于SSR同构渲染技术以及心智负担的最小化
    • 3、数据状态管理方案将会以职责单一、minimal necessary 为目标：以 组合式函数 为理念；而不以双向数据流、单向数据流的区分为重点。
    • 4、前端向传统后端领域进军是必然，CSR/SSR可切换的协作方案

渲染方案演进视角

  • CSR

    • CSR渲染流程

      • 1) Server Sending Response to Browser
      • 2) Browser Downloads JS
      • 3) Browser executes React/Vue
      • 4) Page Now Viewable and Interactable

    • CSR渲染架构特点

      • 实现了前后端架构分离，实现前后端职责分离
      • TTFB 时间最小，FCP/FMP 时间不理想

    • 图：fe-csr-time

    x

  • SSR

    • SSR渲染流程

      • 1) Server Sending Ready to be rendered HTML Response to Browser
      • 2) Browser Renders Page, Now Viewable, Browser Downloads JS
      • 3) Browser executes React/Vue
      • 4) Page Now Interactable

    • 图：fe-ssr-time

    x

    • 基于hydration(注水) 的 SSR 和 CSR 的结合方案

      • hydration(注水阶段)：与同构应用中数据的获取和消费相关
      • dehydrate(脱水阶段)：在服务端返回 HTML 字符串的时候，将数据 JSON.stringify 一并返回

    • 流式SSR渲染（Streaming SSR）

      • 允许服务端通过Stream的方式，向浏览器发送HTML内容

      • 执行流程：理想情况仅发送两个请求

        • 1）请求HTML：Server 先返回骨架屏的HTML，再返回所需数据或带有数据的HTML，最后关闭请求。
        • 2）请求 JS：JS 返回并执行后就可以交互。

      • 为什么要叫“流式服务端渲染”？

        • 因为返回HTML的那个请求的响应体是流（stream）；
        • 流会先返回如骨架屏/Fallback的同步HTML代码；再等待数据请求成功，返回对应的异步HTML代码；都返回后，才会关闭此HTTP连接。

    • 渐进式SSR渲染（Progressive SSR）

      • 允许在hydrating没有完全结束前，部分已渲染并完成注水的页面内容，可以优先完成交互响应

  • NSR

    • 通过 Native 渲染生成 HTML，并缓存在客户端
    • NSR 把 SSR 的渲染工作放在一个个独立的移动设备中；并利用离线存储技术，实现了页面的预加载，同时又不会增加额外的服务端压力。

  • ESR

    • 边缘渲染，借助了最近比较火的 “边缘计算” 能力。

    • 边缘计算

      • 是指在靠近物或数据源头的一侧，采用网络、计算、存储、应用核心能力为一体的开放平台，就近提供最近端服务。
      • 其应用程序在边缘侧发起，产生更快的网络服务响应，满足行业在实时业务、应用智能、安全与隐私保护等方面的基本需求
      • 边缘计算处于物理实体和工业连接之间，或处于物理实体的顶端。而云端计算，仍然可以访问边缘计算的历史数据

    • ESR 在 CDN 上缓存页面的静态部分，当用户访问页面时可以快速返回给用户静态内容。

    • 同时，在CDN节点上也发起动态内容请求，在动态内容获取后，利用流的方式，继续返回给用户。

像架构师一样思考

架构师职责

  • 负责架构设计和核心开发、工程方案调研和选型、团队管理和人才梯队建设。

架构师思考题

  • 如何打造顺滑的工程化流程，提升研发效率？
  • 如何建设稳定可靠的基础设施，保证业务产出？

突破技能瓶颈

  • 背景：前端技术有着与生俱来的混乱，也有与之抗衡的规范。

  • Bad Case

    • 短平快、碎片化内容；
    • 暂时缓解前端学习焦虑的精神鸦片。

  • “好项目”

    • 1）从0到1打造应用的基础建设
    • 2）制定应用的工程化方案
    • 3）实现应用的构建和发布流程
    • 4）设计应用中的公共方法和底层架构

架构师必备技能

  • 团队不同于单打独斗，如何设计工作流程，如何打造一个众人皆赞的项目根基？
  • 项目依赖错综复杂，如何做好依赖管理和公共管理？
  • 如何深入理解框架，做到精通框架原理和技术选型？
  • 从最基本的网络请求库说起，如何设计一个稳定灵活的多端 Fetch 库？
  • 如何借力Low Code/No Code，实现智能化应用搭建方案？
  • 如何统一中后台项目架构，实现跨业务线的产品研发效率提升？
  • 如何开发设计一套适合业务的组件库，封装分层样式，最大限度的复用性，提升开发效率？
  • 如何制定跨端方案，Write Once，Run Everywhere 是否真的可行？
  • 如何处理各种模块化规范，以及精确做到代码拆分的最佳实践？
  • 如何区分开发边界，如何更好的利用NodeJS方案开疆拓土？