dart
DESCRIPTION
TRANSCRIPT
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 = '[email protected]'; email.match(/@/)
• Result= ['@']
Dart
• var email = '[email protected]';
(new RegExp(@'o')).firstMatch(email)
• Result= Match Object
• var invalidEmail = 'f@[email protected]'; invalidEmail.match(/@/g)
• Result= ['@', '@']
• var invalidEmail = 'f@[email protected]'; (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 ?
References
http://www.dartlang.org