1.
The New
Frontend Toolchain
through which happiness can be achieved

2.
Hi, I’m Bruno
And I write some Javascripts.
Hopefully you do too.
@inf0rmer
github.com/inf0rmer

3.
The need for tools
• Client apps can be very complex
• Preprocessors are hip so you want to use
them
• Build systems allow for modular software
• Without dozens of <script> tags (-_-’)
• You need to run tests, write docs, ...

4.
Don’t fear the CLI

5.
Don’t fear the CLI
• No buttons, but it’s oh so functional
• All the innovation happens there first
• Lots of things you can’t get anywhere else

6.
Don’t fear the CLI
• Homebrew is apt-get for OSX
• brew install <package>
• NPM is all about Node modules
• npm install <package>
• RubyGems are precious stones
• gem install <package>

7.
Don’t fear the CLI
• Tools that you can use everyday!
• ssh to log in to a server
• scp to copy files to a server
• ack or grep to find files that contain a pattern
• find to find files with names that match a pattern

8.
Coding is Social™

9.
Coding is Social
• Source code management is non-negotiable
• Git works beautifully for working in teams
• What’s The Right Way?™
™

10.
Coding is Social™
STOP COMMITTING TO MASTER
It’s bad, and you should feel bad.
Do it for the kittens.

11.
There were 5 of them, but you just had to push to master.

12.
Coding is Social
• Everyone develops in a feature branch
• git checkout -b my-cool-new-feature master
• Don’t forget to merge master in every so
often
• git checkout my-cool-new-feature
• git merge origin/master
™

13.
Coding is Social
• Push your branch to remote so others can
try it out
• git push --set-upstream origin my-cool-new-feature
• Open a Pull Request into master
• This allows your team to review the code and suggest changes or
improvements. If you need to add commits to the branch, the PR is
automatically updated
™

14.
Coding is Social
• Once your feature is ready for the world,
merge the Pull Request!
• Your code finally makes it to master, the authoritative branch
deploys are made from.
™
Further reading: http://nvie.com/posts/a-successful-git-branching-model/

15.
Install Node
• nodejs.org has binary installers for most
OSes
• You automatically get npm, the Node
Package Manager
• Most cool stuff requires it

16.
Dependency Management

17.
Dependency Management
• Keeping tabs on 3rd-party libraries is a
robot’s job
• Updates to libraries should not pollute
your commit history

18.
Dependency Management
• There are lots of solutions, but it appears
bower has won the battle
• npm install -g bower
• bower install jquery --save
• Libraries are installed to ./components, and a
components.json file keeps track of
everything

19.
Dependency Management
• You can search for packages
• bower search underscore
• Or even publish your own!
• bower register <my-package-name> <git-endpoint>

20.
Task Automation
• Lots of alternatives here, but Grunt is one
of the coolest
• Tasks are modular and installed through npm
• npm install grunt-contrib-uglify

21.
Automate all the things
• Code quality (JSHint)
• Preprocessing (Coffee, Sass, Less, Haml...)
• Minification
• Build systems (big and small!)
• Spec running
• And so much more!

22.
Example time!
And then we play the awkward “does anyone have any
questions” game.
github.com/inf0rmer/twitter-searcher
github.com/inf0rmer/backbone-dotattr