![Page 1: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/1.jpg)
Chris Buckett | Entity Group
Bringing your app to the web with Dart
![Page 2: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/2.jpg)
Why I'm here…
![Page 3: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/3.jpg)
Dart: Solving real problems
Fast Language optimized for a fast Virtual Machine
Complex Team working and communication
Browser Runs in the browser, as JavaScript or Dart
AppsIdeal for modern single-page applications with Web Components
![Page 4: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/4.jpg)
Fast
https://www.dartlang.org/performance/
Dart VM
dart2js
JS V8
• Snapshots• VM Runtime• JavaScript
![Page 5: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/5.jpg)
Snapshots
• Uses the browsers caching mechanism• Stores a serialized form of the heap
• This results in Faster Startup Times
![Page 6: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/6.jpg)
Optimized VM• No monkey patching
objects
• No prototype chain
• Growable and fixed size arrays
• Integer and Double types
• SIMD Support
![Page 7: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/7.jpg)
Dart as JavaScript
• Design goal to always target JavaScript
• Can sometimes be faster than hand-written JavaScriptexample…– Null checks (final keyword)– Bounds checks (fixed length lists)
![Page 8: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/8.jpg)
Building complex apps• Communicate intent to tools and humans...
• Modular by design…
• Great tool ecosystem…
by using the optional type system
with libraries and packages
editor, debugger, doc tool, "Dartium"server-side VM, test framework,package manager…
![Page 9: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/9.jpg)
Let's see some Java
class Person {
String _name; String getName() { return _name; } Person(String name) { this._name = name; } }
Dart
This is also valid Java: http://ideone.com/F0e2TD
"Private" denoted by underscore
Traditional use of "this"
Inherits from "Object" by default
String get name => _name;set name(String value) => _name = value;
Getter and setter syntax
Single-line function syntax (lambda)Person(String this._name);
Automatic field initialization
![Page 10: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/10.jpg)
Communicating intent…….to humans and tools
var greet = function(person, greeting) { var result = greeting + " " + person.name; return result;}
What is a person type?
What is a greeting type?
What is the return type?
How can we be sure that greet is always a function type?
Is .name a valid property of person?
(this is JavaScript)
![Page 11: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/11.jpg)
var greet = function(person, greeting) { // @type {string} var result = greeting + " " + person.name; return result;}
/** * @param {Person} person The person to greet * @param {string} greeting The greeting message * @return {string} The personalized message */
Communicating intent…….to humans and tools
Adding annotations is fine…
But why not bake it into the language…
(this is JavaScript with annotations)
![Page 12: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/12.jpg)
Communicating intent…….to humans and tools
We've turned to the Dart slide…
String greet(Person person, String greeting) { var result = greeting + " " + person.name; return result;}
Type information on the surface area of your API
Lets tools validate this…
… and validate calling code.
greet(person, greeting) {
![Page 13: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/13.jpg)
Optional Typing
class Person { var _name; get name => _name; Person(this._name); }
main() { var p = new Person('Chris'); print(p.name);}
Great for experimenting(but give add typeannotations later)
Type annotations add no value here, keep it var
All Dart programs start with a main() function…
![Page 14: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/14.jpg)
Class based, but also Functional
main { var greeting = "Hello";
var handler = (event) { print(greeting);}
someButton.on.click(handler);
}
Closures are great for event based programming
Storing a function in the handler variable
greeting is stored in the closure
Pass the handler function as an argument
otherButton.on.click((event) { print(greeting);});
Even just pass the function anonymously
![Page 15: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/15.jpg)
What else does Dart have…?
• Interfaces
• Futures
• Generics
• Concurrency
• Reflection
class Person implements Serializable {…}
doAsync().then((result) { … } );
do something with result
var map = new Map<String, Person>();
port.send("Hello..");
instance.invoke('sayHello',[…]);
![Page 16: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/16.jpg)
Libraries and Packages• Libraries are "designed" into the language
library data_model;
import 'dart:convert';import 'package:myapp/data_access.dart';
part 'src/customer.dart';part 'src/order.dart';
// other code…
Give a library a name
Import other libraries
Multiple libraries can go in a package
You can split a library across multiple files
![Page 17: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/17.jpg)
What about the tool ecosystem?
Editor…
Debugger…
Dart2jsPub package manager
![Page 18: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/18.jpg)
Web Components for the UI
• Create your own arbitrary complex HTML tags
• Powered with HTML, CSS and Dart – (or JavaScript…)
• Umbrella term for a number of technologies– Shadow DOM– HTML Imports– Templates
![Page 19: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/19.jpg)
Anatomy of a Web Component<polymer-element name='tweet-this' attributes='url'> <template> <style> … </style> <div> <button on-click="doTweet">Tweet This</button> </div> </template> <script type='application/dart'> import 'package:polymer/ploymer.dart'; @CustomTag('tweet-this') class TweetThis extends PolymerElement { String url; void doTweet() { // send a tweet… } } </script></polymer-element>
Uses the Polymer framework
<tweet-this url='http://foo.com'></tweet-this>
Public API
Template defines what it looks like
Script defines how it works
![Page 20: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/20.jpg)
<html><head> <link rel='import' href='awesome.html'> <link rel='import' href='funky.html'></head><body><awesome-app> <awesome-login></awesome-login> <funky-menu> <funky-item link='home'></funky-item> <funky-item link='orders'></funky-item> <funky-item link='products'></funky-item> </funky-menu> <awesome-content nav='home'></awesome-content></awesome-app></body></html>
Arbitrarily complex tags
<html><head> <import rel='import' href='awesome.html'> </head><body>
<awesome-app></awesome-app></body></html>
![Page 21: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/21.jpg)
Summary
• Dart is great for building Fast, complex, browser apps
• Web Components using Polymer, provide a new UI layer for the web
• There are great tools to help you develop Dart apps
![Page 22: Bringing your app to the web with Dart - Chris Buckett (Entity Group)](https://reader033.vdocument.in/reader033/viewer/2022052618/554cc240b4c905aa608b57e6/html5/thumbnails/22.jpg)
Where to find out more…
• www.dartlang.org• #dartlang
• @chrisdoesdev