FreeWheel在微服務(wù)架構(gòu)下的前端改造課件

FreeWheel在微服務(wù)架構(gòu)下的前端改造實(shí)踐FreeWheel在微服務(wù)架構(gòu)下的前端改造實(shí)踐1適用于微服務(wù)體系的前端SPA架構(gòu)自研前端框架SparkUI新舊代碼并存的漸進(jìn)改造適用于微服務(wù)體系的前端SPA架構(gòu)2FreeWheel簡(jiǎn)介FreeWheel簡(jiǎn)介3適用于微服務(wù)體系的前端SPA架構(gòu)FreeWheel前端應(yīng)用現(xiàn)狀持續(xù)開(kāi)發(fā)迭代了10年多的RoR

Web應(yīng)用20多個(gè)產(chǎn)品模塊，1200+頁(yè)面60余萬(wàn)行代碼，其中包含近20萬(wàn)行基于jQuery的傳統(tǒng)JS代碼7周的發(fā)版周期全棧開(kāi)發(fā)工程師以及QA工程師改造目標(biāo)前后端分離：后端微服務(wù)+前端SPA產(chǎn)品與技術(shù)緊密結(jié)合，采用主流的前端體驗(yàn)和技術(shù)棧更加完整的前端UT和端到端自動(dòng)化測(cè)試覆蓋更加靈活的發(fā)版周期全棧工程師適用于微服務(wù)體系的前端SPA架構(gòu)FreeWheel前端應(yīng)用現(xiàn)4適用于微服務(wù)體系的前端SPA架構(gòu)Server-SideRenderingData

PushData

PreloadStaticAsset

ServerSPA

ASPA

BSPA

CContainerManagementService

RegistryBusinessService

XBusinessService

YBusinessService

ZAPIGateway:Auth,Throttling,Routing,

PermissionAuth

Service(SSO)Configuration

ManagementLoggingMonitor適用于微服務(wù)體系的前端SPA架構(gòu)Server-SideDat5適用于微服務(wù)體系的前端SPA架構(gòu)React+UnidirectionalDataFlow+Data

ModelRoutingFetchI18nPermissionReusableComponents

LibraryModule

1Module

2Module

3Module

4Module

5Module

6Module

7Module

8SPA

ASPA

BSPA

C適用于微服務(wù)體系的前端SPA架構(gòu)React+Unidir6前端SPA架構(gòu)

-

前端技術(shù)棧原有前端架構(gòu)新前端架構(gòu)服務(wù)器Rails+Unicorn+

Nginx基于Nginx+CDN的靜態(tài)資源服務(wù)器SSR服務(wù)器端渲染RailsMVC+

ERB/HAMLNode.js+React

SSR瀏覽器端JSjQueryReact.jsjQueryUISparkUIBootstrapReduxHandlebarsImmutable.jsUnderscoreReact-routerLodash請(qǐng)求數(shù)據(jù)jQuery.ajax+RESTful+

JSONFetchAPI+RESTful+

JSONJS組件基于jQuery定制開(kāi)發(fā)基于React定制開(kāi)發(fā)開(kāi)發(fā)語(yǔ)?言Ruby+

ES5ES6/7+

JSX打包?工具RailsAssets

PipelineWebpack+Babel+

GulpUTRspecMocha+Chai+Sinon+

EnzymeCSSSCSSCSSModules+

PostCSS前端SPA架構(gòu)-前端技術(shù)棧原有前端架構(gòu)新前端架構(gòu)服務(wù)器R7Nexus&Artifactory前端SPA架構(gòu)

-

前端CI/CDGitlabJenkinsSrcRepo

CI

CDJenkinsStagingEnv.ProductionEnv.FrontendLibrary

SrcPrivate

NPMRepoNPM

PackagePublishUTBuildBusinessModuleFrontend

SrcArtifact

RepoMicro

ServiceSrcDocker

ImageRepoDocker

ImageDocker

ImageDeployablePackageDeployablePackageDoc

SiteGenerate

DocPackUTBuildPackUTBuildDockerBuildDockerBuildPromoteAuto

TestDeployPromoteAuto

TestDeployPromotePromoteLibraryMaintainerFrontendEngineerBackendEngineerNexus&Artifactory前端SPA架構(gòu)-8前端SPA架構(gòu)

–

容器化微服務(wù)容器化為前端開(kāi)發(fā)測(cè)試提供良好的基礎(chǔ)開(kāi)發(fā)：UI-in-Docker工具（docker-compose）測(cè)試：DEP（DynamicEnvironmentProvisioning）平臺(tái)前端SPA架構(gòu)–容器化微服務(wù)容器化為前端開(kāi)發(fā)測(cè)試提供良好9適用于微服務(wù)體系的前端SPA架構(gòu)自研前端框架SparkUI新舊代碼并存的漸進(jìn)改造適用于微服務(wù)體系的前端SPA架構(gòu)10自研前端框架SparkUI介紹

