No JS and DartCon
Download as PPT, PDF0 likes1,965 views
Dart is a new programming language developed by Google to help build structured modern web apps. It aims to replace JavaScript as the main language of the web. Dart is class-based, object-oriented, and optionally typed. It has advantages over JavaScript like better support for concurrency and modularity. The presentation demonstrates key differences in syntax between JavaScript and Dart for concepts like functions, classes, inheritance, exceptions, and AJAX calls. It also shows demos of Dart apps and references the DartCon tool for converting between Dart and JavaScript.
![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](https://image.slidesharecdn.com/dartcon-130302092807-phpapp02/85/No-JS-and-DartCon-11-320.jpg)
No JS and DartCon
- 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
- 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