开启前端工程化

Web前端技术在最近这2年简直是爆发式的增长。记得在2013年,我抄阿里云OSS的前端代码的时候,还是用jQuery库,用的是Object的写法。

那时候最热门的就是jQueryExtJS等,Node.js还没现在的这么火热(其实我还不知道有Nodejs,我不是做前端开发的,孤陋寡闻了~)。

在去年的时候,开始负责公司的开发,主要集中在移动端的开发。于是,一不小心去研究了下前端,才发现现在的前端早已不是我以前认识的前端。

首先是HTML5正式定稿,Web Page现在已经演变成Web APP了。

然后是ES6也华丽丽地走进了前端,它的 Module/Class 等特性已经完全让这门语言具备了开发大型应用的能力。

还有各种的类库,框架等。尤其是ReactAngularVuejs等框架的出现与争锋,以及Node.js前后端分离的流行,中间层的出现改变了前后端的合作模式。

各种构建工具,包管理工具,模块管理器百花齐放,npmgruntgulpbrowserifywebpack等等,没玩过你就真的落后了。

而移动端的发展也如火如荼,用户体验,性能,多屏适配等越来越重要。

前端已经步入了工业化的生产时代。

为了紧跟时代潮流,有必要去开启我们的前端工业化进程(说的好像有点高大上)。

构建优先

以前,我们会网上复制一些代码片段,然后粘贴到页面上,把javascript代码搅合在一起,能运行就可以收工了。

如今,javascript的代码越来越复杂,开发的web应用越来越庞大。可维护性,可扩展性就变得越来越重要。

如何实现这个目标?

  • 首先,要在还没进行任何编码之前做好设计,让应用结构清晰,易于测试。
  • 另外,对应用采取构建优先的原则,通过自动化的手段去建立一套固定的构建过程。

对应用的设计,网上有很多介绍的文章与方案,本文就暂时不进行总结。对于自动化构建的过程,是现在公司要完善的东西,在此会做比较详细的说明。

构建过程

构建过程有2个目标:

  • 自动完成重复性任务,包括安装依赖,编译代码,运行单元测试,以及执行其它操作等。
  • 随时能部署

要创建构建过程,需要了解应用环境,以及构建模式。

应用环境

一般我们的应用会分为3种环境:

  • 开发环境
  • 过渡环境
  • 生产环境

我们大部分时间都在开发环境中,这个环境要可以持续开发,要易于调试,要能轻易阅读堆栈跟踪,能输出详细的日志等。

过渡环境一般部署跟生产机一样的环境,主要用于测试,确保应用发布到生产环境中不会出现问题。

生产环境是用户能直接访问的环境。

构建模式

以上3种环境的特性决定了我们的构建模式是不一样的。可以把构建模式分为2种:

  • 调试模式
  • 发布模式

调试模式

该模式的目标是效率最大化,便于调试和持续开发。由于开发的时候,我们每写一部分代码就要进行调试,那调试模式有以下的特点:

  • 监控变动,我改动代码的时候,不需要手动再去构建一次,让它自动化
  • 可以生成一些中间产物
  • 可以自动刷新浏览器
  • 构建出来的结果不是最优的

发布模式

该模式的目标是发布面向用户的产品,要测试良好,性能高,运行速度快。具有这些特点:

  • 一切为了性能,构建出来的结果必须是最优的
  • 通过所有测试
  • 便于部署

执行构建过程

开发流程

开发环境采用的一般是调试模式,整个开发流程可以参考下图:

发布流程

代码开发测试完成,需要发布到生产环境,那么发布流程可以参考下图:

总结

对于前端开发,我们采取构建优先的原则,针对不同的应用环境,去建立一套完整的构建过程,实现过程自动化,提供持续开发,持续集成以及持续部署的功能,增强架构。

具体的构建方案,在后续的文章中会陆续有提及,敬请关注!

文章目录
  1. 1. 构建优先
  2. 2. 构建过程
    1. 2.1. 应用环境
    2. 2.2. 构建模式
      1. 2.2.1. 调试模式
      2. 2.2.2. 发布模式
  3. 3. 执行构建过程
    1. 3.1. 开发流程
    2. 3.2. 发布流程
  4. 4. 总结
,