DartSébastien Deleuze - @sdeleuzeMix-IT 2013One language to rule them all …
#dartlang #mixit13The views expressed are mine andonly mine, and are not endorsed byDisclaimer
#dartlang #mixit13A structured language that’s flexibleand familiarDesigned to develop webapps formodern browsers (not onl...
#dartlang #mixit13LanguageToolingVirtual machinesDocumentationAPIWebcomponentsDart to Javascriptcompiler Package repositor...
#dartlang #mixit13Low riskLow rewardHigh riskHigh rewardNo, Google adopts a two-pronged strategyReplace Javascript ?
ager@google.comahe@google.comajohnsen@google.comalanknight@google.comalexeif@google.comamouravski@google.comamshali@google...
#dartlang #mixit13MobileDesktopWebServerScriptUnify application development
#dartlang #mixit13Object oriented and optional typingimport dart:math;class Point {num x, y;Point(this.x, this.y);num dist...
// Javascriptfunction Awesome() { }Awesome.prototype.cool = function() {alert("inside awesome");}Awesome.prototype.init = ...
Functions// These 3 lines are equivalent and print 0 2[0, 1, 2, 3].where((n) {return n.isEven;}).forEach((n) {print(n);});...
#dartlang #mixit13Implicit interfacesclass Person {final _name;Person(this._name);String greet(who) => Hello, $who. I am $...
#dartlang #mixit13Optional positional parametersString say(String from, String msg, [String channel=email]) {// ...}main()...
#dartlang #mixit13Mixinsimport dart:async;class Person {String name;Person(this.name);}class Bro {legendary() {print("This...
I am watching you !Dart is easy to learn
#dartlang #mixit13dart:asyncdart:chromedart:collectiondart:coredart:cryptodart:htmldart:indexed_dbdart:iodart:isolatedart:...
#dartlang #mixit13dart:htmlimport dart:html;main() {var message = query(#msg);var b = new ButtonElement()..classes.add(imp...
#dartlang #mixit13dart:ioimport dart:io;main() {HttpServer.bind(127.0.0.1, 8080).then((server) {server.listen((HttpRequest...
#dartlang #mixit13dart:isolateimport dart:isolate;echo() {port.receive((msg, reply) {reply.send(I received: $msg);});}main...
#dartlang #mixit13<x-carousel><figure><img src="bootstrap-mdo-sfmoma-01.jpg"><figcaption>Description 1</figcaption></figur...
#dartlang #mixit13import dart:html;import package:js/js.dart as js;void draw() {var gviz = js.context.google.visualization...
#dartlang #mixit13myapp:coremyapp:validatemyapp:widgetmyapp:cmsmyapp:modelWebsocketHTTPmyapp:validatemyapp:widgetmyapp:mod...
#dartlang #mixit13Browser VMServer VMdart2jsTodayRuntime environments
#dartlang #mixit13Browser VMServer VMdart2jsTomorrow ?ARM / Android ?Cloud ?Runtime environments
#dartlang #mixit13AndroidRuntime environments
AndroidRuntime environments
#dartlang #mixit130100200300400500600700Initial startup time for a 55000lines application (ms)Without snapshotWith snapsho...
#dartlang #mixit13020406080100120140160180DeltaBlue Richards TracerdartjsVMRuntimePerformance
#dartlang #mixit13Size of generated javascript020406080100120140160180200Size of the todo application(Kbytes)AngularJSDart...
#dartlang #mixit13IDE : Dart EditorTooling
#dartlang #mixit13IDE : not only EclipsePending work on externalizedautocomplete engineDart support in Idea Intellijand We...
Source maps#dartlang #mixit13Tooling
#dartlang #mixit13pubname: myprojectversion: 1.1.0description: Sample applicationauthor: Sébastien Deleuzehomepage: http:/...
#dartlang #mixit13pub.dartlang.orgTooling
#dartlang #mixit13dartdocTooling
#dartlang #mixit13Applications
#dartlang #mixit13Applications
#dartlang #mixit13Applications
#dartlang #mixit13Applications
#dartlang #mixit13Applications
#dartlang #mixit13Dart has the potential to change theway we develop applications1.0 release expected this summerA serious...
Upcoming SlideShare
Loading in...5
×

Dart : one language to rule them all - MixIT 2013

3,851

Published on

