前端简史

2,524 阅读6分钟

如果你对这几年前端的剧烈变革感到茫然,或许接下来5分钟的阅读会有所帮助。

前端太广袤,我只能试图从一个侧面去窥探在过去的十几年里,究竟发生了什么。

蛮荒时代

Ajax诞生于1998年,2005年开始被广泛使用。也标志着前后端分离的时代到来,前后端分离极大地解放了前端生产力。大量PC页面被创造,在反复的实践中,人们逐渐无法忍受原生 JavaScript 繁杂的DOM操作,一个庞然大物悄然萌芽。
2006年,jquery第一版发布,在发布后数年时间里,Jquery 社区以一种近乎疯狂的速度扩张。大量的插件被创造,极大地提升了前端的创造力。
如果我们把前端的发展时间线做一个梳理,那么2006年之前,我称之为蛮荒时代。

百家争鸣

  • 2008年移动宣布开放3G网络,花了两年时间3G开始普及。
  • 2010年6月iphone4发布,移动时代到来。
  • 2013年 Android 以碾压的优势占领手机市场。

3G网络和 Andorid 的普及使得大量APP如雨后春笋般破土而出。当时 Iosandroid 开发者比较少,要兼容 AndroidIos 就要付出高额的人力成本。Hybird App跨平台优势开始体现。一个只用10天就被创造出来的脚本语言(JavaScript)开始了构建Web App的历程,前端利器 Jquery 在面对复杂业务逻辑的应用时开始显得力不从心。

2012年,Ionic 发布,Hybird 开发模式逐渐成熟。在同时代还有 Mui ,Hybird敏捷的开发速度和跨平台的优势让很多公司看到了机会。

如果说开发成本和效率的提升带来了 Hybird 的风靡,那么 用户体验这个永不落幕的话题就带来了同时代 SPA 的崛起。与此同时,由于 Node 在服务端大放异彩,前端开始拥有自己的自动化工具 Grunt 。前端从此也脱去页面仔的称号加入了工程师的队伍。

2009年goole发布 Angular ,数据双向绑定,模块化,数据模型共享,路由开始成为解决单页应用复杂业务场景的利器。

HybirdSPA 几乎在同一时代崛起,我们姑且将这个秩序极其混乱的时代称为前端的战国时代。

三足鼎立

2013年单页应用的概念已经深入人心,与此同时 React 横空出世。在随后的一年时间里,React 以其虚拟DOM、组件化、单向数据流,在性能、编程体验以及数据流简洁性上全面超越Angular,以黑马的姿态脱颖而出。

Hybird 的本质是利用 AndroidIos 的webview渲染页面和交互,而webview渲染效率低下,就导致 Hybird 在性能上与Native相去甚远。

React Native 开始进入人们的视线,React Native 虽然是使用 JavaScript 构建,但是通过中间框架使得 JavaScript 具备与 Object-C 交互的能力,转而构建原生应用,所以 React NativeHybird 没有直接的关系。出道即巅峰,完美的性能和敏捷的开发模式成就了React在前端领域霸主的地位。

历史总是在高歌猛进中夹杂着悲壮,你方唱罢,我登场,谁都不敢说永远屹立于巅峰不败。

2014年 Vue 第一版发布,当时React正风光无量,在 Angular , React 面前,Vue 似乎毫不起眼。可谁知道,一场暗流汹涌的变革就要来临。

2015年,Vue 以其更为轻、快的性能优势,平滑的学习曲线和渐进式地编程体验开始狂野生长。前端社区也出现了一批狂热的信徒。或许是 VueReact 有太多的相似之处,每当人们比较两个框架时,性能和开发体验似乎不再是重点,更多的是指责和谩骂。

历史总是在人们争得面红耳赤时默默给出答案。

  • 2015年3月,React Native 发布
  • 2016年5月,Vue 发布2.0版本
  • 2016年9月,Angular 发布2.0版本
  • 2017年3月,Angular 发布4.0版本

Angular 历经七年沉淀,在剧烈的迭代中重生并且携带 TypeScript 强势回归。它似乎要向所有人证明谁才是曾今的霸主,眼见它起高楼,眼见它宴宾客,眼见它楼塌了。尽管这一次 Angular 带来了许多惊喜,但是它的对手似乎也更加地强大了,AngularReactVue在一片喧闹声中形成了三足鼎立之势。

另一个战场

2017年就要接近尾声,站在这个节点上我们能看到的趋势,就是合并。中国有句老话“ 天下之势,分久必和 ,和久必分 ”。当大家喋喋不休地争论自家东西有多好的时候,总会有一个大哥站出来,声振寰宇,打破嘈杂:“ 嘿,丢下你们手上那破烂玩意,跟我来 ”。

  • Jquery作为上一个时代的王者,逐渐板结固化成为前端基石。
  • Sass成为css预处理器的最佳选择,postCss,less逐渐退出历史舞台。
  • Es6 统一模块化,RequireJS,CommonJS逐渐被取代。
  • Webpack统一自动化工具,Grunt,Gulp成为历史。
  • Babel,TypeScript由于鲜明的特性应用于不同的业务场景。
  • Vue,Angular,React虽然三足鼎立,但是React依旧强势。

上半场的较量已经结束,下半场的较量刚刚开始。而这一次较量围绕的核心,并不是哪一方面或者哪几个方面,而是全方面的较量。不仅如此,这一次不再是前端的内战,而是前端工程师们拿起过去十几年激烈厮杀而涌现出的利器与Native的较量。

2017年2月goole的chrome团队宣布,PWA(Progressive Web Application)将获得与原生一致的体验,主要包括:

  • 离线缓存
  • 桌面应用图标
  • 消息推送
  • 渐进式的用户体验提升

渐进式的用户体验提升指的是,通过预加载,预缓存,骨架屏,懒加载等技术减少用户等待时间以及弱网秒加载,达到Native沉浸式的体验。

未来已经来临

2009年,自Node诞生的那一刻起,JavaScript的野心就开始暴露出来,尽管Node在服务端的应用仅限于处理少数高并发的场景。却成就了前端的自动化工具带来了前端的空前繁荣。

试想,当Native在性能上不再占据优势时,"write once run anywhere"将成为WebApp最为强大的特点,而且在编程体验上,Web敏捷的视图构建方式和完善的生态系统将全方位地超越Native。那句玩笑话,在不久的将来是否会被应验:

能被javaScript改写的,终将被javaScript改写。

如果有一天,用户不再需要应用市场,不需要下载就能即时体验,开发者不用等待复杂的审核和上线流程,真正做到敏捷构建,快速迭代的时候,或许那个时代会被称为Web3.0。

结语

以上内容为个人原创,转载请注明出处。任何有误的地方,请在下方留言,我会第一时间改正。