Frontend automation: bring it to the next level - at jsDay Italy 2017

In the last years, the complexity of front end development has exponentially grown making it really difficult to keep up with all the new solutions being developed. Maintaining and configuring automation tools is becoming a real burden, very difficult for newcomers and time consuming for experienced developers.
You'll see how it's possible to improve your project's automation using several techniques, tricks, and tools.

At the end, you will be able to improve your developer experience while maintaining and evolving your project's automation.

Transcript

1. FRONTEND
   AUTOMATION
   BRING IT TO THE NEXT LEVEL
   jsDay 2017
   

   View Slide

2. MATTEO RONCHI
   @CEF62 - GITHUB/CEF62
   SENIOR SOFTWARE ENGINEER AT WORKWAVE
   PROUD MEMBER OF FEVR
   

   View Slide

3. A LITTLE HISTORY
   

   View Slide

4. EVERYTHING STARTED TO CHANGE AROUND 2010
   

   View Slide

5. 2013: FRONTEND-OPS DEFINED BY Alex Sexton
   

   View Slide

6. In a team, everyone should have a
   role and fulfill a specific purpose
   -- anonymous
   

   View Slide

7. MODERN FRONTEND
   DEVELOPMENT
   AIN'T ANY DIFFERENT
   

   View Slide

8. WE ASK FRONTEND DEVELOPERS TO FULFILL
   MULTIPLE ROLES THAT REQUIRE
   FUNDAMENTALLY DIFFERENT SKILL SETS
   

   View Slide

9. View Slide

10. FRONTED DEVELOPMENT
    IS HARD
    

    View Slide

11. 2015: TRANSPILE ALL THE THINGS!
    2016: JAVASCRIPT FATIGUE
    2017: TAKING BACK CONTROL!
    (HOPEFULLY...) ☔
    

    View Slide

12. THE PROBLEM WE FACE
    

    View Slide

13. ALWAYS EVOLVING STANDARDS
    

    View Slide

14. ALWAYS EVOLVING STACK OF TOOLS
    

    View Slide

15. TOO MANY OPTIONS
    

    View Slide

16. TOO MANY UNSTABLE OPTIONS
    

    View Slide

17. WHAT YOU
    CAN DO
    

    View Slide

18. GROW INTERNAL
    EXPERTISE
    

    View Slide

19. KNOWLEDGE BRINGS UNDERSTANDING AND
    BETTER CHOICES,
    WHICH LEADS TO FEWER RISKS AND MORE
    MAINTAINABLE PROJECTS
    

    View Slide

20. CREATE A CURATED LIST OF SKILLED
    INDIVIDUALS TO FOLLOW
    

    View Slide

21. DON'T PANIC!
    YOU WILL BREAK THINGS
    MOST OF THE TIME
    

    View Slide

22. RESERVE A MINIMUM TIME
    EVERY WEEK
    TO TAKE CARE OF YOUR PROJECT
    

    View Slide

23. AVOID BOILERPLATES AND GENERATORS,
    PREFER SMALL TOOLS
    TRY TO UNDERSTAND HOW THEY WORK
    INSTEAD OF BLINDLY USING THEM
    

    View Slide

24. DO YOU TEST YOUR CODE?
    YOU SHOULD ALSO TEST YOUR PROJECT'S
    AUTOMATION
    

    View Slide

25. ORGANIZE YOUR AUTOMATION AND
    DECOUPLE IT FROM THE PROJECT
    

    View Slide

26. USE NPM SCRIPTS, YOUR PROJECT ALREADY
    HAS THEM ENABLED
    USE PLAIN NODE MODULES FOR YOUR
    AUTOMATION WORKFLOWS
    

    View Slide

27. MOVE YOUR AUTOMATION TO A SEPARATE
    REPOSITORY
    

    View Slide

28. DEMO
    RUN-IT
    DEMO SCRIPTS
    

    View Slide

29. AT THE BARE MINIMUM TRY TO ISOLATE
    GENERIC PROCESSES AND AUTOMATION
    YOU WILL BE SURPRISED BY HOW MUCH
    CODE CAN BE REUSED ACROSS PROJECTS
    

    View Slide

30. YOUR AUTOMATION IS
    NEVER FINISHED
    

    View Slide

31. YOUR PROJECT'S AUTOMATION NEEDS TO
    BE CARED FOR AND WELL GROOMED
    YOUR EFFORT WILL BE REPAID TENFOLD
    

    View Slide

32. DEVELOPER
    EXPERIENCE
    MATTERS
    

    View Slide

33. DOCUMENT YOUR SCRIPTS AND THEIR
    PURPOSE
    A CONCISE DESCRIPTION IS OFTEN MORE
    THAN ENOUGH.
    

    View Slide

34. YOUR AUTOMATION HAS TO WORK BUT
    DOESN'T NEED TO BE UGLY OR
    FRUSTRATING. YOU KNOW BETTER!
    ALWAYS DOGFOOD YOUR OWN TOOLS!
    

    View Slide

35. Thanks
    @cef62
    https://joind.in/talk/eba12
    

    View Slide