前端小队开发指引 #

前端生态了解 #

TODO：待寻觅合适的slides，如That Js Dude里的What's New in ES6

暂时请参考：

• 2015前端生态发展回顾
• 2016 JavaScript 技术栈展望
• 一名全栈工程师Node.js之路
• ES2015介绍
• 前端知识体系教程
• 前端组件库
• Frontend Development
• Awesome JavaScript
• Awesome之Front-end Development

前端工作流选型 #

• 使用Webpack，而非Browserify
• 如果够用，使用npm自己的极简工作流支持，原因参考：
  • Why we should stop using Grunt & Gulp
  • Choose: Grunt, Gulp, or npm?
• 如果不够，则使用Gulp加以补充
• 不使用GruntJS

前端技术选型 #

• 不支持IE等古代浏览器
• 字符编码选择UTF-8，而非GBK
• HTML5
  • 直接使用HTML来写时，用Emmet(旧称"Zen Coding")和Snippets来提升录入效率
  • 使用Jade 模版语言来写时，用HTML2jade将HTML片段转换为Jade
• CSS3
  • 使用 SCSS 语法来写
  • 不使用SASS语法、Less，原因参见
    • Less vs Sass? It’s time to switch to Sass
    • Why Bootstrap 4 Means Sass Has Won
  • 建议过程中只使用SCSS的一个子集（主要是Variables、Nested、Mixins），将来可能考虑基于PostCSS提供类Scss特性的PreCSS
• JS
  • 使用 ES6（又称之为ES2015） 来写
  • 英文资料参考Overview of ECMAScript 6 features
  • 中文资料参考《ECMAScript 6入门》
  • 不使用：
    • ES4：大部分的IE只支持到这个程度，即很多人理解里的古代JS，语言/库特性缺失太严重
    • ES5：大部分现代浏览器只支持到这个程度，ES5为JS打下来扎实的语言/库基础
    • TypeScript：微软出品的ES5/ES6的超集，增加了类型支持和许多语言特性
    • CoffeeScript：Rails社区很火过
    • 想要对比这些语言，请见TypeScript vs. CoffeeScript vs. ES6
  • 使用Babel将ES6预编译成ES5来在浏览器中运行
• CSS框架选用众所周知的Bootstrap
  • 可以选择其版本3，受众最广，生态最完善。
    • AdminLTE模版
    • Ace - Responsive Admin Template
  • 可以考虑直接选择其版本4，参考:    + 优点是：前端发展一日千里，版本3很快会失去支持，而且版本4提供了很多新的组件和特性，尤其是Flexbox相关的特性；缺点是：生态还没那么完善）。
    • What's New in Bootstrap 4?
    • New Bootstrap 4 alpha
    • 正在开发切换到Bootstrap 4的AdminLTE模版
    • Bootstrap 4 Admin Dashboard Demo
• SASS框架：
  • 选择Bourbon+Neat
  • 不选择Compass，原因主要是它太重了，见Sass Frameworks: Compass or Bourbon?
  • 如无必要，可以不要框架
• 几乎必然包含的JS库是jQuery
  • 在移动场景，可以换成其轻量移动版本Zepto
  • 大部分活跃维护的jQuery Plugin一般都同时兼容jQuery和Zepto
  • 在流量不大的场景（如公司内部应用），可以考虑jQuery Mobile，它提供了响应式设计的一个较好实现
  • 可以考虑jQuery UI
• JS框架选用类似React但更轻的Vue.js ：
  • Vue.js的丰富资料，见Awesome Vue.js
  • Vue.js和其他前端框架的比较，请见Comparison with Other Frameworks
  • 使用官方的脚手架vue-cli并采用utensil/webpack模版来生成项目结构，包含官方webpack模版中的：
    • Webpack + vue-loader 支持 .vue单文件组件
    • Babel来将ES6转换为ES5
    • Karma+Jasmine来做单元测试
    • inject-loader来做Mock
    • eslint 做JS静态代码检查
    • EditorConfig 来配置代码编辑器
  • 加上Building Large-Scale Apps(Using Vue.js)中推荐的：
    • vue-router 解决路由问题
    • vue-resource 解决和后端RESTful服务通讯的问题
    • Vuex 实现 Flux ，或者采用兼容 React 和 Vue.js 的 Redux
  • 再加上：
    • lodash：JavaScript 工具库，更好地支持函数式编程(参见各种编程范式)，弥补一些JavaScript标准库的缺憾
    • jade
    • sass-loader + node-sass
    • vue-async-data
    • vueboot
    • 在进行Ajax请求时，请使用fetch API标准，不要使用jQuery.ajax()或XMLHttpRequest，参见：
      • Fetch Living Standard
      • That’s so fetch!
      • Using webpack with shims and polyfills

前端开发规范参考 #

当你难以确定最佳实践的时候，看看业界是怎么做的

• 前端开发规范手册
• 前端代码规范 及 最佳实践
• 豆瓣Javascript代码风格规范
• 豆瓣CSS开发规范
• 网易HTML规范
• 网易CSS开发规范
• Airbnb JavaScript Style Guide
• Isobar Front-end Code Standards
• PUP Front end standards
• TMWtech Front-End Dev guidelines
• Frontend Guidelines
• Front End Development Guidelines
• Front-end Style Guides
• 20 Useful Docs and Guides for Front-End Developers

编辑器选择 #

如果喜欢VS Code,建议参考utensil的VSCode配置。

如果喜欢Atom，建议参考 utensil的Atom配置 。

如果喜欢Sublime Text 3，并搭配插件：

• EditorConfig
• Vue Syntax Highlight
• Emmet
• Jade
• Sass
• Color Highlighter
• Java Script Next - ES6 Syntax
• HTML5
• Nodejs
• Bootstrap 4 - Sublime Plugin
• jQuery
• Convert To UTF8
• Sublime Terminal

这些插件都可以通过Sublime Text的插件/包管理器Package Control来安装。更多可以参考utensil的Sublime Text配置 。