Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bringing your app to the web with Dart - Chris Buckett (Entity Group)

5,868 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Bringing your app to the web with Dart - Chris Buckett (Entity Group)

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

×