Using Source Maps in 2015

And introducing the greatest compiles-to-js language of all time, arnoldc.js

Transcript

1. SOURCE MAPS
2. IT’S SHOWTIME
3. It’s 2015 Tools Are Complicated
4. Compilers
5. Compilers
6. Compilers
7. Compilers
8. Compilers
9. Transpilers
10. Transpilers
11. Transpilers
13. Preprocessors
14. Preprocessors
15. Preprocessors
16. Preprocessors
17. Postprocessors
18. Postprocessors
19. Postprocessors
20. Postprocessors
21. Postprocessors
22. I’LL BE BACK
23. Build Phase
24. Build Phase
25. Build Phase
26. Build Phase
27. Now you have two problems
29. DEBUG THIS
30. Source Maps To The Rescue
31. Content Source
32. CSS & JavaScript
33. app.js app.min.js Without Source Maps
34. app.js app.min.js app.min.js.map With Source Maps
39. Variable Length Quantity http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
40. It all Just Works
41. Demo
42. Multi-Level Source Maps
43. HASTA LA VISTA, BABY
44. ES6 CoffeeScript TypeScript
45. ES6 CoffeeScript TypeScript Concat
46. ES6 CoffeeScript TypeScript Concat Minify
47. Demo
48. ArnoldC
50. IT'S SHOWTIME TALK TO THE HAND "hello world" YOU HAVE BEEN TERMINATED Hello World
51. GET TO THE CHOPPER a HERE IS MY INVITATION 4 GET UP b YOU'RE FIRED 2 ENOUGH TALK a = (4 + b) * 2
52. HEY CHRISTMAS TREE foo YOU SET US UP @I LIED HEY CHRISTMAS TREE bar YOU SET US UP @NO PROBLEMO foo = false bar = true
53. Two Problems
54. 1.
55. ✓
56. ✓ ✗ ✗
57. ✓ … ✗ ✗
63. 2.
64. 2.
65. So
66. I wrote a compiler
67. arnoldc.js https://github.com/mattdsteele/arnoldc.js
68. Compiles from ArnoldC to JavaScript
69. Compiles from ArnoldC to JavaScript (With Source Maps)
70. DO IT NOW
71. 11+ Source Maps
72. 1. Upgrade your tools Tips
73. 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')); });
74. 3. Inline your sourcesContent Tips
75. Tips 4. Source Map Visualization Tool http://sokra.github.io/source-map-visualization/
76. @mattdsteele http://steele.blue