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
180
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
130
支付宝小程序的开放架构
yiminghe
0
160
gitc2016 react based architecture
yiminghe
1
130
antd at qcon2016
yiminghe
1
180
react-based architecture
yiminghe
2
140
React Ecosystem At Ant Financial
yiminghe
4
2.2k
ant design preview
yiminghe
1
230
react at alipay
yiminghe
43
4.2k
form validation in react
yiminghe
4
530
Other Decks in Technology
See All in Technology
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
プロダクト活用度で見えた真実 ホリゾンタルSaaSでの顧客解像度の高め方
tadaken3
0
120
データプロダクトの定義からはじめる、データコントラクト駆動なデータ基盤
chanyou0311
2
320
強いチームと開発生産性
onk
PRO
34
11k
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
480
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
610
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
130
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.1k
OS 標準のデザインシステムを超えて - より柔軟な Flutter テーマ管理 | FlutterKaigi 2024
ronnnnn
0
140
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
28
13k
ノーコードデータ分析ツールで体験する時系列データ分析超入門
negi111111
0
410
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
A designer walks into a library…
pauljervisheath
204
24k
Automating Front-end Workflow
addyosmani
1366
200k
4 Signs Your Business is Dying
shpigford
180
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Speed Design
sergeychernyshev
25
620
Embracing the Ebb and Flow
colly
84
4.5k
How to train your dragon (web standard)
notwaldorf
88
5.7k
What's new in Ruby 2.0
geeforr
343
31k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
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