$30 off During Our Annual Pro Sale. View Details »

The Road to Node

Guille Paz
October 28, 2017

The Road to Node

The Road to Node (at a big company).

Guille Paz

October 28, 2017
Tweet

More Decks by Guille Paz

Other Decks in Programming

Transcript

  1. The Road to Node
    at a big company

    View Slide

  2. - I’m Guille Paz
    - Frontend developer
    - Tech Lead at Mercado Libre
    @pazguille (twitter / github)
    Hi!

    View Slide

  3. Mercado Libre

    View Slide

  4. Largest e-commerce
    ecosystem in
    Latin America

    View Slide

  5. View Slide

  6. ~ 1500 developers

    View Slide

  7. ~ 1500 developers
    ~ 4600 repositories

    View Slide

  8. ~ 1500 developers
    ~ 4600 repositories
    ~ 300 deploys per day

    View Slide

  9. ~ 1500 developers
    ~ 4600 repositories
    ~ 300 deploys per day
    ~ 800 frontend apps

    View Slide

  10. ~ 1500 developers
    ~ 4600 repositories
    ~ 300 deploys per day
    ~ 800 frontend apps
    ~ 3 Million rpm

    View Slide

  11. ~ 1500 developers
    ~ 4600 repositories
    ~ 300 deploys per day
    ~ 800 frontend apps
    ~ 3 Million rpm
    ~ 900 coffees per day

    View Slide

  12. Back to
    2016

    View Slide

  13. Frontend
    Frontend
    developers
    Backend
    developers

    View Slide

  14. Frontend

    View Slide

  15. Frontend
    Access Data
    UI Logic
    Business Logic
    Build assets
    Auth
    i18n
    e2e testing
    ...

    View Slide

  16. TOO many
    Technologies

    View Slide

  17. TOO many
    Responsibilities

    View Slide

  18. It’s a
    kilombo!

    View Slide

  19. “The world is changing
    and we must change
    with it.”
    - Ragnar Lothbrok

    View Slide

  20. Hey Guille, coffee?
    Hey, what's happened?
    Nothing, just running
    grails run-app...
    Sure! I have 10-15 mins.

    View Slide

  21. New Team
    Frontend Core

    View Slide

  22. We made
    Big decisions!

    View Slide

  23. Node is the new
    UI Layer

    View Slide

  24. Frontend Middleend
    UI Layer Business Logic

    View Slide

  25. Frontend API
    API
    Middleend

    View Slide

  26. Frontend API
    API
    Middleend
    Mobile Native

    View Slide

  27. View Slide

  28. The new frontend stack

    View Slide

  29. View Slide

  30. LTS version

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. ES6 Modules
    vs
    CommonJS

    View Slide

  35. View Slide

  36. View Slide

  37. Use ES Features
    and don’t transpile
    the server.

    View Slide

  38. node.green

    View Slide

  39. View Slide

  40. six-speed

    View Slide

  41. View Slide

  42. Use ES Stable Features
    and don’t transpile
    the server.

    View Slide

  43. View Slide

  44. Shared Version

    View Slide

  45. Default Middlewares

    View Slide

  46. Authentication
    Device Detection
    Security
    Default Middlewares

    View Slide

  47. Default Routes
    (“/ping”)

    View Slide

  48. An Express Instance
    on Steroids

    View Slide

  49. Routers
    (“mini-applications”)

    View Slide

  50. Start Server
    (development vs production)

    View Slide

  51. View Slide

  52. Using React Is A
    Business Decision,
    Not A Technology
    Choice.
    - Eric Baer

    View Slide

  53. Server-Side
    Rendering

    View Slide

  54. React on
    the Server

    View Slide

  55. Only transpile JSX
    in runtime

    View Slide

  56. JSX
    (template engine)

    View Slide

  57. res.render(‘View.js, props);

    View Slide

  58. View Slide

  59. Render React
    Middleware

    View Slide

  60. Override res.render( ).

    View Slide

  61. res.render(, props);

    View Slide

  62. Universal UI
    Components

    View Slide

  63. Universal
    Views

    View Slide

  64. React on the
    Server & Client

    View Slide

  65. View Slide

  66. Hey Guille, coffee?
    Hey, what's happened?
    Nothing, just running
    npm install...
    Sure! I have 2-3 mins.

    View Slide

  67. View Slide

  68. View Slide

  69. nordic & nordic-dev
    packages

    View Slide

  70. View Slide

  71. View Slide

  72. react-router
    on the server

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. async hooks (onEnter )
    are defined globally

    View Slide

  77. View Slide

  78. View Slide

  79. process.env

    View Slide

  80. It’s not a normal
    JavaScript object...

    View Slide

  81. Server rendering is
    slower...

    View Slide

  82. cache
    all the values!

    View Slide

  83. React 16

    View Slide

  84. Takeaway

    View Slide

  85. ⇢ Knows your dependencies
    ⇢ Node is the new UI Layer
    ⇢ New roles and responsibilities
    ⇢ ~ 126 coffees per day (86% real)
    ⇢ Today we feel like...

    View Slide

  86. View Slide

  87. View Slide

  88. Thank you!
    @pazguille

    View Slide