Paul van Dam, Coolblue, Rotterdam — Introducing and Implementing React at Coolblue

Paul van Dam, Coolblue, Rotterdam — Introducing and Implementing React at Coolblue

At Coolblue we want to keep our employees as happy as possible. That means handing them tools that are fast and easy to work with. Last year we started building new tooling using React. How did we come to this decision and how does it suit a fast growing, dynamic organisation? In this talk I will take you on a trip through the research and decision making that was part of coming to our current development stack.

Transcript

1. Introducing and implementing React.
   React Amsterdam 2016, by Paul van Dam
   1
   

   View Slide

2. • Why React?
   • JavaScript fatigue
   • Integration
   2
   

   View Slide

3. Paul van Dam

   3
   

   View Slide

4. View Slide

5. Faceted Navigation.

   5
   

   View Slide

6. View Slide

7. Framework vs UI library.

   7
   

   View Slide

8. Leland Richardson - Engineer at AirBnB.

   "Reusability/portability: React components are
   extremely reusable
   Refactorability: React tends to make your code
   very easy to refactor and iterate on.”
   In your opinion, what are the biggest
   advantages of using React?
   8
   

   View Slide

9. 9
   Agile ❤ React
   

   View Slide

10. Brands using React.

    10
    

    View Slide

11. The simplest code
    
    is the code that you don’t need to write at all.
    11
    

    View Slide

12. JavaScript fatigue.

    Saul: “How’s it going?”
    Me: “Fatigued.”
    Saul: “Family?”
    Me: “No, Javascript.”
    Eric Clemmons
    12
    

    View Slide

13. Focus.

    13
    

    View Slide

14. Fail often.

    14
    

    View Slide

15. Learning curve.

    15
    

    View Slide

16. Expand.

    16
    

    View Slide

17. FRAMEWORK
    MODULE
    MODULE
    MODULE
    MODULE
    17
    

    View Slide

18. Integration.

    18
    

    View Slide

19. Integration.

    ESLINT
    UNIT
    TEST
    PULL
    REQUEST
    BUILD / DEPLOY
    STUFF
    19
    

    View Slide

20. Semantic Versioning.

    ^3.0.2 3.19.34
    ^0.14.2 0.14.9
    20
    

    View Slide

21. • It assumes developers follow
    the rules of versioning
    • It assumes releases are
    perfect
    21
    

    View Slide

22. • Fixed versions in package.json
    • Check in /node_modules/
    • npm shrinkwrap
    22
    

    View Slide

23. • HMR
    • React 15 / Webpack 2
    • Dropping karma/phantomjs in
    favour of Ava/Enzyme
    23
    

    View Slide

24. THANK YOU.
    Paul van Dam

    @paulvdam
    #reactamsterdam
    24
    

    View Slide