Part 4：全栈 or 全烂 ？

Node.js 相关工具

  • grunt/gulp/fis/webpack
  • bower/spm/npm
  • tdd/bdd cucumber/mocha
  • standard
  • babel/typescript/coffee

前端开发4阶段

  • html/css/js（基础）
  • jQuery、jQuery-ui，Extjs（曾经流行）
  • Backbone（mvc），Angularjs、Vuejs（当前流行）
  • React 组件化（未来趋势）、Vuejs

Vuejs 综合 Angular 和 React 的优点，应该是下一个流行趋势

Hybrid 开发

Hybrid 混搭开发是指使用 html5 技术开发的跨浏览器应用，并最终可以将 html5.js.css 等打包成 apk 和 ipa 包的开发方式。它也可以上传到应用商店，提供给移动设备进行安装。它最大的好处是通过 H5 开发一次，就可以在多个平台上安装。

未来的3点判断

  • js 一统天下（nodejs 做后端，传统 web 和 h5 使用 javasctipt，更智能的工具如 gulp，更简单的写法如 coffeescript 等）
  • h5 大行其道，为最终方向（网速变快，硬件内存增长）
  • 组件化，和jvm所谓跨平台类似，是一个很长的中间过渡阶段，用户体验好，唯一的就是现在相对初期，有点坑

跨平台

1）c/s 架构到 b/s 架构

这个大部分都清楚，不多说

2）移动端：加壳

Part 4：全栈 or 全烂 ？ - 图1

在浏览器上做文章，把页面生成各个移动端的 app 文件

3）PC端：继续加壳

Part 4：全栈 or 全烂 ？ - 图2

一样是延续浏览器做文章，不过这次把页面生成各个 PC 平台的可执行文件

  • node-webkit is renamed NW.js
  • Electron - Build cross platform desktop apps with web technologies

目前比较火的编辑器 atom 和 vscode都是基于 Electron 打包的。

4） 组件化：统一用法

React 的出现影响最大的是 jsx 的出现，解决了长久以来组件化的问题，

  • 我们反复的折腾 js，依然无法搞定
  • 我们尝试 OO，比如 Extjs
  • 我们最终还是找个中间格式 jsx

单纯的 React 只是 View 层面的，还不足以应用，于是又有 Redux

核心概念：Actions、Reducers 和 Store，简单点说就是状态控制

然后再结合打包加壳，变成 app 或可执行文件

  • iOS、Android 上用 Cordova
  • PC 上使用 Electron

总结

  • 组件定义好（React）
  • 控制好组件之间的状态切换（Redux）
  • 打包或加壳（Cordova or Electron）

这部分其实组件化了前端，那么能否用这样的思想来组件化移动端呢？

再看 react-native

A framework for building native apps with React. http://facebook.github.io/react-native/

简单点说，就是用 React 的语法来组件化 iOS 或 Android SDK。

它们都在告诉我们，你们以后就玩这些组件就好了，你不需要知道复杂的 SDK 是什么

5）当下流行玩法

Medis is a beautiful, easy-to-use Redis management application built on the modern web with Electron, React, and Redux. It’s powered by many awesome Node.js modules, especially ioredis and ssh2.

Part 4：全栈 or 全烂 ？ - 图3

技术点

  • 使用 Node.js 模块
  • 使用 Webpack 构建
  • 使用 React（视图） + Redux（控制逻辑）
  • 使用 Electron 加壳打包

亲，你看到未来了么？

6）总结

讲了 Node 工具，前端4阶段，hybrid，各种跨平台，目前就是为了介绍 Node 全栈的各种可能，下面讲一下如何能做到 Node 全栈？

如何全栈？

全栈核心

  • 后端不会的 UI（界面相关）
  • 前端不会的 DB（业务相关）

只要打通这2个要点，其他就比较容易了

我的全栈之路

  1. 没有目标就向钱看，自然会找到目标
  • 从 java 开始，蹭课，背着机箱到深圳，3个月胖20斤
  • 坚持翻译英文文档，看 thinkinjava
  • 毕业后开始 bi，整理 bi 文档
  • 学长明林清，传授 jQuery，愿意学，别人就更愿意分析
  • 接手《内蒙广电数据分析与科学决策系统》，打通前、后端
  • 广东联通，自己造轮子，写 jQuery 插件，DRY
  • 做云计算，学习 AIX，写有《凌云志》
  • 分手、离职，去做 iOS，从 cordova 开始搞 H5，研究各种移动端框架，自己写框架，转原生
  • 面试也是学习的利器，轻松进新浪
  1. 既然无法逃避，就热爱它，最后变成兴趣
  • 总结了大量 iOS 经验，想写书，结果写了一堆写书的工具
  • 去网秦做技术总监，做首席，管架构，带人，写开源项目
  • 创业，当 CTO，结婚，做公众号运营，写书，只在 StuQ 讲点课
  1. 人生不只有代码，但它能让我快乐，终生受益

