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
The Road to Node
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Guille Paz
October 28, 2017
Programming
270
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
The Road to Node
The Road to Node (at a big company).
Guille Paz
October 28, 2017
More Decks by Guille Paz
See All by Guille Paz
No me robes el Scroll!
pazguille
0
300
User First
pazguille
1
230
#OfflineFirst
pazguille
3
6k
ES6 in Production
pazguille
10
3.2k
No me hagas esperar!
pazguille
1
210
CSS Sprites vs. Data URIs
pazguille
0
460
Hello, Style Guides!
pazguille
0
290
Decoupling your JavaScript
pazguille
0
200
Progressive Enhancement - Is it still important?
pazguille
0
160
Other Decks in Programming
See All in Programming
複数の Claude Code が"放置"されてしまう問題をCLI ダッシュボードを自作して解決した話
sumihiro3
1
650
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.7k
Google Apps Script で Ruby を動かす
kawahara
0
130
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
krm963
0
250
壊れたパーサから始める関数型設計と構成的なパーサ #fp_matsuri
raiga0310
2
440
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
shibuchaaaan
0
210
Laravel Boostに学ぶ、AIにPHPを書かせる技術 〜OSSの実装から蒸留するエージェント制御の王道〜
kentaroutakeda
3
650
AI Engineeringは、AIプロダクトだけのものか? 〜AIがソフトウェアを作る時代の新しい当たり前〜 / No AI in your product. AI Engineering in your development.
rkaga
4
360
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
290
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
petamoriken
0
200
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
520
これって Effect でできたのでは? / TSKaigi Mashup Kansai #2
susisu
0
140
Featured
See All Featured
How to make the Groovebox
asonas
2
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
53k
How to train your dragon (web standard)
notwaldorf
97
6.7k
The Language of Interfaces
destraynor
162
27k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
30k
Music & Morning Musume
bryan
47
7.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
380
The Cult of Friendly URLs
andyhume
79
7k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
650
Transcript
The Road to Node at a big company
- I’m Guille Paz - Frontend developer - Tech Lead
at Mercado Libre @pazguille (twitter / github) Hi!
Mercado Libre
Largest e-commerce ecosystem in Latin America
None
~ 1500 developers
~ 1500 developers ~ 4600 repositories
~ 1500 developers ~ 4600 repositories ~ 300 deploys per
day
~ 1500 developers ~ 4600 repositories ~ 300 deploys per
day ~ 800 frontend apps
~ 1500 developers ~ 4600 repositories ~ 300 deploys per
day ~ 800 frontend apps ~ 3 Million rpm
~ 1500 developers ~ 4600 repositories ~ 300 deploys per
day ~ 800 frontend apps ~ 3 Million rpm ~ 900 coffees per day
Back to 2016
Frontend Frontend developers Backend developers
Frontend
Frontend Access Data UI Logic Business Logic Build assets Auth
i18n e2e testing ...
TOO many Technologies
TOO many Responsibilities
It’s a kilombo!
“The world is changing and we must change with it.”
- Ragnar Lothbrok
Hey Guille, coffee? Hey, what's happened? Nothing, just running grails
run-app... Sure! I have 10-15 mins.
New Team Frontend Core
We made Big decisions!
Node is the new UI Layer
Frontend Middleend UI Layer Business Logic
Frontend API API Middleend
Frontend API API Middleend Mobile Native
None
The new frontend stack
None
LTS version
None
None
None
ES6 Modules vs CommonJS
None
None
Use ES Features and don’t transpile the server.
node.green
None
six-speed
None
Use ES Stable Features and don’t transpile the server.
None
Shared Version
Default Middlewares
Authentication Device Detection Security Default Middlewares
Default Routes (“/ping”)
An Express Instance on Steroids
Routers (“mini-applications”)
Start Server (development vs production)
None
Using React Is A Business Decision, Not A Technology Choice.
- Eric Baer
Server-Side Rendering
React on the Server
Only transpile JSX in runtime
JSX (template engine)
res.render(‘View.js, props);
None
Render React Middleware
Override res.render( ).
res.render(<View />, props);
Universal UI Components
Universal Views
React on the Server & Client
None
Hey Guille, coffee? Hey, what's happened? Nothing, just running npm
install... Sure! I have 2-3 mins.
None
None
nordic & nordic-dev packages
None
None
react-router on the server
None
None
[email protected]
async hooks (onEnter ) are defined globally
None
None
process.env
It’s not a normal JavaScript object...
Server rendering is slower...
cache all the values!
React 16
Takeaway
⇢ Knows your dependencies ⇢ Node is the new UI
Layer ⇢ New roles and responsibilities ⇢ ~ 126 coffees per day (86% real) ⇢ Today we feel like...
None
None
Thank you! @pazguille