SlideShare a Scribd company logo
1 of 40
Dart
Sébastien Deleuze - @sdeleuze
Mix-IT 2013
One language to rule them all …
#dartlang #mixit13
The views expressed are mine and
only mine, and are not endorsed by
Disclaimer
#dartlang #mixit13
A structured language that’s flexible
and familiar
Designed to develop webapps for
modern browsers (not only)
Improve efficiency and
maintainability of our applications
What is Dart ?
#dartlang #mixit13
Language
Tooling
Virtual machines
Documentation
API
Web
components
Dart to Javascript
compiler Package repository
An Open Source platform
#dartlang #mixit13
Low risk
Low reward
High risk
High reward
No, Google adopts a two-pronged strategy
Replace Javascript ?
ager@google.com
ahe@google.com
ajohnsen@google.com
alanknight@google.com
alexeif@google.com
amouravski@google.com
amshali@google.com
antonm@google.com
aprelev@gmail.com
arv@google.com
asiva@google.com
bak@google.com
benl@google.com
benwells@google.com
blois@google.com
brianwilkerson@google.com
codefu@google.com
cshapiro@google.com
danrubel@google.com
dcarlson@google.com
devoncarew@google.com
dgrove@google.com
100 contributors from
16 external
contributors
A lot of interactions
with the community
Who contributes ?
#dartlang #mixit13
Mobile
Desktop
Web
Server
Script
Unify application development
#dartlang #mixit13
Object oriented and optional typing
import '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
// Javascript
function Awesome() { }
Awesome.prototype.cool = function() {
alert("inside awesome");
}
Awesome.prototype.init = function(button) {
button.addEventListener("click", function() {
this.cool(); // this won't work!
});
}
var button = document.getElementById("b");
var a = new Awesome(); a.init(button);
// Dart
class Awesome {
cool() =>
window.alert("inside cool");
init(button) =>
button.onClick.listen((e) => cool());
}
void main() {
new Awesome().init(document.query("#b"));
}
Language
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 #mixit13
Language
#dartlang #mixit13
Implicit interfaces
class 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
#dartlang #mixit13
Optional positional parameters
String 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 parameters
Language
#dartlang #mixit13
Mixins
import '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
I am watching you !
Dart is easy to learn
#dartlang #mixit13
dart:async
dart:chrome
dart:collection
dart:core
dart:crypto
dart:html
dart:indexed_db
dart:io
dart:isolate
dart:json
args
fixnum
intl
logging
matcher
meta
mock
serialization
source_maps
unittest
dart:math
dart:mirrors
dart:svg
dart:typeddata
dart:uri
dart:utf
dart:web_audio
dart:web_gl
dart:web_sql
API
#dartlang #mixit13
dart:html
import 'dart:html';
main() {
var message = query('#msg');
var b = new ButtonElement()
..classes.add('important')
..text = 'Bro Code'
..onClick.listen((e) => message.text = '''A bro does
not dare/challenge another bro to do anything they
wouldn’t try them self''');
document.body.children.add(b);
}
API
#dartlang #mixit13
dart:io
import '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
#dartlang #mixit13
dart:isolate
import '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
#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
#dartlang #mixit13
import '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
#dartlang #mixit13
myapp:core
myapp:validate
myapp:widget
myapp:cms
myapp:model
Websocket
HTTP
myapp:validate
myapp:widget
myapp:model
myapp:client
Architecture example
#dartlang #mixit13
Browser VMServer VM
dart2js
Today
Runtime environments
#dartlang #mixit13
Browser VMServer VM
dart2js
Tomorrow ?
ARM / Android ?
Cloud ?
Runtime environments
#dartlang #mixit13
Android
Runtime environments
Android
Runtime environments
#dartlang #mixit13
0
100
200
300
400
500
600
700
Initial startup time for a 55000
lines application (ms)
Without snapshot
With snapshot
Startup time
Performance
#dartlang #mixit13
0
20
40
60
80
100
120
140
160
180
DeltaBlue Richards Tracer
dartjs
VM
Runtime
Performance
#dartlang #mixit13
Size of generated javascript
0
20
40
60
80
100
120
140
160
180
200
Size of the todo application
(Kbytes)
AngularJS
Dart
AngularJS + jQuery
Dart + WebUI
Performance
#dartlang #mixit13
IDE : Dart Editor
Tooling
#dartlang #mixit13
IDE : not only Eclipse
Pending work on externalized
autocomplete engine
Dart support in Idea Intellij
and WebStorm
Tooling
Source maps
#dartlang #mixit13
Tooling
#dartlang #mixit13
pub
name: myproject
version: 1.1.0
description: Sample application
author: Sébastien Deleuze
homepage: http://jyuro.org
documentation: http://jyuro.org/doc
dependencies:
route: 0.4.5
mustache : '>=0.1.5‘
orientdb:
git: git://github.com/jyuro/orientdb.git
dev_dependencies:
unittest: any
Tooling
#dartlang #mixit13
pub.dartlang.org
Tooling
#dartlang #mixit13
dartdoc
Tooling
#dartlang #mixit13
Applications
#dartlang #mixit13
Applications
#dartlang #mixit13
Applications
#dartlang #mixit13
Applications
#dartlang #mixit13
Applications
#dartlang #mixit13
Dart has the potential to change the
way we develop applications
1.0 release expected this summer
A serious challenger for « Javascript as a
language », Java, Scala, Ruby and Python
Join Dart community and contribute to create
a whole new Open Source ecosystem !
Conclusion

More Related Content

What's hot

Php code for online quiz
Php code for online quizPhp code for online quiz
Php code for online quiz
hnyb1002
 
Just css results dogmeat template validator
Just css results dogmeat template validatorJust css results dogmeat template validator
Just css results dogmeat template validator
Gaejang Guk
 
R57php 1231677414471772-2
R57php 1231677414471772-2R57php 1231677414471772-2
R57php 1231677414471772-2
ady36
 

What's hot (19)

Php code for online quiz
Php code for online quizPhp code for online quiz
Php code for online quiz
 
Theming Ext JS 4
Theming Ext JS 4Theming Ext JS 4
Theming Ext JS 4
 
JavaOne 2017 | JShell: The Ultimate Missing Tool
 JavaOne 2017 | JShell: The Ultimate Missing Tool JavaOne 2017 | JShell: The Ultimate Missing Tool
JavaOne 2017 | JShell: The Ultimate Missing Tool
 
Code Tops Comments
Code Tops CommentsCode Tops Comments
Code Tops Comments
 
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
 
Miniproject on Employee Management using Perl/Database.
Miniproject on Employee Management using Perl/Database.Miniproject on Employee Management using Perl/Database.
Miniproject on Employee Management using Perl/Database.
 
Quality code by design
Quality code by designQuality code by design
Quality code by design
 
WordPress Cuztom Helper
WordPress Cuztom HelperWordPress Cuztom Helper
WordPress Cuztom Helper
 
Therapeutic refactoring
Therapeutic refactoringTherapeutic refactoring
Therapeutic refactoring
 
Convidar para page !!
Convidar para page !!Convidar para page !!
Convidar para page !!
 
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
QNlocal: Docker, Continuous Integration, WordPress e milioni di visite. Si è ...
 
$.Template
$.Template$.Template
$.Template
 
Build a better UI component library with Styled System
Build a better UI component library with Styled SystemBuild a better UI component library with Styled System
Build a better UI component library with Styled System
 
Just css results dogmeat template validator
Just css results dogmeat template validatorJust css results dogmeat template validator
Just css results dogmeat template validator
 
Extending Moose
Extending MooseExtending Moose
Extending Moose
 
Se meu elefante falasse
Se meu elefante falasseSe meu elefante falasse
Se meu elefante falasse
 
Sencha Touch
Sencha TouchSencha Touch
Sencha Touch
 
R57php 1231677414471772-2
R57php 1231677414471772-2R57php 1231677414471772-2
R57php 1231677414471772-2
 
The Benefits of Juicing
The Benefits of JuicingThe Benefits of Juicing
The Benefits of Juicing
 

