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

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