The New Frontend Toolchain

The New Frontend Toolchainthrough which happiness can be achieved

Hi, I’m BrunoAnd I write some Javascripts.

Hopefully you do too.

@inf0rmer

github.com/inf0rmer

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, ...

Don’t fear the CLI

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

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>

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

Coding is Social ™

Coding is Social

• Source code management is non-negotiable

• Git works beautifully for working in teams

• What’s The Right Way?™

™

Coding is Social ™

STOP COMMITTING TO MASTERIt’s bad, and you should feel bad.

Do it for the kittens.

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

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

™

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

™

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/

Install Node

• nodejs.org has binary installers for most OSes

• You automatically get npm, the Node Package Manager

• Most cool stuff requires it

Dependency Management

Dependency Management

• Keeping tabs on 3rd-party libraries is a robot’s job

• Updates to libraries should not pollute your commit history

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

Dependency Management

• You can search for packages • bower search underscore

• Or even publish your own! • bower register <my-package-name> <git-endpoint>

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

Automate all the things

• Code quality (JSHint)

• Preprocessing (Coffee, Sass, Less, Haml...)

• Minification

• Build systems (big and small!)

• Spec running

• And so much more!

Example time!And then we play the awkward “does anyone have any

questions” game.

github.com/inf0rmer/twitter-searcher

github.com/inf0rmer/backbone-dotattr