the new frontend toolchain
DESCRIPTION
An overview of the new exciting technologies used to build web-apps with ever increasing complexity.TRANSCRIPT
![Page 1: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/1.jpg)
The New Frontend Toolchainthrough which happiness can be achieved
![Page 2: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/2.jpg)
Hi, I’m BrunoAnd I write some Javascripts.
Hopefully you do too.
@inf0rmer
github.com/inf0rmer
![Page 3: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/3.jpg)
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, ...
![Page 4: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/4.jpg)
Don’t fear the CLI
![Page 5: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/5.jpg)
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
![Page 6: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/6.jpg)
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>
![Page 7: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/7.jpg)
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
![Page 8: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/8.jpg)
Coding is Social ™
![Page 9: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/9.jpg)
Coding is Social
• Source code management is non-negotiable
• Git works beautifully for working in teams
• What’s The Right Way?™
™
![Page 10: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/10.jpg)
Coding is Social ™
STOP COMMITTING TO MASTERIt’s bad, and you should feel bad.
Do it for the kittens.
![Page 11: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/11.jpg)
There were 5 of them, but you just had to push to master.
![Page 12: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/12.jpg)
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
™
![Page 13: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/13.jpg)
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
™
![Page 14: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/14.jpg)
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/
![Page 15: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/15.jpg)
Install Node
• nodejs.org has binary installers for most OSes
• You automatically get npm, the Node Package Manager
• Most cool stuff requires it
![Page 16: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/16.jpg)
Dependency Management
![Page 17: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/17.jpg)
Dependency Management
• Keeping tabs on 3rd-party libraries is a robot’s job
• Updates to libraries should not pollute your commit history
![Page 18: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/18.jpg)
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
![Page 19: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/19.jpg)
Dependency Management
• You can search for packages • bower search underscore
• Or even publish your own! • bower register <my-package-name> <git-endpoint>
![Page 20: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/20.jpg)
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
![Page 21: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/21.jpg)
![Page 22: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/22.jpg)
Automate all the things
• Code quality (JSHint)
• Preprocessing (Coffee, Sass, Less, Haml...)
• Minification
• Build systems (big and small!)
• Spec running
• And so much more!
![Page 23: The New Frontend Toolchain](https://reader034.vdocuments.mx/reader034/viewer/2022042606/54859bc0b4af9fa00d8b4ed4/html5/thumbnails/23.jpg)
Example time!And then we play the awkward “does anyone have any
questions” game.
github.com/inf0rmer/twitter-searcher
github.com/inf0rmer/backbone-dotattr