–

面臨挑戰(zhàn)商業(yè)2B應(yīng)用比起傳統(tǒng)2C應(yīng)用主要有如下特征：軟件質(zhì)量標(biāo)準(zhǔn)高復(fù)雜的業(yè)務(wù)模型和邏輯跨功能模塊的關(guān)聯(lián)和交互單一客戶對(duì)需求的影響力強(qiáng)Reusability可復(fù)?用性Testability可測(cè)試性Flexibility靈活性Productivity開(kāi)發(fā)效率前端自研前端框架SparkUI介紹–面臨挑戰(zhàn)商業(yè)2B應(yīng)用比起11自研前端框架SparkUI介紹

–

面臨挑戰(zhàn)復(fù)雜的業(yè)務(wù)模型和邏輯復(fù)雜的UI交互PageComponentAComponentBSubComponentA1SubComponentA2SubComponentB1SubComponentB2Loading自研前端框架SparkUI介紹–面臨挑戰(zhàn)復(fù)雜的業(yè)務(wù)模型和12自研前端框架SparkUILibrary

ComponentsModula

FrameworkUtilitiesReduxReactImmutableJSBusinessModulesBusiness

ComponentsWebpack+

GulpBusinessLibsFramework*CodeName:

SparkUI自研前端框架SparkUILibraryComponent13自研前端框架SparkUI超過(guò)10萬(wàn)行框架及可復(fù)用組件代碼，其中近4萬(wàn)為UT單元測(cè)試，UT覆蓋率達(dá)到99.82%40個(gè)子package，其中包含超過(guò)50個(gè)各類用途的可重用React組件已有若干業(yè)務(wù)模塊基于SparkUI完成重構(gòu)或開(kāi)發(fā)新功能自研前端框架SparkUI超過(guò)10萬(wàn)行框架及可復(fù)用組件代碼，14自研前端框架SparkUI

–

可重用組件自研前端框架SparkUI–可重用組件15React可重用組件設(shè)計(jì)要點(diǎn)1.

無(wú)狀態(tài)組件（Stateless

Component）優(yōu)于狀態(tài)化組件（StatefulComponent）React可重用組件設(shè)計(jì)要點(diǎn)1.無(wú)狀態(tài)組件（Statele16React可重用組件設(shè)計(jì)要點(diǎn)2.

組合組件（Composing

Components）優(yōu)于具有DSL（DomainSpecific

Language）屬性的單一組件React可重用組件設(shè)計(jì)要點(diǎn)2.組合組件（Composin17React可重用組件設(shè)計(jì)要點(diǎn)3.

高階組件（HOC，Higher-Order

Components）優(yōu)于混合屬性（Mixins）React可重用組件設(shè)計(jì)要點(diǎn)3.高階組件（HOC，High18自研前端框架SparkUI

–

應(yīng)用狀態(tài)管理React

OnlyFluxRedux優(yōu)點(diǎn)不依賴其他框架將state抽取為store，并以action?方式改變store，單向數(shù)據(jù)流從React中分離出來(lái)單?一store，singlesourceof

truth；?生態(tài)豐富缺點(diǎn)需要將深層組件的state

lift

up，導(dǎo)致頂層組件中的state越來(lái)越復(fù)雜、難以維護(hù)?一個(gè)應(yīng)?用內(nèi)存在多個(gè)store，如果在store之間建?立關(guān)聯(lián)，將導(dǎo)致store難于維護(hù)；waitFor接?口在實(shí)際應(yīng)?用中會(huì)帶來(lái)較多問(wèn)題對(duì)于?大型應(yīng)?用，

store與業(yè)務(wù)數(shù)據(jù)差別較?大State

tree節(jié)點(diǎn)間的關(guān)聯(lián)較難實(shí)現(xiàn)流?行的處理SideEffects的?方案都不夠直接自研前端框架SparkUI–應(yīng)用狀態(tài)管理ReactOn19自研前端框架SparkUI

–

應(yīng)用狀態(tài)管理Modula應(yīng)用狀態(tài)管理框架設(shè)計(jì)理念A(yù)pplication

State

=

Initial

State

+

Deltas，其中

Delta

是由

Actions

觸發(fā)的

[

借鑒Flux,Elm

]Application

State

可以由一棵

Model

Tree

來(lái)描述，這棵樹(shù)的每個(gè)節(jié)點(diǎn)都是一個(gè)可以描述有效業(yè)務(wù)實(shí)體的

Model

[借鑒Redux,Elm]由一個(gè)給定的

Application

State

到另一個(gè)State的

Transition

