DART – The next step towards optimized JS – HTML of the future!!

DART – The next step towards optimized JS – HTML of the future!!

What is Dart??

 Dart is an open source web programming language developed by Google which appeared in existence in 2011 with latest release M4 in April 16 2013.The goal of dart is 'ultimately to replace JavaScript as the lingua franca of the web development on the open web platform'. Its' a class based, single inheritance, object – oriented language with C-style syntax. It supports interfaces, abstract classes, reified generics, and optional typing. Static type annotations do not affect the runtime semantics of the code.

Where do I see Dart in terms of JS lifecycle on web?

 Traditional JavaScript --> JQuery (optimized feature based JS) --> Dart (Highly optimized, performance intensive, multi-browser, quick development cycle based PL).

 In short it does the job of building an application really quick by using a high end programming language and also does code optimization using tools similar to closure or soy before porting it out for multiple applications. The downside of other tools is long compilation time.

How does it work?

 You develop the program in Dart, Dart uses dartlib and dart2js to convert it to a JavaScript and runs the program in your browser.

Important features of DART?

• Does not require compilation for development.
• Eliminates boiler plate code – syntax, sematics and structures
  • Uses named constructers to reduce lines of code.
    eg: Test.namedConstr() : initValue = 100;
  • Operator Overriding
• Named Optional Parameters
  • eg: void func1({int thisValueIsNeeded: 1})
• One line funtions & string interpolation
  • eg: String toString() => “This value is $value”;
• Syntax is similar to normal web programming language like Java.
• Well defined error messages when a property does not exist – logical errors.
• Variable scoping follows the principles of a well defined web program.
• Event based structures are bound to lexical scopes rather than event based object scopes for ease of program understandability.
  • Eg: button.onClick.listen((Event e) => this.checkThisOutItsCool());
  • checkThisOutItsCool() { /*... */ }
• Structures are inside well defined libraries – you can import libraries and lazy load them as well using metadata.
• Remove instances of multiple references to a variable when doing property initialization in dom – Method Cascades
  • eg: var button = new ButtonElement();
    • button.id = 'go';
    • button.text = 'Go';
    • button.classes.add('tryme');
    • button.onClick.listen((e) => showTheList());
  • can be written as – (new ButtonElement() ..id='go' ..text='Go' ..classes.add('tryme') ..onClick.listen((e) => showTheList()));
• Extend objects and compose classes together using behaviors.
• Metadata – you can define your own metadata
  • eg:you can define a metadata like @lazy load use a future to wait for a library to load.
• Mirror based proxy elements & reflection– to address and audit third party calls.
  • Eg : mirror = reflect(delegate);
• Capture and deal with Errors using Future – delegate such calls using mirror instances.
• Futures has got wait mechanisms to combine waiting on multiple events and then operate on them.
• Streams – nearly all repeating events in Dart are streams. Also, additionally, we can put filters in streams and perform conversions to map send data in different forms.
• Enables cross browser compatibility on converted js.

What is required to develop Dart?

 You need the Dart SDK and three packages – Intl, Web UI and Unit Test to run and test Dart programs.

What is needed to Test Dart?

 You can use Dartium : Chromium + Dart VM to test your code and dart2Js to test your code.

Additionally there is a unit test library in Dart to unit test code similar to other web frameworks.

How do I integrate with traditional JavaScript?

The integration with existing JavaScript can be done via JS-Interop using a proxy callback.

Eg: var jsObj = new js.Proxy(api.jsObj1, query('jsObj'));

jsObj.test(input); <-- the access mechanism here is same as JS.

How do I do Asynchronous callbacks using Dart?

Dart provides for asynchronous call back in an elegant way. It reduces traditional call back disadvantages for multiple callbacks using futures and streams.

Eg : Traditional call back – doFunc1(result1) { handle(result1) ; } onError : (e) { handleError(e); });

With Dart futures – Future future = doFunc1();

                                                      future.then(handle);

                                                      future.catchError(handleError);

                                                      doFunc1()

                                                         .then(handle);

                                                         .catchError(handleError);

 The .then clauses can be group in a call back tree to maintain clarity of nesting and understand sequence of callback and maintain the error or exception hierarchy with no additional error handlers.

                                               Eg: x.func(“inp”)

                                                          .then((fun1) => func.getFirst())

                                                         .then((fun2) => func.getSecond())

                                                         .catchError((e) => print(“Something went wrong!”));

What is the impact on Performance when using Dart?

 The impact on performance is critical when using Dart. There is a 'dart2Js' compilation engine which works on the 'tree shaking', ' minification' and 'inferencing' methodologies. The 'tree shaking' curses through the dom tree and find points of optimization, 'minification' – removes blocks of code to reference and utilize less space, 'inferencing' checks the references to remove code not reachable during run time. Also there is a 'Source Map' to enable debugging by mapping Dart code to JavaScript code for debugging.

 The performance reduction has been measured at 2wice the savings using desktop and 2wice the savings using mobile or handheld gadgets based on x86 architectures.

You can reference - http://www.dartlang.org/performance/ for more details.

How can I see live Dart code or see a visual demo?

 You can use 'try.dartlang.org' to check how a dart code would run in the UI. You can try on different web browser engines and tablet devices like iPad.

Can I download and manage updates to packages for Dart?

 Yes you can reference this site 'pub.dartlang.org' and this support various version management tools like git, virtual file system, etc.

PS : The above details have been taken from Google I/O 2013 sessions and compiled into usability driven questionnaire.