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
160
react-based architecture
yiminghe
April 02, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
150
antd at qcon2016
yiminghe
1
220
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
react best practice
yiminghe
3
210
react at alipay
yiminghe
43
4.4k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
210
はじめてのOSS開発からみえたGo言語の強み
shibukazu
3
990
AIがコード書きすぎ問題にはAIで立ち向かえ
jyoshise
1
160
Modern Linux
oracle4engineer
PRO
0
160
AIエージェントで90秒の広告動画を制作!台本・音声・映像・編集をつなぐAWS最新アーキテクチャの実践
nasuvitz
3
360
メルカリIBISの紹介
0gm
0
330
Snowflake Intelligence × Document AIで“使いにくいデータ”を“使えるデータ”に
kevinrobot34
1
120
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
820
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
350
Featured
See All Featured
Making Projects Easy
brettharned
117
6.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
315
140k
Designing for Performance
lara
610
69k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
It's Worth the Effort
3n
187
28k
Fireside Chat
paigeccino
39
3.6k
Six Lessons from altMBA
skipperchong
28
4k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Transcript
react-based architecture ಥሳ
[email protected]
• 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