Published in: Technology, News & Politics
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,851
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Dart : one language to rule them all - MixIT 2013"

  1. 1. DartSébastien Deleuze - @sdeleuzeMix-IT 2013One language to rule them all …
  2. 2. #dartlang #mixit13The views expressed are mine andonly mine, and are not endorsed byDisclaimer
  3. 3. #dartlang #mixit13A structured language that’s flexibleand familiarDesigned to develop webapps formodern browsers (not only)Improve efficiency andmaintainability of our applicationsWhat is Dart ?
  4. 4. #dartlang #mixit13LanguageToolingVirtual machinesDocumentationAPIWebcomponentsDart to Javascriptcompiler Package repositoryAn Open Source platform
  5. 5. #dartlang #mixit13Low riskLow rewardHigh riskHigh rewardNo, Google adopts a two-pronged strategyReplace Javascript ?
  6. 6. ager@google.comahe@google.comajohnsen@google.comalanknight@google.comalexeif@google.comamouravski@google.comamshali@google.comantonm@google.comaprelev@gmail.comarv@google.comasiva@google.combak@google.combenl@google.combenwells@google.comblois@google.combrianwilkerson@google.comcodefu@google.comcshapiro@google.comdanrubel@google.comdcarlson@google.comdevoncarew@google.comdgrove@google.com100 contributors from16 externalcontributorsA lot of interactionswith the communityWho contributes ?
  7. 7. #dartlang #mixit13MobileDesktopWebServerScriptUnify application development
  8. 8. #dartlang #mixit13Object oriented and optional typingimport dart:math;class Point {num x, y;Point(this.x, this.y);num distanceTo(Point other) {var dx = x - other.x;var dy = y - other.y;return sqrt(dx * dx + dy * dy);}}main() {var a = new Point(2, 3);var b = new Point(3, 4);print(distance from a to b = ${a.distanceTo(b)});}Language
  9. 9. // Javascriptfunction Awesome() { }Awesome.prototype.cool = function() {alert("inside awesome");}Awesome.prototype.init = function(button) {button.addEventListener("click", function() {this.cool(); // this wont work!});}var button = document.getElementById("b");var a = new Awesome(); a.init(button);// Dartclass Awesome {cool() =>window.alert("inside cool");init(button) =>button.onClick.listen((e) => cool());}void main() {new Awesome().init(document.query("#b"));}Language
  10. 10. Functions// These 3 lines are equivalent and print 0 2[0, 1, 2, 3].where((n) {return n.isEven;}).forEach((n) {print(n);});[0, 1, 2, 3].where((n) => n.isEven).forEach((n) => print(n));[0, 1, 2, 3].where((n) => n.isEven).forEach(print);#dartlang #mixit13Language
  11. 11. #dartlang #mixit13Implicit interfacesclass Person {final _name;Person(this._name);String greet(who) => Hello, $who. I am $_name.;}class Bro implements Person {final _name = ‘You know my name, I am your bro!;String greet(who) => Hi $who. What’s up?;}Language
  12. 12. #dartlang #mixit13Optional positional parametersString say(String from, String msg, [String channel=email]) {// ...}main() {say(Bob, Howdy);say(Bob, Howdy, smoke signal);}enableFlags({bool bold: false, bool hidden: false}) {// ...}main() {enableFlags();enableFlags(bold: true);enableFlags(bold: true, hidden: false);}Optional named parametersLanguage
  13. 13. #dartlang #mixit13Mixinsimport dart:async;class Person {String name;Person(this.name);}class Bro {legendary() {print("This gonna be, wait for it ...");new Timer(new Duration(seconds:5), () => print("legendary!"));}}class BarneyStinson extends Person with Bro {BarneyStinson(name): super(name);}Language
  14. 14. I am watching you !Dart is easy to learn
  15. 15. #dartlang #mixit13dart:asyncdart:chromedart:collectiondart:coredart:cryptodart:htmldart:indexed_dbdart:iodart:isolatedart:jsonargsfixnumintlloggingmatchermetamockserializationsource_mapsunittestdart:mathdart:mirrorsdart:svgdart:typeddatadart:uridart:utfdart:web_audiodart:web_gldart:web_sqlAPI
  16. 16. #dartlang #mixit13dart:htmlimport dart:html;main() {var message = query(#msg);var b = new ButtonElement()..classes.add(important)..text = Bro Code..onClick.listen((e) => message.text = A bro doesnot dare/challenge another bro to do anything theywouldn’t try them self);document.body.children.add(b);}API
  17. 17. #dartlang #mixit13dart:ioimport dart:io;main() {HttpServer.bind(127.0.0.1, 8080).then((server) {server.listen((HttpRequest request) {request.response..write(A bro cannot give another bro a Teddy bear)..close();});print(web server started !);});}API
  18. 18. #dartlang #mixit13dart:isolateimport dart:isolate;echo() {port.receive((msg, reply) {reply.send(I received: $msg);});}main() {var sendPort = spawnFunction(echo);sendPort.call(Hello from main).then((reply) {print(reply);});}import dart:isolate;main() {var sendPort = spawnUri(plugin.dart);sendPort.call(getPluginMetadata).then((reply) {print(reply);});}API
  19. 19. #dartlang #mixit13<x-carousel><figure><img src="bootstrap-mdo-sfmoma-01.jpg"><figcaption>Description 1</figcaption></figure><figure class="active"><img src="bootstrap-mdo-sfmoma-02.jpg"><figcaption>Description 2</figcaption></figure></x-carousel><element name="x-carousel" extends="div" constructor="Carousel"><template><style type=text/css> ... </style><div class=carousel><x-swap><content></content></x-swap><a class="left" on-click=previous()>&lsaquo;</a><a class="right" on-click=next()>&rsaquo;</a></div></template></element>Web UI
  20. 20. #dartlang #mixit13import dart:html;import package:js/js.dart as js;void draw() {var gviz = js.context.google.visualization;var listData = [ ... ];var arrayData = js.array(listData);var tableData = gviz.arrayToDataTable(arrayData);var options = js.map({ title: Correlation});var chart = new js.Proxy(gviz.BubbleChart, query(#viz));chart.draw(tableData, options);}main() {js.context.google.load(visualization, 1,js.map( { packages: [corechart],callback: new js.Callback.once(draw) }));}JS Interop
  21. 21. #dartlang #mixit13myapp:coremyapp:validatemyapp:widgetmyapp:cmsmyapp:modelWebsocketHTTPmyapp:validatemyapp:widgetmyapp:modelmyapp:clientArchitecture example
  22. 22. #dartlang #mixit13Browser VMServer VMdart2jsTodayRuntime environments
  23. 23. #dartlang #mixit13Browser VMServer VMdart2jsTomorrow ?ARM / Android ?Cloud ?Runtime environments
  24. 24. #dartlang #mixit13AndroidRuntime environments
  25. 25. AndroidRuntime environments
  26. 26. #dartlang #mixit130100200300400500600700Initial startup time for a 55000lines application (ms)Without snapshotWith snapshotStartup timePerformance
  27. 27. #dartlang #mixit13020406080100120140160180DeltaBlue Richards TracerdartjsVMRuntimePerformance
  28. 28. #dartlang #mixit13Size of generated javascript020406080100120140160180200Size of the todo application(Kbytes)AngularJSDartAngularJS + jQueryDart + WebUIPerformance
  29. 29. #dartlang #mixit13IDE : Dart EditorTooling
  30. 30. #dartlang #mixit13IDE : not only EclipsePending work on externalizedautocomplete engineDart support in Idea Intellijand WebStormTooling
  31. 31. Source maps#dartlang #mixit13Tooling
  32. 32. #dartlang #mixit13pubname: myprojectversion: 1.1.0description: Sample applicationauthor: Sébastien Deleuzehomepage: http://jyuro.orgdocumentation: http://jyuro.org/docdependencies:route: 0.4.5mustache : >=0.1.5‘orientdb:git: git://github.com/jyuro/orientdb.gitdev_dependencies:unittest: anyTooling
  33. 33. #dartlang #mixit13pub.dartlang.orgTooling
  34. 34. #dartlang #mixit13dartdocTooling
  35. 35. #dartlang #mixit13Applications
  36. 36. #dartlang #mixit13Applications
  37. 37. #dartlang #mixit13Applications
  38. 38. #dartlang #mixit13Applications
  39. 39. #dartlang #mixit13Applications
  40. 40. #dartlang #mixit13Dart has the potential to change theway we develop applications1.0 release expected this summerA serious challenger for « Javascript as alanguage », Java, Scala, Ruby and PythonJoin Dart community and contribute to createa whole new Open Source ecosystem !Conclusion

×