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

Introduction to Front-End tooling

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

26c5bc5b88075a54b55ae54e98be2c09?s=128

Fernando Agüero

March 24, 2016
Tweet

More Decks by Fernando Agüero

Other Decks in Programming

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…
  10. None
  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