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
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
200
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
150
Model Mondays S2E03: SLMs & Reasoning
nitya
0
330
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
13k
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
170
PO初心者が考えた ”POらしさ”
nb_rady
0
190
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
140
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
420
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
190
OPENLOGI Company Profile for engineer
hr01
1
33k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Embracing the Ebb and Flow
colly
86
4.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
A designer walks into a library…
pauljervisheath
207
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Become a Pro
speakerdeck
PRO
28
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Optimizing for Happiness
mojombo
379
70k
For a Future-Friendly Web
brad_frost
179
9.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Ace a Technical Interview
jacobian
277
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
चԭ React ጱᕣᒒຝ ֜Ӟễҁಥሳ҂
[email protected]
ӱۓᇙᅩ
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