Scalable Web App Engineering – Don't we allready have what we need?

View Github Repository Open presentation in a new window

vferries

See all presentation from vferries

Scalable Web App Engineering – Don't we allready have what we need?

0 1

workshop-dart-polymer

Polymer and Dart introduction workshop

On Github vferries / workshop-dart-polymer

Scalable Web App Engineering

By Vincent FERRIES / @VincentFERRIES

First thing first...

What we will see today

  • A new language for web development
  • Construct both server and client parts
  • Have a glimpse at the future of the web

Don't we allready have what we need?

  • JavaScript!
  • Even GWT / Vaadin to code in Java
  • Applets !
  • And finally...
  • We've got JavaScript!

Let's talk about JavaScript!

Destroy all software

Let's talk about GWT!

public class Hello implements EntryPoint {

  public void onModuleLoad() {
    Button b = new Button("Click me", new ClickHandler() {
      public void onClick(ClickEvent event) {
        Window.alert("Hello, AJAX");
      }
    });

    RootPanel.get().add(b);
  }
}

Let's talk about Applets!

Le contrat de confiance

  • A Language
  • Web Components (Polymer and Angular)
  • An editor (many actually)
  • A virtual machine
  • Pub

The Killer Feature

dart2js

Base concepts

  • Everything is an object
  • Optional Types
  • Production mode / Checked mode
  • No private keyword but _

Some examples

var bigInt = 1234567890234568972349642987923445778389768989647678576;

String interpolated = "Amount: $bigInt";

var complexInterpolation = "VAT: ${bigInt * 0.196}";

double onePointOne = double.parse('1.1');

Complex Types

List<int> list = [1,2,3];

var gifts = {
	'first': 'Dart Vader',
	'second': 'Dartagnan',
	'fifth': 'The Dart Knight'
};

Map nobleGases = {2: 'helium', 10: 'neon', 18: 'argon'};

var gifts = new Map();
gifts['first'] = 'Alone in the Dart 2';
gifts['second'] = 'The Dartist';
assert(gifts.length == 2);

Methods

setOptions({String url, int port , bool useProxy}) {
	// Do something with these params
}

setOptions(useProxy: true, port: 8080);

String doSomething(String param, [List flags]) {
	// Do something here
}

Classes

class Point {
	num x, y;
	Point(this.x, this.y);
	Point.zero() : x = 0, y = 0;
	String toString() => '($x, $y)';
}
Point pos = new Point(2, 3.4);
String pStr = new Point.zero().toString();

Functional programming

list.forEach((x) => print(x));

map.forEach((k, v) {
	i++;
	print('$i - $k = $v');
});

square(x) => x*x;
list.map(square);

list = ['Cap Gemini', 'Genigraph', 'Atos'];
list.filter((name) => name.startsWith('G'));

Builders are over...

var myObject = new MyObject();
myObject.setName("EclipseCon");
myObject.setSize(42);
myObject.callMethod(3);
return myObject;

return new MyObject()
	..setName("EclipseCon")
	..setSize(42)
	..callMethod(3);

DOM Manipulation

querySelector("#myId").classes.add("success");

querySelectorAll("#myId li").forEach((el){
	el.on.mouseOver.add("selected");
	el.on.mouseOut.remove("selected");
});

Alone in the Dart

Good old time!

Once upon a time...

<select multiple>
	<option>Dart</option>
	<option>JavaScript</option>
	<option>Polymer</option>
	<p>What if we write something else here?</p>
</select>
DartJavaScriptPolymer What if we write something else here?

Since at least 1993

<select>
	<optgroup label="Front-End">
		<option selected>Dart</option>
		<option disabled>JavaScript</option>
		<option>Polymer</option>
	</optgroup>
	<optgroup label="Back-End">
		<option>Dart</option>
		<option>JavaScript</option>
		<option disabled>Polymer</option>
	</optgroup>
	<p>What if we write something else here?</p>
</select>
DartJavaScriptPolymerDartJavaScriptPolymer
<e-mails>
  <e-mail>
    <subject>Valar Morghulis</subject>
    <sent>2014-10-03</sent>
    <summary>Dracarys!</summary>
  </e-mail>
  <e-mail>
    <subject>Reminder: Beware!</subject>
    <sent>2012-10-04</sent>
    <summary>The night is dark and full of terrors. </summary>
  </e-mail>
</e-mails>
<hangouts>
  <hangout with="arya.stark@gmail.com">
    <you>What do we say to the God of death?</you>
    <her>Not today.</her>
  </hangout>
  <hangout with="ned.stark@gmail.com">
    <him>War was easier than daughters.</him>
  </hangout>
</hangouts>

Polymer

A quick demo

Polymer Designer (JS)

Defining a Custom Element

<polymer-element name="hello-you" noscript="">
  <template>
    <p>Hello EclipseCon France!</p>
  </template>
</polymer-element>

Using Custom Element

In the head section

  <link rel="import" href="hello_world.html">
  <script type="application/dart">
  	export 'package:polymer/init.dart';
  </script>
  <script src="packages/browser/dart.js"></script>

Simply use it

<hello-you></hello-you>

Data binding

In the template

<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

In the script

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;
  }
}

Shadow DOM

In the settings of Chrome Dev Tools. 
<content select=".email"></content>

</thank-you>