Viewers also liked (6)

Dart JUG 2013
Dart JUG 2013Dart JUG 2013
Dart JUG 2013
 
Openscales Foss4g 2010 presentation
Openscales Foss4g 2010 presentationOpenscales Foss4g 2010 presentation
Openscales Foss4g 2010 presentation
 
Resthub framework presentation
Resthub framework presentationResthub framework presentation
Resthub framework presentation
 
Presentation DVCS - Git - Mercurial au LyonJug
Presentation DVCS - Git - Mercurial au LyonJugPresentation DVCS - Git - Mercurial au LyonJug
Presentation DVCS - Git - Mercurial au LyonJug
 
Resthub lyonjug
Resthub lyonjugResthub lyonjug
Resthub lyonjug
 
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...Support de cours EJB 3 version complète Par Mr  Youssfi, ENSET, Université Ha...
Support de cours EJB 3 version complète Par Mr Youssfi, ENSET, Université Ha...
 

Similar to Dart : one language to rule them all - MixIT 2013

Dart, Darrt, Darrrt
Dart, Darrt, DarrrtDart, Darrt, Darrrt
Dart, Darrt, Darrrt
Jana Moudrá
 
GDG DART Event at Karachi
GDG DART Event at KarachiGDG DART Event at Karachi
GDG DART Event at Karachi
Imam Raza
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
guest5d87aa6
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
sblackman
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
Dmitry KODer
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
Justin Cataldo
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
Anthony Montalbano
 

Similar to Dart : one language to rule them all - MixIT 2013 (20)

Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore
Learn Dart And Angular, Get Your Web Development Wings With Kevin MooreLearn Dart And Angular, Get Your Web Development Wings With Kevin Moore
Learn Dart And Angular, Get Your Web Development Wings With Kevin Moore
 
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, GermanyLet's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
Let's write secure Drupal code! - 13.09.2018 @ Drupal Europe, Darmstadt, Germany
 
Dart, Darrt, Darrrt
Dart, Darrt, DarrrtDart, Darrt, Darrrt
Dart, Darrt, Darrrt
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
Django - Framework web para perfeccionistas com prazos
Django - Framework web para perfeccionistas com prazosDjango - Framework web para perfeccionistas com prazos
Django - Framework web para perfeccionistas com prazos
 
Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?Data Binding: Is It the Next Big Thing?
Data Binding: Is It the Next Big Thing?
 
J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012J query b_dotnet_ug_meet_12_may_2012
J query b_dotnet_ug_meet_12_may_2012
 
Rapid web development, the right way.
Rapid web development, the right way.Rapid web development, the right way.
Rapid web development, the right way.
 
Dartprogramming
DartprogrammingDartprogramming
Dartprogramming
 
Guia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open SourceGuia de Sobrevivência JS no mundo Open Source
Guia de Sobrevivência JS no mundo Open Source
 
Pengenalan AngularJS
Pengenalan AngularJSPengenalan AngularJS
Pengenalan AngularJS
 
GDG DART Event at Karachi
GDG DART Event at KarachiGDG DART Event at Karachi
GDG DART Event at Karachi
 
Let's write secure Drupal code! - DrupalCamp Oslo, 2018
Let's write secure Drupal code! - DrupalCamp Oslo, 2018Let's write secure Drupal code! - DrupalCamp Oslo, 2018
Let's write secure Drupal code! - DrupalCamp Oslo, 2018
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
Evrone.ru / BEM for RoR
Evrone.ru / BEM for RoREvrone.ru / BEM for RoR
Evrone.ru / BEM for RoR
 
HTML5 - Pedro Rosa
HTML5 - Pedro RosaHTML5 - Pedro Rosa
HTML5 - Pedro Rosa
 
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Your Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages SuckYour Custom WordPress Admin Pages Suck
Your Custom WordPress Admin Pages Suck
 

Recently uploaded

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
A Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source MilvusA Beginners Guide to Building a RAG App Using Open Source Milvus
A Beginners Guide to Building a RAG App Using Open Source Milvus
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Dart : one language to rule them all - MixIT 2013