Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Intro To Frontend Tooling - Codemash '14
Search
Adam Simpson
January 10, 2014
Programming
2
410
Intro To Frontend Tooling - Codemash '14
An introduction to the modern front-end developer's toolbox.
Adam Simpson
January 10, 2014
Tweet
Share
More Decks by Adam Simpson
See All by Adam Simpson
Build your own tools with Electron and React
asimpson
1
180
Text Editors - Frontend Summit '14
asimpson
2
120
Intro to Frontend Tooling - Gem City JS
asimpson
0
640
.dotfiles
asimpson
2
140
Other Decks in Programming
See All in Programming
Namespace and Its Future
tagomoris
6
700
チームのテスト力を鍛える
goyoki
3
720
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
360
Deep Dive into Kotlin Flow
jmatsu
1
360
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
Reading Rails 1.0 Source Code
okuramasafumi
0
250
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
OSS開発者という働き方
andpad
5
1.7k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Invisible Side of Design
smashingmag
301
51k
Bash Introduction
62gerente
615
210k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Into the Great Unknown - MozCon
thekraken
40
2k
Done Done
chrislema
185
16k
Why Our Code Smells
bkeepers
PRO
339
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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
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
[email protected]