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
react best practice
Search
yiminghe
May 14, 2015
Technology
3
200
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
210
支付宝小程序的开放架构
yiminghe
0
180
gitc2016 react based architecture
yiminghe
1
150
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 at alipay
yiminghe
43
4.3k
form validation in react
yiminghe
4
550
Other Decks in Technology
See All in Technology
PO初心者が考えた ”POらしさ”
nb_rady
0
220
DatabricksにOLTPデータベース『Lakebase』がやってきた!
inoutk
0
120
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
360
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Geminiとv0による高速プロトタイピング
shinya337
1
280
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
0
130
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
2
300
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
170
ビギナーであり続ける/beginning
ikuodanaka
3
770
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Code Reviewing Like a Champion
maltzj
524
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Speed Design
sergeychernyshev
32
1k
Adopting Sorbet at Scale
ufuk
77
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Site-Speed That Sticks
csswizardry
10
690
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
What's in a price? How to price your products and services
michaelherold
246
12k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Transcript
react best prac*ce
[email protected]
承玉
Outline • Technology stack – react/koa/webpack/npm • Prac*ce
• Summary
• Technology stack
react • react: library for build user interface
react • render
react • diff
React-‐components • Components based on react • hDps://github.com/react-‐component
react-‐component
koa • Koa: next genera*on web framework for node.js
chain
chair • 基于 koa,整合支付宝基础服务 – Session – Hsf(Tr) – Drm
– Tair – Ls
chair • Router • logger • Proxy (generate
from jar)
webpack • hDp://webpack.github.io/ • Module bundler
npm • Package manager for javascript (react,jquery,angular…)
tnpm • 集团内部源,支持私有包
• prac*ce
tnpm • package.json:
commonjs • commonjs for browser and server
react • Components Composi*on
Custom page • aliloan
React rerender • Render on data change
webpack • commonjs compile, sourcemap • Common code extrac*on
• Css extrac*on
webpack • Development – Build into memory – koa middleware
– No hash
webpack • Build – Compress – hash
jsx on server • jsx as skeleton on server
share code with server • u*l/enum/jsx … • app/common/getUserFromIvr.js:
dev.assets • Half dead – Serve sta*c resources in nodejs
memory (webpack) – Speedy cbd cycle
summary • server-‐browser harmony – js rules all – Use
React on server and browser – Use npm on server and browser – Use webpack on server and browser