关于前端的思考:Angular 2.0以及前后端边界

2015年11月11日

前端的学习曲线

每个人在学 AngularJS 的时候都会觉得Angular 1.x自创的概念实在太多,学习曲线也因此变得非常陡峭。但对于一个完整的前端项目来说,所需要的东西本来就不够简单,而 AngularJS 作为一款大而全框架,自带一揽子解决方案,只要学习上手之后还是会有一劳永逸的感觉。就像 Python 的 web 框架代表 Django 和 Flask 一样,萝卜白菜各有所爱,轻量级框架所带来的灵活性固然很棒,但对于新手来说依旧会很容易玩脱。就像当前所兴起的 React 大潮,暂且不讨论深度玩家所表现的态度和看法,就论一个前端新手所面临的问题,在没有主见的时候到底该师从何派?

对于前端刚入门的我来说,依旧会推荐从一个大而全的框架开始学起,一个好的框架不但会强制你不犯错误,由此带来的「配置大于约定」也会让一个还没有能力进行约定的能力去学习如何约定。当你学有所成的时候自然会似脱缰一般出去闯荡一番。就像当初青春期的我们,在蜕变之前我们安定得学习该有的技能,当有了一定资本之后就开始自我思考,决定去走自己的路。

反过来说,其实走自己的路,又何尝不是陡峭的呢?对于 React 来说,也许它所带来的概念非常简单给力。但与此同时,若是以完成整个前端项目为目标的话,你所需要绝对不仅仅只是一个 View 层的 React 所能办到的,你会发现前端还可能面临构建、路由、数据流处理等等一系列问题。所以就像当初遇见 AngularJS 一样,又开始接触眼花缭乱的第三方库所灌输的各种概念。这个时候,你还会认为组合拳的方式好于一揽子式的解决方案吗?

当我们站到一定高度之后再回过头来看问题,似乎问题就变得简单乃至问题都不复存在了。而如何能站到更高的高度呢?那就是开始同时尝试两种方案吧。只有积攒了一定的经验之后,才会认识到跟随永远不是最终的答案,只有亲身体验之后才会拥有自己的认识。那么,最终送上一句话:就是干!

AngularJS 1.x 到 2.0

从 Angular 1.x 官方文档的变迁中就可以看出,Google 已经有意精简了核心 Modules 的内容,并且让其所引入的概念尽可能少。AngularJS 拥有着诸多特性,人们津津乐道就是:依赖注入、模块化、自动化双向数据绑定、语义化标签等等。而如果你是一个习惯于写后端的软件工程师的话,所谓的 DI 和模块化都是常用的代码分层手段,而双向绑定也只是一种 VM 的简化形式,最核心也是最新颖的概念反而就是 Directive,赋予了 HTML 更强大的能力,相当于让浏览器学习了新的语法。

但与此同时指令也变得过于复杂,赋予 Template 过多的功能之后只会让人想起原来的服务端脚本语言,比如 JSP 或者 ASP,它们使用数据库的内容加上逻辑判断来直接填充 HTML 模板。而目前 AngularJS 中的赋予了类似 JSP 的过强能力,允许了,甚至鼓励了程序员把代码写得混乱的行为,模板再次成了灰色地带

AngularJS 的创始人之一 Misko Hevery:AngularJS 弥补了 HTML 在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展 Web 应用中的 HTML 词汇,使开发者可以使用 HTML 来声明动态内容,从而使得 Web 开发和测试工作变得更加容易。

当 AngularJS 刚创建出来的时候,它并不是给开发人员用的。它是一个工具,更倾向于给需要快速创建持久化 HTML 表单的设计人员用。随着时间推移,它作了改变以适应各种场景,开发人员也用它建造更多、更复杂的应用程序,而只是在原有基础之上直接进行「增量化地」改进是远远不够的。这就是 Angular 2.0 在较高层次上的动机。更详细的内容可以参考这篇[翻译]有关 Angular 2.0 的一切,我还特意去翻了一下原作者Rob Eisenberg的 Blog 和 Twitter,结果就发现他是:

Creator of Caliburn.Micro & Durandal. Former Angular 2.0 team member. Currently building a new tech startup, Durandal Inc., whose first product is Aurelia.

Aurelia 和 Angular 2.0 有诸多相似之处,详细的内容可以参考Introducing Aurelia,以及后 Angular 时代二三事这篇文章里面所提到的一些共同特性。

最后从这篇浴火重生的 Angular中查看关于Angular 2.0最新的 module、Web Components、observe、promise 等特性吧,据说被诟病已久的性能也优化得不行不行的,总之我还是相当期待 Angular 2.0 的!

划分前后端边界?

在这篇来自关于[翻译]Angular 的问题文章中,作者 ppk 乃至译者 xufei 自己也提到,Angular 更多地是面向企业的 IT 部门,而不是前端人员,并且使用 AngularJS 的用户更多是有 Java 背景的人员。而在现在这个前端粥多僧少的阶段,必然有很大一部分 Java 开发人员要去写 JavaScript,但与此同时由于 JavaScript 代码太过缺乏约束,也让 Java 开发人员更加无所适从。这时 Angular 的约束性以及依赖注入等特性的好处就彰显出来了,特别是对于传统后端开发者来说,当遵守 AngularJS 的约定时,生产力也会更高。

与此同时,AngularJS 独特的编码风格,它那种更倾向服务端而不是浏览器端的对 HTML 模板系统的封装形式,以及严重而基础的性能问题也吓跑了不少原来写前端的开发者。对于很多前端人员而言,最大的问题就是,AngularJS 强迫自己用一种指定的方式去干活。

xufei 提到的另外一个关于前端代码写得烂的原因就在于:前端开发者缺乏架构意识,或者项目负责人和架构师(通常是后端)没有足够的前端知识,而这两点不解决,用什么框架都一定做成渣。这点需要反对一下的就是,这跟框架可用性以及易用性的关系还是挺大的,要是开发者都能够有清晰的编程架构意识,那岂不是纯靠原生的 Java 就可以把后端写得很漂亮,又或者是只靠 JavaScript、CSS、HTML 就可以把前端的脏活干得很漂亮?

然后,其实这儿也牵扯出一个更有趣的问题,在前后端分别都有相应的「模板」概念,那么 HTML 的动态内容究竟应该由谁来处理,也就是如何划分和界定前端后端?而评论中也有两位大神对模板应当归属于浏览器端还是服务器端吵得不可开交,而我个人还是比较赞同@calidion 的观点,不应该去区分绝对的前端后端,更多内容在:Web 开发的前端与后端的界线在那里?,最后的结论就在于「运行环境是唯一的前后端分界线」。

那么,在这个前后端分离趋势愈演愈烈的时期过渡之后呢?Web 的未来是在哪里?Isomorphic/Universal JavaScript嘛?其实对于一个更广泛概念的 Application 来说,前后端本来就是一家,最多分为界面(Application 的界面可能是 Web/iOS/Android/Desktop 等等)和背后的数据处理而已。若是使用统一的数据格式(JSON)并且在浏览器内存和数据库间实现数据同步(个人很喜欢Meteor的概念),剩下的就只是编写业务逻辑,然后如何把数据显示到不同的「界面」上的问题而已。


本文总阅读量

期待您的分享与讨论: