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
760
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
770
Reactive Programming with RxJS
mattdsteele
0
98
GET TO THE CHOPVAR
mattdsteele
0
140
Responsive Images using <picture> and srcset/sizes
mattdsteele
1
1.2k
The Decorator Pattern
mattdsteele
0
50
Diving Into the Device API
mattdsteele
1
520
Unit Testing JavaScript when you're Afraid of JavaScript
mattdsteele
3
580
What Zelda Taught Me about Front End Engineering
mattdsteele
5
870
Other Decks in Programming
See All in Programming
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
色々なIaCツールを実際に触って比較してみる
iriikeita
0
330
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
as(型アサーション)を書く前にできること
marokanatani
10
2.7k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
100
Click-free releases & the making of a CLI app
oheyadam
2
120
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
200
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Amazon Qを使ってIaCを触ろう!
maruto
0
410
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
340
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
169
14k
Why Our Code Smells
bkeepers
PRO
334
57k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
420
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
Unsuck your backbone
ammeep
668
57k
How to Ace a Technical Interview
jacobian
276
23k
Navigating Team Friction
lara
183
14k
Speed Design
sergeychernyshev
25
620
For a Future-Friendly Web
brad_frost
175
9.4k
Done Done
chrislema
181
16k
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