当前公司前端架构及技术说明

最近几天,公司留出部分时间来给开发做一次完全的梳理与重构计划,于是也总算有时间来梳理一下前端的东西。
我试图从整体的框架上,来描述清楚我们当前前端项目结构及作业方式。一是让自己清晰;二是让其他协作的同事,或者后进的同事有一个概览性质的东西来了解我们的框架结构。

下面我主要通过这五个方面来描述:
1、工程化结构;
2、模块化结构及实现;
3、MVC实现;
4、页面渲染逻辑;
5、版本管理方式;
6、项目间联系;


一,工程化结构


工程化结构及技术栈示意图

gulp做了大部分工程化,自动化的处理;webpack基本上就是做了文件加载器;

二,模块化结构及实现


目录结构及模块间联系

左边三个块是我们模块化实现的基础,po_to是我们之前的同事自己编写的一个前端框架,一直作为我们前端的主力框架在使用。

三,MVC实现


mvc模型示意图

四、页面渲染逻辑


服务端页面组装方式

此前,我们引入了nodejs作为中间层,来合并请求,组装数据,渲染页面返回客户端;前些天我们认为node鸡肋之后,希望快速的抽调node这一层,于是把原有的node服务直接改装成了静态的线上资源服务,从而快速的达到了抽调node的目的;但是也造成了问题,就是目前我们客户端请求发起,服务端装载页面并返回的过程有些曲折而奇葩;就是将我们的代码分别部署在了两个服务中;一个作为静态资源服务,一个作为控制器服务。

还有一点,图例没有描述的,就是客户端页面渲染的方式。我们是前后端完全分离的方式,因此前端页面数据依赖异步请求来加载,然后渲染页面。为了防止数据没回来时,页面部分空缺或者需要考虑无数据状态的替代方案的问题,我们在页面初始化时只做了一个loading的界面,等数据完全返回页面渲染完成,才展示真正的页面。这么做好处是,页面展示会比较完整,一次性展示完成;缺点是,没有分批加载给用户的感觉快,速度上没有优势。这也是我们即将改进的地方。

五、版本管理方式

现有的分支管理策略


即将变成这样的


图一,是我们现有的版本管理策略;这么做的原因是,当我们想找到比较久之前的某些代码的时候,我们需要翻阅长长的commit列表去寻找;而且每一个成员对于commit的描述方式的不确定性,造成了找代码的困难。于是我们做成了现在这样分迭代版本的分支管理策略,保留每个版本分支,线上服务器在新功能上线时直接fetch,并切换到当前版本的分支。

图二,是我们即将改回的版本管理方式,也是我们之前使用过的经典而通用的分支管理策略。

一点感想:现有的方式其实在核心思路上跟即将改版的方式是相同的,只是说在线上切换分支这件事情让大家觉得很奇葩。我倒觉得在操作过程中没觉得太多不妥,不过需要在所有成员都明确规则的情况下。然后,线上切换确实也是有的怪怪的,线上环境应该尽量只做更新操作,不要处理其他的东西为好吧。

6、项目间联系


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,569评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,100评论 18 139
  • 天猫双11前端分享系列(一):活动页面的性能优化 天猫双11前端分享系列(二):天猫双11页面服务容灾方案大揭秘 ...
    wokeman阅读 4,670评论 0 2
  • 任何时代,如鱼得水者必然是——适应者。 商业社会的特点就是交换。 一个适应商业社会的人,他应该知道用什么东西来交换...
    宁静的夏天陪你看海阅读 250评论 0 1
  • 题目《教育要趁早,孩子才是我们幸福的源泉》 抱团挑战日记第26篇...
    罗石缘阅读 226评论 0 0