The Web Beyond JavaScript - ScanDev 2012, Gothenburg

Transcript

1. THE WEB BEYOND JAVASCRIPT @jakobmattsson jakobmattsson.se
5. The flora and fauna is (still) changing
7. #1 Default global scope
8. function foo() { var x = 1; y = 2; }
9. function foo() { var x = 1; y = 2; } FAIL
10. #2 Parsing
11. num.toString()
12. 1.toString()
13. 1.toString() FAIL
14. (1).toString()
15. 1.0.toString()
16. 1..toString()
17. #3 Equality
18. var foo = [0]; foo == !foo; foo == foo;
19. var foo = [0]; foo == !foo; // true foo == foo; // true
20. var foo = [0]; foo == !foo; // true foo == foo; // true FAIL
21. #4 Inconsistent environments
22. var x = { foo: 1, bar: 2, }
23. var x = { foo: 1, bar: 2, } FAIL
27. CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. The golden rule of CoffeeScript is: "It's just JavaScript"
28. number = 42 opposite = true var number, opposite; number = 42; opposite = true; CoffeeScript JavaScript
29. number = -42 if opposite var number; if (opposite) { number = -42; } CoffeeScript JavaScript
30. square = (x) -> x * x var square; square = function(x) { return x * x; }; CoffeeScript JavaScript
31. list = [ 1, 0, 1 0, 1, 0 1, 0, 1 ] var list; list = [1, 0, 1, 0, 1, 0, 1, 0, 1]; CoffeeScript JavaScript
32. math = root: Math.sqrt square: square cube: (x) -> x * square x var math; math = { root: Math.sqrt, square: square, cube: function(x) { return x * square(x); } }; CoffeeScript JavaScript
33. race = (winner, runners...) -> print winner, runners var race, __slice = [].slice; race = function() { var runners, winner; winner = arguments[0], runners = 2 <= arguments.length ? __slice.call(arguments, 1) : []; return print(winner, runners); }; CoffeeScript JavaScript
34. alert "I knew it!" if elvis? if (typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); } CoffeeScript JavaScript
35. qs = (math.cube num for num in list) var qs, num; qs = (function() { var _i, _len, _results; _results = []; for (_i = 0, _len = list.length; _i < _len; _i++) { num = list[_i]; _results.push(math.cube(num)); } return _results; })(); CoffeeScript JavaScript
36. - Improved syntax - Less error prone - Fewer characters - Retained strengths
37. - Aristocratic - A series of patches - It’s just JavaScript
38. Why can’t these simplifications be a library?
40. ”Writing a web app can be lots of fun, especially at the beginning when you experience instant gratification: code, reload, repeat.” ”Unfortunately, finishing and maintaining a web app are not so fun. JavaScript is great for small scripts, and it has the performance chops to run large apps. But when a script evolves into a large web app, debugging and modifying that app can be a nightmare, especially when you have a large team.” ”Enter Dart, an open-source project that aims to enable developers to build more complex, highly performant apps for the modern web.”
41. hi.dart #import('dart:html'); main() { document.query('#status').text = 'Hi, Dart'; } hi.html ... <h2 id="status"></h2> <script type="application/dart" src="hi.dart"></script> <!-- If the browser doesn't have an embedded Dart VM, you can compile Dart code to JavaScript. --> <script type="text/javascript" src="hi.dart.js"></script> ...
42. class Point { Point(this.x, this.y); distanceTo(other) { var dx = x - other.x; var dy = y - other.y; return Math.sqrt(dx * dx + dy * dy); } var x, y; } main() { var p = new Point(2, 3); var q = new Point(3, 4); print('distance from p to q = ${p.distanceTo(q)}'); }
43. class Point { Point(this.x, this.y); num distanceTo(Point other) { num dx = x - other.x; num dy = y - other.y; return Math.sqrt(dx * dx + dy * dy); } num x, y; } main() { Point p = new Point(2, 3); Point q = new Point(3, 4); print('distance from p to q = ${p.distanceTo(q)}'); }
44. main() { print(new List() is List<Object>); print(new List() is List<Dynamic>); print(new List<String>() is List<Object>); print(new List<Object>() is! List<String>); print(new List<String>() is! List<int>); print(new List<String>() is List); print(new List() is List<String>); }
45. #import("dart:html"); main() { // Find an element. var elem = document.query("#id"); // Handle events. elem.on.click.add((event) => print('click!')); // Set an attribute. elem.attributes['name'] = 'value'; // Add a child element. elem.elements.add(new Element.tag("p")); // Add a CSS class to each child element. elem.elements.forEach((e) => e.classes.add("important")); }
46. - Types - Performance - Large scale enabler
47. Why can’t these type checks be built as a combination of libraries and tools?
48. The Blub Paradox
49. 1. Languages ARE different 2. Less code, less bugs 3. Higher level = productivity 4. Easy to spot less power
50. Machine Language C Java JavaScript Blub
51. WHAT IF ONLY HAVE LITTLE IDEA? SMASH IDEA. THROW AWAY DETAIL. THROW AWAY FEATURE. THROW AWAY CAN'T. INSIDE LITTLE IDEA IS BIG PROBLEM HELD DOWN BY CAN'T. SET IT FREE. VISION IS SOLVE PROBLEM NO ONE ELSE SEE.
52. Make you think
53. Why can’t these things be libraries?
54. JavaScript is not dynamic enough! JS
55. My own experience
56. New perspectives
57. Combine the best of two worlds!
58. It failed
59. Open up a new set of possibilities
60. list.select { |x| x > 0 } filter (> 0) list list.filter(function(x) { return x > 0 })
61. && ||
62. EVERYTHING IS AN OBJECT!!!
63. What can Blub do?
64. What can Blub do?
65. What can Blub do? What can’t Blub do?
66. Itʼs not about a particular solution
67. Itʼs about doing as little as possible
68. A dynamic language should be moldable
69. The best part
70. Call by name
71. && = lazyfunction(a, b) { if (execute(a)) { if (execute(b)) { return true; } } return false; };
72. Operators on steroids
73. v = a + b unless x > y
74. v = a + b unless x > y => (x > y).unless(v = a + b)
75. We are not there yet
76. Safety? Performance?
77. What can Blub do? @jakobmattsson jakobmattsson.se What can’t Blub do?