Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

228 lines (145 sloc) 22 KB

前端开发漫游指南

取名借鉴自:银河系漫游指南 开源世界旅行手册

在业界,“前端研发”基本上等价于“Web 前端研发”,Wikipedia 词条 Front-end web development 中给出的官方定义为:

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.

总体来说,“前端开发”就是使用 HTML、CSS、JS 技术给一个网站或 Web 应用开发图形用户界面(Graphical User Interface)。所以,前端应用本质上一个 GUI 程序,而 GUI 程序有三种典型形态:

  • Web : 以浏览器为运行环境,基于浏览器内核支持的编程语言、API 来实现,被浏览器解释执行
  • Native : 以操作系统为运行环境,基于操作系统原生支持的编程语言、API 接口实现,以二进制包的形式运行
  • Hybird : 基于 Native 应用提供的一个支持 HTML、CSS、JS 的容器开发的应用,相当与用开发 Web 的方式开发 Native 应用

这三种形态的背后是实现 GUI 程序的两大技术流派:Web、Native。它们的本质差异在于:运行环境不同。浏览器给前端带来了很多优势,比如:实时更新、跨平台、跨终端、开发成本低等;但也带来了很多不便,比如:无法最大程度利用设备的特性和能力、无法使用最新的语言特性、性能和体验没有 Native 应用好、浏览器兼容性问题等。Web 和 Native 之争已经从 PC 时代持续到延续到移动时代,它们各自其应用场景和生存空间,相互促进共同进行。Native 技术研发大型复杂应用的经验和所能提供的精品体验对 Web 技术非常有借鉴意义。Web 的特性也能帮助 Native 实现功能动态更新并提高开发效率。

跨平台开发是 GUI 程序开发的一大问题,在移动端开发衍生出了应用的 N 种做法,见 聊聊移动端跨平台开发的各种技术 。这么多种做法背后有两种理念:

  • write once, run anywhere :这是编程界长期以来的一个理念,跨平台的理想方案,Java、Web 是最成功的实践。
  • learn once, write anywhere:是 React 提出的一个理念,开发者掌握一种 UI 开发的模式,用这种模式去开发 Web、Native 应用的界面。这种理念承认平台的差异性,使用平台自带的 UI 组件保证体验。

关于前端研发,还有两个广为流传的观点:

  • 前端不就是 切图 + 写 JS 脚本 + 调 CSS 样式 嘛,没啥技术含量,搞个两三年就到头了
  • 前端总是变来变去,基础库从 jQuery -> Angular -> React,工具从 Grunt -> Gulp -> Webpack,应用架构从 Flux -> Redux -> MobX...技术更新换代太快,缺少积累和传承,以至于都有人提出了前端摩尔定律:每 18 个月难度增加一倍

且不论这两个观点的对错,前端呈现给外界的第一印象或许就是这样的,这也正是前端的生存环境。然“穷则变、变则通、通则久”,变化的背后其实是生机。深入探索和实践前端这个技术领域,不难发现:

  • 前端是有完整的知识体系的,其技术栈也很深,足够研究 10 多年
  • 前端的技术演进是有脉络可寻的,掌握这个脉络,对 技术选型、技术创新、探索前端技术的边界和可能 将会非常有帮助
  • 前端是一个产品/服务的最前沿,连接用户与服务,关乎产品的体验和品质

让我们从前端业务模型、Web 应用典型系统架构、前端知识谱系这三个维度来重新认识下前端。


前端业务模型

业务模型是前端跟现实世界的对接点,决定了这个技术领域所需要解决的问题,也是前端核心价值之所在。无论技术、产品形态、开发模式怎么变化,这个业务模型是不会变的。对于码农来说, input -> process -> output 是最熟悉不过的模型了,这个经典模型是对计算机系统的高度抽象,借助这个模型对前端对前端进行分析,可以得到这样的业务模型:

