前端技术架构梳理

一 架构归类

• 架构原则
• 技术栈及选型
• 基础组件
• 自动化构建
• 项目迭代方案
• 架构持续优化

 

二 架构介绍

1 架构原则

• 一切始于需求
• 提高团队工作效率
• 以最好的态度服务客户为目标
• 选择合适才是最好的

 

2 技术栈及选型

我们公司主要以服务客户（toB）为驱动，合适的前端框架更有利于我们把重心放在处理业务逻辑上提供更全面更高效的解决方案。智齿科技所有前端生产线产品在2016年进行了全面技术升级和重构。上线至今运营3年多时间，也是积累了很多东西。对于过程中的需求变化和项目的架构选择进行充分的预研。

主要的技术选型考虑因素

• 项目为PC端还是H5端
• 浏览器的支持情况
• 项目是否需要支持SEO
• 我们的客户（企业）的客户群体基数
• 团队成员的技术水平和学习成本
• 框架本身的稳定性，对应的社区、维护者、市场占有份额等

现在前端组项目包括但不局限如下：

客服在线工作台
客服控制管理台
PC端咨询客户端
H5端咨询客户端
JSSDK咨询组件
智能外呼控制台
博客
官网

技术栈

image

">
在我们的项目中使用了市面上现在最火热的框架

前端使用

• React
• Angular
• Vue

后端使用

• Node + Koa

 

Vue使用场景

快速开发，相对数据源稳定，运营的要求不是特别高，对于加载速度有要求，比如电商平台V1.0,由于客户的定制化开发，我们使用Vue进行快速开发

 

Angular使用场景

在大型项目中推荐使用Angular,因为深度整合Typescript和Rxjs。ts解决了工程化的问题，rxjs解决了开发速度的问题。这个也是我们目前使用最多的框架，比如项目客服控制管理台、智能外呼控制台，电商平台V2.0等，适合多人团队协同开发。

1、零配置
2、深度整合设计模式
3、约定才是框架的本质

 

React使用场景

在中大型项目中比如适合使用React,高度的灵活性和最大的响应能力，虚拟DOM，拥有全球最多开发者的前端框架，最灵活的组件式开发。比如我们项目CRM管理系统、客服在线工作台，用户咨询客户端等，在项目中我们使用了数据处理框架 Redux

 

Node使用场景

我们使用Node来做网站路由、页面渲染、SEO优化，中间层接口代理

02.jpg

 

基础组件

我们是有自己的一套组件库，该组件库是一个单独的UI项目，并由专人日常维护和及时更新，智齿所有项目均基于npm或yarn进行安装即可引入到项目中使用。我们也会借助市面上成熟的第三方UI框架进行整合以达到人机交互的最佳状态

 

自动化构建

我们所有的项目都是基于自动化构建进行生产部署，我们使用的自动化构建工具有如下

Gulp 致力于自动化和优化工作流


Webpack 进行前端资源模块化管理和打包


Browserify 进行前端资源的模块打包和单独处理能力


自动化构建过程主要要考虑和解决好以下几个部分

1）提高开发效率：热加载、开发和生产代码分离
2）优化性能：代码合并压缩、文件版本号、按需加载、图片优化
3）提高代码质量：模块化、ES6+Babel编译、css预处理、eslint代码检查、无用代码片段过滤

 

项目迭代方案

使用Git版本管理工具进行代码版本管理，用branches、trunk、release分别表示分支、主干、发布版本，最新代码放在release持续，自动地构建/测试软件项目，和线上保持同步；测试代码放在trunk，开发代码放在brances，同一项目同一时期有多个版本就在brances里面拉取多个分支，提测时都合并到trunk。整套流程保障了测试、主干、灰度以及线上环境的正常运行。

 

架构持续优化

基于项目我们会把不涉及到业务逻辑的空项目框架（包含通用解决方案）发布到npm上，也就是适用于当前团队项目的特殊的项目脚手架，我们需要优化时就修改完发布，有新项目要用时，拉下来即可用。这样，所有人的优化成果都可以得到体现，也可以受益于所有项目。为了让发布的项目可用，我们会进行组内全部成员的代码Review，确保解决方案的可靠性。

---

后记：因为时间和内部技术的原因，还有很多细节性的东西没有写出来，以上主要是针对前端的技术选型和团队效率的问题写了些个人的见解

---

转载请标明出处 谢谢！