Pages

▼

Tuesday, 3 January 2017

漫谈前端及其学习

当二十年前，前端领域刚刚出现甚至还不叫前端之时，那会儿的网站开发人员的工作主要是用 Flash 做动画、用 Dreamweaver “可视化编写”网页、用 Firework 切图，所以很长一段时间，业内从业人员俗称或自嘲为“切图仔”。
2010 年 Backbone、Angular等前端 JavaScript 框架的相继出现，让前端开发人员逐渐有了底气：
因为他们也可以借助程序设计领域由来已久的 MVC、MVVM 来构建有可靠范式支撑的 SPA（Single Page Application，单页应用） 了。
而 2009 年出现、2011 年后不温不火的 Node.js 把 JavaScript 直接从浏览器端带入到服务器端，继而 npm 社区方兴未艾，进而出现 React、Polymer 等推动 W3C 规范或多方互相影响、借鉴、学习的“新概念”前端 JavaScript 框架，让从业人员意识到：
前端领域也可以实现组件化，反推规范的制定。
而与此同时，前端工程化也告别了刀耕火种之状态，一同步入了初级阶段。
早早地，Node-WebKit（现名为 NW.js） 和 Electron 已在桌面端攻城掠地多时，早有像 Atom 编辑器这样由 Github 社区开发维护并广受好评的成功开源项目。
而后 Facebook 的 React Native 把矛头和目标直指 Android 和 iOS 开发领域，其愿景不可谓不宏大。
React Native 引入虚拟 DOM 的概念，借助中间的抽象层，理论上可以横跨所有平台，支持使用 HTML、 CSS、 JavaScript 构建跨平台产品和应用，大大加速开发效率，减少开发周期。
期间，不乏像 Meteor、MEAN 这样的全栈平台和框架大展身手...
至此，前端领域在短短的四五年间，可谓变幻莫测、生机勃勃，也不免显得稚气未脱，远未成熟...
步入 2016 年，ECMAScript 标准将继续深化，JavaScript 新版本将每年如约而至...而此时此刻，却越发猜不透前端的走向了...

然而，就此打住

AJAX 还未普及之时，“前端”作为 View 层（视图层），仅仅只承担了展示页面效果的工作，往往由后端工程师一并完成，或者说本来就没有前端工程师的职位。
所谓前端，其实就是设计师开始用 Dreamweaver 玩可视化编程了。接着通过 Ajax，前端工作突然可以与服务器进行数据交互了，有了一点独立的苗头，可绝大部分前端工作也还是由后端工程师承担。
2006 年 jQuery 的出现以及接下来几年 jQuery 社区的火爆，让前端工程师能高效完成兼容各大浏览器的页面交互效果的工作。
渐渐地，也就有一些走在前列的“闲人”开始“谋划着”要前端工程师承担更多的职责（也有可能是这帮人不喜欢什么事情都依赖后端工程师）。慢慢地，前端工程师有 Node.js 可以把玩了，从此再也不需要依靠后端工程师的协助，便可独自一人完成一整个项目和产品的开发、测试、上线、运维，从此也就必须了解业务逻辑、了解服务、了解路由、了解网络、了解服务器、了解跨平台开发、了解 App 开发...

要点来了

说了这么多，要点其实很简单，可以理解为：
  • 有人不希望总是依赖后端工程师，想要 JavaScript 跨平台，于是搞出了 Node.js
  • 开发者的智慧和力量，将 npm 社区推向前所未有的高度
  • 前端工程师借助这一趋势，只要熟悉 JavaScript 便可一展身手，构建属于自己的产品，不需要后端工程师的协助
然而这其中最大的一个断层便是：
现阶段，绝大多数前端工程师在成为前端工程师之前，都是有经验的后端工程师，这些人自然很容易接受新型“前端工程师”所需要承担的职责，因为本来前端就是从后端分离出来的工种和业务，他们大体都清楚后端领域的基础知识，以及有一定的后端实战开发经验。
然而，这可为难了很多从设计师转行的前端工程师以及零基础学员，因为他们一般都是从 View 层，也就是产品的设计与实现（俗称“切图”）开始步入前端的，让他们突然接受业务、数据、网络、服务这些层级，我想一开始多多少少也会迷茫和摸不着头脑罢。
BTW，我就是后者，所以深有感触。

