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
150
支付宝小程序的开放架构
yiminghe
0
170
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
190
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
260
react best practice
yiminghe
3
180
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
540
Other Decks in Technology
See All in Technology
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
ハッキングの世界に迫る~攻撃者の思考で考えるセキュリティ~
nomizone
12
4.5k
アジャイル開発とスクラム
araihara
0
160
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1367
200k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bash Introduction
62gerente
610
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Practical Orchestrator
shlominoach
186
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
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