Introduction to Front-End tooling

If you aren’t using automation, you are working too hard.
Download the GIF-version of the presentation here (Keynote): https://www.dropbox.com/s/4ib9igtsdvdbjch/Introduction%20to%20Front-End%20tooling.key?dl=0

Transcript

1. A meetup in Valencia for people that hack JavaScript
2. Front-End Developer Active Member Fernando Agüero
3. Introduction to Front-End tooling
4. If you aren’t using automation, you are working too hard
5. • Download templates Typical Workflow • Download frameworks • Download libraries
6. Automate Development +
7. Development Tasks • Others • LiveReload • Watch Jade / Haml • Watch CoffeeScript • Watch Sass / Less / Stylus
8. + Automate Builds
9. Build Tasks • Code linting • Tests running • Compiling • Minification/Concatenation • Images/icons generation • HTTP Server • Deployment • And more…
11. Let’s do it!
12. Scaffolding
13. Meet Yeoman
14. Yeoman • Creates a build configuration • Scaffolds out a new application • Pulls in relevant build tasks and package manager dependencies
15. Other specific generators
16. Building
17. Building The Build System is used to build, preview and test your project.
18. Grunt Gulp Brunch Broccoli The build tool
19. Gulp vs Grunt Config Code Over
20. Grunt
21. Gulp
22. Gulp • Stream-based build system • Code over configuration • Small, idiomatic Node modules • Really simple and elegant API
23. image by Jack Hsu
24. Streaming Builds
25. Gulp API Quick Overview
26. .task Gulp API
27. Gulp API .watch
28. .src Gulp API Returns a readable stream
29. Returns a through stream .dest Gulp API
30. Package Management
31. The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts The package manager
32. Bower npm and many more… componentJS, Jam, volo The package manager
33. Bower
34. Workflow example
35. Workflow example Create a webapp Handle dependencies Preview, test, build
36. Create a webapp
37. Yeoman generators
38. gulp-webapp
39. gulp-webapp
40. gulp-webapp
41. Demo gulp-webapp
42. Have your own template? Use a project manager
43. Sublime Text
44. Atom
45. Other tools
46. .editorconfig Maintain consistent coding styles between different editors and ides.
47. .editorconfig
48. Dash Access documentation at a glance
49. Dash
50. Dash
51. Divvy Powerful window management
52. Divvy
53. Alfred Find things faster
54. bit.ly/alfredworkflows Alfred workflows
55. Alfred workflows bit.ly/alfredworkflows
56. Launchy
57. iTerm Mac OS X terminal replacement
58. iTerm Multiple tabs arrangements
59. iTerm Multiple tabs arrangements
60. iTerm Replay mode (cmd+alt+b)
61. .dotfiles Terminal customization
62. bit.ly/fjaguerodotfiles .dotfiles
63. .aliases
64. .aliases
65. .aliases
66. .aliases Build Stuff
67. And remember…
68. If you aren’t using automation, you are working too hard
69. Thanks. Fernando Agüero @fjaguero Photo by Holger Blank