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
Using Source Maps in 2015
Search
Matt Steele
April 08, 2015
Programming
0
790
Using Source Maps in 2015
And introducing the greatest compiles-to-js language of all time, arnoldc.js
Matt Steele
April 08, 2015
Tweet
Share
More Decks by Matt Steele
See All by Matt Steele
Upgrading to Angular 2 using ngUpgrade
mattdsteele
0
830
Reactive Programming with RxJS
mattdsteele
0
98
GET TO THE CHOPVAR
mattdsteele
0
150
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.2k
The Decorator Pattern
mattdsteele
0
52
Diving Into the Device API
mattdsteele
1
560
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
620
What Zelda Taught Me about Front End Engineering
mattdsteele
5
920
Other Decks in Programming
See All in Programming
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
ML.NETで始める機械学習
ymd65536
0
230
GoとPHPのインターフェイスの違い
shimabox
2
210
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
Datadog Workflow Automation で圧倒的価値提供
showwin
1
150
楽しく向き合う例外対応
okutsu
0
590
PEPCは何を変えようとしていたのか
ken7253
2
160
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1k
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
910
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
For a Future-Friendly Web
brad_frost
176
9.6k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Transcript
SOURCE MAPS
IT’S SHOWTIME
It’s 2015 Tools Are Complicated
Compilers
Compilers
Compilers
Compilers
Compilers
Transpilers
Transpilers
Transpilers
None
Preprocessors
Preprocessors
Preprocessors
Preprocessors
Postprocessors
Postprocessors
Postprocessors
Postprocessors
Postprocessors
I’LL BE BACK
Build Phase
Build Phase
Build Phase
Build Phase
Now you have two problems
None
DEBUG THIS
Source Maps To The Rescue
Content Source
CSS & JavaScript
app.js app.min.js Without Source Maps
app.js app.min.js app.min.js.map With Source Maps
None
None
None
None
Variable Length Quantity http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
It all Just Works
Demo
Multi-Level Source Maps
HASTA LA VISTA, BABY
ES6 CoffeeScript TypeScript
ES6 CoffeeScript TypeScript Concat
ES6 CoffeeScript TypeScript Concat Minify
Demo
ArnoldC
None
IT'S SHOWTIME TALK TO THE HAND "hello world" YOU HAVE
BEEN TERMINATED Hello World
GET TO THE CHOPPER a HERE IS MY INVITATION 4
GET UP b YOU'RE FIRED 2 ENOUGH TALK a = (4 + b) * 2
HEY CHRISTMAS TREE foo YOU SET US UP @I LIED
HEY CHRISTMAS TREE bar YOU SET US UP @NO PROBLEMO foo = false bar = true
Two Problems
1.
✓
✓ ✗ ✗
✓ … ✗ ✗
None
None
None
None
None
2.
2.
So
I wrote a compiler
arnoldc.js https://github.com/mattdsteele/arnoldc.js
Compiles from ArnoldC to JavaScript
Compiles from ArnoldC to JavaScript (With Source Maps)
DO IT NOW
11+ Source Maps
1. Upgrade your tools Tips
2. Gulp > Grunt (for this) Tips gulp.task('javascript', function() {
gulp.src('src/**/*.js') .pipe(sourcemaps.init()) .pipe(plugin1()) .pipe(plugin2()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });
3. Inline your sourcesContent Tips
Tips 4. Source Map Visualization Tool http://sokra.github.io/source-map-visualization/
@mattdsteele http://steele.blue