[博文分享] 2016 年后 Web 开发趋势是什么

[yafeilee]

Rewriting your Frontend Framework every six week !!!

近二年的进展

前端发展日新月异, 甚至有一句戏言: "每六星期重写一个前端框架", 行业是像火箭一样, 但我们前端工程师该何去何从呢?

我们来谈谈这个问题.

先来看看最流行的几项技术栈:

• AngularJS

  首创的双向数据绑定, 以及内置的模块注入, 以及组件化的支持, 种种优势, 使得它迅速发展起来. 在 2014-2015 年, 有调查显示, 在使用了前端框架的项目, 有 50% 以上采用了 AngularJS. 但到底值不值我们继续学习, 我们再接下来看.

  项目地址: https://angularjs.org/

• EmberJS

  受 Rails 全栈框架的启发, EmberJS 逐步发展成前端领域的另一个 "Rails", 成为另一个独特的选择, 理论上, 你选择了 EmberJS, 就选择了一个完整稳定的生态, 不用再折腾的轮子. EmberJS 不仅全面支持模块化, MVC, 也实现了类似 AngularJS 的双向绑定( 当然原理不同 ), 甚至还做到了内置的打包和发布应用功能. 总而言之, 它是一个十分全面的前端框架. 事实上, 如果说 AngularJS 是当前短暂的前端史的一个高峰, 它就是另一个高峰. 但最近, 人气有一定的下降, 原因何在, 我们再分解.

  项目地址: http://emberjs.com/

• ReactJS

  ReactJS 自发布之始, 就人气很高, 它是第一个采用虚拟节点( virtual dom )技术的框架, 通过这个技术点, 它独创性地整合了函数性编程的理念, 采用单向数据流来设计 dom 渲染与比对, 使得它轻量和灵活, 事实上, 它本身只专注于如何渲染 UI, 也不与 AngularJS 和 EmberJS 有冲突. 换言之, 你可以将它整合到其他框架中.

  随着 ReactNative 和 Redux 方案的出现, ReactJS 重新回到前端的浪尖, 因为其简洁优雅的实现和对 Native APP 的冲击, 又一次成为新的弄潮儿.

  但以后会怎么样, 谁也不知道, 但我也会再给一些解读.

  项目地址: https://facebook.github.io/react/

流行不一定是发展最快, 我们再来看看近二年发展最快的几项前端技术栈:

• ReactJS

  上文已经提到, React 由于本身的简洁性和对组件化专注的实现, 一直没有被新的 ES6 标准和前端思潮落下, 它几乎不受 ES6 的影响, 以及前沿性的支持 native app 开发( 通过 ReactNative ), 所以一直发展趋势良好.

  而 AngularJS 则不一样, 由于 ES6 的发布, 使得它的依赖注入特性成为鸡肋, 以及 AngularJS 第一版对组件化支持的蹩脚实现( 能支持是一回事, 好用是另一回事 ), 而组件化则学习成本过高, 过于复杂, 所以 AngularJS 决定推翻设计重新开发第二版, 而第二版过于激进的采用 Typescript, 完全不兼容的第一版的设计, 以及各种魔法的应用, 使得它离前端越走越远.

• VueJS

  VueJS 是近二年的新秀, 它起步之初, 只是一个简化版的类似于 AngularJS 双向绑定的实现的研究( 当然原理并不同 ). 但其理念与 ReactJS 相近, 只是专注于实现数据绑定, 模块化与组件化, 所以足够的简单灵活.

  随着生态的快速发展, VueJS 正好接了 AngularJS 第一版的班, 又改良了 AngularJS 的错误设计( 事后来看, 依赖注入与组件化两部分是比较失败的设计 ), 整体发展迅速, 逐步成为后起之秀.

  项目地址: http://vuejs.org/

