做一个前端架构,到底需要什么?

老板发话,让你去开辟一个新项目(人生机遇)。在做web前端架构时,到底需要考虑些什么呢?

技术栈

当下局势,ReactAngularVue三足鼎立,jQuery依然占据市场主导。
rav
实际上,框架之间其实并没有绝对的冲突,因为他们各自诞生的原因都不一样,没有最好的框架,只有最适合的框架,脱离业务的架构都是不合理的。

首先,需要考虑业务复杂度。项目的复杂度在项目初期大致是可以把握的。

比如做电商网站的主要用于渲染大量商品页面,要说业务就是下单,查看订单,收藏之类的简单业务,只需要简单的表单填写,这样的项目如果去考虑Angular这种MVVM框架的话,就是纯粹给自己找麻烦了。

再比如做一个公司内部的管理系统。这种CRMOA类的系统,相对复杂。如果选用React的话,一定还会去考虑配合使用Redux,毕竟React只负责View层。那么对于这类业务略复杂的系统上,我们在框架选择时,就需要考虑其他因素了,例如:

  1. 团队经验与学习成本。 是否利于团队成员学习,能够快速上手。团队里有多少人有相关框架的使用经验,在使用别人框架的时候,不可避免会遇到许多坑,如果团队经验丰富,就可以少走很多弯路。这点非常重要。
  2. 社区活跃。 是否有足够的开源项目,社区是否活跃等。
  3. 大厂支持。 框架的开发和维护者是否实力足够,而不是那种小的框架,可能随时会停止维护等。
  4. 个人喜好。 语言、框架等都只是程序员手中的工具而已,就前端而言,不存在说某种效果只有某一个框架可以做到。关键是看工具如何被合理地使用,当实在无法抉择的时候,就全凭个人喜好,也是可行的。

组件库

组件库的选择,其实架构师都更偏好自己写一套组件库提供给自己的项目使用,在选择上主要和项目本身有关:

  • 如果项目是个人项目、公司的小型项目或者边缘项目。推荐使用开源组件库,甚至可以是重型组件库,这样既可以更快地搭建项目,又省去了维护组件库的麻烦。
  • 如果是线上产品。我们会发现很少有产品直接依赖那些很流行的组件库。因为随着开发的深入,使用开源的组件库,会形成重度依赖;遇到不满足业务的时候,为了避免重复代码等问题会选择去扩展组件本身。这样,就需要开源组件库有足够的稳定性可扩展性才可以。但事实上这样的库并不存在。因此,这种情况下,强烈不建议去使用开源组件库,而应该根据自己项目需要去编写属于自己的组件库;*有人会说是不是重复造轮子?*实际这样会更利于团队维护和项目扩展。当然,这种情况下,开源组件库就成为了我们造轮子路上很好的导师了。

工程打包

gruntgulpwebpack等这样的工具配合各自的plugin,总可以满足我们各种个样的需求。因此,在选择构建工具时,并不需要过于纠结,因为一旦配置好了,之后很少会去改动。把工具用到位就行。主要考虑的一些方面有:

  • js、css的合并与压缩
  • 图片、字体等资源文件的整合
  • 按需加载
  • 开发环境的热加载
  • CDN

按自己项目的需要去配置即可。

目录结构

工程的目录结构对模块化组件化以及扩展和维护都起着相当关键的作用。
目录里的js除去依赖的公共库和工具方法,一般分为3大类:组件(components)面板(panels)页面(pages)。**多个组件构成符合业务的面板,多个面板组成一个页面。好看的代码高亮配色可以用于区分不同代码,可以帮助程序员们避免错误的英文单词,错误的函数引用等等。合理的目录结构同样可以帮助我们很好地区分项目中的组件依赖,清楚地认识组件与业务直接的关系。**除非你的项目把所有的js和css都打包到了一起(看来这个项目一定不怎么大~)。

考虑了这些方面,就可以开始做一个小小的脚手架啦~让队友们一起入坑吧:)