Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-based architecture
Search
yiminghe
April 02, 2016
Technology
2
150
react-based architecture
yiminghe
April 02, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
210
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
280
react best practice
yiminghe
3
200
react at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
200
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.5k
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
250
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
220
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
140
エンジニアリングマネージャー“お悩み相談”パネルセッション
ar_tama
1
540
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing
tomzoh
2
360
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
6
930
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
850
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
100
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
210
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
660
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Scaling GitHub
holman
461
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Speed Design
sergeychernyshev
32
1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Art, The Web, and Tiny UX
lynnandtonic
300
21k
Faster Mobile Websites
deanohume
308
31k
Transcript
react-based architecture ಥሳ yiminghe@gmail.com
• who am I? • yiminghe@github/gmail/twitter • ಥሳ@alipay/taobao • projects
• kissy/modulex/xtemplate • react-component/antd/antm
Outline • overview • detail • prospect
overview
detail
package manager
npm
tnpm tnpm install @alipay/antm
tools
ant-tool • http://github.com/ant-tool • based on webpack • foundation for
scaffolds • antd-init • antm-init • generator-rc
why ant-tool • make webpack easy to use • webpack
is complext • plugin/loader/middleware/… • engineering • lint/mock/proxy/test • doc/demo • build/deploy • monitor
component
react-component • http://github.com/react-component • cross-platform components based on react •
rc-xx (core components, mainly pc) • rmc-xx (web mobile components) • rn-xx (react native components)
component • https://github.com/react-component/calendar • assets: prototype less • bem +
prefixCls • examples: es6 js • src: es6 js • tests: mocha js
component infrastructure • npm start • http://localhost:8000/examples/xx.html
component infrastructure • npm test/run coverage/run chrome-test
component infrastructure • git commit • npm run lint
component infrastructure • npm run pub • compile/npm publish •
push master/gh-pages • http://react-component.github.io/calendar • react-native needs custom app to view demo • http://react-component.github.io/rn-cascader/
learned lessons • fine-grained modular • shared across platform
learned lessons • use nested component • Aspect Oriented Programming
learned lessons • high order components • expose functionality
antd • http://ant.design • An enterprise-class design language and high
quality UI style. • Rich library based on React Component
antd
antd style • high quality and coherent style • modular
component
antd modules(1.0) modular component
modular less
less dependency
use
use on demand(1.0) • babel-plugin-antd
markdown doc/demo
antd website(1.0) • Universal static SPA doc • react-router •
ant-tool • antd-md-loader • require(‘antd-md!button/basic.md’)
others from alibaba • http://uxco.re/
others from alibaba
mobile • antm(developing) • web • react-native
application architecture
None
react-router, redux and its family roof(developing)
url route • react-router
data(store) • redux • plain object • optional immutable.js
data -> view • react-redux • reselect • roof(developing)
view - css • css-modules • bem (*)
action <> store • redux-saga
redux-saga • before: redux-thunk
redux saga • after: redux-saga
data <> server • isomorphic-fetch • promise • standard •
falcor (*)
falcor • before
falcor
falcor • after
None
summary
None