前端好难 -- 致即将开发移动 Web App 的新人们

前端之难, 难于上青天...

In many ways, I think being a front end engineer is one of the most complicated jobs in computer science. Most traditional programming concepts don’t apply and there’s a lot of soft science being applied to numerous technologies for usage on numerous platforms. The technical expertise necessary to be a good front end engineer is a vast and complicated terrain made more complex due to the parties you’re ultimately responsible to serve. Technical expertise may get you in the door as a front end engineer, but it’s your application of that expertise and your ability to work with others that makes you good.
                                                                    -- Nicholas C. Zakas What makes a good front end engineer?

什么? 你这是在逗我吗? 前端也好意思说难? 只需要一个文本编辑器就能够搞定一切, 复制粘贴三下五除二, 随便找个做网站的, 分分钟解决问题, 你在这里跟我说难, 这不是逗我是什么?

我相信绝大多数没有真正深入过前端的人, 都会有这样的想法, 觉得前端实在太简单了, 简单到我都不屑于学.
在我看来, 大家对前端的误解, 就好比大家对JavaScript的误解( 世界上最被误解的语言 ).
其实一个专业前端在知识的深度和广度上要求都非常之严, 肯定不仅仅是复制粘贴几段HTML标签, 网上找点CSS特效, 下载个jQuery插件什么的.
前端更多的与W3C标准息息相关, 你什么时候领悟到Web页面的3层架构(内容/展现/行为), 你什么时候开始关注HTML结构语义的重要性, 你什么时候真正理解CSS渐进增强(Progressive Enhancement), 你什么时候开始思考你写的是Unobtrusive JavaScript吗? 什么是优雅降级(Graceful Degradation)呢? 你什么时候真正将 JavaScript 做为一门编程语言来学习过?
这一切的一切都不单是你看上一本书或码一晚上代码所能够学到的, 前端是一个非常非常需要积累, 非常非常需要总结经验教训的地方. 前端日新月异发展是如此之快, 你一定要稳打基础, 理解最根本的基石, 跟上那些先进的思维模式, 在前端的路上永远都不会缺少酷与创新, 记住自己的目标, 不要迷失了最初的梦.

如果你从现在开始, 摆正姿态, 就请来见识下什么是 最牛逼的 HTML 和 CSS 代码 与君共勉.
<div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
</div>

.content {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}



接下来让我们回到主题, 为什么开发移动 Web App 更难?
什么你跟我说更难? 你这是要闹哪样啊?

首先要说的是移动 Web App 的特殊性, 就是要尽量模仿成 Native App, 让用户用起来相当爽, 达到以假乱真的目的.
这主要是因为当下多是 Native App 为主, 用户一般都习惯了那种流畅的操作感觉, 如果你一上来就草草地将你的 Web 网站通过 PhoneGap 打包成 Hybrid App, 那就等着被用户K.O.吧: 你丫这是拿WAP网站来忽悠我呢?
其中最大的问题就是, 传统 Web 网站页面之间的跳转, 会产生一个比较大的空白时间, 让用户感觉很不爽, 整个 Hybrid App 就像一盘散沙, 缺乏连贯性, 没有像 Native App 那种页面切换时衔接的效果. 还有重要的一点就是需要保存页面的状态, 在用户不停地切换页面后返回来, 又必须恢复到最初用户选择的那种状态和所处的位置.

这就是为什么我们要选择以单页面(Single Page Application)来开发移动 Web App 的原因, 关键是方便实现切换"页面"时的过渡效果以及"保存"页面上的状态. 但单页面的开发模块必然增大开发难度, 也徒增了其他问题, 因此很有必要引入前端MVC的概念, 让它来统一组织前端的代码结构. 这就是为什么我们选用Backbone的原因. 它可以说就是为SPA而生的, 简洁明了, 没有太多硬性规定来干预你的开发, 也没有任何魔法绕得你晕头转向. 你所要做的仅仅是转变思维, 将界面元素拆分成一个个独立的View, 仅此而已, 别无其他.