• MeteorJS

  MeteorJS 本不适合与上述几个前端框架比较, 因为它实际是一个全栈框架, 更像 Rails 这种角色, 但由于它是纯 Javascript 的方案, 所以还是放在这里.

  如果说上述前端框架都是解决前端工程化的产物, 那 MeteorJS 是一个颠覆思维的 web 开发框架, 它将 Javascript 同构技术应用到极端, 再整合 websocket 进行实时数据通知与热代码更新, 不同于前后端分离的理念, 它在开发者角度完全没有前后端的概念, API 既在前端又在后端, 再加它全生态的支持( 移动 app 支持, 应用发布), 也是一个全新的视角, 由于它发展速度极快, 所以列在这里.

  项目地址: https://www.meteor.com/

各大框架都在迅速发展中, 它们有几个共性的发展方向:

• ES6 支持

  每一次 Javascript 的新标准发布, 都是各大框架更新的好机会, 所以 ES6 是肯定得到各大框架的良好支持, 建议大家一定要学好.

• web 组件化

  毋庸置疑, 组件化是现代前端工程化中极为重要的特性, 甚至 google 还专门出了 Polymer 这个只做组件化实现的框架. 所以每一个够格的前端框架都非常重度支持它. 同时, 组件化也将作为 w3c 标准予于定义, 所以前端框架仍将不留余力地改进与标准的兼容.

• Server-side Render

  服务端渲染技术是 2016 年才开始火的概念, 它与传统的后端渲染不同, 为了解决前端框架第一次加载慢的问题, 以及 SEO 问题, 而提出的解决方案. 之前有 prerender, 现在各大框架都在尝试在内部集成并支持它. 但我个人觉得, 带来的问题远比解决的问题更多, 比如要求我们开发的时候有更多的限制.

• App Render

  现在有一种大前端的概念, 可以理解为 web 前端对 App 开发的支持, 包括 Ionic ( 基于 AngularJS ), React Native( 基于 React 理念 ), Meteor 都是针对 App 开发的痛点而生.

分析了众多目前最流行的前端框架, 大家可能越来越胡涂了:

到底谁才是最值得我们去投入的技术呢?

接下来, 我们去掉一堆术语, 来从前端的定义本质来看它的发展.

近二年本质的演进是什么

前端就是面向用户这一端的技术, 然而, 随着时代的发展:

• 用户体验要求越来越高( 加载速度快, 响应快, 无闪烁 )
• 前端需求越来越多
• 前端代码越来越庞大
• 移动端快速发展对 h5 前端的需求

而 jQuery, ProtoypeJS 等只解决了 Javascript 工具库的问题, 但工程化需求无好的解决方案.

前端工程化迫在眉捷. 而且有以下要求:

1. 最好是纯 Javascript 方案
2. 支持模块化
3. 业务代码与框架代码分离
4. 可测性

于是, 产生了几种不同的演进方案.

后端渲染技术:

ajax -> pjax -> sjr ( 需要服务端提供支持 )

后端渲染技术很快就发展到顶了. 但技术理解还是足够简单的. 我们还是回到前端框架上.

NodeJS, AMD(CMD), ES6 的出现, 使得组织起一个前端框架成为现实. 于是乎, 百团大战, 出现了上面众多框架混战的画面.

无论是 AngularJS, EmberJS, ReactJS, VueJS 都是围绕着这几点进行的不同的尝试.

但结果如何, 我们站在一个更高的高度重新思考 web 开发.

真正的用户市场需要什么

对用户

• 更快的响应速度
• 更好的体验

对开发者

• 更快的开发速度
• 更好的可维护性

再次思考, 我们要不要前后端分离? 哪些前端框架更满足我们以上的条件?

作为 Rails 工程师, 我也一直在思考一个问题: Rails 是否在前端上走上了绝路?

对于不熟悉 Rails 的朋友, 我还是简单回顾下 Rails 的前端是什么:

• jQuery
• UJS
• Assets pipeline
• SJR( 服务端 JS 生成技术 )
• Turoblinks( 一种极小成本实现的单页效果的技术 )

相比 php, java, python 等语言下的传统 web 框架来说, Rails 的前端技术还是非常丰富的.

关于各个框架我列了一个分数比较, 10 分为满分, 每个列会加在一起算成一个总分.

从上表可以看出:

Rails 这类的全栈框架特点有

优势:

• 开发效率极高
• 通过 Turoblinks 技术, 体验也不错.
• 也能支持混合应用开发

缺点:

• 前端代码可维护差

ReactJS 学习成本较低, 通过 webpack 与 npm 的配合, 能够达到不错的可维护性, 但开发成本偏高, 这也是组件化的缺点之一.

而 EmberJS 学习门槛过高, 而且 EmberJS 发展也比较迅速, 不利于学习掌握, 相对而言, 总分也不会太高.

MeteorJS 也被我列在这里, 总分最低, 所以仍然不推荐学习, 除非你的应用属于实时应用.

我们再重新思考组件化, 组件化优势在于接口清晰, 可维护性高, 但开发成本是比较高的, 前端属于工程而不是科学, 所以, 我觉得组件化是对的, 但不要过于极端把所有的 dom 都组件化.

而且, 组件化也对现有的基础技术栈进行了破坏.

通过以上的分析, 我们基本上了解了现有技术栈的情况. 那我们该继续学什么? 这才是本文的重点.

所有的一切, 都是围绕着组件化, 可维护, 高效开发, 移动支持而生, 而它们的核心都是还是最基础的东西:

• Javascript ( ES6, NodeJS )
• HTML
• CSS
• API

一句话, 还是应该先把基础打好.

基础技术栈

应当好好掌握的内容:

• Javascript 语言( 直接看 ES6 相关的 )
• NodeJS 生态( npm 与相关的包 )
• webpack ( 了解如何打包, 发布 )
• HTML ( 尤其是 form 标签, 以及 HTML5 的内容 )
• CSS ( 学习盒模型, 最新的 flex 布局, 以及 CSS3 )
• API ( 掌握如何开发 API )

你必须是前端工程师, 同时又是后端工程师, 才能真正摸清晰当下时代的发展, 成为弄潮儿!

预测未来

首先, 我在 2014 年分析 web 开发的文中提到的 gulp, grunt 都已经成为过去式了. Bower 也已经有点不合事宜了.

目前前端构建建议使用 webpack 和 npm 足够, 不需要更多的工具链, 应该越简单, 越顺手!

列几个关心的问题尝试预测一下

• NodeJS 做后台开发怎么样 ?

  NodeJS 已经是前端框架的一部分, 是极为成功的, 但对于 NodeJS 做后台开发说实在的, 它能够占一定的市场, 但将会非常少( 低于 5% ). 所以做 php 或 java 开发的朋友倒不用担心, 但如果只是搬砖写简单 API 的话, 就有危险了.

• Rails 还行不行 ?

  Rails 已经到了一定的顶点, 不可能再突破性增长, 但仍然是目前最为顺手的 web 开发框架, 它的前端解决方案目前仍有不错的体验与开发效率, 但可维护性比较差, 如果是我的话, 我会带领团队采用混合式的开发, 但现在不会是引入 AngularJS 而会是 VueJS.

  但 Rails 已经到达它的极限点了, 而众多前端框架才刚刚开始.( 虽然拿 Rails 与前端框架比较不够合适 )

• AngularJS 还是 ReactJS ?

  很简单, 建议直接上手 VueJS.

  AnguarJS 第一版是个好的框架, 但 Angular2 并不是, 所以还不如直接学习 VueJS.

  ReactJS 是个不错的框架, 但绝不是终点. VueJS 与 ReactJS 在实现上各有利弊. 两者可以择其一学之.

• MeteorJS 值不值得学习 ?

  我的建议是不值得, 因为它一开始就走在错误的道路上, 注定后面无路可走.

• 前端会取代 Native APP 开发么?

  一定会的, 未来 3 年后, 至少有 70% 左右的 APP 会用前端开发方案, 比如使用类似于 Ionic 或 Meteor 这样的框架.

重新思考 web 开发

真正能长远的前端技术一定是简单的, 专注的, 比如 jQuery. 但目前几个框架都或多或少存在着问题.

ReactJS 不是表面那么简单, 而 AngularJS 更加复杂.

是否有更简单有效的解决它们的问题, 则能够成为下一代 web 前端框架.

Windy 出品

[chimingphang]

好文

[astrorobbie]

长知识了

[Arrowing]

ES6 新特性很多，但是目前很多浏览器仅支持部分或者不支持。
学习成本也是比较高的，很多新花样，比较复杂，个人感觉现在优化级还没那么高。

[common07]

@Arrowing chrome 的新版本 52 都要支持 ES7 了，就问你怕不怕

[moe3000]

干货啊

[sss3600123]

get 到新姿势

[jarontai]

好文，但部分关于 angular2 的观点有些疑问，比如： ES6 能取代依赖注入带来的好处？

[yafeilee]

@Arrowing 先学着, ES7 也只是会不断增加和改进特性. 依靠标准, 很多事情可以简化, 比如 AMD, CMD, requirejs 都可以不用了.

@jarontai ES6 的 import/export, 以及 class, module 可以让 AngularJS DI 不那么必要, 而 DI 实际上还带来了一定的复杂度. 所以我的观点是, 不必要非要引入依赖注入了.( 在前几年, 依赖注入的好处就非常明显了 )

[murmur]

依赖注入其实挺好的，这东西跟 java spring 那堆挺像，不知道为啥写前端的不喜欢这个东西

[k9982874]

这几年流行把并不流行的旧技术换个高大上的新名词重新推一把

[markocen]

我觉得前端 View 这一层 Vue 和 React 比 Angular 好了不少， 但 Angular 定位是前端的全方面解决方案， 很多公司还是会选择 Angular ， 尤其 Angular 2 的一些新特性比如前后端同步 rendering ， 层次依赖注入， pipes 感觉都是大型 web 项目需要的，
个人感觉中小型项目用 Angular 2 可能会有些 overkill

[thwawar]

@Arrowing 敢情你从来没听说过 babel

[Arrowing]

@common07 支持也没卵用啊，不能普及，了解下即可。

@thwawar 不就是把 ES6 代码编译成 ES5 吗？和直接使用 ES6 有关系？最近在学 ES6 ，还会不知道这个？就是学习了才觉得复杂了好多，但是各大浏览器厂商还没跟上，一年一次的更新到时候恐怕会更乱。

[VtoEXL]

喜欢 vuejs

[liuzhen]

反感 requirejs

[h0wardc]

感覺 browserify 比 webpack 好上手:

[substack/browserify_for_webpack_users.markdown]( https://gist.github.com/substack/68f8d502be42d5cd4942)

[AlexMeng]

好文支持，火钳留名， Mark 一下

[thwawar]

@Arrowing 都用 Babel 了，你管它浏览器支持不支持？

[yhylord]

求问服务器渲染和后端渲染的区别是啥

[yafeilee]

@h0wardc webpack 规则简单强大, browserify 易于理解. 个人感觉还是 webpack 更易于开箱即用.

@yhylord Let's google for that...
http://lmgtfy.com/?q=server-side+render+vs+backend+render

[lgcc]

留意楼主说的是框架，国外 web 开发是什么趋势？ google 了一个网页( http://usersnap.com/blog/web-development-trends-2016/ )，说 Motion UI, Internet of Things, Browser based IDEs, Full-screen navigation design, Containers, Foundation for Apps, Real-time applications, Computer Vision, Bots :doge:

[yhylord]

@yafeilee 抱歉，但我是 Google 过了没有找到对应的东西。