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 Slide

  2. Vangelis Dimitriadis
    @vangelis183
    LETS TALK ABOUT WORKFLOWS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  13. Grunt
    Gulp
    Broccoli

    View Slide

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

    View Slide

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

    View Slide

  16. CSS Preprocessors
    LETS TALK ABOUT WORKFLOWS

    View Slide

  17. LESS
    SASS

    View Slide

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

    View Slide

  19. View Slide

  20. View Slide

  21. Livereload / Browsersync
    LETS TALK ABOUT WORKFLOWS

    View Slide

  22. View Slide

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

    View Slide

  24. UglifyJS
    LETS TALK ABOUT WORKFLOWS

    View Slide

  25. View Slide

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

    View Slide

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

    View Slide

  28. Sourcemaps
    LETS TALK ABOUT WORKFLOWS

    View Slide

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

    View Slide

  30. View Slide

  31. imageoptim / imagemin
    LETS TALK ABOUT WORKFLOWS

    View Slide

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

    View Slide

  33. https://nodejs.org/en/

    View Slide

  34. package.json

    View Slide

  35. npm install
    LETS TALK ABOUT WORKFLOWS

    View Slide

  36. Gruntfile.js

    View Slide

  37. Gruntfile.js

    View Slide

  38. Gruntfile.js

    View Slide

  39. View Slide

  40. View Slide

  41. last but not least …
    LETS TALK ABOUT WORKFLOWS

    View Slide

  42. Version control
    LETS TALK ABOUT WORKFLOWS

    View Slide

  43. View Slide

  44. View Slide

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

    View Slide