Head First Backbone.js https://speakerdeck.com/jaceju/head-first-backbonejs

如果真有其他的话, 那一定就是前端模块与前端模板的渲染问题, 考虑到团队的因素, 我们直接使用了Backbone依赖的Underscore.js来做模块渲染. 其实模块真心不难, 想想你以前怎么写JSP就是了, 其实JSP就是一个模板引擎而已.

都说了是要开发移动 Web App, JavaScript 肯定跑不了, 那么接下来我们就说说 JavaScript 开发过程中最最黑暗的领域 -- 全局变量, 作用域, 原型(prototype), this, 闭包(closure), 嗯...讲完了, 大家懂了吗?

再有就是我们为了在开发复杂程序时让 JavaScript 更适合团队开发, 引入了模块化概念, 引入了RequireJS. 因此很有必要回顾下 JavaScript 模块化开发的历史, 主要是为了弥补 JavaScript 语言中最最缺乏的一块 -- 封装模块, 让别人知道你的代码提供了哪些功能, 以及如何使用, 还有依赖管理避免混乱.
1. 全局function
   function log() {}
2. 命名空间(package), 模拟其他语言中包的概念, 或许是你最接受的方式
   var myUtil = {
       log: function() {}
   };
3. 匿名闭包(Anonymous Closures), 代表作大家再熟悉不过了
   var myUtil = (function() {
       var privateVar = 0;
       return {
           log: function() {}
       };
   })();
4. Module规范(CommonJS, AMD), 模块化风格趋向于ruby, 模块就是模块没有包/文件夹的束缚, 想想java中的包名与类名纠缠的关系
   define(function(require, exports, module) {
       var privateVar = 0;
       return {
           log: function() {}
       };
   });

如果上面的东西你一个个都认识, 那么恭喜你, 你已经老了.
如果上面的东西你都不认识, 那么同样也恭喜你, 你可以站在巨人的肩膀上看得更远, 不必走弯路了. 但请不要忘记历史的教训, 无古不成今, 你需要了解历史的真相.

想想你以前是怎么写的JavaScript, 各种script标签乱飞, 各种依赖关系剪不断理还乱.
当你看见我们使用RequireJS来做的JavaScript模块, 是不是觉得各种毁三观啊, 你质疑过, 你彷徨过, 这还是JavaScript了, 莫非你们使用了某种外星科技? 请将一切的烦恼抛之脑后, 你不懂就对了, 我早就跟你说了前端好难, 你又不信.
看看我们现在是如何写JavaScript的, 定义模块我们用define, 引入模块我们用require, 其他什么依赖加载统统不用管了, 那是相当happy啊.
define(function(require, exports, module) {
    // 引入模块
    var $ = require('jquery');
    // 导出我们编写的这个模块的功能
    // 其他模块要使用这个模块, 也只需 require 即可
    return {
        cool: function() {}
    };
});
所以你还在羡慕别的语言中方便的import功能吗? 痛苦吗? 懊恼吗? 从此妈妈再也不用担心我乱写乱放JavaScript了.

到目前为止, 如何通过 JavaScript 来开发移动Web App的架子已经搭得差不多了, 接下来我们看看如何实现 移动Web App的UI组件. 想必没有人愿意一切从头开始吧, 所有什么基础样式, 通用的组件全部都自己来实现, 先不说这有没有难度, 时间上允不允许, 真心觉得没有必要把生命浪费在这上面. 因此我们使用了 Bootstrap 来提供基础样式和组件, 还有就是使用了 Font Awesome 做为图标字体避免图片图标需在各种移动设备上适配. 因此编写CSS时请重(chong)用它们, 重(zhong)用它们, 学习它们绝对让你受益匪浅, 请相信我, 我真心推荐你们好好的学一学, 不要因一时的麻烦而心生抗拒, 虽然你开始放慢了节奏, 但决定不会因此而减慢你达到终点的速度.

