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
140
react-based architecture
yiminghe
April 02, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
230
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.1k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
120
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.3k
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
3.9k
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
使えそうで使われないCloudHSM
maikamibayashi
0
170
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
450
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
630
ガバメントクラウド単独利用方式におけるIaC活用
techniczna
3
270
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Building Applications with DynamoDB
mza
90
6.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
It's Worth the Effort
3n
183
27k
Speed Design
sergeychernyshev
24
570
Side Projects
sachag
452
42k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
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