专业 靠谱 的软件外包伙伴

您的位置:首页 > 新闻动态 > 如何改造企业前端开发架构

如何改造企业前端开发架构

2016-04-26 14:56:25

现在的前端早已不是几年前的前端,再也不是jQuery加一个插件就能解决问题的时代。

最近对公司前端的开发进行了一系列的改造,初步达到了我想要的效果,但是未来还需要更多的改进。最终要完美的实现目标:工程化模块化组件化

这是一个艰难的,持续的,不断进化的过程!

先说下我司前端改造前的情况:

开始的时候,只有微信公众号开发,以及在APP中嵌入的Web页面,只需要考虑微信端的问题,以及跟原生APP的交互处理,一切都好像很完美。

几个月后,要开发手机网页版,接着百度直达号也来了。原来微信端的功能已经比较多,不可能针对这2个端再重新开发,于是把微信端的代码拷贝2份,然后修改一下就上线了(初创公司功能要快速上线,有时不会考虑太多的技术架构,都懂的)。

这样就出现了6个不同的项目文件夹,为什么会是6个呢?因为也分别拷贝出了各自的测试目录:

 

						1
2
3
4
5
6
						/wap
/waptest
/m
/mtest
/baidu
/baidutest

 

于是,问题就来了,开发的时候,都在其中一个test目录下开发,比如waptest,开发测试没问题了,就拷贝修改的代码到其它的目录。这样开发的痛苦,可想而知了。

不仅仅是各个端的js,css,images文件是分别存放,还有各个端的页面模板也是在各自的目录下。

另外,一直以来,公司的前端美女会使用grunt做一些简单的前端构建,比如sass编译,css合并等,但离我想要的前端自动化/工程化还是有点远。

为了提高前端的工作效率,最近终于有一点时间腾出手来处理这些问题。

PS:我们团队组建一年多,项目也从0开始,到现在为止,产品/开发/项目管理等都在逐渐完善。走专业化道路,是我一直以来的目标,有兴趣的可以加我一起交流!

问题总结

先来总结一下改造前前端开发存在的问题:

  1. 同时存在多端,造成开发效率不高
  2. 项目没有模块化,组件化的概念,代码复用率低
  3. 部署困难,没有自动生成版本号,每次都要手动修改js的版本号
  4. 面条式的代码,开发任务重,没有做很好的规划

改进目标

有问题,那就想办法去解决它:

  1. 解决多端统一的问题,一处修改,多端同时生效
  2. 模块化开发,使代码逻辑更加清晰,更好维护
  3. 组件化开发,增强扩展性
  4. 按需打包,以及自动构建
  5. 自动更新js版本号,实现线上自动更新缓存资源
  6. 紧跟发展趋势,使用ES6进行开发

在改进的过程中,会用到2个工具: GulpWebpack。用这2个工具,也是有原因的。

本来我想在Grunt的基础上利用Browserify进行模块化打包,但是发现打包的速度太慢,我的Linux系统编译要4s以上,美女前端的Widnows系统一般都要7s以上,这简直不能忍受。在试用Gulp之后发现速度杠杠的,不用想了,立刻替换Grunt。至于Webpack,是因为用browserify打包多个入口的文件配置比较麻烦,在试用了Webpack之后,发现Webpack的功能比browserify强大很多,于是就有了这2个工具的组合。Webpack的配置比较灵活,但是带来的结果就是比较复杂,在项目中,我也仅仅用到了它的模块化打包。

于是,最终初步实现前端构建的方案是:

Gulp进行JS/CSS压缩,代码合并,代码检查,sass编译,js版本替换等,Webpack只用来进行ES6的模块化打包。

现在前端的操作很简单:

开发的时候,执行以下命令,监听文件,自动编译:

 

						1
						$ gulp build:dev

 

开发测试完成,执行以下命令,进行编译打包,压缩,js版本替换等:

 

						1
						$ gulp build:prod

 

从此,前端开发可以专心地去写代码了!

方案实现

项目结构

整个项目是基于Yii2这个框架,相关的目录结构如下:

 

						1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
						common/
    pages/
        user/
        index/
        cart/
wap/
    modules/
        user/
        index/
        cart/
    web/
        dev/
            index/
            user/
            cart/
            common/
            lib/
        dist/
        logs/
        gulp/
            tasks/
            utils/
            config.js
            config.rb
    node_modules/
    index.php
    package.json
    gulpfile.js
    webpack.config.js
    .eslintrc

 

  • common/pages存放公共模板,各个端统一调用
  • web/dev是开发的源码,包含了js代码,css代码,图片文件,sass代码
  • web/dist是编译打包的输出目录

统一多端的问题

由于多端的存在,导致开发一个功能,要开发人员去手动拷贝代码到不同的目录,同时还要针对不同的端再做修改。

js文件,css文件,图片文件,还有相关的控制器文件,模板文件都分散在不同的目录,要拷贝,耗时间不说,而且容易出错遗漏。

要解决这个问题,有2种方法:

  • 所有端调用公共的文件
  • 在某个端开发,开发完成之后,用工具自动拷贝文件,并且自动替换相关调用

在综合考虑了之后,这2种方法同时使用,模板文件多端公共调用,其它的文件,通过命令自动拷贝到其它端的目录。

公共模板放到目录common/pages,按模块进行划分,重写了下Yii2的View类,各个端都可以指定是否调用公共模板。

 

						1
2
3
4
5
6
7
						public function actionIndex()
{
    $this->layout = '/main-new';
    return $this->render('index', [
        '_common' => true,    // 通过该值的设置,调用公共模板
    ]);
}

 

模板一处修改,多端生效。

另外,其它文件通过gulp去拷贝到不同的目录,例如:

 

						1
						$ gulp copy:dist -f waptest -t wap

 

这里有一个前提就是,所有编译打包出来的文件都是在dist文件夹,包含了js代码,css代码,图片文件等。

组件化开发

这个只能说是未来努力的一个目标。现阶段还没能很好地实现。这里单独列出这一点,是希望给大家一点启发,或者有哪路高手给我一点建议。

看了网上诸路大神的言论,总结了下前端的组件化开发思想:

  • 页面上的每个独立的可视/可交互区域视为一个组件
  • 每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护
  • 组件与组件之间可以 自由组合
  • 页面只不过是组件的容器,负责组合组件形成功能完整的界面
  • 当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换

其中,各个组件单独的目录,包含了js代码,样式,页面结构。这样就把各个功能单元独立出来了。不仅维护方便,而且通用性高。

最终,整个Web应用自上而下是这样的结构:

 


  上一篇   [返回首页] [打印] [返回上页]   下一篇