在这个模型中:

  • INPUT 包含产品需求 + 数据服务,产品需求通常以:PRD + UI 的形式提供,UI 通常包含:视觉设计、交互设计。数据服务的提供形式随着技术的进化在不断改变,大致路径为:模板变量 -> HTTP 接口 -> Service 接口
  • PROCESS 利用前端技术对 INPUT 进行加工,把它们转换成可运行在各个终端上的应用。这个过程中这用到的核心技术是浏览器技术,但理论上来说浏览器技术只是一种选择,在必要的时候是可以采用原生 Native 技术的,这也就衍生出前端的一个跨界方向 全端开发(全栈的一种)
  • OUTPUT 为运行在浏览器或终端设备上的 Web 应用,是用户与产品的直接接触点;

所以,前端 为应用而生,战斗在最前沿,将技术和艺术很好的结合在一起,搭起了用户、终端设备、服务之间的桥梁,让互联网服务可以被用户感知和使用。


Web 应用典型系统架构

前端是 Web 应用的组成部分,一个典型的 Web 应用系统包含:

  • 静态资源 Server : 提供前端程序运行时所需的 静态内容(Static Content),JS、CSS、图片、视音频文件是最典型的代表。Nginx 是使用最广泛的静态资源 Server,和它配套的还有 CDN 服务。
  • Application Server : 提供前端程序运行所需的 动态内容,在收到用户发起的请求后,需要运行 Server 端程序进行一系列处理才能得到最终结果。需动态生成的 HTML 文档、JSON 数据是典型代表。Tomcat 就是一个典型的 Application Server。
  • 浏览器: 负责加载并运行前端程序,Chrome 及基于 Chrome 内核打造的各种浏览器和容器是典型代表。

它们的协作方式如下图所示:

其中 Application Server 和 静态资源 Server,是通过 HTML 文档中的 <scrpt> <link> <img> <autio> <video> 等 资源标签关联起来的。Application 是前端和 Server 端程序的交汇点,也是催生跨界创新的地方。在很长一段时间内,前端和 Server 端的交互就是一份约定好的模板变量,这份变量往往还是 Server 端工程师按照他们的理解定义好的,这就造成了数据的使用方和定义方隔离的情况,在一定程度上束缚了前端并影响到应用研发效率。最近几年,Node.js、bff 就是顺着这个方向持续的产物。

这个结构在技术的进化中并没有发生本质变化,但在现实世界,Web 应用有很多种类型,导致这个模型有很多变种,比如:

  • 静态站点(Static Site),只需要一个静态资源 Server 即可,并不需要 Application Server,GitHub Pages 使用的 Jelly 就是目前最流行的静态站点生成器,StaticGen 汇集了目前可用的开源站点生成器。静态站点让 Web 回归内容,在访问速度、内容传播等方面有很大的优势,应用前景非常广,这篇文章 :Why Static Website Generators Are The Next Big Thing 给出了详细的分析。
  • 小型站点,通常会将静态资源 Server 和 Application Server 由同一个 Web Server 来承载,常见的论坛、个人 blog、门户网站通常会用这种方式实现
  • 浏览器(含基于浏览器内核的变种)长期以来是前端的主流运行环境,但随着移动互联网的兴起,出现了一些新型的运行环境,比如:Weex、React Native 等,这些运行环境做到极致也将是一个“浏览器”,只不过实现方式、支持的编程语言和接口与传统的浏览器有差异。
  • noBackendServerless 模式,使得 Application Server 逐步由为一些云服务来提供了,开发人员只需要专注于使用这些服务实现业务路基即可

技术的进步使得这三大组成部分对开发人员越来越友好,使得前端研发可以专注且高效地创造应用。


前端知识谱系

前端其实是有完整的知识谱系的,只不过由于新技术层出不穷,导致我们有时候会看不清变化中的不变,被变化牵着走。要走出这个困境,还是得回归本源,用计算机技术的视角从前端研发的本质上寻求突破。前端研发的本质仍然是编写程序,前端码农辛勤劳动的结晶本质上是一个 Computer Program,作为一个程序,通常要包含如下要素:

  • 运行环境:运行在什么环境上
  • 编程语言:用什么语言编写
  • 开发框架:有什么开发框架可以方便开发者快速开发程序
  • 工程设施:帮助开发者解决构建、环境、调试、发布等问题
  • 分发渠道:代码如何分发到运行环境

结合前端的业务模型,从这个角度去看前端,会发现一条比较清晰的知识谱系概览图:

总体来说,前端研发设计的知识包含如下大类:

  • 运行环境
  • 编程语言
  • 数据通道
  • 应用开发
  • 工程化
  • 性能
  • 安全
  • 体验

