The new Frontend Toolchain

Getting started with tooling your client-side development environment.

Transcript

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