前端“知多少”

作者 Simmin 日期 2017-07-06
前端发展概况
前端“知多少”

image

近几年来，前端无疑是火的。HTML5的发展、Nodejs、微信小程序的出现、所谓大前端、所谓全栈工程师，这些事件和概念的出现都似乎赋予了前端新的生命，新的职责，让人不得不重新来思考和看待前端工程师这个行业。

一、前端、web前端、前端工程师

早期没有所谓的前端工程师，只有美工、网页制作师这样的称呼，还有“页面仔”。。。

随着用户体验的要求越来越高，以及丰富媒体的出现，才分化出设计和开发两种岗位。

设计分为信息架构设计、交互设计和视觉设计；

开发就是web前端开发，需要与产品经理、设计人员、后端开发人员协同工作，将设计稿转化为实际的产品。

当然前端开发的基本功：HTML + CSS + JavaScript

二、前端开发的发展历史

这部分内容主要参考前端开发的历史和趋势、Web 开发模式演变历史和趋势和近几年前端技术盘点以及 2016 年技术发展方向三篇文章进行总结。

要想完完全全、清清楚楚地解释这一部分真的很难，以下时段划分也并不完全准确，重在理解 Web（前端）开发有哪些历程、这些历程又是如何推进发展的。

2.1 web 1.0 时代

世界上第一张网页，现在依然可以访问： http://info.cern.ch/

特点：

  1. 大都是静态页面，单一的图片和文字；
  2. 前后端不分；
  3. 页面由JSP、PHP等工程师在服务端收到浏览器的请求后生成，浏览器负责展现；
  4. 用户使用网站的行为也以浏览为主。

其特点也是其局限。

其他缺点：

  1. 服务越多，调用关系复杂，前端维护难以与后端协作。
  2. 后端代码可维护性差。

2.2 后端 MVC 开发模式

image

Model（模型层）：提供/保存数据

Controller（控制层）：数据处理，实现业务逻辑

View（视图层）：展示数据，提供用户界面

前端只是后端 MVC 的 V 。

优点：

  1. 代码可维护性得到改善
  2. 让开发者明确各部分代码应该如何分配，更清晰的逻辑结构
  3. 前后端分工得到改善

前后端协作的两种模式：

  1. 前端写demo，后端套模板，替换变量，渲染出页面

    <!--典型的PHP模板-->
    <html>
    <head><title>Car {{ $car->id }}</title></head>
    <body>
        <h1>Car {{ $car->id }}</h1>
        <ul>
            <li>Make: {{ $car->make }}</li>
            <li>Model: {{ $car->model }}</li>
            <li>Produced on: {{ $car->produced_on }}</li>
        </ul>
    </body>
    </html>

  2. 前端负责浏览器端的所有开发和服务器端的 View 层模板开发

缺点：

  1. 前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素
  2. 前后端职责并没有完全分开

2.3 web 2.0 时代

2005年，Ajax 技术促成了 web 2.0 时代的来临。

多元化的媒体内容——网页更加生动

网页软件化的交互设计形式——更好的用户体验

关键字：动态网页、富交互、前端数据处理

Ajax的正式提出和CDN开始大量用于静态资源处理，出现了SPA（Singe Page Application，单页面应用）。

它可以读写数据、切换视图、用户交互。

这意味着，网页其实也是一个应用程序。

这种模式下，前后端的关键协作点是Ajax接口，前端可以独立得到各种数据并进行处理。

但是挑战有：

1.前后端接口的约定。接口规则很重要。

2.前端开发复杂度控制。SPA应用大多以功能交互为主，大量JS代码的组织，与view层的绑定都不是容易的事。

2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序，Web APP）。

2.4 前端 MV* 模式

前端 MVC 模式

前端通过 Ajax 得到数据，因此也有了处理数据的需求。

前端代码变得也需要保存数据、处理数据、生成视图，这导致了前端 MVC 框架的诞生。

以 Backbone.js 为代表，但只有 M （管理数据）和 V （展现数据）两个部分 ，没有 C 。

其他框架：EmberJS、KnockoutJS

前端 MVVM 模式

image

View-Model：简化的 Controller，唯一作用就是为 View 提供处理好的数据，不含其他逻辑。

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上（双向绑定），不需要手动处理。

