机缘巧合之下,我写出来了人生中的第一个框架。作为一个后端的研发写出来一个前端的框架,这是一次奇妙的体验,值得我记录下来。

17年年底我开发了人生中的第一个框架,是一个移动端单页web应用框架。为了纪念“这一伟大的壮举”,我家的大宝贝“雪碧”(我养的猫)表示愿意用她的英文名来为框架冠名。同时我家的小宝贝“咖啡”(也是我养的猫)叮嘱我再接再厉,以后要是再开发出新的框架,他可以考虑屈尊也为我冠冠名,对此我表示深感荣幸(鞠躬)。

好了,说正事:

sprite框架的由来

去年11月份的时候,组里的人一起开了个会,部门经理告诉我们到18年的3月底之前,需要产出接近30个移动web应用。

由于这些应用的PC版是之前就已经做好了的,所以服务端api这一块不用担心,绝大部分代码都可以复用。

需要担心的是如何选择一套合适的移动前端开发框架,想要短时间内批量产出移动web应用,必须有一套合理的开发框架,不仅仅是为了能够在前期进行快速开发,也为了后期的代码维护考虑。

(到目前也就是1月12日为止,我们组已经用sprite做出了15个应用了,出自我手的就有6个)


业界流行:vue+webpack+node

开发过移动web应用的前端开发者都知道,业界最流行的移动web框架是vue+webpack+node,使用vue实现应用单页化以及开发业务逻辑,webpack实现模块化和打包发布,node用于环境、项目搭建和启动服务本地调试等。

我之前就使用过这一套框架开发过一个完整的应用,在使用的过程中我体会到了这套框架的优点,但同时也发现了一些问题:

这一套框架的优点在于封装良好,使用node的npm工具可以很便捷的搭建好环境进行开发,并且通过node和websocket实现了热加载,因此免去了本地调试时开发者清除浏览器缓存的步骤,这个功能不得不说是很讨喜的。

不过也有不少问题,首当其冲的就是很难debug,使用chrome开发者工具或者firebug这一类浏览器的调试工具,难以debug被webpack打包后的js文件。由于webpack会将所有模块打包压缩输出成一个js文件,这就不可避免的导致大量的代码挤压在一起,失去了前期开发时的模块组织结构,从而使得的debug变得困难。

其次是使用webpack需要配置的内容比较多,这需要参照着webpack的官方文档来进行配置,比较花时间。

最后也是最主要的,就是这一套框架太前端了,在开发过程中大量的使用了ES6的语法,大家应该知道,目前市面上的浏览器对于ES6的支持其实并不够,所以webpack在项目打包的时候会有一个使用babel进行ES6到ES5的代码编译过程。ES6语法比较新颖,这并不是很适合我们组的其他成员,因为我们组毕竟是一个后端部门,组内成员的前端功底大都不够,基本还停留在一手jQuery打天下的阶段。所以webpack这一套框架直接拿来用的话,会导致很多人“水土不服”好一阵子,这是会大大降低开发效率和质量的。


自己动手造轮子

因此我们部门需要一个这样的前端框架,它即拥有vue+webpack+node框架的优点,又方便debug,而且能够让后端的同学快速上手进行开发,我本来想着不需要重新造轮子,但是很可惜我在网上找了很久都没能找到一个满足我们要求的现成框架。

找不到轮子,那就只能尝试着造轮子了。我趁着一个没有加班的周末,开始尝试实现这个框架。

根据之前在组里的讨论和自己的思考,我整理出来的我们对于框架的需求如下:

  • 单页化
  • 前端路由框架
  • 模块化
  • 清晰的项目结构
  • 容易debug
  • 没有或者很少的配置

单页

单页应用是一种新兴的web架构。什么是单页应用的呢?简单的说就是整个应用只有一个url,用户通过浏览器访问了这个url之后,无需离开这个导航就能够访问到应用的所有功能模块。

单页应用是通过前端hash路由+ajax来实现的,hash路由的变化不会被浏览器重新发送到服务端,这就减少了客户端和服务端来回的通讯时间,因此单页应用对于用户来说体验良好,也减轻了服务器的压力,能够提高服务器吞吐能力。对于开发者而言,单页应用更好的分离了前后端,前端负责页面的渲染展示,后端则只需负责输出一套稳定的api即可用于web界面、手机、平板等多种终端。

单页应用也不可避免的有着缺点,比如不利于SEO(搜索引擎优化)的问题、难以进行功能模块鉴权、需要应用自行管理浏览器历史记录栈等。
(由于我们公司的应用不是互联网类型的c端产品,因此SEO问题可以忽略。至于功能鉴权以及历史记录的问题的解决方法我会在之后介绍)

前端路由框架

既然要实现应用的单页化,就必须有一套前端路由框架来组织应用的功能模块切换,从而使得单页应用不“单页”。

模块化

模块化则是工业级别的开发所必需的,无论是从开发还是维护的角度,都需要对应用进行模块拆分,在功能模块的角度上进行解耦。

清晰的项目结构

项目结构可以称作一个项目的骨架,一个清晰的项目结构使得项目的可读性和可维护性都大大提高,试想你是愿意和一个体格健硕的帅哥,还是一个臃肿混乱的怪物打交道。

容易debug

对于开发者来说,写代码的时间可能还没有debug的时间长(开发5分钟,debug两小时),因此框架产出的代码一定要对debug友好。其实这只要保持良好的模块拆分和清晰的项目结构,并且不要像webpack那样打包压缩,就能自然而然的做到了。

没有或者很少的配置

webpack的配置较多,这对新人来说不友好,因此框架不能够有太多需要配置的内容,最好一个配置项也没有。

既然敲定了需求,那就要开始一个个攻破了,下一章见~

发表评论

电子邮件地址不会被公开。 必填项已用*标注