Upload
jaxlondonconference
View
5.494
Download
1
Embed Size (px)
DESCRIPTION
Presented at JAX London 2013 Building complex applications in the browser is hard especially when you are working in teams. Dart is ideal for developing the next generation of web applications in an enterprise environment, by allowing you to communicate type information to your fellow developers and automated tools. With familiar (but lightweight) syntax, class-based OOP and a type system that allows tooling, Java developers will quickly feel at home with Dart.
Citation preview
Chris Buckett | Entity Group
Bringing your app to the web with Dart
Why I'm here…
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
Fast
https://www.dartlang.org/performance/
Dart VM
dart2js
JS V8
• Snapshots• VM Runtime• JavaScript
Snapshots
• Uses the browsers caching mechanism• Stores a serialized form of the heap
• This results in Faster Startup Times
Optimized VM• No monkey patching
objects
• No prototype chain
• Growable and fixed size arrays
• Integer and Double types
• SIMD Support
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)
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…
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
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)
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)
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) {
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…
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
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',[…]);
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
What about the tool ecosystem?
Editor…
Debugger…
Dart2jsPub package manager
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
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
<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>
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
Where to find out more…
• www.dartlang.org• #dartlang
• @chrisdoesdev