转载本文需注明出处:微信公众号EAWorld,违者必究。
目录:
一、前端过去一年的发展
二、工程化是前端实现的核心
三、EOS8前端工程化设计实践分析
四、总结与展望
一、前端过去一年的发展
2017年的前端发生了非常多的事情。快速的技术进步,似乎已经使前端工程师应接不暇,我们来一起看下去年发生了哪些事件:
在变化飞快的前端发展中,前端究竟应该如何开发,究竟应该用什么框架,前端代码如何部署,如何进行前后端分离成为人们争论的焦点。
二、工程化是前端实现的核心
在未来,前端工程化成为工程师关注的核心问题。 而工程化的几个重要方面,就是路由的实现方式,组件模块化,构建自动化。
1.路由实现方式
最常用的路由分为Hash路由及History路由。
一般主流做法推荐使用History路由。
使用History路由的好处在于两点,其一是页面url比较美观,其二是可以复用浏览器自身的前进后退特性,但在SPA(单页面应用)情况下支持history模式需要后端的支持。
由于普元微服务治理平台并不希望路由变化时,浏览器发请求到后端,故使用Hash路由。这样做的好处是通过前端控制用户权限,一定程度上方便后期对系统的扩展。这主要跟整体平台架构的设计有关。
2.灵活部署,解决前后端通信
前后端分离模式的开发模式下,通常有两种部署方式来解决与后端进行ajax通信的问题。一种是Nginx作为部署容器,一种在构建工具中将请求转发。
接下来详细介绍使用构建工具转发请求的方式。
以Webpack为例,通过proxy,Webpack server会过滤请求,将带有配置的路径的请求,转发到需要转发的服务器。
当代码需要部署在tomcat中时,由于不同项目在Webapp中的前端文件名称可能不同,每当Webapp中的应用更改名称,前端都需要更改ajax的路径,非常麻烦。
有一种方法可以一劳永逸的解决这个问题。使用NPM build之前,在你的package.json文件中,加上homepage变量来写明你的服务的绝对路径。
npm在build的过程中,默认前端代码就在服务的根路径下,想要重写这个路径,可以在package.json中加入上面的homepage,便可重写。若不想设置固定的路径,则可以用下图实例:
三、EOS8前端工程化设计实践分析
以我们的技术团队目前正在研发的EOS8的前端设计为例,讲一讲前端工程化的实践。
EOS8平台的目标是提供一整套微服务应用平台与应用全生命周期管理平台,能够提供企业快速构建数字化需求交付的能力。
EOS8与我们正在研发的另一款产品DevOps都遵循前后端分离、前端模块化的开发方式进行开发。这样做的好处是能够方便多地同事同时进行开发,减少沟通维护成本,同时保证后期的可扩展性。另外,前后端分离,也是微服务系统比较好的实践。
抛开框架之争,结合EOS8的前端设计,来分析从开发到部署的整个生命周期过程,主要从以下三点来考虑:
1)需要根据需求,考虑清楚页面的路由实现方式,同时从功能角度具体分类各个功能模块。
2)由于平台功能的可添加性非常强,故页面设计需要符合模块化设计,方便后期添加新的功能模块,同时在开发的过程中,需要将ui组件公共化,标准化,方便后期开发。
3)前端代码的架构要考虑最终上线的部署方式,同时也要方便开发人员进行开发。
1.模块化开发
首先,前端工程化的第一步,要先划分清楚前端的功能模块。功能模块之间不能耦合。这样的好处是,不同团队可以同时进行开发,最终将各自开发的模块合入即可。模块的开发遵循统一的开发标准。数据可以通过flux来管理。
我们作了如下的模块划分:
2.模块化路由及页面设置
在这里,模块化主要从路由模块化和页面模块化两个方面来设计。
路由模块化,可以解决父子模块嵌套问题,在单向数据流的框架中,这一点尤为重要。同时,通过路由嵌套,规范页面URL,使整个前端路由清晰,具有方便跳转、传参等优势。
页面模块化则可以提高页面组件的复用率,减少重复的代码。
1. Container Components主要用于承载各个不同的公共组件,起到一定布局的功能。同时,他负责与服务端进行通信,获取页面所需的数据,传给Presentation Components。
2. Presentation Components主要用于具体的功能组件。它一般不参与数据的交互,只负责展示Container传给他的数据。这样可以达到最大的复用这个组件
如图所示,页面由Header,SideBar,Content三个组件组成,而每个组件,可由多个小的公共组件组成,如下图所示:
3.部署实践
在这里,模块化主要从路由模块化和页面模块化两个方面来设计。
路由模块化,可以解决父子模块嵌套问题,在单向数据流的框架中,这一点尤为重要。同时,通过路由嵌套,规范页面URL,使整个前端路由清晰,具有方便跳转、传参等优势。
页面模块化则可以提高页面组件的复用率,减少重复的代码。
路由模块化:整个平台可以分为6大模块,每个模块分配一个路由地址,通过路由地址找到不同的模块。图中展示的是一级路由地址,如下图所示:
前端部署的方案有两种:
图中左侧为前后端分离的简易方案。具体部署时,通过nginx,可以进行负载均衡,同时可以部署多台nginx服务器。如果性能仍旧无法满足,则可以使用LVS+F5/LVS+Nginx等多种方式进行负载均衡。
图中右侧为最传统的部署方式,将前端编译工具打包出来的文件,放入tomcat中即可。
不同应用场景下,负载均衡的方案有很多,要根据实际的应用场景来选择适合自己的方案。这里我们的前端架构,只要在打包时,根据不同的部署方案,将前端文件的路径问题、ajax路径问题解决即可。
四、展望与总结
微前端这个术语,最初来源于ThoughtWorks公司的技术雷达。传统的微服务架构下的前端:
微前端的核心思想如图所示(图片来源于网络)
微前端的理念,是将一个网站当成一个组件的合成体,每个组件由一个独立的团队负责。带来的好处是每一个团队在选择和升级他们的技术栈时,并不需要与其他团队进行统一,同时代码不依赖于共享状态和全局的变量。
这听起来很美好,不过目前微前端大体上还停留在概念的阶段,具体实施起来困难重重,光是框架之间的壁垒,就难以突破。
也许在某天,技术大牛们终将打破技术的壁垒,实现微前端,让我们拭目以待。
通过前端的展望,可以看出来,在未来,框架将不再限制前端架构,不再制约前端开发人员。人们可以根据自己的业务,选择不同的框架,最后将各个业务模块组合起来。人们需要关注的核心,是如何将前端工程化,如何合理的将业务模块化、如何合理的分配路由,如何更快的进行开发等。
无论采用哪种前端框架,前端开发的本质思路是一样的。学习前端,搭建前端项目,不应只关注具体的框架,更多要从前端工程化的角度出发去实现项目。这样才能使前端项目拥有更短的开发周期,更好的用户体验,更绚丽的页面效果。
关于作者:王若林,普元SOA&云计算部门高级前端工程师,曾在Tibco以及海航科技担任前端工程师,参与开发Tibco Api Gateway、海航商店、海航IAM等项目。现主要从事普元EOS微服务管理平台开发设计工作。