Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
The Road to Node at a big company
Slide 2
Slide 2 text
- I’m Guille Paz - Frontend developer - Tech Lead at Mercado Libre @pazguille (twitter / github) Hi!
Slide 3
Slide 3 text
Mercado Libre
Slide 4
Slide 4 text
Largest e-commerce ecosystem in Latin America
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
~ 1500 developers
Slide 7
Slide 7 text
~ 1500 developers ~ 4600 repositories
Slide 8
Slide 8 text
~ 1500 developers ~ 4600 repositories ~ 300 deploys per day
Slide 9
Slide 9 text
~ 1500 developers ~ 4600 repositories ~ 300 deploys per day ~ 800 frontend apps
Slide 10
Slide 10 text
~ 1500 developers ~ 4600 repositories ~ 300 deploys per day ~ 800 frontend apps ~ 3 Million rpm
Slide 11
Slide 11 text
~ 1500 developers ~ 4600 repositories ~ 300 deploys per day ~ 800 frontend apps ~ 3 Million rpm ~ 900 coffees per day
Slide 12
Slide 12 text
Back to 2016
Slide 13
Slide 13 text
Frontend Frontend developers Backend developers
Slide 14
Slide 14 text
Frontend
Slide 15
Slide 15 text
Frontend Access Data UI Logic Business Logic Build assets Auth i18n e2e testing ...
Slide 16
Slide 16 text
TOO many Technologies
Slide 17
Slide 17 text
TOO many Responsibilities
Slide 18
Slide 18 text
It’s a kilombo!
Slide 19
Slide 19 text
“The world is changing and we must change with it.” - Ragnar Lothbrok
Slide 20
Slide 20 text
Hey Guille, coffee? Hey, what's happened? Nothing, just running grails run-app... Sure! I have 10-15 mins.
Slide 21
Slide 21 text
New Team Frontend Core
Slide 22
Slide 22 text
We made Big decisions!
Slide 23
Slide 23 text
Node is the new UI Layer
Slide 24
Slide 24 text
Frontend Middleend UI Layer Business Logic
Slide 25
Slide 25 text
Frontend API API Middleend
Slide 26
Slide 26 text
Frontend API API Middleend Mobile Native
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
The new frontend stack
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
LTS version
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
ES6 Modules vs CommonJS
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Use ES Features and don’t transpile the server.
Slide 38
Slide 38 text
node.green
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
six-speed
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Use ES Stable Features and don’t transpile the server.
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Shared Version
Slide 45
Slide 45 text
Default Middlewares
Slide 46
Slide 46 text
Authentication Device Detection Security Default Middlewares
Slide 47
Slide 47 text
Default Routes (“/ping”)
Slide 48
Slide 48 text
An Express Instance on Steroids
Slide 49
Slide 49 text
Routers (“mini-applications”)
Slide 50
Slide 50 text
Start Server (development vs production)
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
Using React Is A Business Decision, Not A Technology Choice. - Eric Baer
Slide 53
Slide 53 text
Server-Side Rendering
Slide 54
Slide 54 text
React on the Server
Slide 55
Slide 55 text
Only transpile JSX in runtime
Slide 56
Slide 56 text
JSX (template engine)
Slide 57
Slide 57 text
res.render(‘View.js, props);
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Render React Middleware
Slide 60
Slide 60 text
Override res.render( ).
Slide 61
Slide 61 text
res.render(, props);
Slide 62
Slide 62 text
Universal UI Components
Slide 63
Slide 63 text
Universal Views
Slide 64
Slide 64 text
React on the Server & Client
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
Hey Guille, coffee? Hey, what's happened? Nothing, just running npm install... Sure! I have 2-3 mins.
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
nordic & nordic-dev packages
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
react-router on the server
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
react-router@3.0.3
Slide 76
Slide 76 text
async hooks (onEnter ) are defined globally
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
No content
Slide 79
Slide 79 text
process.env
Slide 80
Slide 80 text
It’s not a normal JavaScript object...
Slide 81
Slide 81 text
Server rendering is slower...
Slide 82
Slide 82 text
cache all the values!
Slide 83
Slide 83 text
React 16
Slide 84
Slide 84 text
Takeaway
Slide 85
Slide 85 text
⇢ Knows your dependencies ⇢ Node is the new UI Layer ⇢ New roles and responsibilities ⇢ ~ 126 coffees per day (86% real) ⇢ Today we feel like...
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Thank you! @pazguille