Dart @ London HTML5

Chris Buckett

May 2013

www.entity.co.uk

We build enterprise software.

They all share a common problem

Communication!

Communication...

Problem Solved?

Server-side

Thick client ? In the browser

Java / GWT (Google Web Toolkit)

/**
 * @param person The person to greet
 * @param greeting The greeting
 * @return The personalized message
 */
public String greet(
    Person person, String greeting) {
  String result = greeting +" "+ person.name;
  return result;
}

JavaScript + Annotations






var greet = function(person, greeting) {

  var result = greeting +" "+ person.name;
  return result;
};

JavaScript + Annotations

/**
 * @param {foo.Person} person The person to greet
 * @param {string} greeting The greeting
 * @return {string} The personalized message
 */
var greet = function(person, greeting) {
  // @type {string}
  var result = greeting +" "+ person.name;
  return result;
};

Is it possible to meet in the middle?

Let's Turn to the Dart Slide

What is Dart?

Familiar

Unsurprising Class Based OOP

class Person {
  var name;
}

class Customer extends Person {
  var accountNo;
  var address = new Address();
}      

class Address {
  var lines = new List(4);
  var postcode;
}

Functional

Functions are objects

greet(person, greeting) {
  var result = greeting + " " + person.name;
  return result;
}

// store greet in another variable
var myFunc = greet;
var me = new Person()..name="Chris";
myFunc(me,"Hello");

Optionally Typed

Communicating intent through code

class Person {
  String name;
}

class Customer extends Person {
  int accountNo;
  Address address = new Address();
}      

String greet(Person person, String greeting) {
  var result = greeting + " " + person.name;
  return result;
}

How does this help us?

Communicating intent through code, to tools and humans

// javascript
function greet(person, greeting) {
  var result = greeting +" "+ person.name;
  return result;
}

// dart
greet(person, greeting) {
  var result = greeting +" "+ person.name;
  return result;
}

How does this help us?

Communicating intent through code, to humans and tools

// javascript
function greet(person, greeting) {
  var result = greeting +" "+ person.name;
  return result;
}

Use type annotations on the surface area of your code

// dart 
String greet(Person person, String greeting) {
  var result = greeting +" "+ person.name;
  return result;
}

What is Dart?

Dart language also has...

Interfaces class Person implements Serializable
Privacy String _iAmPrivate;
Futures doAsync().then((result) { ... } );
Lexical scope (sane this)
Generics new Map<String,Person>();
Concurrency port.send("Hello");
Reflection instance.invoke('sayHello',[...]);








  How else can Dart help us?
  

  




  Libraries and Packages
  

  

  library model_objects;

import 'dart:json';
import 'package:logger/logger.dart';

part 'src/customer.dart';
part 'src/order.dart';

//... other code ...
  




  Built-in libraries


  dart:html
  import 'dart:html';

main() {
  var msg = query('#msg');
  var btn = new ButtonElement();
  btn.text = 'Click me!';
  btn.onClick.listen((e) => msg.text = 'Dart!');
  document.body.children.add(btn);
}
  





  Built-in libraries


  dart:io
  import 'dart:io';

main() {
  HttpServer.bind("127.0.0.1", 8888).then((svr) {
    svr.listen((req) {
      req.response.write("Hello World\n");
      req.response.close();
    });

    print("Listening at http://127.0.0.1:8888/");
  });
}
  





  Built-in Libraries
  

  

  
    dart:html
    dart:io
    dart:unittest
    dart:indexed_db
    dart:web_gl
    dart:web_audio
    lots more ...
  
  




  Pub: Package Manager
  

  name: my_service
description: My App Service
version: 
dependencies:
  model_objects:
    hosted:
      url: http://my-package-server.com
  config:
    git: git://github.com/chrisbu/config.git
    version: 1.2
dev_dependencies:
  unittest: any
    




  Built-in libraries help reduce fragmentation.
  Teams can work together, sharing versioned packages.





  What else is in the box?
  

  





  Communicating intent through code, to humans and tools.




  Communicating intent through code, to humans and tools.
  

  

  Dart Editor




  Communicating intent through code, to humans and tools.
  

  

  Dartium





  Communicating intent through code, to humans and tools.
  

  

  dart2js




  Communicating intent through code, to humans and tools.
  

  

  Dart Debugger




  Communicating intent through code, to humans and tools.
  

  

  Dart Analyzer




  Communicating intent through code, to humans and tools.
  

  

  DartDoc




  Communicating intent through code, to humans and tools.
  

  
    Dart Editor
    Dartium
    dart2js
  
  
    Dart Debugger
    Dart Analyzer
    DartDoc
  




  Web UI Framework
  Teams can work together, sharing versioned packages.
    Web Components
    Model Driven Views
    Shadow DOM    
  In all modern browsers






  Model Driven Views
      <span>{{ message }}</span>
    <input bind-value='message'>
    <script type='application/dart'>
      import 'package:web_ui/web_ui.dart';

      var message = 'Hello' + ' ' + 'Dart';

      main() {}
    </script>
  
  



  Web Components
        <link rel="components" href="mdv_demo.html">
    </head>
    <body>
      <x-mdv-component></x-mdv-component>

      <script type='application/dart'>
        import 'package:web_ui/web_ui.dart';
        main() {}
      </script>
  
  



  Why Dart appeals to me...
  
  Familiar to developers


  Communicating intent through code, to humans and  tools.


  Allowing modular working with teams.



  Could it be another tool in your toolbox...?



  Find out more...
  
  
    www.dartlang.org
    #dartlang on G+ or Twitter
    +Chris Buckett
    @ChrisDoesDev
    Slides: github/chrisbu
  
  
  Thankyou!



  Find out more...
  
  
    www.dartlang.org
    #dartlang on G+ or Twitter
    +Chris Buckett
    @ChrisDoesDev
    Slides: github/chrisbu
  
  
  Thankyou!