代表框架：AngularJS、Vue

前端 MV* 模式的好处：

1.前后端职责清晰，分工明确

2.前端开发的复杂度可控。虽然前端代码很重，但是合理分层可以让前端代码各司其职。

3.部署相对独立。

依然存在的不足：

1.前后端代码不能复用。比如前后端都需要对数据校验，但是后端无法复用前端的代码。

2.全异步，对 SEO 不利。往往还需要服务端做同步渲染的降级方案。

3.SPA不能满足所有需求，依旧存在大量多页面应用。URL Design 需要后端配合，前端无法完全掌握。

2.5 Nodejs带来的全栈时代

Nodejs

1.Nodejs是一个JavaScript运行环境，实际上它是对chrome V8引擎进行了封装。

2.JavaScript成为服务器端语言

3.JavaScript成为唯一的浏览器和服务器都支持的语言

4.前端工程可以编写后端程序

前后端分离

1.后端专注于数据库、性能和业务逻辑；前端专注于页面与交互

2.后端提供API接口给前端，前端对页面由完整控制。

3.通过中间层将前后端隔开，并完成数据抽取、聚合、分开等操作。（这个中间层，通常也是由前端同学负责。）

面临的挑战：

1.是否足够的安全？

前端存储用户数据，例如LocalStorage，要考虑加密。

采用何种认证方式来让用户登录及保存状态。

2.是否有足够的技术支撑？

能够开发出Restful 风格的API

参考文章：你真的懂前后端分离吗？

RESTful架构

REST，Representational State Transfer，可译为”表现层状态转化”。

关键词：资源、表现层、状态转化、URI

资源：网络上的一个实体，或者说是网络上的一个具体信息。

表现层：“资源”具体呈现出来的形式。例如txt、html、xml、json等格式。

“资源”的具体表现形式由HTTP请求头中的Accept和Content-Type字段指定，这两个字段才是对“表现层”的描述。

状态转化：HTTP协议是无状态的协议，所有状态都保存在服务器端，因此，如果客户端想要操作服务器端，必须通过某种手段，让服务器端发生“状态转化”。

具体方式：HTTP协议中四个表示操作方式的动词：GET、POST、PUT、DELETE，分别对应四种基本操作：获取资源、添加资源、更新资源、删除资源。

URI：每种资源对应一个特定的URI。通过访问其URI，便可以获取这个资源。因此URI就成了每一个资源的地址或独一无二的识别符。

参考文章：

1.理解RESTful架构

2.RESTful 架构风格概述

终端碎片化

所谓终端碎片化是指越来越多的终端设备以各种方式来占据每个人的碎片时间。智能手机、智能手表、眼镜、头戴VR等等新设备层出不穷，这样的设备仍会继续增多。

与智能手机类似，这些新的平台可以安装第三方应用，而且基本都支持浏览器或内嵌浏览器引擎。虽然有些平台限制使用Web技术开发应用，但这只是平台政策原因，只要放开限制，前端技术就能以某种姿态进入，甚至成为主流。

ReactNative便是很好的例子。

React Native 能够解决 iOS 和 Android 原生开发上的跨平台代码复用、动态化等痛点，又避免了之前Hybrid的性能问题，虽然目前国内外大规模使用 React Native 仍然不多，但是其已经受到了广泛的关注。

Serverless（无服务器架构）

它不是指不需要服务器，而是说新的架构取代了传统服务器的概念。

开发者再也不用过多考虑服务器的问题，计算资源作为服务而不是服务器的概念出现。

Serverless是一种构建和管理基于微服务架构的完整流程，允许在服务部署级别而不是服务器部署级别来管理应用部署，甚至可以管理某个具体功能或端口的部署。

而Serverless需要更强大的前端。

延伸阅读：无服务器架构

全栈工程师

前端工程师正在转变为全栈工程师：

1.一个人负责开发前端和后端

2.从数据库到 UI 的所有开发

怎样才能称为全栈工程师？

1.传统前端技能：HTML、JavaScript、CSS

2.一门后端语言

3.移动端开发：iOS / Android / HTML5

4.其他技能：数据库、HTTP 等等

