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
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
240
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
180
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
310
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
400
事業を差別化する技術を生み出す技術
pyama86
2
550
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
110
Amazon Q Developerの無料利用枠を使い倒してHello worldを表示させよう!
nrinetcom
PRO
2
130
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4.2k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
560
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
マルチアカウント環境における組織ポリシーについて まとめてみる
nrinetcom
PRO
2
110
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1.2k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.4k
The Invisible Side of Design
smashingmag
299
50k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building an army of robots
kneath
303
45k
Site-Speed That Sticks
csswizardry
4
420
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Faster Mobile Websites
deanohume
306
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Producing Creativity
orderedlist
PRO
344
40k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Fireside Chat
paigeccino
35
3.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
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