Structured web programming  Created by Lars Bak & Gilad Bracha        Come to the Dart side.                  Gilad Bracha...
What is DART? ● New programming language ● Open Source Project ● Simple OO programming language ● Class-based single inher...
Dart is NOT the competition of           JavaScript● Dart is meant to fill a vacuum, not to replace  JavaScript, but rathe...
Type-Checker● Dart has a different type-checker.● The conventional type-checker tries to prove a program  obeys the type s...
Optional Types ● Static checker provides warnings; tuned to be unobtrusive ● Type annotations have no effect except ... ● ...
Classes ● Single class inheritance (Object is the default) ● Interfaces ● Constructor assign   Greeter.withPrefix(this.pre...
ISOLATES ● Inspired by Erlang, Dart has isolates ● Lightweight units of execution     ○ Each isolate is conceptually a pro...
DART EXECUTION
SNAPSHOTTING IN THE DART VM● Process of serializing the heap after loading the application● Loading 54173 lines of Dart co...
How to use Dart?One can run Dart code in several ways:● Translate Dart code to JavaScript that can run in any  modern brow...
Embedding Dart in HTML● Using the HTML script tag with type=application/dart.● Like other script tags, the script contents...
Fundamental differences from JavaScript● Isolated script tags    ○ Each script tag runs in isolation.    ○ Use #import to ...
Improving the DOM● Better Querying                 Old                                New elem.getElementById(foo);       ...
Improving the DOM● Use real collections   ○ The queries return collections which are objects that implement the     Dart c...
Improving the DOM● Use constructors   Old        document.createElement(div)   New        new Element.tag(div)   Or       ...
Improving the DOM● Events    ○ There are no inline events like onclick()    ○ New ElementEvents class. For each of the kno...
A technology preview on  dartlang.org  dart.googlecode.com  http://gototoday.dk/2011/10/10/lars-bak-on-dart/  http://www.2...
Upcoming SlideShare
Loading in...5
×

Structured web programming

2,170

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,170
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Structured web programming

  1. 1. Structured web programming Created by Lars Bak & Gilad Bracha Come to the Dart side. Gilad Bracha in an interview on Dart
  2. 2. What is DART? ● New programming language ● Open Source Project ● Simple OO programming language ● Class-based single inheritance with interfaces ● Optional static types ● Real lexical scoping ● Single-threaded ● Familiar Syntax ● Its still a Technology PreviewHello World!
  3. 3. Dart is NOT the competition of JavaScript● Dart is meant to fill a vacuum, not to replace JavaScript, but rather to fill the vacuum left by fragmented mobile platforms.● It seems they are targeting the problem of programming in Java-like for android, Objective-C for iOS and so forth.● Its not done.
  4. 4. Type-Checker● Dart has a different type-checker.● The conventional type-checker tries to prove a program obeys the type system.● If it cant construct a proof - the program is considered invalid, "Guilty until proven innocent"● In Dart, you are innocent until proven guilty.● During development one can choose to validate types.
  5. 5. Optional Types ● Static checker provides warnings; tuned to be unobtrusive ● Type annotations have no effect except ... ● During development, you can check dynamic types against declarations ○ T x = o; assert(o === null || o is T); ● By default, type annotations have no effect and no cost ○ Code runs freeExample
  6. 6. Classes ● Single class inheritance (Object is the default) ● Interfaces ● Constructor assign Greeter.withPrefix(this.prefix); //A constructor var greeter = new Greeter.withPrefix(Howdy); ● Setters and Getters class Greeter { String _prefix = Hello,; // Hidden instance variable. String get prefix() => _prefix; // Getter for prefix. void set prefix(String value) {...} // Setter for prefix. } greeter.prefix = Howdy,; // Set prefix.Example
  7. 7. ISOLATES ● Inspired by Erlang, Dart has isolates ● Lightweight units of execution ○ Each isolate is conceptually a process ○ Nothing is shared ○ All communication takes place via message passing ● Isolates support concurrent execution ● Which gives us Actor based concurrencyIsolates
  8. 8. DART EXECUTION
  9. 9. SNAPSHOTTING IN THE DART VM● Process of serializing the heap after loading the application● Loading 54173 lines of Dart code takes 640 ms● Loading same application from a snapshot takes 60 ms● Startup > 10x faster
  10. 10. How to use Dart?One can run Dart code in several ways:● Translate Dart code to JavaScript that can run in any modern browser: ○ Chrome ○ Safari 5+ ○ Firefox 4+● Execute Dart code directly in a VM on the server side●● Use Dartboard to write, modify, and execute small Dart programs within any browser window
  11. 11. Embedding Dart in HTML● Using the HTML script tag with type=application/dart.● Like other script tags, the script contents can be inlined as the body of the script tag or specified by reference via a URL using the script tag’s src attribute.● The Dart script can have optional #source and #import directives. It must have a visible top-level function called main(), either declared directly in the script or in a sourced/imported file. The browser will invoke main() when the page is loaded.
  12. 12. Fundamental differences from JavaScript● Isolated script tags ○ Each script tag runs in isolation. ○ Use #import to use code from other URL ○ Each script tag requires a main() to be run.● Delayed Execution ○ Each scripts main() is called on DOMContentLoaded event ○ Ordering is not guaranteed ○ Dart code executes after page load. ○ We can assume the DOM is fully loaded.● No inline event listeners
  13. 13. Improving the DOM● Better Querying Old New elem.getElementById(foo); elem.query(#foo); elem.getElementsByTagName(div); elem.queryAll(div); elem.getElementsByName(foo); elem.queryAll([name="foo"]); elem.getElementsByClassName(foo); elem.queryAll(.foo); elem.querySelector(.foo .bar); elem.query(.foo .bar); elem.querySelectorAll(.foo .bar); elem.queryAll(.foo .bar);
  14. 14. Improving the DOM● Use real collections ○ The queries return collections which are objects that implement the Dart core librarys built-in collection interfaces. ○ This way we get rid of a lot of special methods & made attributes a map Old New elem.hasAttribute(name); elem.attributes.contains(name); elem.getAttribute(name); elem.attributes[name]; elem.setAttribute(name, value); elem.attributes[name] = value; elem.removeAttribute(name); elem.attributes.remove(name); elem.hasChildNodes(); elem.nodes.isEmpty(); elem.firstChild(); elem.nodes[0]; elem.appendChild(child); elem.nodes.add(child);
  15. 15. Improving the DOM● Use constructors Old document.createElement(div) New new Element.tag(div) Or TableElement table = new Element.html( <table><tr><td>Hello <em>Dart!</em></table>);
  16. 16. Improving the DOM● Events ○ There are no inline events like onclick() ○ New ElementEvents class. For each of the known event types, there is a property on that class: click, mouseDown, etc ○ There are event objects that can add and remove listeners and dispatch events. Old Newelem.addEventListener(click, (event) => elem.on.click.add( (event) => printprint(click!), false); (click!));elem.removeEventListener( click, elem.on.click.remove(listener);listener);
  17. 17. A technology preview on dartlang.org dart.googlecode.com http://gototoday.dk/2011/10/10/lars-bak-on-dart/ http://www.2ality.com/2011/10/dart-launch.html http://dartinside.com/ @DartInside
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×