运行环境(Runtime)

前端 Runtime 对终端设备的操作系统进行封装,提供了基于 HTML、CSS、JS 语言的编程接口,赋予前端程序控制终端设备的能力,包含两类:

  • 浏览器内核:前端最核心的 Runtime,基于 Web 标准提供了一个跨平台的 Runtime,除了浏览器外,ElectronNode Webkit 等 基于浏览器内核提供开发平台也属于这类
  • Native 容器:基于 Native 或 Webview 打造的运行容器,在跨平台开发 Native 应用中非常普遍,以另一种形式对终端设备进行封装,提供一个可以用前端编程语言编写应用的运行环境,CordovaWeexReact Native 算是典型代表。微信、支付宝、手机百度等超级 App 都有一个这样的内置容器。

作为主流 Runtime ,浏览器内核包含三大组成部分:

在 Runtime 上,前端 和 Server 端有一个本质差异:前端的 Runtime 不是前端工程师所能指定和控制的,而 Server 端的 Runtime 是 Server 端工程师完全可掌控的,这个差异带来的影响是:

  • 前端很难通过优化 Runtime 去解决问题
  • 新技术从出现到可以大范围使用,周期非常长,ES6、HTML5 就是典型代表
  • 前端需要花大量精力去兼容多种 Runtime
  • 前端研究 Rutime 所能产生的直接价值远小于 Server 端

作为前端最底层的技术,研究它所能产生的直接收益却不大,这的确有点尴尬。但是,浏览器是世界上最复杂的 GUI 程序之一,通过研究其实现可以学到很多 GUI 程序开发的知识和技术,对我们掌控复杂应用的实现、研究跨平台开发非常有帮助。

编程语言

前端要掌握的基础编程语言是:HTML、CSS、JS,这三种语言背后都有规范支持,随着浏览器技术的进化也在持续进化,功能和易用性越来越好了。除此之外,前端开发还会涉及两类语言:

  • 对 HTML、CSS、JS 进行语法增强的衍生语言,以提升其易用性,TypeScript、JSX、SASS、LESS 就是典型代表
  • 模板语言:负责根据数据动态构造 HTML,Nunjucks、Mustache、Jade、Velocity 都属于这类语言,模板语言提供了一种通过编程语言输出大规模结构化文本的思想,可以活用在很多地方

数据通道

数据通道将 Client 和 Server 连接起来,涉及如下组成部分:

  • 网络设施:wifi、局域网、3g、4g、2g 等都属于这个范畴,
  • 协议:让前端程序和 Server 端程序能以双方能识别和处理的语言进行协助,HTTP 是使用最广的协议,初次之外还有 WebScoket、移动端普遍采用的 RPC 、QUIC 等协议

与这个通道对接的是前文提到的:静态资源 Server、Application Server,浏览器通过这个通道和它们进行通信。

应用开发

应用专注在如何开发各种类别的应用,探索和实践 Web 应用的 N 做法,是前端最核心的一个技术领域,总体来说包含如下内容:

  • 基础库:提供网络操作、DOM 操作、日期、事件、Canvas 等功能,jQuery 、React、Underscore 就是典型代表
  • UI 组件库:提供可被复用的原子级别的界面元素,AntD、Bootstrop、jQuery UI 为典型代表
  • 业务组件库:提供一些包含业务属性的组件,比如:登录框、富文本编辑器等
  • 业务框架:规范应用代码的拆分、组织、实现方式,Angular 为典型代表

以上是开发应用都会需要的东西,但是一些专业应用,光有这些是不够的,还需要掌握对应的专项技术和业务知识才能胜任。前端领域最典型的几个专项技术是:

  • 图形:根据数据绘制各种图形,地图、数据报表、大屏是其典型场景
  • 编辑器:终端设备有两大核心功能,展示信息 + 创造内容,其中创造内容就是有编辑器来支持的,编辑器因所编辑内容的不同会有各种形态,对应着多种不同的实现方式,比如:源码编辑器 AceMonaco Editor,富文本编辑器 TinyMCEDraft.js,Markdown 编辑器 StackEdit
  • 实时应用:消息、聊天、Game、协同办公等类别的应用,这也是 Web 程序一直未能完美支持的地方,该领域目前做的最好的是 Google Docs