还有就是写每一行HTML和CSS都要小心冲突的问题, 因为我们最终所有的东西都只在一个页面上运行, 各种情况都有可能发生, 不要因为你HTML中ID的命名或全局CSS定义而影响了大家, 千万千万要记住. 另外就是移动设备和PC上一样, 同样存在浏览器兼容性问题, 大家小心就是了. 再有我们的Web App最终会通过PhoneGap来打包成真正的App, 不出意外的话, 你也需要了解个大概, 紧接着也有可能需要了解下Android的开发还有Java(如果你完全不懂的话), 还有J2EE的一些东西, 反正就是一句话越陷越深.

到最后我还想善意的提醒大家一句, 前端最大的问题绝对不是能不能够实现的问题, 而是实现方式的问题. 前端是如此自由, 自由得可以因为你的一个不小心就让别人in trouble, 前端最怕的就是沦为管理/维护的噩梦...
当你看见那乱七八糟各种游离的HTML结构, 当你看见那CSS被人重复的定义/覆盖, 当你看见JavaScript充斥着诡异的语法和调用方式, 当各种名模奇妙的问题向你袭来, 你就会懂我在说什么了.

听过这么些背景后, 你对前端的感觉怎么样? 前端到底是难啊, 还是难啊, 还是很难啊?
不管你现在想法如何, 只要你打算学点新东西, 就请系统的学习吧, 东拼西凑的学习方式没有一点好处, 你需要的是专业精神.

以下提供一些重要的参考资料, 大家有必要认真学一遍
1. 前端四板斧
    HTTP/HTML/CSS/JS 这四门手艺一个都不能少, 这就是我前面提到过的基石.
    请牢记HTML什么是语义, 什么是结构, 什么是真正的内容. 编写CSS时记得运用编程的思想. 弄清楚JavaScript是基于原型的动态语言, 所有的东西都是对象, 我说的是所有.
    * HTTP
        当你输入一个网址的时候，实际会发生什么?
    * HTML
        《HTML and CSS -- Design and Build Websites》
        w3school 在线教程 中所有的HTML/CSS/JS教程
        W3Fools – A W3Schools Intervention
    * CSS
        《精通CSS(CSS Mastery)》
        CSS 101: interactive tutorial
    * JavaScript
        《JavaScript语言精粹(JavaScript:The Good Parts)》
        《JavaScript DOM编程艺术(DOM Scripting)》
        Javascript 面向对象编程
        Superhero.js
        Scalable JavaScript Application Architecture
        Maintainable JavaScript
    * 前端
        《编写高质量代码 -- Web前端开发修炼之道》
        让开发也懂前端
        Professional Frontend Engineering
        Progressive Enhancement 2.0
2. JavaScript 模块化
     Javascript模块化编程
     RequireJS -- 为何用 Web 模块的方式?
3. jQuery
     jQuery for JavaScript programmers
     Essential jQuery Plugin Patterns
     The jQuery UI Widget Factory -- Create stateful plugins
4. Backbone
    JavaScript Architecture
    Step by step from jQuery to Backbone
    A Complete Guide for Learning Backbone Js
5. Bootstrap & Font Awesome
    Bootstrap & 中文
    Font Awesome

在这之后请允许我给你一个新的称号 -- F2E(Front-End Engineer)
如果你立志做一名专业的前端, 你就会真正意识到我说的好难是有多难, 一切从头开始, 循序渐进.
如果你仅仅是过来凑个热闹打打酱油, 请保持谦卑, 万事不要自作主张, 前端的坑比你想象的要多要深.

最后你可能要问了, 为什么不直接使用jQuery Mobile呢?
嗯...这是个好问题, 没想到被你发现了, 那么就留给你自己在实践中解答吧.

一入前端深似海...