No JS + Dart presented in Barcamp Bangalore 13

1. No JS + Intro to
DartCon
Dart @Author
Anand Shankar
@Presented

2. What is Dart
Dart is a new open source web programming
language developed by Google. It was unveiled at
the GOTO conference, October-2011.
Dart helps developers to build structured
modern web apps.

3. Goal of 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.

4. Why Did Google Create Dart?
Engineers at Google have been thinking about web
apps for a long time. We’ve written
a bunch of complex and widely used large-scale
web apps (think Gmail, Google+, and Google Docs),
so we’re quite familiar with the challenges of
architecting web apps.

5. Why Did Google Create Dart?
We’ve also written a browser (Chrome) and a
JavaScript engine (V8), so we’ve thought
a lot about how to make web apps run faster.
Basically, we created Dart because we think it’ll
help bring more great apps to the web,
and we think it should be easier to create more
complex web applications.

6. 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.

7. Coding difference between
JavaScript and Dart

8. Code embedding
JavaScript Dart
<script • <script
src=‘myscript.js'></script> type='application/dart'
src='myscript.dart'></script
>
• To load JS for non-dartium
<script
src=“packages/browser/dar
t.js” ></script>

9. Entry point
JavaScript Dart
• Not required • REQUIRED
– main() { }

10. Code modularity
JavaScript Dart
• No native implementation • Defining library
– library bcb;
class BCB13 { hello() => ‘Hello
BCB 113’; }
• Using library
– import(‘bcb.BCB13');
var msg = new BCB13();

11. Function
JavaScript Dart
• function fun(a, b, c) { return • fun(a, b, c) => c;
c; }; – fn(1);
– fun(1) Result=ERROR:NoSuchMethodE
Result= undefined xception
– fn(1, 2, 3);
– fun(1, 2, 3)
Result= 3
Result= 3
• Optional parameters
– fn(a, [b, c]) => c;
– fn('a');
Result= null

12. For Each Loop
JavaScript Dart
• Not available • data.forEach((key, value)
{ print('${key}, ${value}'); });

13. Classes
JavaScript Dart
• function BCB(){ • class BCB {
this.name=null; var name;
}; greet() => 'Hello, $name';
}
BCB.prototype.greet=function(
){
return ‘Hello, ‘ + this.name;
}

14. Constructors
JavaScript Dart
• function BCB(x) { • class BCB {
this.x = x; var x;
}; BCB(x) {
this.x = x;
}}
• In short
class BCB {
var x;
BCB(this.x); }

15. 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; }

16. • Employee.prototype = new Person();
Employee.prototype.constructor = Employee;
Employee.prototype.grantRaise =
function(percent) {
this.salary = (this.salary * percent).toInt();
}

17. • Dart
• class Person {
var name;
Person(this.name);
greet() => 'Hello, $name';
}

18. class Employee extends Person {
var salary;
Employee(name, this.salary) : super(name);
grantRaise(percent)
{
salary = (salary * percent).toInt();
}
}

19. Advance for loop
JavaScript Dart
• Not available • For( var x in list)
{
print(x);
}

20. Manipulating DOM
JavaScript Dart
• var element = • var element = new
document.createElement('p Element.html('<p>Hello BCB
'); <em>12</em>.</p>');
• element.innerHTML =
‘Hello BCB <em>12</em>.';

21. Exceptions Handling
JavaScript Dart
• try { undefinedFunction(); • try
} catch(e) { { Math.parseInt("three"); }
if (e instanceof catch(BadNumberFormatEx
ReferenceError) ception bnfe) {
{ console.log('You called a print("Ouch! Detected:
function that does not $bnfe");
exist'); } } }catch(var e) {
finally { console.log('This runs print("If some other type of
even if an exception is exception"); }
thrown'); } finally { print("This runs even if
an exception is thrown"); }

22. Ajax
• JavaScript
var client = new XMLHttpRequest;
client.onreadystatechange = function() {
if (this.readyState == 4) {
processData(this);
}}

23. client.open('GET', 'data.json');
client.send();
function processData(request) {
console.log('The contents of your data: ' +
request.responseText);
}

24. • Dart
HttpRequest.request("/data.json“).then(req)
{ print("The contents of your data: $
{req.responseText}"); });

25. DartCon
DartCon is a Dart to JavaScript and JavaScript to
Dart converter.
Find the DartCon and it’s Source Code
https://github.com/ashankar/dartcon

26. Demo
http://www.altermediguide.com
http://www.openestartup.com
http://www.ekisaan.com
http://kevmoo.github.com/qr.dart/

27. Demo
http://threedart.github.com/three.dart/example
/canvas_geometry_hierarchy/Canvas_Geometry_H
ierarchy.html
http://threedart.github.com/three.dart/example
/webgl_geometries/WebGL_Geometries.html
http://jimmypettersson.eu/dev/dart/spaceinvad
ers/SpaceInvaders.html
http://dart-lang.github.com/pop-pop-win/
http://www.dartflash.com/games/escape/escap
e.html

28. References
http://www.dartlang.org
What is Dart?, Oreilly Publications

29. Questions ?

30. Thanks
Anand Shankar
E-mail: com@ashankar.com
Twitter: anandvns
Facebook: anandvns