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
210
react best practice
react best practice
yiminghe
May 14, 2015
Tweet
Share
More Decks by yiminghe
See All by yiminghe
小程序终端技术架构
yiminghe
0
230
支付宝小程序的开放架构
yiminghe
0
190
gitc2016 react based architecture
yiminghe
1
160
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 at alipay
yiminghe
43
4.4k
form validation in react
yiminghe
4
560
Other Decks in Technology
See All in Technology
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
2
180
Introdução a Service Mesh usando o Istio
aeciopires
1
280
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
940
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
310
映像エッジAIにおけるNode-RED活用事例
emirmatsui
0
130
「魔法少女まどか☆マギカ Magia Exedra」の多様なバトルの開発を柔軟かつ効率的に実現するためのPure C#とUnityの分離について
gree_tech
PRO
0
240
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
「魔法少女まどか☆マギカ Magia Exedra」におけるバックエンドの技術選定
gree_tech
PRO
0
100
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
1
270
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
17k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
11
8.2k
Railsの話をしよう
yahonda
0
170
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
KATA
mclloyd
PRO
32
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Balancing Empowerment & Direction
lara
5
700
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
We Have a Design System, Now What?
morganepeng
53
7.8k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Navigating Team Friction
lara
190
15k
GitHub's CSS Performance
jonrohan
1032
470k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
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