可以由

Model

Tree

提供的Reactions

所描述,

一次成功的

Action

到

Reaction

的匹配會(huì)將

Model

Tree

演變?yōu)橄乱粋€(gè)狀態(tài)

[

原創(chuàng)

]Side

Effect

是上述

state

transitions

的結(jié)果,

它包含了一個(gè)更新的model實(shí)例，以及0至多個(gè)callback

functions

[

借鑒Elm]自研前端框架SparkUI–應(yīng)用狀態(tài)管理Modula應(yīng)用20自研前端框架SparkUI

–

應(yīng)用狀態(tài)管理自研前端框架SparkUI–應(yīng)用狀態(tài)管理21自研前端框架SparkUI

–

前端路由曾封裝并使用react--‐router遇到的問(wèn)題：應(yīng)用狀態(tài)分散在react--‐router的state與Modula

Model（Redux

state）里，兩者經(jīng)常有同步問(wèn)題解決思路：將路由相關(guān)的state也合并進(jìn)Modula

Model中前端路由框架spark--‐router針對(duì)Model配置路由，Component根據(jù)Model切換相應(yīng)界面Functional函數(shù)式配置，可測(cè)試性良好支持類似react--‐router

v4中的multi--‐match功能可與react--‐router共存自研前端框架SparkUI–前端路由曾封裝并使用reac22適用于微服務(wù)體系的前端SPA架構(gòu)自研前端框架SparkUI新舊代碼并存的漸進(jìn)改造適用于微服務(wù)體系的前端SPA架構(gòu)23新舊代碼并存的漸進(jìn)改造新舊代碼并存的漸進(jìn)改造24新舊代碼并存的漸進(jìn)改造新舊代碼并存的漸進(jìn)改造25新舊代碼并存的漸進(jìn)改造

–

混合工程結(jié)構(gòu)SPA前端代碼的源碼依舊放在Rails工程Module目錄下通過(guò)Webpack打包的bundle

JS／CSS也按照Module對(duì)資源文件的約定（convention）放在modules/my_module/app/assets/javascripts/my_module/compiled目錄下藉由Rails

Asset

Pipeline打包進(jìn)Rails工程發(fā)布包進(jìn)行統(tǒng)一部署仍使用Rails頁(yè)面模版作為入口新舊代碼并存的漸進(jìn)改造–混合工程結(jié)構(gòu)SPA前端代碼的源碼26新舊代碼并存的漸進(jìn)改造

–

混合工程結(jié)構(gòu)Rails的后端（頁(yè)面）路由委托給前端新舊代碼并存的漸進(jìn)改造–混合工程結(jié)構(gòu)Rails的后端（頁(yè)27新舊代碼并存的漸進(jìn)改造

–

獨(dú)立組件庫(kù)工程，原有混合?工程獨(dú)?立?工程版本管理任何對(duì)SparkUI的迭代都會(huì)直接影響到業(yè)務(wù)模塊業(yè)務(wù)模塊代碼可以更有計(jì)劃地升級(jí)SparkUI版本，在此之前?無(wú)須反復(fù)回歸測(cè)試開(kāi)發(fā)效率SparkUI是純JS庫(kù)，Rails?工程開(kāi)發(fā)環(huán)境給SparkUI開(kāi)發(fā)帶來(lái)?一定負(fù)擔(dān)不同的發(fā)版節(jié)奏令SparkUI可以追逐更?高的代碼質(zhì)量??目前其源代碼已超10萬(wàn)?行，單元測(cè)試覆蓋率?高達(dá)99.82%源碼權(quán)限任何業(yè)務(wù)模塊開(kāi)發(fā)?人員均可修改SparkUI代碼帶來(lái)潛在代碼沖突，

獨(dú)?立的代碼庫(kù)可以隱藏部分SparkUI的內(nèi)部API或?工具代碼，防?止業(yè)務(wù)模塊中濫?用跨?工程復(fù)?用任何Rails?工程之外的?工程在利?用SparkUI時(shí)都會(huì)?比較繁瑣。作為標(biāo)準(zhǔn)NPM包復(fù)?用將SparkUI剝離為獨(dú)立純前端工程；利用Webpack打包并發(fā)布到公司Nexus上私有NPMRepository里；其他工程利用npm

install安裝依賴。新舊代碼并存的漸進(jìn)改造–獨(dú)立組件庫(kù)工程，原有混合?工程獨(dú)28新舊代碼并存的漸進(jìn)改造

–

新老JS代碼混用在SparkUI中開(kāi)發(fā)了一個(gè)AdapterComponent統(tǒng)一封裝基于jQuery的老JS接口，利用componentDidMount完成其初始化嚴(yán)格控制新老代碼在運(yùn)行時(shí)的邊界新舊代碼