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
890
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
950
Reactive Programming with RxJS
mattdsteele
0
110
GET TO THE CHOPVAR
mattdsteele
0
160
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.3k
The Decorator Pattern
mattdsteele
0
64
Diving Into the Device API
mattdsteele
1
670
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
700
What Zelda Taught Me about Front End Engineering
mattdsteele
5
1k
Other Decks in Programming
See All in Programming
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
モテるデスク環境
mozumasu
3
1.3k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
330
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
960
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
600
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.5k
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
Developer Joy - The New Paradigm
hollycummins
1
360
技術的負債の正体を知って向き合う
irof
0
240
CSC305 Lecture 10
javiergs
PRO
0
230
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Building Applications with DynamoDB
mza
96
6.7k
How to Ace a Technical Interview
jacobian
280
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
The Invisible Side of Design
smashingmag
302
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Visualization
eitanlees
149
16k
Statistics for Hackers
jakevdp
799
220k
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