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

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

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

PushData

PreloadStaticAsset

ServerSPA

ASPA

BSPA

CContainerManagementService

RegistryBusinessService

XBusinessService

YBusinessService

ZAPIGateway:Auth,Throttling,Routing,

PermissionAuth

Service(SSO)Configuration

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

ModelRoutingFetchI18nPermissionReusableComponents

LibraryModule

1Module

2Module

3Module

4Module

5Module

6Module

7Module

8SPA

ASPA

BSPA

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

-

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

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

ERB/HAMLNode.js+React

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

JSONFetchAPI+RESTful+

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

ES5ES6/7+

JSX打包?工具RailsAssets

PipelineWebpack+Babel+

GulpUTRspecMocha+Chai+Sinon+

EnzymeCSSSCSSCSSModules+

PostCSS前端SPA架構(gòu)-前端技術(shù)棧原有前端架構(gòu)新前端架構(gòu)服務器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)

–

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

–

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

–

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

ComponentsModula

FrameworkUtilitiesReduxReactImmutableJSBusinessModulesBusiness

ComponentsWebpack+

GulpBusinessLibsFramework*CodeName:

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

–

可重用組件自研前端框架SparkUI–可重用組件15React可重用組件設計要點1.

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

Component）優(yōu)于狀態(tài)化組件（StatefulComponent）React可重用組件設計要點1.無狀態(tài)組件（Statele16React可重用組件設計要點2.

組合組件（Composing

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

Language）屬性的單一組件React可重用組件設計要點2.組合組件（Composin17React可重用組件設計要點3.

高階組件（HOC，Higher-Order

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

–

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

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

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

lift

up，導致頂層組件中的state越來越復雜、難以維護?一個應?用內(nèi)存在多個store，如果在store之間建?立關聯(lián)，將導致store難于維護；waitFor接?口在實際應?用中會帶來較多問題對于?大型應?用，

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

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

–

應用狀態(tài)管理Modula應用狀態(tài)管理框架設計理念Application

State

=

Initial

State

+

Deltas，其中

Delta

是由

Actions

觸發(fā)的

[

借鑒Flux,Elm

]Application

State

可以由一棵

Model

Tree

來描述，這棵樹的每個節(jié)點都是一個可以描述有效業(yè)務實體的

Model

[借鑒Redux,Elm]由一個給定的

Application

State

到另一個State的

Transition

可以由

Model

Tree

提供的Reactions

所描述,

一次成功的

Action

到

Reaction

的匹配會將

Model

Tree

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

[

原創(chuàng)

]Side

Effect

是上述

state

transitions

的結(jié)果,

它包含了一個更新的model實例，以及0至多個callback

functions

[

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

–

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

–

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

Model（Redux

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

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

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

–

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

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

Asset

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

–

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

–

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

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

install安裝依賴。新舊代碼并存的漸進改造–獨立組件庫工程，原有混合?工程獨28新舊代碼并存的漸進改造

–

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