The New Frontend Toolchain
0 likes1,441 views
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.
The New Frontend Toolchain
- 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
- 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
- 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