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
400
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
What's new in AppKit on macOS 26
1024jp
0
140
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
240
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
970
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
22
9k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
620
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
310
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
370
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
590
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
生成AI時代のコンポーネントライブラリの作り方
touyou
1
260
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Language of Interfaces
destraynor
158
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Embracing the Ebb and Flow
colly
86
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to train your dragon (web standard)
notwaldorf
96
6.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
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]