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
130
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
150
支付宝小程序的开放架构
yiminghe
0
170
antd at qcon2016
yiminghe
1
190
react-based architecture
yiminghe
2
150
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
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
現場で役立つAPIデザイン
nagix
29
10k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Larkご案内資料
customercloud
PRO
0
600
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
1
240
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Automating Front-end Workflow
addyosmani
1367
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Documentation Writing (for coders)
carmenintech
67
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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