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
190
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
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
CSC509 Lecture 05
javiergs
PRO
0
300
明日から始めるリファクタリング
ryounasso
0
140
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
160
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
110
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
Devoxx BE - Local Development in the AI Era
kdubois
0
130
Software Architecture
hschwentner
6
2.3k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.9k
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
180
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Facilitating Awesome Meetings
lara
56
6.6k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Making Projects Easy
brettharned
119
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Optimizing for Happiness
mojombo
379
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bash Introduction
62gerente
615
210k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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]