join the dart side of web development - giovanni laquidara - codemotion milan 2014

Giovanni Laquidara

Join the Dart Side of Web Development.

[email protected] - Google Developer Group Roma

MILAN november 28th/29th 2014

mailto:[email protected]

MILAN november 28th/29th 2014 – Speaker's name

require.js

Backbone

Backbone Marionette

jQuery

Modernizr

moment.js

dest templates

PhantomJS

JasmineDocs

Docs

Docs

Docs

Docs

Docs

Docs

Docs

Docs


● Language ● Libraries ● Tools ● Compilation to Javascript


Dart is open source ● BSD-style license ● dart.googlecode.com ● GitHub mirror ● Contributing guide ● ECMA Standard (TC52) ● Production ready (1.8)


Compile to JavaScript, runs across the modern web


Run Dart on the server with

the Dart VM

MILAN november 28th/29th 2014 – Speaker's name import 'dart:math' show Random; // Import a class from a library.

void main() { // The app starts executing here. print(new Dice(n: 12).roll()); // Print a new object's value.}

class Dice { // Define a class. static Random shaker = new Random(); // Define a class variable. int sides, value; // Define instance variables.

String toString() => '$value'; // Define a method using shorthand syntax.

Dice({int n: 6}) { // Define a constructor. if (4 <= n && n <= 20) { sides = n; } else { throw new ArgumentError(/* */); // Support for errors and exceptions. } } int roll() { // Define an instance method. return value = shaker.nextInt(sides) + 1; // Get a random number. }}

MILAN november 28th/29th 2014 – Speaker's name class Hug { num strength;}

MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength;

num get strength { // some code return this._strength; } set strength(num value) { // do something with value; this._strength = value; }

}


Hug(strength) { this._strength = strength; }

Hug.light(strength) { this._strength = 0; }

}


Hug(this._strength);

}


Hug(this._strength);

Hug operator +(Hug other) { return new Hug(strength + other.strength); }}


var button = new ButtonElement();button.id = 'fancy';button.text = 'Click Point';button.classes.add('important');button.onClick.listen((e) => addTopHat());

parentElement.children.add(button);


var button = new ButtonElement();..id = 'fancy';..text = 'Click Point';..classes.add(‘important');..onClick.listen((e) => addTopHat());

parentElement.children.add(button);


Missing getter?

"Coffee".missing // ??

Class 'String' has no instance getter 'missing'.

NoSuchMethodError : method not found: 'missing' Receiver: "Coffee" Arguments: []


String compared to number?

“2” > 1 // ??

Unhandled exception: Class 'String' has no instance method '>'.

NoSuchMethodError : method not found: '>' Receiver: "2" Arguments: [1]


Lexical Closures?

var talk = (s) => print(s); talk("Hi there");


void main() { String name = "Giovanni Laquidara"; print(initials(name));}

String initials(String name) { StringBuffer retValue = new StringBuffer(); name.split(" ").forEach( (String part ) { retValue.write(part[0] + '.'); }); return retValue.toString();}


main() { var name = "Giovanni Laquidara"; print(initials(name));}

initials(name) { var retValue = new StringBuffer(); name.split(" ").forEach( ( part ) { retValue.write(part[0] + '.'); }); return retValue.toString();}

MILAN november 28th/29th 2014 – Speaker's name import 'dart:html';

InputElement toDoInput;UListElement toDoList;

void main() { toDoInput = querySelector("#to-do-input"); toDoList = querySelector("#to-do-list"); toDoInput.onChange.listen(addToDoItem);}

void addToDoItem(Event event) { LIElement newToDo = new LIElement(); newToDo.text = toDoInput.value; toDoInput.value = ''; toDoList.children.add(newToDo);}


import 'dart:async' show Future, Completer;

void main() { loadNews().then( (news) { //Do something with news }); print("Just print!");}

Future loadNews() { Completer completer = new Completer(); //Insert very slow process here completer.complete(); return completer.future;}


import 'dart:io';

main() { HttpServer.bind(InternetAddress.LOOPBACK_IP_V4, 4040) .then((HttpServer server) { print('listening on localhost, port ${server.port}'); server.listen((HttpRequest request) { request.response.write('Hello, world!'); request.response.close(); }); }).catchError((e) => print(e.toString()));}


Use the tools you already know


Pub

+1500 Packages

https://pub.dartlang.org/


name: gdghuntdescription: A application using google play game servicesversion: 0.1.0author: Giovanni Laquidaradependencies: googleapis: any googleapis_auth: any browser: any core_elements: ">=0.2.0 <0.3.0" polymer: ">=0.12.0 <0.13.0" paper_elements: ">=0.1.0 <0.2.0"

pubspec.yaml


main Library

baz foo bar boo

imports

callsbaz

main foo bar

Tree shakingdart2js

The web is full of links, yet web dev has no linker


(bigger is better)

https://www.dartlang.org/performance


https://www.dartlang.org/cloud/


http://goo.gl/xpFhgY


Designed for Dart: use classes, annotations, and more. Build apps that scale.

AngularDart brings the proven Angular philosophy of testable, succinct web development to Dart.

AngularDart embraces modern web platform features, starting with Shadow DOM and Web Components.


Polymer

https://www.dartlang.org/polymer/

MILAN november 28th/29th 2014 – Speaker's name And Games?


Homepage: https://dartlang.org API Reference: https://api.dartlang.org

Pub Packages: https://pub.dartlang.org


Giovanni Laquidara +GiovanniLaquidara @joaolaq joaobiriba

http://roma.gdg.io/

thanks() => new FeedBack();

getQuestions().then( (what) { answer(what); });

join the dart side of web development - giovanni laquidara - codemotion milan 2014

Technology