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
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
Google Opalで使える37のライブラリ
mickey_kubo
3
130
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
6.7k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
560
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
520
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
XP, Testing and ninja testing ZOZ5
m_seki
3
790
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
16
6.6k
contribution to astral-sh/uv
shunsock
0
450
SODA - FACT BOOK(JP)
sodainc
1
8.6k
CSC305 Lecture 08
javiergs
PRO
0
270
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Become a Pro
speakerdeck
PRO
29
5.6k
A Tale of Four Properties
chriscoyier
161
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Writing Fast Ruby
sferik
629
62k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
How to Ace a Technical Interview
jacobian
280
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
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]