工程化

工程化是一个综合性话题,其本质是实现一个研发团队可以规模化、高质量的开发前端应用。规模化有两层含义:研发模式可以支持多人并行开发,人员数量翻倍产能即可翻倍;技术架构和基础设施能有效地支撑不同类别产品的快速研发。高质量有三个基本要求:易维护、高性能、体验好。前端是一个系统中变化最频繁、新业务出现速度最快的部分,工程化显得尤为重要。

广义的前端工程化就是软件工程在前端领域的应用,几乎包含了研发的方方面面。总体来说,分为两大技术方向:

  • 加速 coding 本身的过程,让开发应用像搭积木一样简单,也即 应用开发 章节所关注的内容,其呈现形态就是各种框架、类库、解决方案
  • 管理代码及研发生命周期,让代码安全高效地发布,让 coding 外的事情也可以高效进行,其呈现形态程是一些工具类产品和服务

狭义的工程化重点关注第二个方向,保证工程师可以专注于 coding 本身,包括如下技术领域:

  • 源代码管理:如何管理源代码
  • 代码规范:制定团队统一的代码规范,提供规范检查工具
  • 构建:将源代码转变成目标代码
  • 调试:如何在各个环境下测试程序
  • 发布:如何保证程序高效、安全的发布出去给用户使用
  • 质量:如何有效的保证代码质量
  • 数据监控:如何监控前端程序运行过程中产生的一些有价值数据

性能

性能是任何程序都需要考虑的问题,也是体现码农综合技术能力之处。前端性能优化不仅可以提升用户体验,还可降低服务器带宽成本。性能优化通常包含如下四大部分内容:

  • 性能指标体系:确定好该优化什么
  • 监控:持续监测核心指标,为优化提供理论依据
  • 评测:通过一套完整的工具或者监控体系,评估应用的运行性能是否符合预期
  • 优化:制定并实施优化方案,解决产品遇到的性能问题

其中,优化 是关注最多的地方。但实际上,若不需要结合业务特点确定好优化目标和时机,很容易陷入过度优化或过早优化的误区。

安全

安全无小事,对于金融、电商类业务,安全更是必须保证的。前端涉及的安全问题通常包括:

  • XSS : Web 应用安全问题之源,利用 Web 应用程序对用户数据的处理缺陷来攻击 Web 应用,这里有一份详细的防护指南 给开发者的Web应用程序XSS防护快速指南
  • CSRF : 利用 Server 端接口设计的一些漏洞,在其它站点嵌入敏感操作对应的 URL ,使得有权限的用户在不知情的情况下就触发了操作
  • Clickjacking : 通过伪造界面,诱导用户进行一些敏感操作
  • 用户隐私信息泄露:数据通常会以全集的的形式提供给前端,这些数据一不小心(比如 json 序列化)就会被输出到页面,所以在使用数据时,务必要提醒自己:遵循最小化原则、隐私信息只在必要时输出
  • 防篡改:HTTP 协议本身的特性使得数据在从 Server 到浏览器端传递的过程中,可以被第三方劫持和篡改

体验

体验虽然不直接和编码相关,但决定了前端程序的品质,是一个前端程序从能用 -> 好用 的重要过程。在一个公司内,风格统一的视觉和交互设计,还能大大提升研发效率。体验也是是前端可直接影响产品业务之处,也是区别于其它技术工种的独特价值之所在。体验也是前端领域可催生跨界创新之处,Ant Design、Bootstrap 就是典型代表。体验是一个非常大的专业领域,和前端工作息息相关的有:

  • 交互 & 视觉设计的理念和原则
  • 业界同类产品的界面设计
  • 常见视觉、交互、动效效果的实现

结语

以上是用程序员的视角对前端开发进行的的一些思考,知识谱系目前只是索引,其枝叶会在后续逐步完善。前端研发的本质是什么?前端的未来是什么样子的? 这是值得每个前端工程认真思考的两个问题,也是我们能顺应甚至引领变化的关键之所在。


延伸阅读

下边这些资料能帮助我们更好地认识和学习前端及 GUI 开发:

-- THE END --

You can’t perform that action at this time.