也曾懵懂，也曾迷茫，但我这人比较傻，一直信奉：“一次只做1件事儿，尽力做到极致”，短时间看这是比较傻的，但一旦你坚持下去，你就会发现技术其实是门手艺，厚积薄发。

我没办法说自己最擅长什么，但在什么场景下用什么技术是我擅长的。或者说，应变是我最大的本事。很多框架，新技术我都没见过，用过，但花一点点过一下，就能拿已有的知识快速的理解它，这其实是长期学习的好处。

现在越来越忙，写代码的时间越来越少，技术又越发展越快，我能做好的就是每日精进，仗着这点已有的知识储备跟年轻人比赛。我不觉得累，相反我很享受这种感觉，没有被时代淘汰，是一件多么幸福的事儿。

1）从后端转

做后端的人

  • 对数据库是比较熟悉，无论 mongodb，还是 mysql、postgres
  • 对前端理解比较弱，会基本的 html，css，模板引擎等比较熟悉
  1. 4阶段循序渐进，build 与工具齐飞

前端开发4阶段，我的感觉是按照顺序，循序渐进

  • html/css/js（基础）
  • jQuery、jQuery-ui，Extjs（曾经流行）
  • Backbone，Angularjs（当前流行）、Vuejs
  • React（未来趋势）、Vuejs

2）从前端转

从前端往后端转，api 接口非常容易学会，像 express、koa 这类框架大部分人一周就能学会，最难的是对 db、er 模型的理解，说直白点，还是业务需求落地的理解

我们来想想一般的前端有什么技能？

  • html
  • css（兼容浏览器）
  • js 会点（可能更多的是会点 jquery）
  • ps 切图
  • firebug 和 chrome debuger 会的人都不太多
  • 用过几个框架，大部分人是仅仅会用
  • 英语一般
  • svn/git 会一点

那么他们如果想在前端领域做的更深有哪些难点呢？

  • 基础：oo，dp，命令，shell，构建等
  • 编程思想上的理解（mvc、ioc，规约等）
  • 区分概念
  • 外围验收，如 H5 和 hybird 等
  • 追赶趋势，如何学习新东西

以上皆是痛点。

所以比较好的办法

  • 玩转 npm、gulp 这样的前端工具类（此时还是前端）
  • 使用 node 做前后端分离（此时还是前端）
    • express、koa 这类框架
    • jade、ejs 等模板引擎
    • nginx
  • 玩转【后端】异步流程处理（promise/es6的(generator|yield)/es7(async|await)）
  • 玩转【后端】mongodb、mysql 对应的 Node 模块

从我们的经验看，这样是比较靠谱的。

https://github.com/moajs/moa-frontend

就是最简单前后端分离，里面没有任何和db相关，

技术栈

  • express
  • jade
  • bootstrap，bootstrap-table
  • jquery
  • gulp
  • nginx

一般的前端都非常容易学会，基本2周就已经非常熟练了，我的计划是半年后，让他们接触【异步流程处理】和【数据库】相关内容，学习后端代码，就可以全栈了

3）从移动端转

移动端分

  • native 原生开发
    • hybrid 混搭式开发（比如 cordova）
    • 组件式开发（比如 RN）

面临的问题：Native 开发是姥姥不疼舅舅不爱，非常尴尬，很明显连培训出的人就业不要工资混经验就很明显了。另外领导们也都在惦记，能不能用 H5 写？这还算是保守的，如果直接激进的就直接上 RN 了，那么 Native开发的程序员就变了

一个写插件的程序员…招谁惹谁了。。。。

没办法，认命吧，温水里舒服了几年，也该学点东西了

  • hybrid 或组件化开发，你总要会一样
  • 无论哪种，你都离前端很近，因为 H5 或组件化都是从前端走出来的
  • 组件化在前端领域先行，无论借鉴还是学习都不可避免
  • 如果没时间就直接上组件化，如果有时间就好好学学前端完整体系，最终也还是要学组件化

原生开发就是 iOS 用 OC/Swift,Android 用 java 或 scala 等，就算偶尔嵌入 webview，能玩js的机会也非常好少

所以移动端转全栈的方法，最好是从 cordova（以前叫 phonegap）开始做 hybrid 开发。

  • 只要关注 www 目录里的 H5 即可，比较简单
  • 如果 H5 不足以完成的情况下，可以编写 cordova 插件，即通过插件让 js 调用原生 sdk 里功能
  • cordova 的 cli 可以通过 npm 安装，学习 npm 的好方法
  • 学习 gulp 构建工具

只要入了 H5 的坑，其实就非常好办了。

  • 然后 h5、zeptojs、iscroll、fastclick 等
  • 然后微信常用的，如 weui、vux（vue+weui）、jmui（react+weui）
  • 然后可以玩点框架，比如 jquery mobile，sencha touch
  • 然后可以玩点高级货，ionicframework（基于 angularjs、cordova）
  • 然后前端4阶段，依次打怪升级
  • 然后 node

这个基本上是我走的路，从2010年写iOS、做phonegap（当时是0.9.3）、一路走到现在的总结吧