前端开发漫游指南
在业界,“前端研发”基本上等价于“Web 前端研发”,Wikipedia 词条 frontend web development 中给出的官方定义为:
frontend 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 应用,是用户与产品的直接接触点;
所以,前端 为应用而生
,战斗在最前沿,将技术和艺术很好的结合在一起,搭起了用户、终端设备、服务之间的桥梁,让互联网服务可以被用户感知和使用。