前端到底是个啥
前端其实是个很大的范畴. 我这里只针对 web 开发的前端而言(下文统称前端). 简单点说, 针对浏览器的开发, 浏览器呈现出来的页面就是前端. 它的实质是前端代码在浏览器端被编译, 运行, 渲染. 前端代码主要由三个部分构成: html(超文本标记语言),CSS(级联样式表),JavaScript. 如图:
前端发展历程
前端也算是经历了一个比较漫长的发展过程, 大致历程可以分为以下几个阶段:
上古时代:
这个节点不得不说一下, 世界上第一款浏览器 NCSAMosaic, 是网景公司 (Netscape) 在 1994 年开发出来的, 它的初衷是为了方便科研人员查阅资料, 文档(这个时候的文档大多是图片形式的). 那个时代的每一个交互, 按钮点击, 表单提交, 都需要等待浏览器响应很长时间, 然后重新下载一个新页面给你看, 大概是这样:
同年 PHP(超文本预处理器) 脚本语言被开发出来, 开启了数据嵌入模板的 MVC 模式, 同时期比较类似的做法有以下几种:
PHP 直接将数据内嵌到 HTML 中.
ASP 的 ASPX, 在 HTML 中嵌入 C# 代码.
Java 的 JSP 直接将数据嵌入到网页中.
这个时期, 浏览器的开发者, 以后台开发人员居多, 大部分前后端开发是一体的, 大致开发流程是: 后端收到浏览器的请求 ---> 发送静态页面 ---> 发送到浏览器. 即使是有专门的前端开发, 也只是用 HTML 写写页面模板, CSS 给页面排个好看点的版式(要不是我堂堂程序员看不上这点活, 你们这些个切图仔就得要饭去~).
铁器时代(小前端时代)
1995 年, 这是个好年份, 又是这个搞事的网景公司, 拜托一位叫布兰登. 艾奇的大佬, 希望开发出一个类似 Java 的脚本语言, 用来提升浏览器的展示效果, 增强动态交互能力. 结果大佬喝着啤酒抽着烟, 十来天就把这个脚本语言写出来了, 功能很强大, 就是语法一点都不像 Java. 这样就渐渐形成了前端的雏形: HTML 为骨架, CSS 为外貌, JavaScript 为交互.
同时期微软等一些公司也针对自家浏览器开发出了自己的脚本语言. 浏览器五花八门, 虽然有了比较统一的 ECMA 标准, 但是浏览器先于标准在市场上流行开来, 成为了事实标准. 导致, 现在前端工程师还要在做一些政府古老项目的时候, 还要去处理浏览器兼容(万恶的 IE 系列).
不管怎么说, 前端开发也算是能写点逻辑代码了, 不再是只能画画页面的低端开发了. 随着 1998 年 Ajax 的出现, 前端开发从 web1.0 迈向了 web2.0, 前端从纯内容的静态展示, 发展到了动态网页, 富交互, 前端数据处理的新时期. 这一时期, 比较知名的两个富交互动态的浏览器产品是:
Gmail(2004 年)
Google 地图(2005 年)
由于动态交互, 数据交互的需求增多, 还衍生出了 jQuery(2006) 这样优秀的跨浏览器的 JS 工具库, 主要用于 DOM 操作, 数据交互. 有些古老的项目, 甚至近几年开发的大型项目现在还在使用 jQuery, 以至于 jQuery 库现在还在更新, 虽然体量上已经远远不及 React,vue 这些优秀的前端库.
信息时代(大前端时代)
自 2003 以后, 前端发展渡过了一段比较平稳的时期, 各大浏览器厂商除了按部就班的更新自己的浏览器产品之外, 没有再作妖搞点其他事情. 但是我们程序员们耐不住寂寞啊, 工业化推动了信息化的快速到来, 浏览器呈现的数据量越来越大, 网页动态交互的需求越来越多, JavaScript 通过操作 DOM 的弊端和瓶颈越来越明显(频繁的交互操作, 导致页面会很卡顿), 仅仅从代码层面去提升页面性能, 变得越来越难. 于是优秀的大佬们又干了点惊天动地的小事儿:
2008 年, 谷歌 V8 引擎发布, 终结微软 IE 时代.
2009 年 AngularJS 诞生, Node 诞生.
2011 年 ReactJS 诞生.
2014 年 vuejs 诞生.
其中, V8 和 node 的出现, 使前端开发人员可以用熟悉的语法糖编写后台系统, 为前端提供了使用同一语言的实现全栈开发的机会(JavaScript 不再是一个被嘲笑只能写写页面交互的脚本语言).React,Angular,Vue 等 MVVM 前端框架的出现, 使前端实现了项目真正的应用化(SPA 单页面应用), 不再依赖后台开发人员处理页面路由 Controller, 实现页面跳转的自我管理. 同时也推动了前后端的彻底分离(前端项目独立部署, 不再依赖类似的 template 文件目录). 在这里解释下 MVVM 模式:
Model: 提供 / 保存数据
View: 视图
View-Model: 简化的 Controller, 唯一的作用就是为 View 提供处理好的数据, 不含其它逻辑
至于为啥 MVVM 框架能提升前端的渲染性能, 这里简单的总结下原理, 因为大量的 DOM 操作是性能瓶颈的罪魁祸首, 那通过一定的分析比较算法, 实现同等效果下的最小 DOM 开销是可行的. React,Vue 这类框架大都是通过这类思想实现的, 具体实现, 大家感兴趣的可以去翻下源码哈, 这里不做展开. 前端分离也导致前端的分工发生了变化:
后端更加关注数据服务, 前端完全控制自己的各种行为, 可玩性更高. 当然相应的学习成本也越来越大, node 的出现也使得前端前后端一起开发成为可能, 好多大公司在 2015 年前后就进行了尝试, 用 node 作为中间数据转接层, 让后端更加专注于数据服务和治理.
全能前端时代
2009 年开始, 大屏智能手机开始陆续出现, 到后来 4G 移动网络的普及. 使得前端从单一的基于的 PC 浏览器 展示的 Web 应用, 开始向手机, 平板覆盖 (HTML,CSS,JavaScript 也陆续推出了自己的新标准). 前端对于跨端浏览的需求越来越大, 前端不再仅仅是 PC Web 方面的开发, 手机配置, 与 App 进行 hybird 开发, 变成了常态. 甚至于 Facebook 推出了 React-Native, 国内微信, 支付宝推出小程序, 试图整合 Web,native 开发. 为什么会有这样的情形发生呢, 网速越来越快, 硬件性能越来越好, JS 在各个终端的运行能力与 native 开发(iOS,Android) 的差距越来越小, 就让我们搞事儿 (喜欢偷懒) 的程序员们想着能不能写一套代码, 然后四处运行呢.
能的, 这个可以有, React-Native, 小程序, 以至于后来出现的 Electron, 使得用 JavaScript 开发桌面应用都成为了可能(VSCode). 谷歌近两年也推出了 Flutter 的开发语言, 可以实现一套代码, 多处运行(Web,App). 前端真的不再是只能切图, 开发静态页面的前端. 后端可以搞, 爬虫可以搞(node),App 可以写(Weex,RN,Flutter), 桌面应用可以开发(Electron), 算法和语言的严谨性还有点短板, 但是 TypeScript 的出现, 以及后续 ECMA 标准的近一步完善, 会使得前端更加的全能化, 也可能会出现更多的细分工作领域.
最后, 告诉大家 "Any application that can be written in JavaScript, will eventually be written in JavaScript." 这是个生态圈的概念(最早见于谷歌教父 在《黑客与画家》中对于浏览器生态的想法), 包括浏览器, 包括微信, 支付宝都已经早早走在了这条 "不归路" 上.
对 Web 前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来, 编程工作第六个年头了, 与大家分享一些学习方法, 实战开发需要注意的细节. 784-783-012 秋裙. 从零基础开始怎么样学好前端. 看看前辈们是如何在编程的世界里傲然前行! 不停更新最新的教程和学习方法(Web 前端系统学习路线, 详细的前端项目实战教学视频, PDF), 有想学习 Web 前端的, 或是转行, 或是大学生, 还有工作中想提升自己能力的, 正在学习的小伙伴欢迎加入. 我们会一起结伴同行学习前端我们是认真的
来源: http://www.jianshu.com/p/384c64557545