Vangelis Dimitriadis - Modern frontend workflows - WordCamp Athens 2016

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