The Road to Node

The Road to Node (at a big company).

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. react-router@3.0.3
    

    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