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
gitc2016 react based architecture
Search
yiminghe
July 01, 2016
Technology
1
150
gitc2016 react based architecture
react react-native antd antm gitc2014
yiminghe
July 01, 2016
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
antd at qcon2016
yiminghe
1
210
react-based architecture
yiminghe
2
150
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
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
本が全く読めなかった過去の自分へ
genshun9
0
740
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
3
410
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
220
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
250
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
1
11k
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
120
Connect 100+を支える技術
kanyamaguc
0
170
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
2
300
Featured
See All Featured
Side Projects
sachag
455
42k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Six Lessons from altMBA
skipperchong
28
3.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Speed Design
sergeychernyshev
32
1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Fireside Chat
paigeccino
37
3.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Transcript
चԭ React ጱᕣᒒຝ ֜Ӟễҁಥሳ҂ yiminghe@gmail.com
ӱۓᇙᅩ
None
ᬩ០ଘݣ හഝଘݣ ਮಁӾݣ CRM ૡᑕଘݣ ૡᑕଘݣ մӱᓕቘ ๐ۓလቘ ᬩᖌᔮᕹ ਮ๐Ӿஞ
ݍḇଘݣ
قᒒ҅قૡᑕ JavaScript
قᎸݎཛྷୗ Ծߝᕪቘ ق/قᒒݎ + ڹᒒचᏐᦡෞ
ᩒრࣳࢫᴚ ๐ۓࣳࢫᴚ
ڹᒒຝ
React ದ
• ቘஷضᬰ҅ۓਫ • ᐒ܄ᔺឍ҅ᨶṛ • ᭇአଠ • ᩂᬪݸᒒݎ
None
• ᩂᬪݸᒒݎཛྷୗ • ғjava -> es6/typescript • ۱ᓕቘғmaven -> npm/tnpm
• ׁᩢᓕቘғimport • ᔄਧԎғclass • හഝ: හഝପ(orm) -> ajax/graphql/falcor • ኴᶎғvelocity -> jsxҁᕟկ۸҂ • ۱ғ jar/war -> ݳଚ js/css
ES2015 TypeScript
᭜ᭇݳق/قᒒጱڹᒒचᏐᦡෞ
None
package manager
None
tnpm install @alipay/antm
ૡٍ
• https://github.com/ant-tool • चԭ webpack ԫེᤰ
ᚕಋຝ HMR դቘ හഝ MOCK ୌ UI ၥᦶ හഝၞ ᓕቘ
ᐶᕚ۱ ݎ դᎱ ᥢ
None
ݢൊጱ npm package
ֵአفݗ
ᕟկ
react-component antd antm
react-component • https://github.com/react-component • चԭ React ጱᕣᒒᕟկ • xx: ᭗አᕟկ҅य़ग़አԭ
PC/Pad • m-xx: ᑏۖᕟկ҅ᭇᯈ web Ө react-native
ᕟկᥢ
ᕟկᥢ • assets: ܻࣳ less • bem + prefixCls •
examples: es6/typescript • src: es6/typescript ᭇᯈ react-native web • tests: es6/typescript mocha
ᕟկचᏐᦡෞ
ݎ • npm start • localhost:8000/examples/xx.html
ၥᦶ • karma • npm run test/coverage/chrome-test
Ի • git commit • npm run lint
ݎ • npm run pub • es6/typescript ᖫᦲک es5 •
npm publish • git push master • ኞ౮ᶱፓᐏᶭ • http://react-component.github.io/calendar/ • git push gh-pages
None
Ant Design ӞӻӾݣᦡᦇ http://ant.design
ᕟկ ᦡᦇ ܻڞ ཛྷୗ ဃႚ ૡٍ ङᦒ ᡶᡵᰂᣟԯ ଠာጱӾݣԾߝ ᦡᦇᥢ
ᦡᦇ
ਫአԆԎ ੜᘒᗦ ᕹӞ Ի ۖኮ ᕣᒒ
antd (PC)
None
ࢵᴬ۸
ֵአ babel-plugin-antd ೲᵱے
ᗑᒊ • http://ant.design • SPA ܔᶭᶎଫአ • ׁᩢ • bisheng
(markdown to jsx) • ant-tool
4700+ ਥᗑྯ෭ᦢᳯᰁ Իහ 1400+ Issue Pull request හᰁ 69
ᨯሠᘏහᰁ 70/193 ᥟፍᡶᡵӾݸݣᔮᕹ 1w+ npm ྯ์ӥᰁ 2w+ 45xx
antm (mobile) http://antm.alipay.net
• ᕣᒒ • web • react-native
None
web
iOS
iOS
android
android
ਧ֖ ׀ବ੶ۑᚆ ਠ࠺ጱॺկ ୗ चᏐ݇ᘍୗ ᕹӞጱᦡᦇᥢ ᯈᗝ ୩य̵़॔ ᔜᓌ
ṛᴤ҅॔ ᔜᗦ҅ᶎݻڡᕆአ ಁ ಘ ṛ ֗ react-component antd/antm
ଫአຝ
• ᛔᎸ roof • ᐒ܄
roof ᰁᕆጱහഝᕬਧ
ᐒ܄ ᘸݳսᐹᔄପ୵౮մӱᕆጱڹᒒଫአຝ
API Server Data View URL Action routing react dispatch
react react-router redux react-redux redux-saga reselect css-modules isomorphic-fetch
API Server Data View URL Action routing react dispatch isomorphic-fetch
async + await react-router redux-saga reselect css-modules
None
๐ۓԻ
• fetch • promise / standard • async / await
• falcor • graphql
ֵአ fetch ԏڹ ࢧ᧣ڍහ
fetch generator await / async
None
ӱۓᥟፍ
• Ӿݸݣᔮᕹ • ᰂᣟԯ • oceanbase ԯଘݣ • ᗑӤᱷᤈ •
ᬩ០ଘݣ • ݗᏧӾݣ
Ӿݣෛᔮᕹ 100% http://antp.alipay.net/service#/bigdata
• 2016 ڹᒒෛी 20 Ո, قෛी 501҅ᬡຽ 135 • http://antp.alipay.net/service#/bigdata
None
None
None
None
None
None
ӥӞྍ
๚ TypeScript antm ᑏۖᒒ ๐ۓᒒ Ի ӱۓཛྷ ୗପ ࢵᴬ۸ …
None