gcloud + Dart

The Dart side of the moon

La face cachée du cloud

+NicolasFrancois / @nicofrancois
+GuillaumeGirou / @GirouGuillaume
sfeir

Dart

Dart

Language

  • Class based and object oriented
  • Familiar syntax
  • Improve maintainability of web applications
  • Open Source
  • Ecma Standard 408

Platform

  • Client and server
  • Virtuals Machines
  • Dependency manager
  • Javascript transpiler
  • IDE plugins

compute engine

Compute Engine

Hello from classic server

lang-dartmain(List<String> args) {
  runZoned(() {
    HttpServer.bind('0.0.0.0', 80).then((server) {
      server.listen((request){
         request.response..write("Hello world")
                         ..close();
      });
    });
  }, onError: (e) => print("An error occurred $e"));
}

Handle requests

lang-dartfinal CONTACTS = [{"name": "John Doe",
                  "urlProfile": "/img/nopic.jpg",
                  "dateOfBirth": "01-01-1970"}];

handleRequest(HttpRequest request){
  if (request.uri.path == '/') {
    request.response..write("Hello world")
                    ..close();
  } else if (request.uri.path == "/contacts") {
    request.response..write(JSON.encode(CONTACTS))
                    ..close();
  } else {
    request.response..statusCode = HttpStatus.NOT_FOUND
                    ..close();
  }
}

Create instance

lang-shgcloud compute instances create "dart-gce-demo" \
            --zone "europe-west1-b" \
            --machine-type "f1-micro" \
            --image "https://www.googleapis.com/compute/v1/projects/debian-cloud/global/images/debian-7-wheezy-v20141021" \
            --tags "http-server"
lang-shgcloud compute ssh "dart-gce-demo" --zone "europe-west1-b"

Deployment

lang-sh# Update repository
apt-get update && apt-get install -y apt-transport-https
curl 'https://dl-ssl.google.com/linux/linux_signing_key.pub' | apt-key add -
curl 'https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list' > /etc/apt/sources.list.d/dart_stable.list
apt-get update
lang-sh# Install dart and git
apt-get install -y dart git
lang-sh# Clone and start appp
git clone https://github.com/nfrancois/dart-hello
cd dart-hello
dart bin/server.dart &

managed-vm

Managed VMs

Standard runtime

managed-vm-standard-runtime

Custom runtime

Docker

Custom runtime

Dockerfile

                    FROM google/dart-runtime
                
  • pubspec.yaml and pubspec.lock
  • bin/server.dart
  • 8080

Configuring a Managed VM

Minimal app.yaml
lang-yamlruntime: custom
vm: true
Detailed app.yaml
lang-yamlmodule: default
runtime: custom
vm: true
api_version: 1
threadsafe: true

manual_scaling:
  instances: 1

Hello from appengine

bin/server.dart
lang-dartimport 'dart:io';
import 'package:appengine/appengine.dart';

void main() {
  runAppEngine((HttpRequest request) {
    request.response
      ..write('Hello, world!')
      ..close();
  });
}
  • /_ah/health
  • /_ah/start
  • /_ah/stop

Run

lang-shgcloud preview app run app.yaml

Deploy

lang-shgcloud preview app deploy app.yaml

Dart Runtime support

  • Datastore
  • Storage
  • Memcache
  • Logging
  • Users

cloud-datastore

Cloud datastore

Store non relationnal data

  • Schemaless database
  • Dart mapping layer
  • Dart Low level API

Modelize data

lang-dart@Kind()
class Person extends Model {
  @StringProperty(required: true)
  String name;

  @StringProperty()
  String avatarUrl;

  @DateTimeProperty()
  DateTime dateOfBirth;
}

Store data

lang-dart// Declare list of persons
final john = new Person()..name = 'John Doe';
final jane = new Person()..name = 'Jane Doe';
final List<Person> persons  = [john, jane];

// Insert entities into Datastore
datastoreDb.datastore.commit(inserts: persons).then((_){
  print('Data inserted');
});

Query data

Addresses from a person
lang-dartfinal findQuery = new Query(ancestorKey: person.key, kind: 'Address');
datastoreDb.datastore.query(findQuery).then((Page<Person> page){
    print('Found ${page.items.length} items');
});

cloud-storage

Cloud storage

Concepts

  • Service to store data in Google's cloud.
  • High Capacity and Scalability.
  • Accessible from all instances.

Terminology

  • Buckets are the basic containers that hold your data.
  • Objects are the individual pieces of data that you store.

Access

gs://<bucket>/<object>
gs://<bucket>/<directory>/<object>
lang-shgs://my_bucker_123/images/nopic.jpg

List and create buckets

lang-dartstorage.listBucketNames().listen(print);
lang-dartstorage.bucketExists(bucketName).then((exist){
  if(!exist) {
    storage.createBucket(bucketName).then((Bucket bucket) {
      print('bucket ${bucket.bucketName} is created');
    });
  }
});

Read and write in documents

lang-dartfinal bucket = storage.bucket(bucketName);
lang-dartbucket.read(userName).listen(print);
lang-dartbucket.writeBytes(userName, avatar).then((ObjectInfo info){
  print('${info.name} created.');
});

Polymer

Polymer

web components Polyfills

  • Custom element
  • HTML Import
  • Template
  • Shadow DOM

web components Core

  • Data-binding
  • Syntatic sugar
  • Change watchers
  • Published properties

Polymer's material design elements

paper-tab 1 paper-tab 2 paper-tab 3
paper-button raised button


Toggle batman
core-toolbar

Create polymer element

lang-html<link rel="import" href="../../packages/polymer/polymer.html">

<polymer-element name="post-card">
  <template>
    <div class="card-header" layout horizontal center>
      <img alt="Avatar" src="{{person.avatarUrl}}">
      <h2>{{person.name}}</h2>
    </div>
    <p>{{person.dateOfBirth | dateToString}}</p>
  </template>
  <script type="application/dart" src="post_card.dart"></script>
</polymer-element>

Create polymer element

lang-dartimport 'package:polymer/polymer.dart';
import 'package:intl/intl.dart';
import 'entity.dart';

@CustomTag('post-card')
class PostCard extends PolymerElement {
  @observable Person person = new Person()
    ..name = "John Lennon"
    ..avatarUrl = "img/avatar.jpg"
    ..dateOfBirth = new DateTime(1940, 10, 9);

  PostCard.created() : super.created();

  String dateToString(DateTime date) => new DateFormat.yMd().format(date);
}

Use custom element

lang-html<html>
  <head>
    <!-- import the post-card -->
    <link rel="import" href="packages/my_package/post_card.html">
  </head>
  <body>
    <!-- use post-card element -->
    <post-card></post-card>

    <!-- bootstrap polymer -->
    <script type="application/dart">export 'package:polymer/init.dart';</script>
  </body>
</html>

John Lennon

9/10/1940

chrome-dev-editor

Chrome Dev Editor

<thank-you>

dartlangfr.net/conferences/2014-11-07/

BY +NicolasFrancois / @nicofrancois
AND +GuillaumeGirou / @GirouGuillaume

Dart gplus.to/dartlangfr