Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vangelis Dimitriadis - Modern frontend workflows - WordCamp Athens 2016

Vangelis Dimitriadis - Modern frontend workflows - WordCamp Athens 2016

WordPress Greek Community

November 19, 2016
Tweet

More Decks by WordPress Greek Community

Other Decks in Programming

Transcript

  1. LETS TALK ABOUT
    WORKFLOWS
    Μοντέρνα ροή εργασίας & εργαλεία

    View full-size slide

  2. Vangelis Dimitriadis
    @vangelis183
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  3. PROGRAMMERS ARE F***ING
    LAZY
    Swizec Teller
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  4. Μια ροή εργασίας αποτελείται από μια
    σειρά συνδεδεμένων βημάτων,
    προκειμένου να ολοκληρωθεί μια
    εργασία.
    Wikipedia
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  5. Ποιά εργαλεία
    χρησιμοποιούμε σήμερα;
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  6. Τα εργαλεία μας εξελίσσονται.
    Εμείς; Ο τρόπος δουλειάς μας;
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  7. Η επένδυση σε χρόνο/χρήμα
    σε μια ροή εργασίας θα πρέπει
    να μας επιστραφεί
    πολλαπλάσια.
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  8. Ποιά εργαλεία υπάρχουν;
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  9. https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.gt4cz03pe

    View full-size slide

  10. Λεπτή γραμμή μεταξύ χρήσης
    για χάρη της χρήσης και
    χρησιμότητας.
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  11. Αυτοματοποίηση
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  12. Grunt
    Gulp
    Broccoli

    View full-size slide

  13. Πού χρησιμέυουν;
    LETS TALK ABOUT WORKFLOWS
    Compile
    Convert
    Tasks automation
    Deploy

    View full-size slide

  14. Ποιό χρησιμοποιούμε;
    LETS TALK ABOUT WORKFLOWS
    Αυτό που μας εξυπηρετεί!

    View full-size slide

  15. CSS Preprocessors
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  16. Πού χρησιμέυουν;
    LETS TALK ABOUT WORKFLOWS
    variables
    nesting
    mixins
    operators

    View full-size slide

  17. Livereload / Browsersync
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  18. Πού χρησιμέυει;
    LETS TALK ABOUT WORKFLOWS
    Refresh after changes made
    Server via local IP
    Click sync on multiple devices

    View full-size slide

  19. UglifyJS
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  20. Πού χρησιμέυει;
    LETS TALK ABOUT WORKFLOWS
    minify sources
    performance

    View full-size slide

  21. Από
    1,7 MB
    σε
    331KB

    View full-size slide

  22. Sourcemaps
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  23. Πού χρησιμέυει;
    LETS TALK ABOUT WORKFLOWS
    locate Error
    minified sources
    „Αντιβιωτικό“ για debugging

    View full-size slide

  24. imageoptim / imagemin
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  25. Και πως συνδέονται όλα αυτά;
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  26. https://nodejs.org/en/

    View full-size slide

  27. package.json

    View full-size slide

  28. npm install
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  29. Gruntfile.js

    View full-size slide

  30. Gruntfile.js

    View full-size slide

  31. Gruntfile.js

    View full-size slide

  32. last but not least …
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  33. Version control
    LETS TALK ABOUT WORKFLOWS

    View full-size slide

  34. https://bitbucket.org/vangelis/wcath2016
    LETS TALK ABOUT WORKFLOWS

    View full-size slide