工欲善其事,必先利其器

混迹前端已有五年多了,工作重心由最初的切图写页面转向专门写js交互,我深感js博大精深。
做web前端这行其实并不那么容易,原因大致三点:一是前端涉及的面太广,每个知识面都可以进行深入研究;二是前端技术比较开放,各种新技术层出不穷,学习成本很大;三是前端面向用户操作界面,必须得很好地适应各种设备。
以前的开发状态挺糟的,即便学到一些新技术也没精力和时间使用到项目中去。辞职了一段时间后,我开始把以前接触到的,听说过的捋了一遍,体会到了很多新技术带来的便利。
我们前端大致进行的工作是这么一些:

  • 监听请求,对路由进行判断
  • 解读请求,进行数据操作
  • 渲染页面或者API,返回给客户端

开发时都会有一套前端的基础架构:

  • 开发环境
  • 平台工具(框架、库、发布工具等)
  • 相应的开发规范
  • UI组件库
  • 开发文档

每个人的时间都很有限,我们不要重复造轮。这里我介绍一些常见框架和库并把他们分组罗列出来,每个工具都有他具体的职责,了解并组合使用将会大大提高前端的开发效率:

Bower    A package manager for the web
Grunt    The JavaScript Task Runner
gulp    the streaming build system
Yeoman    The web’s scaffolding tool for modern webapps

AngularJs    Superheroic JavaScript MVW Framework
Backbone    a light MVC App framework
Knockout    Simplify dynamic JavaScript UIs with ths Model-View-View Model (MVVM) pattern
ReactJS    A JavaScript library for building user interfaces
Flux An application architecture for React utilizing a unidirectional data flow

Underscore    a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects
lodash    A JavaScript utility library delivering consistency, modularity, performance, & extras

CoffeeScript    a little language that compiles into JavaScript
Jade    a template language
Ractive.js    a template-driven UI library

AMD(Asynchronous module definition) a JavaScript specification that defines an API for defining code modules and their dependencies, and loading them asynchronously if desired
CommonJS    a group with a goal of building up the JavaScript ecosystem
RequireJS、seaJS a JavaScript file and module loader
Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies

Sass、Less    CSS preprocessor language
Modernizr    a JavaScript library that detects HTML5 and CSS3 features in the user’s browser

众多工具的产生使得前端能够进行模块化开发,每个模块高度解耦,使得系统更易维护。关于模块化开发网上的文章已有很多,这里不再赘述。来说说DSL,DSL指的是领域特定语言,它可以是内部的(使用宿主语言的语法,比如不使用JSX的ReactJS(属于内部DSLs)),也可以是外部的(使用和宿主语言不同的语法,比如本例中在JavaScript内部编写的内联 CSS(属于外部DSLs))。很多时候会被一些库里的语法迷惑,比如CoffeeScript,他属于内部DSLs,会将类似Ruby的语法编译成Javascript。当然任何工具都是有两面性的,编译意味着需要消耗性能,这是无法避免的事情。所以用不用,用哪种工具纯粹是个人喜好问题。