3 a forum 2016 陆金所前端进化论 微服务之路(public)
- 1. 互联?网?金金融前端进化论 LU Galaxy Team Ufo Qiao
- 2. ● 业务挑战 ● 前端发展历史 ● 组件化模块化、?工程化 ● 微服务化 ● 未来思考 ● 那些值得说的前端事
- 3. 业务挑战
- 4. ?用户量量(万) 2014Q2 2014Q3 2014Q4 2015Q1 2015Q2 2015Q3 NOW 2651 1429 1000 800 500 300200 ?用户量量 ?用户量量
- 5. 交易易量量 万 万亿
- 12. 只能架构进化
- 13. 以史为鉴回顾前端与移动进化史
- 18. 陆?金金所前端架构历史回顾
- 23. 我们是笔2笔公司?
- 26. ? 分层分域 - 纵向分层、横向分域 ? 基础架构 - 两地三中?、异地灾备/多活、同城双活、?络区域、专线 ? 系统 -系统层次、依赖原则 ? 运维平台 -域名规划、泳道部署、运维监控 ? 数据库 -按域划分、?动化运维、秒级监控、数据总线 ? 平台中间件 -配置中?、消息、JOB、缓存、SOA、DAL、CAT、NAS/TFS、系统监控等 ? 平台线-安全、?户、产物、交易、?付、账户、资产、我的账户、合同、营销、推荐、?告等 ? 产物线 -P2P、保险、B2C、基?、宝宝类、主账户、?端、股票、?级市场 ? 持续交付 -需求管理、CodeReview、UT框架、?动化测试框架、?动部署/发布?具、蓝绿发布/?丝雀验 ? 流程/规范 -规范：?档管理、代码管理、域名管理、域/应?管理、代码规范等 流程：需求评审、架构评审、代码移交、上线发布、应?申请、变更管理等 ?大背景
- 27. 进化第五套？
- 30. Learn Once, Write Anywhere Write Once, Run Anywhere
- 39. React是lib，以 JavaScript 为中?心?= 简约 Ember: {{# each}} Angular 1: ng-repeat Angular 2: ngFor Knockout: data-bind="foreach" React: 直接?用 JS 就好啦 :) Angular是框架，以 HTML 为中?心?= 全?面
- 40. ?Angular 2:?566k (766k with RxJS) ?Ember:?435k ?Angular 1:?143k ?React + Redux:?139k
- 41. Ken Thompson?and?Dennis Ritchie KISS（keep it simple, stupid） Unix Philosophy
- 42. “微时代：我们要的就是轻快稳”
- 43. 粒度思考(颗粒化)
- 45. lUUI 正在开源的路路上
- 49. 单品模块对接投资模块案例例
- 51. 持有中模块对接赎回模块案例例
- 53. 业务组件 UI组件 UI组件 UI组件 …… UI组件 UI组件 Page 业务组件 UI组件 UI组件 UI组件 业务组件 UI组件 UI组件 UI组件 UI组件 Model Backend Services APP Task Services 通知数据更更改Render 发起数据请求Ajax 数据更更改
- 54. ? 组件、业务模块、CoreJs全部集中于单体系统 坑 ? 与Native Task强耦合 ? 和后端系统API强耦合，?大量量Adapter js ? 局部问题，影响全局
- 56. ? UI组件独?立拆分到LUUI 可以这样解决吗? ? BC组件独?立拆分到LUBc ? 核?心框架独?立拆分到LUBase ? 按照BU拆分业务项?目，BU可以独?立完成功能开发 ? 净化业务Task，Task趋于通?用化、Native轻依赖 ? 后端系统之间解耦依靠接?口规范，前端友好
- 58. Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA Micro SPA
- 59. 1. Html、js、css打?入APP?文件，需要Native发版 2. 避免了了?网络传输静态资源?文件，快速加载 1. H5代码部署在服务器?，发版便便利利，迭代快速 2. ?用户体验逊?色?一些 Native H5 Offline Native H5 Online Offline vs Online?鱼与熊掌不不可得兼?
- 60. Native Local H5 Online H5
- 61. FAAS Frontend as a Service 微服务时代，陆?金金所微服务的?大背景下，前端怎么?走？
- 63. ? 分布式服务系统 Martin Fowler ? 按照业务?而不不是技术来划分 ? 做有?生命的产物?而不不是项?目 ? 智能的服务个体和弱通信低耦合 ? DevOps ? 容错 ? 快速进化 每个?人对微服务都可以有?自?己的理理解
- 66. 分布式：系统横向分层
- 68. ? 根据BU业务线竖向划分 前端微服务 ? 每个独?立服务可独?立部署且相互隔离 ? 服务之间通过轻量量级API进?行行通信 ? 服务需保证可靠性和可?用性
- 70. HTML5-HYBRID BC UC BUILD TOOLS CORE-JS 接?口层 Bundle MAPP-WEB Native(IOS,Android) HYBRID 前端源码
- 74. 陆?金金所前端尝补苍诲蝉肠补辫别
- 75. LU H5 Framework UC(UI组件) NavBar FooterBtn Dialog Tab Toast Button List Panel …… Hybrid Bridge JS CORE A pp lic ati on M an ag er LUUI Frontend Microservice Code Once, Run Anywhere 陆?金金所Hybrid?Architecture?Diagram Native WebView 增 量量 更更 新 L U- M- F E ?工 程 化 管 控 BU 保险 基?金金 现?金金管理理 主帐户B2C P2P ?二级市场 ……?高端理理财 BC(业务组件) DataAreaHeader Footer ……Contract KYC ListArea BannerPanelBC RouterCache UtilsHTTPClient Actions PushView FixedBtn PullUp PullDownGesture Page Input Page Trading Pages ……Investment Page Reddem Page Result PageDetail Page Reddem Module ServicesTrading Module 双 重 打 包 灾 备 双 活 BrowserSync HotLoader Mocha Gulp BrowserCat JSLint StyleLint PostCSS Webpack Babel ES2015
- 76. H5Native 基础架构 业务展示 产物列列表 分类筛选 我的帐户 功能设置 IOS Android 任 意 ?门 ?一 帐 通 旺 财 平 安 银 ?行行 m-bu-web 赎回流程?二级?子?页产物详情 持有详情 变现流程投资流程 m-trading-web m-list-web m-public-web NASLUBASELUUI LUBC STATIC 基础服务层 Mobile-appi-bu-appi-trading-app My-app ?网络服务 缓存服务 native m-list-web mapp-web 产物系统 list-app Product-app Product-svc Lsearch-app 核?心基础系统 User-app User-srv Payment-app 交易易系统 Trading-app Settle-app Payment-app Redis NAS/DFS DB MQ Schedule 资产系统 Assert-app Plan-app Payment-app 对外GW Pars-gw Paapi-gw Coop-app Iicp-gw Pahealth-gw 业务application 接?入层
- 78. 那些值得提的前端事
- 79. Optimize Packages Manage Preprocessors NPM Bower HTML JavaScript CSS Sass,Less,Stylus,PostCSS HAML,Jade,Markdwon,Slim ES2015,TypeScript,CoffeScript Dedupe Uglify CommonsChunk HotLoder If(debug){? Hotloader…? }else if(online){? ToOnline... }else if(App){? ToHybrid…? }
- 80. 叠别蹿辞谤别…
- 83. ? 项?目分离： 分布式build ? 增量量：没有修改的代码?自动过滤 ? 多线程：happypack ? 复制：node_modules 升级?方案
- 84. 础蹿迟别谤…
- 86. mobile-hybrid-resource html5-framework html5-hybrid/src build 2.7.0 hybridlumi copy npm run packOld npm run packNew
- 87. Projects ? luui ? lubase ? lu-m-* (BU) 我们的BU Web?几?十套
- 88. 叠别蹿辞谤别…
- 90. luui/lubase src luui/lubase lib npm link luui lubase /usr/local/lib/node_modules BU lu-m-b2c lu-m-cash lu-m-p2p lu-m-fund …lu-m-stock link & import Build with luui/lubase source code
- 91. 升级?方案 ? 隔离 luui&lubase ? 共享 external libs ? 分离 Business Components
- 92. 础蹿迟别谤…
- 94. lubc luui lubase lubc.js/lubc.css luui.js/luui.css lubase.js CDN deploy BU Lu-m-cash External Resource Lu-m-p2p Lu-m-b2c Lu-m-insurance Lu-m-fund ……
- 100. 同?一系统?页?面返回？
- 101. 同?一系统?页?面正常返回！
- 102. 不不同系统公共?页?面返回？
- 103. 同?一系统?页?面?非正常返回！
- 104. 同?一系统公共?页?面返回？
- 105. 同?一系统跨域?页?面返回！
- 106. 质量量提升
- 108. CAT JS Error?首?页
- 109. 颁础罢详细错误
- 110. JS Error实现原理理 ? 当js出错时，会?自动调?用window.onerror?方法 ? 通过该?方法的?几个参数可以拿到js错误的堆栈调?用数据 ? 将堆栈数据格式化后传给CAT接?口，从?而在CAT监控端展示出来
- 111. 增量量更更新 灾备双活
- 116. 未来
- 117. 未来哪些技术值得我们思考?
- 118. WebComponents progressive web app TypeScript Electron 函数式编程 React Native http2.0 前端安全
- 128. A-Frame 0.2.0 – The Extensible VR Web
- 129. WebVR WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.
- 134. What is a Progressive Web App? A Progressive Web App uses modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.
- 140. Next.js is a minimalistic framework for server-rendered React applications
- 141. Isomorphic JavaScript JavaScript applications which run both client-side and server-side. Isomorphic JavaScript frameworks are the next step in the evolution of JavaScript frameworks. These new libraries and frameworks are solving the problems associated with traditional JavaScript frameworks.
- 142. 点 线?面 体?
- 143. Thanks all of you
- 144. Q&A
- 145. THANKS