Date post: | 03-Apr-2018 |
Category: |
Documents |
Upload: | michaelw97220 |
View: | 223 times |
Download: | 0 times |
of 55
7/28/2019 Dart Presentation to SVForum
1/55
DartSV Forum, 2012/03
Seth Ladd, Developer Advocate, Dart
7/28/2019 Dart Presentation to SVForum
2/55
Why Dart?
More developers writing more awesome apps for the we
7/28/2019 Dart Presentation to SVForum
3/55
#dartlang
10-100 LOC 1M LOC
Scale Lines of Code
7/28/2019 Dart Presentation to SVForum
4/55
#dartlang
Familiar
7/28/2019 Dart Presentation to SVForum
5/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
6/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
7/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
8/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
9/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
10/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
11/55
Cuddle time
#dartlang
class Hug {
final num strength;
Hug(this.strength);
Hug.bear() : strength = 100;
Hug operator +(Hug other) {
return new Hug(strength + other.strength);
}
void patBack({int hands: 1}) {// ...
}
String toString() => "Embraceometer reads $strength";
}
7/28/2019 Dart Presentation to SVForum
12/55
Cuddle time
#dartlang
main() {
var small = new Hug(2);
var big = new Hug.bear();
var together = small + big;
print(together); // Embraceometer reads
}
7/28/2019 Dart Presentation to SVForum
13/55
Mixins
#dartlang
Dartabstract class Persistence {
void save(String filename) {print('saving the object as ${toJson()}
');
}
void load(String filename) {
print('loading from $filename');
}
Object toJson();
}
class Ninja extends Objectw{
Map toJson() {
return {'throwing_stars'
}
}
main() {
var snakeEyes = new Ninja(
snakeEyes.save('file.txt')
}
7/28/2019 Dart Presentation to SVForum
14/55
Easier to understand
numrecalculate(Point origin, numoffset{bool estimate: false})
...
}
Withorecalculate(origin, offset, estimate) {
...}
#dartlang
7/28/2019 Dart Presentation to SVForum
15/55
Lexical this. WYSIWYG.
#dartlang
class AwesomeButton {
int awesomeDial;
ButtonElement elem;
AwesomeButton(this.elem) {
elem.onClick.listen((e) => crankTheAwesome());
}
crankTheAwesome() {
awesomeDial = 11;
}
}
7/28/2019 Dart Presentation to SVForum
16/55
Lexical this. WYSIWYG.
#dartlang
class AwesomeButton {
int awesomeDial;
ButtonElement elem;
AwesomeButton(this.elem) {
elem.onClick.listen((e) => crankTheAwesome());
}
crankTheAwesome() {
awesomeDial = 11;
}
}
7/28/2019 Dart Presentation to SVForum
17/55
Fields evolve with getters/sette
#dartlang
class Car {bool isEngineRunning;
}
var roadster = new Car();
roadster.isEngineRunning = true;
7/28/2019 Dart Presentation to SVForum
18/55
Fields evolve with getters/sette
#dartlang
class Car {
Engine engine;
bool get isEngineRunning => engine.isRunning;
void set isEngineRunning(bool isRunning) {
engine.isRunning = isRunning;
}
}
var roadster = new Car();
roadster.isEngineRunning = true; // same as befor
7/28/2019 Dart Presentation to SVForum
19/55
Futures
#dartlang
Future lengthyComp();
// Consume a Future
Future doLengthyComputation() {return lengthyComp().then((value) => print(value))
.catchError((e) => print(e));
}
// Produce a Future
Future queryDb(String sql) {
var completer = new Completer();
dbConnection.query(sql,
(results) => completer.complete(results),
(error) => completer.completeError(error));
return completer.future;
}
7/28/2019 Dart Presentation to SVForum
20/55
Futures
#dartlang
DartFuture costlyQuery();
Future expensiveSearch();
Future lengthyCalc();
// Chaining multiple Futures
costlyQuery()
.then((results) => expensiveSearch(results))
.then((results) => lengthyCalc(results))
.then((results) => print(results))
.catchError(print);
// Or...
costlyQuery()
.then(expensiveSea
.then(lengthyCalc)
.then(print)
.catchError(print)
7/28/2019 Dart Presentation to SVForum
21/55
Streams
#dartlang
Stream hugs();
hugs().listen((hug) => embrace(hug));
// Or
hugs()
.where((hug) => !hug.isBearHug)
.map((hug) => new Hug.bear(hug))
.listen(embrace,
onError: (e) => handleError(e),
onDone: () => smile());
7/28/2019 Dart Presentation to SVForum
22/55
Streams
#dartlang
element.onClick.listen(handleClick);
HttpServer.bind('127.0.0.1', port).then((HttpServer server) {
print('listening for connections on $port');
server.listen((HttpRequest request) {
fileHandler.onRequest(request);
});
},
onError: (error) => print("Error starting HTTP server: $error"));
7/28/2019 Dart Presentation to SVForum
23/55
#dartlang
import 'dart:html';
void main() {var button = new ButtonElement();
button.id = 'activate';
button.text = 'Click me';
button.classes.add('important');
button.onClick.listen((e) => window.alert('Clic
document.body.children.add(button);
}
Cleaned up DOM
7/28/2019 Dart Presentation to SVForum
24/55
#dartlang
import 'dart:html';
void main() {var button = new ButtonElement()
..id = 'activate'
..text = 'Click me'
..classes.add('important')
..onClick.listen((e) => window.alert('Clicked
document.body.children.add(button);
}
Method Cascades
7/28/2019 Dart Presentation to SVForum
25/55
#dartlang
// Traditionally:navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.msGetUserMedia);
navigator.getMedia (// constraints{video: true, audio: true},// successCallbackfunction(localMediaStream) {
var video = document.querySelector('video');video.src = window.URL.createObjectURL(localMediaStream);video.onloadedmetadata = function(e) {
// Do something with the video here.};
},// errorCallbackfunction(err) {console.log("The following error occured: " + err);}
);
Traditional async APIs
7/28/2019 Dart Presentation to SVForum
26/55
#dartlang
// With Dart:window.navigator.getUserMedia(audio:true, video:
.then((stream) {var video = new VideoElement()..autoplay = true..src = Url.createObjectUrl(stream)..onLoadedMetadata.listen((e) => /* ... */
document.body.append(video);
}).catchError(reportIssue);
Future-based APIs
7/28/2019 Dart Presentation to SVForum
27/55
#dartlang
var req = new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState == 4) {
if (req.status == 200) {
var elem = document.getElementById("myDiv");
elem.innerHTML = req.responseText;
} else {
console.log(req.status);
}
}
req.open("GET", "data.txt", true);
req.send();
Traditional XHR
7/28/2019 Dart Presentation to SVForum
28/55
#dartlang
HttpRequest.getString("data.txt")
.then((String result) {var elem = query("#myDiv");
elem.text = result;
})
.catchError(print);
Future-based (X)HR
7/28/2019 Dart Presentation to SVForum
29/55
#dartlang
7/28/2019 Dart Presentation to SVForum
30/55
#dartlang
Dart source
code
dart2js
JavaScript
source code
Dart Virtual Machine
7/28/2019 Dart Presentation to SVForum
31/55
JS: 31115
JS + gzip: 7175 JS + minification: 15644
JS + minification + gzip: 5184
Generated JS size
#dartlang
import 'dart:html';
main() {var elem = query('#fooelem.text = 'hello, wor
}
7/28/2019 Dart Presentation to SVForum
32/55
#dartlang
7/28/2019 Dart Presentation to SVForum
33/55
#dartlang
Dart source codedart2js
JavaScript source
code
Source map
Ch
7/28/2019 Dart Presentation to SVForum
34/55
#dartlang
Code com
Refactorin
Debugging
Static ana
D l d i
7/28/2019 Dart Presentation to SVForum
35/55
#dartlang
Dart also supported in:
7/28/2019 Dart Presentation to SVForum
36/55
#dartlang
js.scoped(() {
var maps = js.context.google.maps;
// Allocate a new JS Map
var myOptions = js.map({
'zoom': 9,
'mapTypeId': maps.MapTypeId.ROADMAP,
'center': new js.Proxy(maps.LatLng, 47.6097, -122.3331)
});
var map = new js.Proxy(maps.Map, query('#map_canvas'), myOptions)
Dart-JavaScript Interop
You decide:
7/28/2019 Dart Presentation to SVForum
37/55
#dartlang
Please fill out the TPS re 2012-10-03
I'm going to have to ask y
Reminder: fill out that TP 2012-10-04
It's been 24 hours...
...
You decide:
7/28/2019 Dart Presentation to SVForum
38/55
#dartlang
Web UI is a polyfill for Web Components, a
Dynamic data-driven views, live two-way data Observable objects and expressions Fast developer cycles Compiles to vanilla JavaScript and HTML
D t Bi di
7/28/2019 Dart Presentation to SVForum
39/55
#dartlang
Data Binding
C diti l
7/28/2019 Dart Presentation to SVForum
40/55
#dartlang
Conditionals
It ti
7/28/2019 Dart Presentation to SVForum
41/55
#dartlang
Iteration
C t El t Th
7/28/2019 Dart Presentation to SVForum
42/55
#dartlang
Custom Elements - The page
C stom Elements
7/28/2019 Dart Presentation to SVForum
43/55
#dartlang
Custom Elements -
Custom Elements The code
7/28/2019 Dart Presentation to SVForum
44/55
#dartlang
Custom Elements - The code
D ' b dl d lib i
7/28/2019 Dart Presentation to SVForum
45/55
Dart's bundled libraries
Core lib
HTML Crypto
JSON
Mirrors
UTF
#dartlang
Unit test and mo
Math Logging
URI
I18N
More
D ' i lib i
7/28/2019 Dart Presentation to SVForum
46/55
Dart's community libraries
MongoDB
Redis BOT
vector_math
game_loop
gl_enum
#dartlang
dbcrypt
UUID Stream web serv
Widgets
OAuth2 client
Many more
Active community involvement at pub.dartlang.org
B h k t ki d tl
http://pub.dartlang.org/http://www.dartlang.org/performance/7/28/2019 Dart Presentation to SVForum
47/55
Benchmark tracking dartlang
http://www.dartlang.org/performance/7/28/2019 Dart Presentation to SVForum
48/55
SIMD in Dart
New types
Float32x4 Float32x4List
Uint32x4
Composable operations
Arithmetic Logical
Comparisons
Reordering (shuffling)
4 Unsigned 32-bit Integer Numbers
List of Float32x4
4 IEEE-754 32-bit Floating Point Numbers
SIMD B h k
7/28/2019 Dart Presentation to SVForum
49/55
SIMD Benchmarks
7/28/2019 Dart Presentation to SVForum
50/55
Dart on the server
Pub
Testing
Isolates (concurrency)
Core libraries
Generics
Mirrors (aka reflection)
Many other language features
Lots more...
Topics not covered
7/28/2019 Dart Presentation to SVForum
51/55
Launch 1.0 this year
VM integration with Chrome
Better lang support for async (await?) (??)
Plans for the future
7/28/2019 Dart Presentation to SVForum
52/55
Resources
Web UI Intro
Web UI Spec Style guide
Idiomatic Dart
Improving the DOM
Dart Language Tour
All articles
+Dart on Google+
dartlang.org
Read more
http://google.com/+dartlanghttp://idiomatic.dart-lang.appspot.com/articles/http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.htmlhttps://www.dartlang.org/articles/idiomatic-dart/https://www.dartlang.org/articles/style-guide/http://www.dartlang.org/articles/dart-web-components/spec.htmlhttp://www.dartlang.org/http://google.com/+dartlanghttp://idiomatic.dart-lang.appspot.com/articles/http://www.dartlang.org/docs/dart-up-and-running/contents/ch02.htmlhttps://www.dartlang.org/articles/improving-the-dom/https://www.dartlang.org/articles/idiomatic-dart/https://www.dartlang.org/articles/style-guide/http://www.dartlang.org/articles/dart-web-components/spec.htmlhttp://www.dartlang.org/articles/dart-web-components/7/28/2019 Dart Presentation to SVForum
53/55
#dartlang
Read more
7/28/2019 Dart Presentation to SVForum
54/55
Thank You!
Find us at dartlang.org
Dart is more ambitio s
7/28/2019 Dart Presentation to SVForum
55/55
Tree shaking
Getters and setters (though I presume
TypeScript will get those eventually)
Operator overloading
Real block scope, no hoisting, no IIFEs
A native VM
Sane equality semantics
No weird implicit conversion craziness
Lexically bound this everywhere
Dart is more ambitious
#d tl
Mixins
Annotations
An import system
User-defined subscript op
Generics, with reification
Mirrors
Better collection classes
A cleaner DOM API