![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');](https://image.slidesharecdn.com/structuredwebprogramming1-111101090531-phpapp01/85/Structured-web-programming-13-320.jpg)
![Improving the DOM
● Use real collections
○ The queries return collections which are objects that implement the
Dart core library's 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);](https://image.slidesharecdn.com/structuredwebprogramming1-111101090531-phpapp01/85/Structured-web-programming-14-320.jpg)
Structured web programming
- 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 ● It's still a Technology Preview Hello 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. ● It's 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 can't 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 free Example
- 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 concurrency Isolates
- 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 script's 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 library's 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 New elem.addEventListener('click', (event) => elem.on.click.add( (event) => print print('click!'), false); ('click!')); elem.removeEventListener( 'click', elem.on.click.remove(listener); listener);
- 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