结论

最后，总结一下我自学前端近 20 个月、反观之前的自学历程后，生发的感慨以及自认为合适的自学路径：
如果你的梦想是不借助后端工程师，自行研发一款产品（不可否认，这是我的梦想之一），我建议一开始就想好自己想做什么产品，直接从事后端工程师的工作，也就是学习数据交互、数据库、路由、网络等基础知识，或者是直接学习 Node.js 开发。自学这个之后，你便可以做出可用的功能。
那么接下来的事情就是：产品交互和产品颜值了。此时再自学 HTML 和 CSS，从界面设计与实现的角度切入前端开发，无论是借助 CSS 框架还是 JavaScript 框架实现 View 层的快速设计与开发，那是极极好之事。
至于交互设计，我想只能靠多把玩优秀的产品，从中领悟了，靠的是感性认知和天赋啦。再之后，如果有意抛弃后端，则可以深入学习 Node.js，将后端之所学，在 Node.js 上一一寻找对应。
永远记住：不要为了学习编程语言而学习编程语言。一切从需求和产品出发，需要什么，补足什么。
斯以为此法更为妥当。终。

引用

概念
JavaScript 类库
JavaScript 框架
跨平台框架
全栈框架和平台
JavaScript 规范
---------------------


其实不管是前端还是后端，首先要清楚，自己是想从事业务型的技术工作，还是 Research 型的技术工作。
前者可以理解为：互联网公司的程序员。业务型的前端工程师，最大的一个特点是：从客户需求出发，去真真正正地做出一个产品来，交付客户，让客户满意，并对客户产生实际的价值，这也是大部分互联网技术从业人员的工作内容。业务型的技术人员使用的技术往往不是最新的前沿技术，而是经过验证的效益更高的技术，用最小化的成本来服务客户。这需要不停地实践与实战，以便更快、更高效地实现客户需求的满足。
后者可以理解为：行业的科学家。这种角色时常走在行业的前面，去带领互联网公司，甚至是技术行业，探索更先进的技术、挖掘更有价值的数据、构建服务大众的基础设施平台等……
目前，绝大部分互联网技术人员都从事着业务型的技术工作，少部分极其优秀的技术人员可以从事 Research 型的技术工作。文章一开始就强调要了解清楚自己想从事的是哪个类型的技术工作，目的是树立一个终极目标。而要从事 Research 型的技术工作，首先必定是需要多年的业务型技术工作的经验积累的。
补充一个题外话
很多没有接触过编程的人都以为编程很难，要具备很高的数学能力，是因为他们往往都把“编程”这个活动理解为从事 Research 型的技术工作了。这是他们的一大误区。
其实大部分的编程活动，都是对“业务逻辑”的理解，然后用代码拼凑出产品和服务，这里面涉及到多深的数学知识？我看不多……
编程的总体思路就像是写书。写书前，你已经识字了，这是你的基础，你还会运用积累下来的一些表达技巧，让你的书更加吸引人，实现更高的销量。写书前，你已经知道了很多前人规划好的、约定俗成的东西了，而你要做的是，利用这些约定俗成的东西，去写一本自己的书。这本书可以参考前人的书，也可以参考已有的论文。
编程，往往是一个创造过程，而不是一个发明过程。
前端入门指南口语版
前端作为一个新兴工种和职业，它一直未能有幸像 Java、C 等后端语言一样，进入高校，成为一门课程。这就导致几乎所有的前端工程师，要么是从后端工程师转型而来，要么从设计师转行而来，都靠自学成才。而我也发现，校内极少人从事前端开发，大部分人都走后端和客户端路线。
而前端从诞生至今，一直未能跳脱 HTML、CSS、JavaScript 这三门“语言”。自然地，入门指南当然围绕三者讲起：
HTML、HTML5
记住至少 90% 的 HTML 标签及其语义，重点是 header、footer、article、main、section、nav、aside 这种语义特别明显的用于布局的标签。
CSS、CSS3
记住至少 90% 的 CSS 属性与写法，重点是盒模型（margin、padding、border、box-sizing）、页面布局相关（position 的用法、淘宝的双飞翼布局）、页面渲染相关（背景、阴影、字体样式等）……
以上是编写静态页面的基础，重点是多实践。
Bootstrap
CSS 框架 Bootstrap 应该是大部分前端工程师绕不过的一个点。它流行到以至于现在有些前端开发人员都刻意避免使用 Bootstrap 来防止页面撞脸了。
即使如此，还是阻挡不了大部分前端开发人员使用它的热情。毕竟它能帮助我们快速实现页面响应式布局、快速编写出可交互的页面。
我的建议：觉得 HTML、CSS 基础了解得差不多了，我主张先学习 Bootstrap，重点是学会 Bootstrap 的栅格系统及其原理，了解响应式网页设计是如何实现的，能够用 Bootstrap 拼出一套管理后台界面。
Bootstrap 的进阶用法就是：自行定制 Bootstrap。虽然已有 Bootswatch 这样的第三方 Bootstrap 主题能满足大部分一般需求，但总有些时候需要自定义样式。而在使用 Bootstrap 的过程中，修改 Bootstrap 默认主题的最佳方式不是覆盖默认设置，而是自定义主题后构建出自己的 Bootstrap 主题。
关于定制 Bootstrap 主题，官网上有一个现成的网页。而如果要在自己的电脑定制，需要掌握 LESS 或者 Sass（两者都是 CSS 编译器，为编写 CSS 引入了编程语言的变量、复用等特性）。
JavaScript
我个人是从设计师转型而来的前端工程师，所以偏重页面的设计、对设计稿的还原程度、更好的页面语义和页面布局、SEO 等，对 JavaScript 的了解并不深。这样的角色，在腾讯的岗位叫 UI 开发或网页重构。小公司的话，不分前端工程师、网页重构工程师、UI 开发工程师。所以遇到以编写 JavaScript 为己任的前端开发工程师，我的 OS 是这样的：
没想到你是这种前端工程师。
哈哈，开个玩笑。回到正题上来：
由于上面提到的缘由，对于 JavaScript，我主张是边用边学。当然首先是要已经看过 W3School 的 JavaScript 文字教程，了解 JavaScript 在浏览器中的能力（操作 DOM、BOM，知道 AJAX 是什么），并知道它拥有什么样的 API，什么效果能实现，什么效果不能实现。当 JavaScript 用于编写程序逻辑时，要知道需要用到什么语法、内置方法、内置 API。再后来，是了解 HTML5 中 WebSQL、Web Storage（Local Storage 和 Session Storage）、应用缓存（Application Cache）、Cookie 是怎么回事，能实现什么功能。
以上算是接触并使用 JavaScript，还没进入大量实战阶段。
jQuery 与 Zepto.js
我的主张是，JavaScript 一开始并不需要学得太深。对于业务型的前端工程师，完成上面提到的 JavaScript 部分，基本就够用了。
而基本上，一定要做的一件事是：学习 jQuery、Zepto.js（人称移动端的 jQuery）。两者的实现极其相像，可以只学 jQuery，Zepto 基本就无师自通了。
jQuery 和 Zepto.js 之于 JavaScript，就像 Bootstrap 之于 HTML 和 CSS。都是为了简化代码、更高效地完成业务而开发的 JavaScript 类库。它们封装了很多原生 JavaScript 的语法和方法，使之编写代码时更方便，同时保证对旧版浏览器的兼容性。
对于两者，建议：了解如何使用 jQuery 操作 DOM、常用的数据处理方法（数组项如何增删查改、对象如何访问及选取、方法如何调用、JSON 数据如何处理及使用）。
所谓中级前端工程师
所谓中级前端工程师的范畴：学会使用前端工具。
工具包括但不限于：
  • Sublime Text、Atom 等代码编辑器（认真记住各种快捷键，好好阅读各大编辑器的插件使用说明）。
  • 方便前端开发的利器：浏览器自动刷新 Browser-sync、调试工具 Chrome 控制台、Fiddler 和 Weinre、模拟请求 Postman、图片压缩 iSparta……
  • Node.js 平台下的 NPM（一个集合了几乎所有优秀前端开源项目的社区，用来管理项目中用到的开源技术、资源、插件等）
  • CSS 预处理器与后处理器：Autoprefixer、PostCSS（一个庞大的社区，提供各种 CSS 处理能力的插件）。
    由于各大浏览器对标准 CSS 的支持情况不一样，都或多或少地拥有带自身特殊前缀的私有 CSS 属性，例如 -webkit-border-radius 这个私有 CSS 属性是 Webkit 内核的浏览器所支持的写法。
    以前没有 CSS 预处理器与后处理器时，往往需要前端开发人员手写带有各种特殊前缀的私有 CSS 属性。有了这些处理器之后，只需要写标准的 CSS，如 border-radius，再用这些处理器处理一下 CSS，就能自动补齐浏览器私有 CSS 属性，实现前端页面的最大化兼容性，例如兼容 IE9、IE8 等等……
    当然，这个栗子只是众多 CSS 预处理器与后处理器最简单的一个应用而已，还有更多高阶属性与使用技巧。
  • JavaScript 编译器：之所以 JavaScript 有编译器，是因为自从 2015 年，JavaScript 的标准制定组织 ECMAScript 委员会决定今后每年都推出新版的 ECMAScript 标准，也就是新版的 JavaScript。而又因为各大浏览器的开发进度不同，对新标准的实现还没完全跟进，而一些喜欢追新的前端开发人员又想早早地开始使用新版的 JavaScript，所以就出现了 Babel 这样的 JavaScript 编译器。
    Babel 的主要功能是将新版 JavaScript 编译成旧版 JavaScript，使得前端工程师既可以编写最新版的 JavaScript，而前端页面也可以完美兼容各大浏览器。
  • 前端开发构建工具：Gulp。前两年还流行 Grunt，这两年流行 Gulp，所以直接学习并使用 Gulp吧。
    Gulp 的最大一个用处是：打通开发过程中的工作流程。例如开发过程中，自动刷新浏览器、将 SCSS 编译成 CSS、将新版 JavaScript 编译成各大浏览器支持的旧版 JavaScript、项目开发完毕后的性能优化：压缩图片、CSS、JavaScript 等静态资源、合并雪碧图，把项目源码上传服务器等。
    其实每个小操作都有工具能完成，而像 Gulp 这样的构建工具的作用是：将所有分散的小操作和小流程，通过 Gulp 平台上的插件，集合成一条龙服务，一次编写前端 Workflow，就可以免去很多分散精力的小操作，实现开发流程自动化。
    上面提到的 CSS 处理器、JavaScript 编译器，都有 Gulp 插件，例如 gulp-autoprefixer、gulp-cssnano、gulp-image……
  • JavaScript 前端框架：Vue.js、Angular.js、React、React Native……
    JavaScript 前端框架的主要作用是，让前端工程师也能像后端工程师一样，以一个已经验证有效的开发范式来支撑项目，降低耦合度，提高项目可靠性和可维护性。
一点补充
由于前端刚从刀耕火种的时代，步入前端工程化的初级阶段，此时会出现大量的工具，例如 Grunt 还没开始用，Gulp 就来了，Gulp 还没领略其精粹，Webpack 又款款而至。迷恋工具，每每追新，必然不是前端工程师的修养。对于工具，我们强调使用场景。在什么情况下，需要使用什么工具，帮助提高效率，才应该是前端工程师所要关注的重点。
所谓高级前端工程师
所谓高级前端工程师的范畴：深入 JavaScript 底层、深入浏览器底层。
包括但不限于（由于本人远不及这个层次，下面的罗列可能不正确）：
  • 玩转 SVG 绘图、Canvas 绘图
  • 页面性能调优
  • 玩转 Web Socket、Web Worker
  • 自行开发 JavaScript 插件、工具、框架等
  • 玩转 Chrome V8 引擎
at