Your SlideShare is downloading. ×
Structured web programming
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Structured web programming


Published on

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Structured web programming Created by Lars Bak & Gilad Bracha Come to the Dart side. Gilad Bracha in an interview on Dart
  • 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. 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. 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. 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. 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. 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
  • 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. 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. 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. 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. 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. 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. 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. 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) => (event) => printprint(click!), false); (click!));elem.removeEventListener( click,;listener);
  • 17. A technology preview on @DartInside