Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Intro to Frontend Tooling - Gem City JS
Adam Simpson
January 16, 2014
0
470
Intro to Frontend Tooling - Gem City JS
Adam Simpson
January 16, 2014
Tweet
Share
More Decks by Adam Simpson
See All by Adam Simpson
Build your own tools with Electron and React
asimpson
1
150
Text Editors - Frontend Summit '14
asimpson
2
110
Intro To Frontend Tooling - Codemash '14
asimpson
2
360
.dotfiles
asimpson
2
92
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
303
40k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Side Projects
sachag
449
37k
For a Future-Friendly Web
brad_frost
164
7.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
Three Pipe Problems
jasonvnalue
89
8.6k
Designing Experiences People Love
moore
130
22k
Bash Introduction
62gerente
596
210k
Become a Pro
speakerdeck
PRO
3
770
KATA
mclloyd
7
8.6k
Support Driven Design
roundedbygravity
86
8.4k
Transcript
Adam Simpson INTRO TO FRONTEND TOOLING
Who Am I?
twitter.com/a_simpson ! alpha.app.net/a_simpson ! github.com/asimpson
Where are we going?
GET FOAMY http://randsinrepose.com/archives/the-foamy-rules-for-rabid-tools/
Tooling at Sparkbox
Don’t be Overwhelmed
The web is software.
Software is hard.
STAND ON THE SHOULDERS OF GIANT…ROBOTS
As Isaac Newton once said, “we stand on the shoulders
of giants” (source control, homebrew, cli, js, coffeescript, bower, yeoman)
INTRO TO FRONTEND TOOLING GET FOAMY
“the correct tool is going to make you exponentially more
productive”
“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.”
“And you never stop looking — this is why the
last foamy rule is the most important: my tools are always fighting for their life.”
Anything is up for replacement
INTRO TO FRONTEND TOOLING TOOLING HAS EXPLODED
Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization
Build Continuous Integration Deployment Version control http://bit.ly/1cJ3hX8
Get a mental model
None
Git ‣ Makes collaboration effortless ‣ Github/Bitbucket makes bug tracking
easy ‣ Removes any fear of losing code ‣ Stash FTW
http://wheningit.tumblr.com
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
Remember, use the tool that makes your team and your
work better
Frontend dev is part art, part science.
None
None
$base-font-multiplier: 1;! $breakpoint-no-queries: false;! $breakpoint-no-query-wrappers: true;! $nomq: ".lt-ie9 &, .no-mq";
@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;! }! }! }
@mixin sb-media($query) {! @if $no-mq-support{! @if $query < $serve-to-nomq-max-width{! @content;!
}! } @else {! @media ( 'min-width:' + $query ) {! @content;! }! }! }
gem install sass ! http://sass-lang.com
gem install compass ! http://compass-style.org
None
number = 3+2! ! summaryMarkup = """! <div class="content">! <p>!
Foo: #{number}! </p>! </div>! """
var number, summaryMarkup;! ! number = 3 + 2;! !
summaryMarkup = "<div class=\"content\">\n <p>\n Foo: " + number + "\n </p>\n</div>";
mood = greatlyImproved if singing
if (singing) {! mood = greatlyImproved;! }!
sudo npm install -g coffee-script ! http://coffeescript.org
Jade http://jade-lang.com http://haml.info
Emmet + VIM
INTRO TO FRONTEND TOOLING SIDENOTE #1 HOLY FILES
None
PROS ‣ Made CSS more programmy ‣ Enforcement of good
JS habits via CoffeeScript ‣ Rapid HTML authoring
CONS ‣ Added complexity ‣ Added more files ‣ Added
dependencies
HOW WE HANDLE THE CHAOS ‣ We DON’T check in
generated files ‣ SASS/LESS/CoffeeScript files are the source of truth
None
None
INTRO TO FRONTEND TOOLING SIDENOTE #2 TEXT EDITORS
None
PICK ONE
INTRO TO FRONTEND TOOLING SIDENOTE #3 CLI
None
http://cli.learncodethehardway.org
None
https://github.com/robbyrussell/oh-my-zsh
None
ZSH FAVs ‣ Auto-Complete all the things ‣ Prompt customization
‣ Git integration
None
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”
Handlebars + Grunt ‣ http://handlebarsjs.com ‣ https://github.com/assemble/ assemble/ ‣ http://www.yaml.org/spec/1.2/
spec.html
assemble:! options:! partials: "partials/*"! data: "data/*.yml"! home_page:! src: “partials/home-page.hbs"! dest:
"dist/index.html" Gruntfile.coffee
title: YAML Resources! ! resources:! - http://yamllint.com/! - http://nodeca.github.io/js-yaml/ home-page.yml
<h1>{{title}}</h1>! <ul class=“content-listing“>! {{#each resources}}! <li><a href="{{this}}">{{this}}</a></li>! {{/each}}! </ul>! home-page.hbs
.content-listing {! @include rem(font-size, .7);! padding: 1em 5%;! list-style: none;!
} home-page.scss
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.
None
Grunt - a taskrunner
Grunt provides the muscle
npm install -g grunt-cli
Grunt ‣ Preprocessing our CSS ‣ Running CoffeeScript ‣ Converting
HAML to HTML ‣ Making those Handlebars modules actual HTML pages ‣ Concat, minify, test our JS
Grunt has a wonderful plugin ecosystem.
Make or Modify your tools!
it's just JS (actually Node).
Bower - a package manager
npm install -g bower
“Bower runs over Git, and is package-agnostic.” - http://bower.io
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.
None
...an opinionated collection of Grunt tasks, with scaffolding.
npm install -g yo
https://github.com/yeoman/ yeoman/wiki/The-Road-to-1.0
If none of the existing generators fit your workflow, write
your own!
http://bit.ly/JGemll
npm install -g generator-mg
yo mg
None
None
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');! };
THANKS! Adam Simpson adam@heysparkbox.com