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
230
支付宝小程序的开放架构
yiminghe
0
190
antd at qcon2016
yiminghe
1
220
react-based architecture
yiminghe
2
160
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
290
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
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
440
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
810
実践AIガバナンス
asei
3
290
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
4
2.3k
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
1.1k
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
120
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
0
100
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Language Update: Java
skrb
2
190
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
110
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
190
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
26
12k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Documentation Writing (for coders)
carmenintech
73
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Agile that works and the tools we love
rasmusluckow
330
21k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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