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