Join the Dart side of Web Development 2 ( Use the Force )

Talk about Dart, StageXL, Polymer.Dart, Force Framework @ Codemotion Rome 2015

Transcript

1. Giovanni Laquidara Join the Dart Side of Web Development 2 ( Use the Force ). glaquidara@gmail.com - Google Developer Group Roma Rome March 27th 2015
2. MILAN november 28th/29th 2014 – Speaker's name What!?! Do you need a Web App?
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
16. MILAN november 28th/29th 2014 – Speaker's name
17. MILAN november 28th/29th 2014 – Speaker's name • Language • Libraries • Tools • Compilation to Javascript
18. 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.9.1)
19. MILAN november 28th/29th 2014 – Speaker's name Compile to JavaScript, runs across the modern web
20. MILAN november 28th/29th 2014 – Speaker's name
21. MILAN november 28th/29th 2014 – Speaker's name Run Dart on the server with the Dart VM
22. 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. } }
23. MILAN november 28th/29th 2014 – Speaker's name class Hug { num strength; }
24. 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; } }
25. MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength; Hug(strength) { this._strength = strength; } Hug.light(strength) { this._strength = 0; } }
26. MILAN november 28th/29th 2014 – Speaker's name class Hug { num _strength; Hug(this._strength); }
27. 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); } }
28. 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);
29. 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);
30. MILAN november 28th/29th 2014 – Speaker's name Missing getter? "Coffee".missing // ??
31. MILAN november 28th/29th 2014 – Speaker's name Missing getter? "Coffee".missing // ??
32. 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: []
33. MILAN november 28th/29th 2014 – Speaker's name String compared to number? “2” > 1 // ??
34. MILAN november 28th/29th 2014 – Speaker's name String compared to number? “2” > 1 // ??
35. 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]
36. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures?
37. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures? var talk = (s) => print(s); talk("Hi there");
38. MILAN november 28th/29th 2014 – Speaker's name Lexical Closures? var talk = (s) => print(s); talk("Hi there");
39. 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(); }
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 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); }
42. 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; }
43. MILAN november 28th/29th 2014 – Speaker's name Old Style Async
44. MILAN november 28th/29th 2014 – Speaker's name …2 Days Ago….Brand New Async
45. 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())); }
46. MILAN november 28th/29th 2014 – Speaker's name Use the tools you already know
47. MILAN november 28th/29th 2014 – Speaker's name Pub +1500 Packages https://pub.dartlang.org/
48. 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
49. 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
50. MILAN november 28th/29th 2014 – Speaker's name (bigger is better) https://www.dartlang.org/performance
51. MILAN november 28th/29th 2014 – Speaker's name https://www.dartlang.org/cloud/
52. MILAN november 28th/29th 2014 – Speaker's name http://goo.gl/xpFhgY
53. MILAN november 28th/29th 2014 – Speaker's name Polymer
54. MILAN november 28th/29th 2014 – Speaker's name Web Components
55. MILAN november 28th/29th 2014 – Speaker's name
56. MILAN november 28th/29th 2014 – Speaker's name The Polymer Stack
57. MILAN november 28th/29th 2014 – Speaker's name dependencies: polymer: ">=0.15.1 <0.17.0" transformers: - polymer pubspec.yaml
58. MILAN november 28th/29th 2014 – Speaker's name <head> ... <link rel="import" href="packages/paper_elements/ paper_input.html"> ... </head> <body unresolved> <paper-input label="Type something..."></paper-input> ... <script type="application/dart">export 'package:polymer/ init.dart';</script> </body>
59. MILAN november 28th/29th 2014 – Speaker's name <link rel="import" href="../packages/polymer/polymer.html"> <polymer-element name="hello-world" noscript> <template> <p>Hello from inside a custom element!</p> </template> </polymer-element> Custom Element
60. MILAN november 28th/29th 2014 – Speaker's name <polymer-element name="click-counter"> <template> <button on-click="{{increment}}">Click Me</button> <p>You clicked the button {{count}} times.</p> </template> <script type="application/dart" src="click_counter.dart"></ script> </polymer-element> Data binding
61. MILAN november 28th/29th 2014 – Speaker's name import 'package:polymer/polymer.dart'; import 'dart:html'; @CustomTag('click-counter') class ClickCounterElement extends PolymerElement { @observable int count = 0; ClickCounterElement.created() : super.created(); void increment(Event e, var detail, Node target) { count += 1; } } Data binding
62. MILAN november 28th/29th 2014 – Speaker's name <polymer-element name="volume-nob"> <template> <p>You turned the volume to {{volume}}.</p> </template> <script type="application/dart" src="volume_nob.dart"></script> </polymer-element> Custom attributes <volume-nob volume="11"></volume-nob>
63. MILAN november 28th/29th 2014 – Speaker's name Custom attributes import 'package:polymer/polymer.dart'; import 'dart:html'; @CustomTag('volume-nob') class VolumeNobElement extends PolymerElement { // @published means 'this is an attribute', and it is observable. @published int volume = 0; VolumeNobElement.created() : super.created(); }
64. MILAN november 28th/29th 2014 – Speaker's name Template conditional <polymer-element name="click-counter"> <template> <template if="{{count < 10}}"> ... </template> <template if="{{ count >= 10 }}"> ... </template> </template> <script type="application/dart" src="clickcounter.dart"></script> </polymer-element>
65. MILAN november 28th/29th 2014 – Speaker's name Template loops <polymer-element name="fav-fruits"> <template> <ul> <template repeat="{{fruit in fruits}}"> <li> I like {{ fruit }}. </li> </template> </ul> </template> <script type="application/dart" src="fav_fruits.dart"></script> </polymer-element>
66. MILAN november 28th/29th 2014 – Speaker's name Template loops import 'package:polymer/polymer.dart'; @CustomTag('fav-fruits') class FavFruitsElement extends PolymerElement { final List fruits = toObservable(['apples', 'pears', 'bananas']); FavFruitsElement.created() : super.created(); }
67. MILAN november 28th/29th 2014 – Speaker's name Extending DOM Elements <button is="fancy-button">Click me</button>
68. MILAN november 28th/29th 2014 – Speaker's name <polymer-element name="fancy-button" extends="button"> <template> <style> :host { background: pink; } </style> <content></content> </template> <script type="application/dart" src="fancy_button.dart"></script> </polymer-element>
69. MILAN november 28th/29th 2014 – Speaker's name import 'package:polymer/polymer.dart'; import 'dart:html' show ButtonElement; @CustomTag('fancy-button') class FancyButton extends ButtonElement with Polymer, Observable { FancyButton.created() : super.created() { polymerCreated(); } }
70. Dart Force Realtime Web Framework
71. Java Developer
72. Use Familiar Annotations @Controller public class HelloWorldController { @RequestMapping("/helloWorld") public String helloWorld(Model model) { model.addAttribute("message", "Hello World!"); return "helloWorld"; } } @Controller class HelloWorldController { @RequestMapping("/helloWorld") String helloWorld(Model model) { model.addAttribute("message", "Hello World!"); return "helloWorld"; } }
73. Realtime Dart
74. ForceServer fs = new ForceServer(host: “0.0.0.0", port: 3030, clientFiles: '../build/web/', clientServe: true); fs.start().then((_) { fs.send("request", {'whatIwant' : 'info'}); fs.on('info', (e, sendable) { sendable.send("received", { "data": "ok" }); }); });
75. Inspired By
76. Communication Types •Send all •Broadcast •Send to a specific client byID •Send info to profiles
77. Profile management Define profile send info to profile var profileInfo = { 'name': playName }; forceClient.initProfileInfo(profileInfo); sendable.sendToProfile('name', name, 'private', message);
78. Authentication forceServer.on("examplerequest", (e, sendable) { // do something }, roles: ["ADMIN", "BASIC"]); class SessionStrategy extends SecurityStrategy { bool checkAuthorization(HttpRequest req) { HttpSession session = req.session; return (session["user"]!=null); } Uri getRedirectUri(HttpRequest req) { var referer = req.uri.toString(); return Uri.parse("/login/?referer=$referer"); } } forceServer.server.strategy = new SessionStrategy();
79. https://github.com/ForceUniverse
80. MILAN november 28th/29th 2014 – Speaker's name
81. Just Like Flash Developers feel Dart familiar Flashers feel StageXL Familiar
83. mySprite.addEventListener(Event.ENTER_FRAME, enterFrameListener); mySprite.addEventListener(MouseEvent.CLICK, mouseClickListener, useCapture:true); var subscription1 = mySprite.onEnterFrame.listen(enterFrameListener); var subscription2 = mySprite.onMouseClick.listen(mouseClickListener); var subscription3 = mySprite.on("customEvent").listen(customEventListener); //... subscription1.cancel(); // equals removeEventListener(...) subscription2.pause(); // pause receiving events subscription2.resume(); // resume receiving events
84. var textField = new TextField(); textField.defaultTextFormat = new TextFormat('Spicy Rice', 30, Color.Black); textField.text = 'The quick brown fox jumps over the lazy dog.' textField.x = 20; textField.y = 20; textField.width = 100; textField.height = 50; textField.wordWrap = true; addChild(textField);
85. var resourceManager = new ResourceManager() ..addBitmapData('dog', 'images/dog.png') ..addSound('plop', 'sounds/plop.mp3') ..addTextureAtlas('fl', 'images/flowers.json', TextureAtlasFormat.JSONARRAY); resourceManager.load().then((result) { var dog = resourceManager.getBitmapData('dog'); var plop = resourceManager.getSound('plop'); var flowers = resourceManager.getTextureAtlas('fl'); var daisy = flowers.getBitmapData('daisy'); });
86. MILAN november 28th/29th 2014 – Speaker's name // The ResourceManager substitutes embedded resources of Flash. var resourceManager = new ResourceManager(); resourceManager.addSound("plop", "sounds/plop.mp3"); // loads ogg-file in Firefox! ... var sound = resourceManager.getSound("plop"); var soundTransform = new SoundTransform(0.5); var soundChannel = sound.play(false, soundTransform);
87. var tween = new Tween(sprite, 2.0, TransitionFunction.easeOutBounce); tween.animate.x.to(700); tween.animate.y.to(500); tween.delay = 1.0; tween.onComplete = () => sprite.removeFromParent(); renderLoop.juggler.add(tween);
88. MILAN november 28th/29th 2014 – Speaker's name http://toolkitfordart.github.io/
89. MILAN november 28th/29th 2014 – Speaker's name http://bombemotion.herokuapp.com Tap 3 birds with Bomb Hope to win!
90. MILAN november 28th/29th 2014 – Speaker's name Giovanni Laquidara +GiovanniLaquidara @joaolaq joaobiriba thanks() => new FeedBack(); getQuestions().then( (what) { answer(what); }); https://joind.in/talk/view/14108