The Road to Node

Transcript

1. 1.

   The Road to Node at a big company

2. 2.

   - I’m Guille Paz - Frontend developer - Tech Lead

   at Mercado Libre @pazguille (twitter / github) Hi!
3. 3.

   Mercado Libre

4. 4.

   Largest e-commerce ecosystem in Latin America

5. 5.

   None
6. 6.

   ~ 1500 developers

7. 7.

   ~ 1500 developers ~ 4600 repositories

8. 8.

   ~ 1500 developers ~ 4600 repositories ~ 300 deploys per

   day
9. 9.

   ~ 1500 developers ~ 4600 repositories ~ 300 deploys per

   day ~ 800 frontend apps
10. 10.

    ~ 1500 developers ~ 4600 repositories ~ 300 deploys per

    day ~ 800 frontend apps ~ 3 Million rpm
11. 11.

    ~ 1500 developers ~ 4600 repositories ~ 300 deploys per

    day ~ 800 frontend apps ~ 3 Million rpm ~ 900 coffees per day
12. 12.

    Back to 2016

13. 13.

    Frontend Frontend developers Backend developers

14. 14.

    Frontend

15. 15.

    Frontend Access Data UI Logic Business Logic Build assets Auth

    i18n e2e testing ...
16. 16.

    TOO many Technologies

17. 17.

    TOO many Responsibilities

18. 18.

    It’s a kilombo!

19. 19.

    “The world is changing and we must change with it.”

    - Ragnar Lothbrok
20. 20.

    Hey Guille, coffee? Hey, what's happened? Nothing, just running grails

    run-app... Sure! I have 10-15 mins.
21. 21.

    New Team Frontend Core

22. 22.

    We made Big decisions!

23. 23.

    Node is the new UI Layer

24. 24.

    Frontend Middleend UI Layer Business Logic

25. 25.

    Frontend API API Middleend

26. 26.

    Frontend API API Middleend Mobile Native

27. 27.

    None
28. 28.

    The new frontend stack

29. 29.

    None
30. 30.

    LTS version

31. 31.

    None
32. 32.

    None
33. 33.

    None
34. 34.

    ES6 Modules vs CommonJS

35. 35.

    None
36. 36.

    None
37. 37.

    Use ES Features and don’t transpile the server.

38. 38.

    node.green

39. 39.

    None
40. 40.

    six-speed

41. 41.

    None
42. 42.

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

43. 43.

    None
44. 44.

    Shared Version

45. 45.

    Default Middlewares

46. 46.

    Authentication Device Detection Security Default Middlewares

47. 47.

    Default Routes (“/ping”)

48. 48.

    An Express Instance on Steroids

49. 49.

    Routers (“mini-applications”)

50. 50.

    Start Server (development vs production)

51. 51.

    None
52. 52.

    Using React Is A Business Decision, Not A Technology Choice.

    - Eric Baer
53. 53.

    Server-Side Rendering

54. 54.

    React on the Server

55. 55.

    Only transpile JSX in runtime

56. 56.

    JSX (template engine)

57. 57.

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

58. 58.

    None
59. 59.

    Render React Middleware

60. 60.

    Override res.render( ).

61. 61.

    res.render(<View />, props);

62. 62.

    Universal UI Components

63. 63.

    Universal Views

64. 64.

    React on the Server & Client

65. 65.

    None
66. 66.

    Hey Guille, coffee? Hey, what's happened? Nothing, just running npm

    install... Sure! I have 2-3 mins.
67. 67.

    None
68. 68.

    None
69. 69.

    nordic & nordic-dev packages

70. 70.

    None
71. 71.

    None
72. 72.

    react-router on the server

73. 73.

    None
74. 74.

    None
75. 75.

    react-router@3.0.3

76. 76.

    async hooks (onEnter ) are defined globally

77. 77.

    None
78. 78.

    None
79. 79.

    process.env

80. 80.

    It’s not a normal JavaScript object...

81. 81.

    Server rendering is slower...

82. 82.

    cache all the values!

83. 83.

    React 16

84. 84.

    Takeaway

85. 85.

    ⇢ Knows your dependencies ⇢ Node is the new UI

    Layer ⇢ New roles and responsibilities ⇢ ~ 126 coffees per day (86% real) ⇢ Today we feel like...
86. 86.

    None
87. 87.

    None
88. 88.

    Thank you! @pazguille