Join the Dart Side of Web Development ( Codemotion Naples Tech Meetup 2015 )

Presenting an alternative way to develop Web App : Dart

Transcript

1. Giovanni Laquidara Join the Dart Side of Web Development. glaquidara@gmail.com - Google Developer Group Roma Naples February 25th 2015
2. MILAN november 28th/29th 2014 – Speaker's name
3. MILAN november 28th/29th 2014 – Speaker's name
4. MILAN november 28th/29th 2014 – Speaker's name require.js
5. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone
6. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette
7. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery
8. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr
9. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js
10. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates
11. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS
12. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine
13. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs
14. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs
15. MILAN november 28th/29th 2014 – Speaker's name require.js Backbone Backbone Marionette jQuery Modernizr moment.js dest templates PhantomJS Jasmine Docs Docs Docs Docs Docs Docs Docs Docs Docs
16. MILAN november 28th/29th 2014 – Speaker's name • Language • Libraries • Tools • Compilation to Javascript
17. MILAN november 28th/29th 2014 – Speaker's name Dart is open source • BSD-style license • dart.googlecode.com • GitHub mirror • Contributing guide • ECMA Standard (TC52) • Production ready (1.8)
18. MILAN november 28th/29th 2014 – Speaker's name Compile to JavaScript, runs across the modern web
19. MILAN november 28th/29th 2014 – Speaker's name Run Dart on the server with the Dart VM
20. 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. } }
21. MILAN november 28th/29th 2014 – Speaker's name class Hug { num strength; }
22. 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; } }
23. MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength; Hug(strength) { this._strength = strength; } Hug.light(strength) { this._strength = 0; } }
24. MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength; Hug(this._strength); }
25. MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength; Hug(this._strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } }
26. MILAN november 28th/29th 2014 – Speaker's name var button = new ButtonElement(); button.id = 'fancy'; button.text = 'Click Point'; button.classes.add('important'); button.onClick.listen((e) => addTopHat()); parentElement.children.add(button);
27. MILAN november 28th/29th 2014 – Speaker's name var button = new ButtonElement(); ..id = 'fancy'; ..text = 'Click Point'; ..classes.add(‘important'); ..onClick.listen((e) => addTopHat()); parentElement.children.add(button);
28. MILAN november 28th/29th 2014 – Speaker's name Missing getter? "Coffee".missing // ??
29. MILAN november 28th/29th 2014 – Speaker's name Missing getter? "Coffee".missing // ??
30. MILAN november 28th/29th 2014 – Speaker's name Missing getter? "Coffee".missing // ?? Class 'String' has no instance getter 'missing'. NoSuchMethodError : method not found: 'missing' Receiver: "Coffee" Arguments: []
31. MILAN november 28th/29th 2014 – Speaker's name String compared to number? “2” > 1 // ??
32. MILAN november 28th/29th 2014 – Speaker's name String compared to number? “2” > 1 // ??
33. MILAN november 28th/29th 2014 – Speaker's name String compared to number? “2” > 1 // ?? Unhandled exception: Class 'String' has no instance method '>'. NoSuchMethodError : method not found: '>' Receiver: "2" Arguments: [1]
34. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures?
35. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures? var talk = (s) => print(s); talk("Hi there");
36. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures? var talk = (s) => print(s); talk("Hi there");
37. MILAN november 28th/29th 2014 – Speaker's name 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(); }
38. MILAN november 28th/29th 2014 – Speaker's name
39. MILAN november 28th/29th 2014 – Speaker's name
40. MILAN november 28th/29th 2014 – Speaker's name 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(); }
41. MILAN november 28th/29th 2014 – Speaker's name
42. MILAN november 28th/29th 2014 – Speaker's name
43. 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); }
44. MILAN november 28th/29th 2014 – Speaker's name
45. MILAN november 28th/29th 2014 – Speaker's name
46. MILAN november 28th/29th 2014 – Speaker's name
47. MILAN november 28th/29th 2014 – Speaker's name 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; }
48. MILAN november 28th/29th 2014 – Speaker's name 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())); }
49. MILAN november 28th/29th 2014 – Speaker's name Use the tools you already know
50. MILAN november 28th/29th 2014 – Speaker's name Pub +1500 Packages https://pub.dartlang.org/
51. MILAN november 28th/29th 2014 – Speaker's name name: gdghunt description: A application using google play game services version: 0.1.0 author: Giovanni Laquidara dependencies: 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
52. MILAN november 28th/29th 2014 – Speaker's name main Library baz foo bar boo imports calls baz main foo bar Tree shaking dart2js The web is full of links, yet web dev has no linker
53. MILAN november 28th/29th 2014 – Speaker's name (bigger is better) https://www.dartlang.org/performance
54. MILAN november 28th/29th 2014 – Speaker's name https://www.dartlang.org/cloud/
55. MILAN november 28th/29th 2014 – Speaker's name http://goo.gl/xpFhgY
56. MILAN november 28th/29th 2014 – Speaker's name
57. MILAN november 28th/29th 2014 – Speaker's name
58. MILAN november 28th/29th 2014 – Speaker's name
59. MILAN november 28th/29th 2014 – Speaker's name
60. MILAN november 28th/29th 2014 – Speaker's name
61. MILAN november 28th/29th 2014 – Speaker's name
62. MILAN november 28th/29th 2014 – Speaker's name Designed for Dart: use classes, annotations, and more. Build apps that scale.
63. MILAN november 28th/29th 2014 – Speaker's name 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.
64. MILAN november 28th/29th 2014 – Speaker's name 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.
65. MILAN november 28th/29th 2014 – Speaker's name Polymer https://www.dartlang.org/polymer/
66. MILAN november 28th/29th 2014 – Speaker's name Polymer https://www.dartlang.org/polymer/
67. MILAN november 28th/29th 2014 – Speaker's name Polymer https://www.dartlang.org/polymer/
68. MILAN november 28th/29th 2014 – Speaker's name Polymer https://www.dartlang.org/polymer/
69. MILAN november 28th/29th 2014 – Speaker's name And Games?
70. MILAN november 28th/29th 2014 – Speaker's name
71. MILAN november 28th/29th 2014 – Speaker's name Homepage: https://dartlang.org API Reference: https://api.dartlang.org Pub Packages: https://pub.dartlang.org
72. MILAN november 28th/29th 2014 – Speaker's name Giovanni Laquidara +GiovanniLaquidara @joaolaq joaobiriba thanks() => new FeedBack(); getQuestions().then( (what) { answer(what); });