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
130
react-based architecture
yiminghe
April 02, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
58
支付宝小程序的开放架构
yiminghe
0
140
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
170
React Ecosystem At Ant Financial
yiminghe
4
2.1k
ant design preview
yiminghe
1
200
react best practice
yiminghe
3
160
react at alipay
yiminghe
43
4k
form validation in react
yiminghe
4
510
Other Decks in Technology
See All in Technology
JSON攻略法.pdf
miyakemito
8
5k
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
web-application-security
matsuihidetoshi
0
160
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.2k
Cracking the KubeCon CfP
inductor
2
240
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
地理空間データ可視化・解析・活用ソリューション Pacific Spatial Solutions (PSS)
pacificspatialsolutions
0
220
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Code Review Best Practice
trishagee
55
15k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
What's in a price? How to price your products and services
michaelherold
237
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Fireside Chat
paigeccino
21
2.6k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Thoughts on Productivity
jonyablonski
58
3.8k
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