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

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

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.

Matteo Ronchi

May 10, 2017
Tweet

More Decks by Matteo Ronchi

Other Decks in Programming

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