Dart

JavaScript by bye : Working with Dart

Anand Shankar

Say! Hello Dart

What is Dart

Dart is a new open source web programming language developed by Google. It was unveiled at the GOTO conference, October-2011.

The current version is 0.10; released 07-June-2012.

Dart helps developers to build structured modern web apps.

What is Dart

The goal of Dart is ultimately to replace JavaScript as the lingua franca of web development on the open web platform.

Dart is a class-based, object-oriented language with lexical scoping, closures, and optional static typing.

Advantages of Dart over JavaScript

Good point is that it has native support.

A very critical issue with JavaScript is handling concurrency. Dart has "isolates": these are used for handling concurrency.

Coding difference between JavaScript and Dart

Code embedding

JavaScript

<script src=‘myscript.js'></script>

Dart

• <script type='application/dart' src='myscript.dart'></script>

• <script type='text/javascript'> if (navigator.webkitStartDart) { navigator.webkitStartDart(); } </script>

Entry point

JavaScript

• Not required

Dart

• REQUIRED – main() { }

Printing to the console

JavaScript

• console.log(‘Hello BCB');

Dart

• print(‘Hello BCB');

Code modularity

JavaScript

• No native implementation

Dart

• Defining library – #library(‘BCB');

– class BCB11 { hello() => ‘Hello BCB 11'; }

• Using library – #import(‘BCB ');

– var msg = new BCB11();

Variables

JavaScript

• var – mostly used for all types.

• Undeclared variable : “undefined”

• No “final” variable support

Dart

• Strongly supports types variables: var, String, int, double, boolean, etc.

• Undeclared variable : “null”

• Supports “final”

Collections

JavaScript

• No native JavaScript equivalent for unique item collection.

Dart

• Set for unique item collection.

Function

JavaScript

• function fun(a, b, c) { return c; }; – fun(1)

Result= undefined – fun(1, 2, 3)

Result= 3

Dart

• fun(a, b, c) => c; – fn(1);

Result=ERROR:NoSuchMethodException

– fn(1, 2, 3);

Result= 3

• Optional parameters – fn(a, [b, c]) => c;

– fn('a');

Result= null

Function

JavaScript

• Does not have native support for named parameters

Dart

• myFun(x, [y, z])

{ print("Hello BCB ${x} ${y} ${z}" ); } – myFun(11);

– myFun(11, 12);

For Each Loop

JavaScript

• Not available

Dart

• data.forEach((key, value){ print('${key}, ${value}'); });

Classes

JavaScript

• function BCB(){

this.name=null;

};

BCB.prototype.greet=function(){

return ‘Hello, ‘ + this.name;

}

Dart

• class BCB {

var name;

greet() => 'Hello, $name';

}

Constructors

JavaScript

• function BCB(x) {

this.x = x;

};

Dart

• class BCB {

var x;

BCB(x) {

this.x = x;

} }

• In short

class BCB {

var x;

BCB(this.x); }

Inheritance • JavaScript

• function Person(name) {

this.name = name;

}

• Person.prototype.greet = function() {

return 'Hello, ' + this.name;

}

function Employee(name, salary) {

Person.call(this, name);

this.salary = salary; }

• Employee.prototype = new Person(); Employee.prototype.constructor = Employee;

Employee.prototype.grantRaise = function(percent) {

this.salary = (this.salary * percent).toInt();

}

• Dart

• class Person {

var name;

Person(this.name);

greet() => 'Hello, $name';

}

class Employee extends Person {

var salary;

Employee(name, this.salary) : super(name);

grantRaise(percent)

{

salary = (salary * percent).toInt();

}

}

Operator Overloading

JavaScript

• Not supported

Dart

• class Point {

var x, y;

Point(this.x, this.y);

operator + (Point p) => new Point(x + p.x, y + p.y);

toString() => 'x:$x, y:$y';

}

main()

{

var p1 = new Point(1, 1);

var p2 = new Point(2, 2);

var p3 = p1 + p2; print(p3);

}

Advance for loop

JavaScript

• Not available

Dart

• For( var x in list)

{

print(x);

}

Manipulating DOM

JavaScript

• var element = document.createElement('p');

• element.innerHTML = ‘Hello BCB <em>12</em>.';

Dart

• var element = new Element.html('<p>Hello BCB <em>12</em>.</p>');

Regular expressions

JavaScript

• var email = 'test@example.com'; email.match(/@/)

• Result= ['@']

Dart

• var email = 'test@example.com';

(new RegExp(@'o')).firstMatch(email)

• Result= Match Object

• var invalidEmail = 'f@il@example.com'; invalidEmail.match(/@/g)

• Result= ['@', '@']

• var invalidEmail = 'f@il@example.com'; (new RegExp(@'o')).allMatches(invalidEmail)

• Result= Iterable Match Object

Exceptions Handling

JavaScript

• try { undefinedFunction();

} catch(e) {

if (e instanceof ReferenceError) { console.log('You called a function that does not exist'); } }

finally { console.log('This runs even if an exception is thrown'); }

Dart

• try { Math.parseInt("three"); }catch(BadNumberFormatException bnfe) {

print("Ouch! Detected: $bnfe");

}catch(var e) {

print("If some other type of exception"); }

finally { print("This runs even if an exception is thrown"); }

Ajax

• JavaScript

var client = new XMLHttpRequest;

client.onreadystatechange = function() {

if (this.readyState == 4) {

processData(this);

} }

client.open('GET', 'data.json');

client.send();

function processData(request) {

console.log('The contents of your data: ' + request.responseText);

}

• Dart

var xhr = new XMLHttpRequest.getTEMPNAME("/data.json", (req) { print("The contents of your data: ${req.responseText}"); });

Run time program manipulation

JavaScript

• Supports Eval – eval('alert("hello from

eval")');

• Adding a method to a class – String.prototype.startsWith =

function(beginning) { var head = this.substr(0, beginning.length); return head == beginning; }

Dart

• Doesn't support eval()

• Doesn't support changing a class after the program has been compiled

Questions ?

Thanks Anand Shankar

E-mail: com@ashankar.com Twitter: anandvns

Facebook: anandvns

References

http://www.dartlang.org