the new frontend toolchain
DESCRIPTION
An overview of the new exciting technologies used to build web-apps with ever increasing complexity.TRANSCRIPT
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