No JS and DartCon

1,893 views

Published on

No JS + Dart presented in Barcamp Bangalore 13

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,893
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • What is Dart?, Oreilly Publications
  • What is Dart?, Oreilly Publications
  • No JS and DartCon

    1. 1. No JS + Intro to DartCon Dart @Author Anand Shankar @Presented
    2. 2. What is DartDart is a new open source web programminglanguage developed by Google. It was unveiled atthe GOTO conference, October-2011.Dart helps developers to build structuredmodern web apps.
    3. 3. Goal of DartThe goal of Dart is ultimately to replaceJavaScript as the lingua franca of web developmenton the open web platform.Dart is a class-based, object-oriented languagewith lexical scoping, closures, and optional statictyping.
    4. 4. Why Did Google Create Dart?Engineers at Google have been thinking about webapps for a long time. We’ve writtena bunch of complex and widely used large-scaleweb apps (think Gmail, Google+, and Google Docs),so we’re quite familiar with the challenges ofarchitecting web apps.
    5. 5. Why Did Google Create Dart?We’ve also written a browser (Chrome) and aJavaScript engine (V8), so we’ve thoughta lot about how to make web apps run faster.Basically, we created Dart because we think it’llhelp bring more great apps to the web,and we think it should be easier to create morecomplex web applications.
    6. 6. Advantages of Dart over JavaScriptGood point is that it has native support.A very critical issue with JavaScript is handlingconcurrency. Dart has "isolates": these are used forhandling concurrency.
    7. 7. Coding difference between JavaScript and Dart
    8. 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. 9. Entry point JavaScript Dart• Not required • REQUIRED – main() { }
    10. 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. 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. 12. For Each Loop JavaScript Dart• Not available • data.forEach((key, value) { print(${key}, ${value}); });
    13. 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. 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. 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. 16. • Employee.prototype = new Person(); Employee.prototype.constructor = Employee; Employee.prototype.grantRaise = function(percent) {this.salary = (this.salary * percent).toInt(); }
    17. 17. • Dart• class Person {var name;Person(this.name);greet() => Hello, $name; }
    18. 18. class Employee extends Person { var salary;Employee(name, this.salary) : super(name);grantRaise(percent){ salary = (salary * percent).toInt();} }
    19. 19. Advance for loop JavaScript Dart• Not available • For( var x in list) { print(x); }
    20. 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. 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. 22. Ajax• JavaScriptvar client = new XMLHttpRequest; client.onreadystatechange = function() {if (this.readyState == 4) {processData(this);}}
    23. 23. client.open(GET, data.json); client.send();function processData(request) {console.log(The contents of your data: + request.responseText);}
    24. 24. • DartHttpRequest.request("/data.json“).then(req) { print("The contents of your data: $ {req.responseText}"); });
    25. 25. DartConDartCon is a Dart to JavaScript and JavaScript toDart converter. Find the DartCon and it’s Source Code https://github.com/ashankar/dartcon
    26. 26. Demohttp://www.altermediguide.comhttp://www.openestartup.comhttp://www.ekisaan.comhttp://kevmoo.github.com/qr.dart/
    27. 27. Demohttp://threedart.github.com/three.dart/example/canvas_geometry_hierarchy/Canvas_Geometry_Hierarchy.htmlhttp://threedart.github.com/three.dart/example/webgl_geometries/WebGL_Geometries.htmlhttp://jimmypettersson.eu/dev/dart/spaceinvaders/SpaceInvaders.htmlhttp://dart-lang.github.com/pop-pop-win/http://www.dartflash.com/games/escape/escape.html
    28. 28. Referenceshttp://www.dartlang.orgWhat is Dart?, Oreilly Publications
    29. 29. Questions ?
    30. 30. Thanks Anand ShankarE-mail: com@ashankar.com Twitter: anandvns Facebook: anandvns

    ×