The document discusses the modern frontend toolchain for developing complex client-side JavaScript applications. It recommends using command line tools like Homebrew, NPM, RubyGems to manage dependencies. Source code management with Git and feature branching workflow is also emphasized. Node.js and package managers like NPM and Bower are introduced to help manage third-party libraries. Task automation with Grunt is presented as a way to automate common development tasks like testing, preprocessing, and building.

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

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

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