Intro to Frontend Tooling - Gem City JS

Ac6a8e9ccd9e02b6051112296760c939?s=47 Adam Simpson
January 16, 2014
340

Intro to Frontend Tooling - Gem City JS

Ac6a8e9ccd9e02b6051112296760c939?s=128

Adam Simpson

January 16, 2014
Tweet

Transcript

  1. 11.

    As Isaac Newton once said, “we stand on the shoulders

    of giants” (source control, homebrew, cli, js, coffeescript, bower, yeoman)
  2. 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.”
  3. 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.”
  4. 18.

    Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization

    Build Continuous Integration Deployment Version control http://bit.ly/1cJ3hX8
  5. 20.
  6. 21.

    Git ‣ Makes collaboration effortless ‣ Github/Bitbucket makes bug tracking

    easy ‣ Removes any fear of losing code ‣ Stash FTW
  7. 26.
  8. 27.
  9. 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;! }! }! }
  10. 30.

    @mixin sb-media($query) {! @if $no-mq-support{! @if $query < $serve-to-nomq-max-width{! @content;!

    }! } @else {! @media ( 'min-width:' + $query ) {! @content;! }! }! }
  11. 33.
  12. 35.

    var number, summaryMarkup;! ! number = 3 + 2;! !

    summaryMarkup = "<div class=\"content\">\n <p>\n Foo: " + number + "\n </p>\n</div>";
  13. 42.
  14. 43.

    PROS ‣ Made CSS more programmy ‣ Enforcement of good

    JS habits via CoffeeScript ‣ Rapid HTML authoring
  15. 45.

    HOW WE HANDLE THE CHAOS ‣ We DON’T check in

    generated files ‣ SASS/LESS/CoffeeScript files are the source of truth
  16. 46.
  17. 47.
  18. 49.
  19. 50.
  20. 52.
  21. 54.
  22. 56.
  23. 58.
  24. 59.

    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”
  25. 65.

    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.
  26. 66.
  27. 70.

    Grunt ‣ Preprocessing our CSS ‣ Running CoffeeScript ‣ Converting

    HAML to HTML ‣ Making those Handlebars modules actual HTML pages ‣ Concat, minify, test our JS
  28. 77.

    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.
  29. 78.
  30. 85.
  31. 86.
  32. 87.
  33. 88.

    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');! };