Tools for the modern Front-End Developer's workflow

A presentation about the modern tools used by Front-End developers today.

That presentation was done during the DevCon 2016 in Mauritius (http://www.devconmru.org/).

Transcript

1. Tools for the Modern Front-End Developer's Workflow @daviddiasfront #DevConMru
2. David Dias @daviddiasfront www.david-dias.com
3. Front-End Developer architect / manager http://www.proximity.bbdo.mu/
4. Years ago, Front-End developers were just like everyone imagine...
6. No. In fact, it's was more...
8. Debugging phase...
9. But what the Front-End really do?
10. -Wikipedia « The practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly. »
11. Before...
13. But today, Front-End development is much more than just HTML, CSS and JavaScript...
14. Today !
16. Our tooling landscape is more and more complex.
17. Jeff Pelletier / On Medium
18. Texte du titre Don't be lost...
19. Choose the right tool for the right need. To save your time and do better your work.
20. Our projects are much more different and complexe.
21. Single Page Application HTML5 Games Mobile applications Web apps Responsive Web Design IoT
22. Front-End needs to care more than only the quality of their code.
23. Accessibility Performance SEO Quality Maintainability Browser compatibility Animations User Experience
24. Define a workflow is essential to face these new challenges.
25. A typical front-end workflow before...
26. - Choose your text editor. - Create your repository (versioning). - Create your HTML file, CSS file and JS file. - Create an "architecture". (copy-paste previous folders used on a previous project) - Put manually your code on FTP.
28. A typical front-end workflow today.
29. - Choose your text editor - Create your repository (versioning) - Choose the right framework, preprocessors, technologies... - Create your architecture and tasks - Put in place testing tools - Deploy automatically your application / website
30. Rule #1
31. Learn to the command-line
32. Don't be afraid!
33. How I feel when working with command line...
35. “Sandwich” (via xkcd) derives humor from the behavior of sudo CLI in real life... or not... *CLI = Command Line Interface
36. First, choose your Text Editor
38. Source editing with Devtools Workspaces Add local source files to workspace Stage persisted changes https://developers.google.com/web/tools/setup/setup-workflow?hl=en
39. Version control management
41. Why use GIT? And why everyone on earth is using GIT (almost everyone).
42. - Makes collaboration effortless - Fast (more than SVN) - Don't need internet to commit. - Flexible branching system (can develop features on parallel) - ...
47. Choose the right framework, preprocessors, technologies...
48. UI Frameworks
49. Frameworks / library
50. Preprocessor
51. - Maintainability (DRY : Don't Repeat Yourself) - Variables - Modules - Conditional statements - Lot of features - Functions and much more
52. Templating
53. Why use a template engine? And why everyone on earth is using GIT (almost everyone).
54. - Rapid development and modifications - Code consistency - Standards compliance - ...
56. Create your architecture and tasks
58. - JavaScript Runtime at command line - Allows us to write JS outside the browser - Built on V8 JS engine - Written in C++ - Developed by Google - Compiles JS code to native before execution
59. $ npm install -g yo $ yo angular
61. Prepros
62. Process automation Task runner / bundler
63. « If you aren't using automation, you are working too hard. »
64. - Build fonts: convert icons in SVG to .ttf, .woff, .eot webfonts - Build images: optimize all layout's images (performance) - Dev reload: reload automatically the page after modifications - Dev js: concatenate and minify all JavaScript files - ...
65. $ npm install -g grunt-cli $ npm install grunt --save-dev
66. Grunt
67. $ npm install -g gulp $ npm install gulp --save-dev
68. Gulp
69. Jack Hsu - Grunt vs Gulp In Grunt, we must write intermediary files to disk In Gulp, we pipe the intermediary files in-memory to other streams
70. $ npm install -g browserify $ browserify main.js -o bundle.js
71. Process automation Package manager
73. $ npm install PACKAGE --save-dev $ npm install PACKAGE --save $ npm start (node app.js) $ npm test (karma start my.conf.js)
75. $ npm install -g bower $ bower install PLUGIN $ bower search PLUGIN
76. Testing tools
78. $ npm install karma --save-dev $ npm install karma-jasmine karma-chrome-launcher --save-dev $ karma init my.conf.js
79. Visual regression testing (Nightwatch.js, PhantomJS, CasperJS)
80. http://www.meetup.com/fr-FR/frontend-mauritius/ http://www.meetup.com/fr-FR/nodeschool-mauritius/ Soon... https://www.facebook.com/groups/frontenddevelopersmauritius/
81. That's All Folks. Questions?
82. Thank you. Merci. Obrigado. Feedbacks on Twitter with #DevConMru speakerdeck.com/daviddiasfront/tools-for-the-modern-front-end-developers-workflow