Patrick Kettner - JavaScript without javascript
Download as PPTX, PDF0 likes79 views
The document discusses the process of compiling code from source code to machine code. It begins with an overview of the lexing, parsing, and code generation stages of compilation. It then provides examples of how a simple expression like "var sum = 1 + 2" would be tokenized, parsed into an abstract syntax tree, and generated into machine-readable code. The document also includes snippets of code for compiling Sass files to CSS using Opal and examples of testing Sass compiler output. It concludes by recommending trying dumb ideas and providing contact information for the author.
![function cX(b) {
b = b | 0;
var d = 0,
f = 0,
sp(31416, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 80 >> 2], c[x + 8 >> 2] = n, c[x + 16
>> 2] = p, c[x + 24 >> 2] = l, c[x + 32 >> 2] = j, x) | 0);
j = c[b + 84 >> 2] | 0;
l = c[b + 100 >> 2] | 0;
p = c[b + 116 >> 2] | 0;
n = c[b + 132 >> 2] | 0;
k = ii(b) | 0;
sp(31280, (x = i, i = i + 40 | 0, c[x >> 2] = j, c[x + 8 >> 2] = l, c[x + 16 >> 2] = p, c[x
+ 24 >> 2] = n, c[x + 32 >> 2] = k, x) | 0);
k = c[b + 104 >> 2] | 0;
n = c[b + 120 >> 2] | 0;
p = c[b + 136 >> 2] | 0;
l = b + 188 | 0;
j = b + 140 | 0;
q = c[((a[l] | 0) == 0 ? j : b + 152 | 0) >> 2] | 0;
sp(31168, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 88 >> 2], c[x + 8 >> 2] = k, c[x + 16
>> 2] = n, c[x + 24 >> 2] = p, c[x + 32 >> 2] = q, x) | 0);
q = c[b + 92 >> 2] | 0;
p = c[b + 108 >> 2] | 0;
n = c[b + 124 >> 2] | 0;](https://image.slidesharecdn.com/srgsllu9spgng11km7ff-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-JavaScript-without-javascript-82-320.jpg)
![function cX(b) {
b = b | 0;
var d = 0,
f = 0,
sp(31416, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 80 >> 2], c[x + 8 >> 2] = n, c[x + 16
>> 2] = p, c[x + 24 >> 2] = l, c[x + 32 >> 2] = j, x) | 0);
j = c[b + 84 >> 2] | 0;
l = c[b + 100 >> 2] | 0;
p = c[b + 116 >> 2] | 0;
n = c[b + 132 >> 2] | 0;
k = ii(b) | 0;
sp(31280, (x = i, i = i + 40 | 0, c[x >> 2] = j, c[x + 8 >> 2] = l, c[x + 16 >> 2] = p, c[x
+ 24 >> 2] = n, c[x + 32 >> 2] = k, x) | 0);
k = c[b + 104 >> 2] | 0;
n = c[b + 120 >> 2] | 0;
p = c[b + 136 >> 2] | 0;
l = b + 188 | 0;
j = b + 140 | 0;
q = c[((a[l] | 0) == 0 ? j : b + 152 | 0) >> 2] | 0;
sp(31168, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 88 >> 2], c[x + 8 >> 2] = k, c[x + 16
>> 2] = n, c[x + 24 >> 2] = p, c[x + 32 >> 2] = q, x) | 0);
q = c[b + 92 >> 2] | 0;
p = c[b + 108 >> 2] | 0;
n = c[b + 124 >> 2] | 0;](https://image.slidesharecdn.com/srgsllu9spgng11km7ff-signature-2c8abe2458058bcff2a7010773f3280d3323dc6d1530ab5d85dd05b26e15aa75-poli-180718190737/85/Patrick-Kettner-JavaScript-without-javascript-83-320.jpg)
Patrick Kettner - JavaScript without javascript
- 13. :[:D
- 14. O
- 17. Lexing
- 18. “hey, that’s a keyword!”“and that’s an identifier!”“thats an integer!”“another integer!”“oh cool! an addition operator”“looks like an assignment operator” var sum = 1 + 2var sum=1+2 keyword identifier assignment int addition int
- 19. still lexestokens 21=sum + identifier assignment int addition int var keyword
- 20. Parsing
- 21. , called sumset a variable and assign it the value of the integer 1 , in addition to , the integer 2 var sum = 1 + 2var sum=1+2 keyword identifier assignment int addition int
- 22. Code Gen
- 23. Program VariableDeclaration sum + 1 2 set a variable, called sum assign the value of the integer 1, in addition to the integer 2 set a variable, called sum assign the value of the integer 1, in addition to the integer 2
- 25. var sum = 1 + 2
- 26. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 27. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 28. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 29. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 30. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 31. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 32. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 33. #opal_sass.rb require 'opal' require 'opal-parser' require 'sass' def sassBuilder(str, opts) Sass::Engine.new(str, opts).render end
- 35. <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="./opal_sass.js"></script> </body> </html>
- 37. The first time 1. It never works. 1.
- 49. Every time 3. It is super tedious. 3.
- 63. … def test_rgb_percent assert_equal("#123457", evaluate("rgb(7.1%, 20.4%, 34%)")) assert_equal("#beaded", evaluate("rgb(74.7%, 173, 93%)")) assert_equal("#beaded", evaluate("rgb(190, 68%, 237)")) assert_equal("#00ff80", evaluate("rgb(0%, 100%, 50%)")) end def test_rgb_clamps_bounds assert_equal("#ff0101", evaluate("rgb(256, 1, 1)")) assert_equal("#01ff01", evaluate("rgb(1, 256, 1)")) assert_equal("#0101ff", evaluate("rgb(1, 1, 256)")) assert_equal("#01ffff", evaluate("rgb(1, 256, 257)")) assert_equal("#000101", evaluate("rgb(-1, 1, 1)")) end def test_rgb_clamps_percent_bounds assert_equal("red", evaluate("rgb(100.1%, 0, 0)")) assert_equal("black", evaluate("rgb(0, -0.1%, 0)")) assert_equal("blue", evaluate("rgb(0, 0, 101%)")) end def test_rgb_tests_types assert_error_message("$red: "foo" is not a number for `rgb'",
- 66. (That’s 7 years of sass)
- 73. asm.js
- 74. Alon Zakai
- 78. L L V M O E I A W V R C E T H L U I A N L E
- 79. 0101010 0101010101010 0101010101010101010 0101010101010101010101010 01010101010101010101010101010 010101010101 01010101010 0101010101 0101010101 01010101 01010101 0101010 0101 01010101 010101 010101010 01010101010 010101 01010101010101010101010 010101 0101010101010101 0101 01 010101 0101010101010101 0101 01 010101 01010101010101010101010 010101 010101010 01010101010 0101010 01010 01010101 01010101 01010101 0101010101 0101010101 010101010101 010101010101 0101010101010101010101010101010 0101010101010101010101010 0101010101010101010 0101010101 0101
- 80. asm.js
- 82. function cX(b) { b = b | 0; var d = 0, f = 0, sp(31416, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 80 >> 2], c[x + 8 >> 2] = n, c[x + 16 >> 2] = p, c[x + 24 >> 2] = l, c[x + 32 >> 2] = j, x) | 0); j = c[b + 84 >> 2] | 0; l = c[b + 100 >> 2] | 0; p = c[b + 116 >> 2] | 0; n = c[b + 132 >> 2] | 0; k = ii(b) | 0; sp(31280, (x = i, i = i + 40 | 0, c[x >> 2] = j, c[x + 8 >> 2] = l, c[x + 16 >> 2] = p, c[x + 24 >> 2] = n, c[x + 32 >> 2] = k, x) | 0); k = c[b + 104 >> 2] | 0; n = c[b + 120 >> 2] | 0; p = c[b + 136 >> 2] | 0; l = b + 188 | 0; j = b + 140 | 0; q = c[((a[l] | 0) == 0 ? j : b + 152 | 0) >> 2] | 0; sp(31168, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 88 >> 2], c[x + 8 >> 2] = k, c[x + 16 >> 2] = n, c[x + 24 >> 2] = p, c[x + 32 >> 2] = q, x) | 0); q = c[b + 92 >> 2] | 0; p = c[b + 108 >> 2] | 0; n = c[b + 124 >> 2] | 0;
- 83. function cX(b) { b = b | 0; var d = 0, f = 0, sp(31416, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 80 >> 2], c[x + 8 >> 2] = n, c[x + 16 >> 2] = p, c[x + 24 >> 2] = l, c[x + 32 >> 2] = j, x) | 0); j = c[b + 84 >> 2] | 0; l = c[b + 100 >> 2] | 0; p = c[b + 116 >> 2] | 0; n = c[b + 132 >> 2] | 0; k = ii(b) | 0; sp(31280, (x = i, i = i + 40 | 0, c[x >> 2] = j, c[x + 8 >> 2] = l, c[x + 16 >> 2] = p, c[x + 24 >> 2] = n, c[x + 32 >> 2] = k, x) | 0); k = c[b + 104 >> 2] | 0; n = c[b + 120 >> 2] | 0; p = c[b + 136 >> 2] | 0; l = b + 188 | 0; j = b + 140 | 0; q = c[((a[l] | 0) == 0 ? j : b + 152 | 0) >> 2] | 0; sp(31168, (x = i, i = i + 40 | 0, c[x >> 2] = c[b + 88 >> 2], c[x + 8 >> 2] = k, c[x + 16 >> 2] = n, c[x + 24 >> 2] = p, c[x + 32 >> 2] = q, x) | 0); q = c[b + 92 >> 2] | 0; p = c[b + 108 >> 2] | 0; n = c[b + 124 >> 2] | 0;
- 84. | 0
- 85. x + 2 x is a… string? object? int?
- 86. x=(x|0); x + 2 x is a… string? object? int? x is a… string? object? int?
- 90. asm.js
- 94. VIRTUAL DOM REAL DOM