Intro To Frontend Tooling - Codemash '14

An introduction to the modern front-end developer's toolbox.

Transcript

1. Adam Simpson INTRO TO FRONTEND TOOLING
2. Who Am I?
3. twitter.com/a_simpson ! alpha.app.net/a_simpson ! github.com/asimpson
4. Where are we going?
5. GET FOAMY http://randsinrepose.com/archives/the-foamy-rules-for-rabid-tools/
6. Tooling at Sparkbox
7. Don’t be Overwhelmed
8. The web is software.
9. Software is hard.
10. STAND ON THE SHOULDERS OF GIANT…ROBOTS
11. As Isaac Newton once said, “we stand on the shoulders of giants” (source control, homebrew, cli, js, coffeescript, bower, yeoman)
12. INTRO TO FRONTEND TOOLING GET FOAMY
13. “the correct tool is going to make you exponentially more productive”
14. “My tools are my tools. Choosing a thing makes it yours. The choice is the result of that unique mix of logic, superstition, stubbornness, and experience that fits you.”
15. “And you never stop looking — this is why the last foamy rule is the most important: my tools are always fighting for their life.”
16. Anything is up for replacement
17. INTRO TO FRONTEND TOOLING TOOLING HAS EXPLODED
18. Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization Build Continuous Integration Deployment Version control http://bit.ly/1cJ3hX8
19. Get a mental model
21. Git ‣ Makes collaboration effortless ‣ Github/Bitbucket makes bug tracking easy ‣ Removes any fear of losing code ‣ Stash FTW
22. http://wheningit.tumblr.com
23. Git ‣ https://medium.com/design-ux/ 92f2350fd047 ‣ http://steelcityruby.confbots.com/ video/72762735 ‣ http://www.teehanlax.com/blog/ github-fundamentals/ ‣ http://tom.preston-werner.com/ 2009/05/19/the-git-parable.html
24. Remember, use the tool that makes your team and your work better
25. Frontend dev is part art, part science.
28. $base-font-multiplier: 1;! $breakpoint-no-queries: false;! $breakpoint-no-query-wrappers: true;! $nomq: ".lt-ie9 &, .no-mq";
29. @mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) {! @if ( $property == "font-size" ) {! // $a is the font size! // %b is the keyword! @if ( $a != $b ) {! font-size: $b;! }! @else {! font-size: $a * $base-font-multiplier * 16px;! }! font-size: $a * 1rem;! } @else {! $apx: $a * $base-font-multiplier * 16px;! $bpx: $b * $base-font-multiplier * 16px;! $cpx: $c * $base-font-multiplier * 16px;! $dpx: $d * $base-font-multiplier * 16px;! $arem: $a * 1rem;! $brem: $b * 1rem;! $crem: $c * 1rem;! $drem: $d * 1rem;! ! @if ( $property == "padding" or $property == "margin" ){! #{$property}: $apx $bpx $cpx $dpx;! #{$property}: $arem $brem $crem $drem;! } @else {! #{$property}: $apx;! #{$property}: $arem;! }! }! }
30. @mixin sb-media($query) {! @if $no-mq-support{! @if $query < $serve-to-nomq-max-width{! @content;! }! } @else {! @media ( 'min-width:' + $query ) {! @content;! }! }! }
31. gem install sass ! http://sass-lang.com
33. number = 3+2! ! summaryMarkup = """! <div class="content">! <p>! Foo: #{number}! </p>! </div>! """
34. var number, summaryMarkup;! ! number = 3 + 2;! ! summaryMarkup = "<div class=\"content\">\n <p>\n Foo: " + number + "\n </p>\n</div>";
35. mood = greatlyImproved if singing
36. if (singing) {! mood = greatlyImproved;! }!
37. sudo npm install -g coffee-script ! http://coffeescript.org
38. Jade http://jade-lang.com http://haml.info
39. Emmet + VIM
40. INTRO TO FRONTEND TOOLING SIDENOTE #1 HOLY FILES
42. PROS ‣ Made CSS more programmy ‣ Enforcement of good JS habits via CoffeeScript ‣ Rapid HTML authoring
43. CONS ‣ Added complexity ‣ Added more files ‣ Added dependencies
44. HOW WE HANDLE THE CHAOS ‣ We DON’T check in generated files ‣ SASS/LESS/CoffeeScript files are the source of truth
47. INTRO TO FRONTEND TOOLING SIDENOTE #2
 TEXT EDITORS
49. PICK ONE
50. INTRO TO FRONTEND TOOLING SIDENOTE #3 CLI
52. http://cli.learncodethehardway.org
54. https://github.com/robbyrussell/oh-my-zsh
56. ZSH FAVs ‣ Auto-Complete all the things ‣ Prompt customization ‣ Git integration
58. Handlebars ‣ Allows us to model basic CMS templating w/out getting into specific CMS quirks. ‣ Separates content from markup ‣ Allows us to quickly test various kinds of content. ‣ Puts our markup in “chunks”
59. Handlebars + Grunt ‣ http://handlebarsjs.com ‣ https://github.com/assemble/ assemble/ ‣ http://www.yaml.org/spec/1.2/ spec.html
60. assemble:! options:! partials: "partials/*"! data: "data/*.yml"! home_page:! src: “partials/home-page.hbs"! dest: "dist/index.html" Gruntfile.coffee
61. title: YAML Resources! ! resources:! - http://yamllint.com/! - http://nodeca.github.io/js-yaml/ home-page.yml
62. <h1>{{title}}</h1>! <ul class=“content-listing“>! {{#each resources}}! <li><a href="{{this}}">{{this}}</a></li>! {{/each}}! </ul>! home-page.hbs
63. .content-listing {! @include rem(font-size, .7);! padding: 1em 5%;! list-style: none;! } home-page.scss
64. Now that we've covered all the dependencies and moving parts, it's time to look at a solution that aims to harness all these pieces.
66. Grunt - a taskrunner
67. Grunt provides the muscle
68. npm install -g grunt-cli
69. Grunt ‣ Preprocessing our CSS ‣ Running CoffeeScript ‣ Converting HAML to HTML ‣ Making those Handlebars modules actual HTML pages ‣ Concat, minify, test our JS
70. Grunt has a wonderful plugin ecosystem.
71. Make or Modify your tools!
72. it's just JS (actually Node).
73. Bower - a package manager
74. npm install -g bower
75. “Bower runs over Git, and is package-agnostic.” - http://bower.io
76. Bower ‣ Allows you to pull down just about any JS library via the command line ‣ Scriptable ‣ Auto-completes on ZSH ‣ Use Grunt to move the libraries once Bower pulls them down.
78. ...an opinionated collection of Grunt tasks, with scaffolding.
79. npm install -g yo
80. https://github.com/yeoman/ yeoman/wiki/The-Road-to-1.0
81. If none of the existing generators fit your workflow, write your own!
82. http://bit.ly/JGemll
83. npm install -g generator-mg
84. yo mg
87. MgGenerator.prototype.runtime = function runtime() {! this.copy('gitignore', '.gitignore');! this.copy('Gemfile', 'Gemfile');! this.copy('Gemfile.lock', 'Gemfile.lock');! this.copy('config.rb', 'config.rb');! this.directory('public', 'public');! this.directory('scss', 'scss');! this.directory('coffee', 'coffee');! this.directory('data', 'data');! this.directory('partials', 'partials');! this.directory('opt-imgs', 'opt-imgs');! };
88. THANKS! Adam Simpson adam@heysparkbox.com