似乎？也不太够？所以全栈工程师是否符合实际？

三、前端开发的发展情况

前端圈子浮躁

前端开发大热，吸引了不少人来从事前端相关的研究，但是前端这个圈子本就是浮躁的，大量工具和框架层出不穷，难免为了追赶潮流而放弃在某一方面的深入研究。

这个行业不缺前端，缺的是好的前端。

H5 赢得了移动端

由于HTML5的出现，突破编程语言的局限，向着移动端发展。

【1】开发速度快：Native 需要重新编译才能看到结果，H5 是即时输出。

【2】开发成本低：Native 需要两个开发团队，H5 只要一个。

【3】快速发布：安卓 Native 新版本需要24小时，iOS 需要 3 ～ 4 天，H5 可以随时更新。

前后端分离是趋势

前端工程化

【广义】前端工程是软件工程的一个子类，指的是将软件工程的方法和原理运用在前端开发中, 目的是实现高效开发，有效协同，质量可控。

【狭义】前端工程是指将开发阶段的代码转变成生产环境的代码的一系列步骤。
主要包括构建 , 分支管理 , 自动化测试, 部署 等。

【出现的原因】前端越来越复杂，设计的问题和环节也越来越多，不采用工程化管理，就无法很好的实现团队协同和降低复杂性

【具体内容】

1.代码规范: 保证团队所有成员以同样的规范开发代码。

2.分支管理: 不同的开发人员开发不同的功能或组件，按照统一的流程合并到主干。

3.模块管理: 一方面，团队引用的模块应该是规范的;另一方面，必须保证这些模块可以正确的加入到最终编译好的包文件中。

4.自动化测试：为了保证和并进主干的代码达到质量标准，必须有测试，而且测试应该是自动化的，可以回归的。

5.构建：主干更新以后，自动将代码编译为最终的目标格式，并且准备好各种静态资源。

6.部署: 将构建好的代码部署到生产环境。

参考文章：

1.浅说前端工程化

2.浅析前端工程化

React与Vue

前端框架的三架马车：Angular（由Google开发）、React（由Facebook开发）、Vue。

Angular v4.0 已发布。

React 和 Vue 已经形成了自个的生态体系。也就是说它们基本覆盖全面，几乎没有短板。

React和Vue已经覆盖了目前主流的系统平台，并且可以用React Native、Weex等框架进行原生开发，相较于其它技术有很强的优势。

PWA

PWA（Progressive Web App），由Google提出，旨在使 Web 能与 App 匹敌，如果用户需要，网页可以渐进式地变成 App ,比如被添加到主屏幕、全屏方式运行、离线工作、推送通知消息等。但它仍是Web而非放到App Store里。

这种技术目前还不是实际应用的阶段，但是有很大潜力。

参考文章：我们真的需要网页版App吗？Google PWA的困局

微信小程序

发布前很火热，发布后却寂静不少。。。是产品策略的问题，而非技术问题。即使如此，微信小程序的用户体验还是不错，依然有应用潜力。

数据可视化

图表总比文字来得更直观，也更酷炫。

未来的世界，一切皆数据。

用途：

1.宏观态势可视化

2.设备仿真运行可视化

3.数据统计分析可视化

对于前端开发来说，数据统计分析可视化目前来说是必不可少的。

数据可视化已被纳入商业产品，目前已有不少公司提供数据可视化服务，例如https://me.bdp.cn/home.html。

参考文章：数据可视化未来的主要应用会是什么？

所谓变革和机遇

【1】游戏领域：网页游戏（HTML 5游戏）大量出现，效果不比现有游戏差。

【2】移动领域：Web技术开发融合Native技术 进行移动开发。

【3】云计算领域：即将统治世界的云计算领域越来越多的SaaS应用已经web化。

【4】人才需求领域： 前端的责任越来越大，未来对前端开发人才的要求也越来越高。

四、前端工程师的角色

典型的产品开发流程：

image

各个角色之间的关系：
image

前端是与各个角色打交道最多的，沟通协调就变得非常重要。

参考文章：

1.写给想成为前端工程师的同学们

2.谈谈前端人员在项目中的正确沟通方式

注：图片均来自网络

FRIENDS