GDG DART Event at Karachi

#dartlang

Dart Flight SchoolSpeaker Imam Raza

Licensed under http://creativecommons.org/licenses/by-nc/3.0/us/

#dartlang

Speaker.bio.toString()● 12 years of professional experience.● Specialties include; Enterprise Software Architecture, Mobile devices

Architecture and software services including consulting, outsourcing and offshoreincubation.

● Currently engaged with Folio3 as Senior Software Architect.● Motivation for today speech. Exploring latest technologies and creating awareness

about them is my hobby.

#dartlang

#dartlang

✔ Improved productivity✔ Increased performance

Why ?

#dartlang

✔ a new language(Javascript,JAVA/C# developer)✔ Libraries✔ Editor✔ VM✔ Browser that can run dart app natively✔ Compiler to Javascript.

What is

#dartlang

✔ Classes: JS Prototyped based language and Not class-based language✔ Static Typing: JS doesn’t support✔ Language support for libraries:

JavaScript Vs Dart(LanguageComparison)

#dartlang

Learn the language in under an hour

#dartlang

Use the tools you already know

#dartlang

Compile to JavaScript, runs across the modern web

#dartlang

Run Dart on the server with the Dart VM

#dartlang

require.js

Backbone

Backbone Marionette

jQuery

Modernizr

moment.js

dest templates

PhantomJS

JasmineDocs

Docs

Docs

Docs

Docs

Docs

Docs

Docs

Docs

"I just want towrite web apps!"

"Hi, I want to builda web app"

#dartlang

Unit test

Dart SDK

Polymer

IntlPackages"Things are

consistent andclear."

#dartlang

Apps start small, but grow and scale

#dartlang

Simple syntax, ceremony freeclass Hug { Familiar

#dartlang

Simple syntax, ceremony freeclass Hug { num strength; Hug(this.strength);

Terse

#dartlang

Simple syntax, ceremony freeclass Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } Operator overriding

#dartlang

Simple syntax, ceremony freeclass Hug { num strength; Hug(this.strength); Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... }

Named, optional params w/ default value

#dartlang

Simple syntax, ceremony free

// ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength";

}

One-line function

#dartlang

Simple syntax, ceremony free

// ... Hug operator +(Hug other) { return new Hug(strength + other.strength); } void patBack({int hands: 1}) { // ... } String toString() => "Embraceometer reads $strength";

}String Interpolation

#dartlang

Clean semantics and behavior

#dartlang

Clean semantics and behavior

• Only true is truthy

• There is no undefined, only null

• No type coercion with ==, +

Examples:

#dartlang

Missing getter?

"hello".missing // ??

Class 'String' has no instance getter 'missing'.NoSuchMethodError : method not found: 'missing'Receiver: "hello"Arguments: []

Logical

#dartlang

String compared to number?

'hello' > 1 // ??

Class 'String' has no instance method '>'.

Logical

#dartlang

Variable scope?

var foo = 'top-level';main() { if (true) { var foo = 'inside'; } print(foo); // ?? What will this print?}

top$levelLogical

Nohoisting

#dartlang

Scope of this?

class AwesomeButton { AwesomeButton(button) { button.onClick.listen((Event e) => this.atomicDinosaurRock()); } atomicDinosaurRock() { /* ... */ }}

Lexicalthis

#dartlang

Scalable structure

Functions Classes

Libraries

Packages

Mixins Interfaces

library games;import 'dart:math';import 'players.dart';class Darts { // ...

}class Bowling { // ...

}Player findOpponent(int skillLevel) { // ...

}

#dartlang

var$button$=$new$ButtonElement();button.id$=$'fancy';button.text$=$'Click$Point';button.classes.add('important');button.onClick.listen((e)$=>$addTopHat());parentElement.children.add(button);

Yikes! Button is repeated 6 times!

Too many buttons

#dartlang

Method cascades

var$button$=$new$ButtonElement()$..id$=$'fancy'$..text$=$'Click$Point'$..classes.add('important')$..onClick.listen((e)$=>$addTopHat());parentElement.children.add(button);

#dartlang

Inline initialization

parentElement.children.add(0new0ButtonElement()..text0=0'Click0Point');

#dartlang

One of these things is not like the other

Object

Persistable

Hug

Hug is notis-a Persistable

Don't polluteyour inheritance

tree!

#dartlang

Don't inherit, mixin!

Object

PersistableHug Mixin

#dartlang

Mixins

abstract'class'Persistable'{'save()'{'...'}'load()'{'...'}'toJson();}class'Hug'extends'Object'with'Persistable'{'Map'toJson()'=>'{'strength':10};}main()'{'var'embrace'='new'Hug();'embrace.save();}''''''''

Extend object & noconstructors? Youcan be a mixin!

Apply the mixin.

Use methods frommixin.

#dartlang

Context switching considered harmful,Iterate quickly

#dartlang

#dartlang

670+packages

#dartlang

#dartlang

Compile Dart to JavaScript with dart2js

#dartlang

main Library

baz foo bar boo

imports

callsbaz

main foo bar

Tree shaking

dart2js

#dartlang

Our challenge ...

clean semantics and unsurprising behaviorwithout

extra checks when compiled to JavaScript

#dartlang

DeltaBlueaddConstraintsConsumingTo(v, coll) { var determining = v.determinedBy; for (var i = 0; i < v.constraints.length; i++) { var c = v.constraints[i]; if (c != determining && c.isSatisfied()) { coll.add(c); } }}

#dartlang

addConstraintsConsumingTo$2: function(v, coll) {

var determining, t1, t2, t3, i, t4, c;

determining = v.get$determinedBy();

t1 = v.constraints;

t2 = getInterceptor$as(t1);

t3 = getInterceptor$a(coll);

i = 0;

while (true) {

t4 = t2.get$length(t1);

if (typeof t4 !== "number") throw new IllegalArgumentError(t4);

if (!(i < t4)) break;

c = t2.$index(t1, i);

if ((c == null ? determining != null : c !== determining) && c.isSatisfied$0() === true) {

t3.add$1(coll, c);

}

++i;

}

}

Simply not goodenough!

DeltaBlue: Unoptimized

#dartlang

Global optimizations• Dart is structured and allows whole program analysis

• Understanding your program’s structure enables:o Code navigation and great refactoring toolso Global compile-time optimizations

#dartlang

DeltaBlue: Fully optimizedaddConstraintsConsumingTo$2: function(v, coll) { var determining, t1, i, c; determining = v.determinedBy; for (t1 = v.constraints, i = 0; i < t1.length; ++i) { c = t1[i]; if (c !== determining && c.isSatisfied$0()) { coll.push(c); } }}

262 characters, samesemantics

#dartlang

#dartlang

Old 'n busted New hotness<messages> <message> <subject> Please fill out the TPS report </subject> <sent>2012-10-03</sent> <summary> I'm going to have to ask you to come in... </summary> </message> <message> <subject> Reminder: fill out that TPS report! </subject> <sent>2012-10-04</sent> <summary> It's been 24 hours... </summary> </message> ...</messages>

#dartlang

<custom-element>

Structure Behavior Styles

<div> <input> <p> <span></span> </p></div>

tag.verifyAccount();<style> p { color: red; }</style>

Encapsulated

#dartlang

Reusable

Custom Element

HTML Page

import import import

HTML Page HTML Page

#dartlang

Data binding

Data model DOM Nodes

Data model DOM Nodes

#dartlang

ShadowDOM

HTML Imports

<template>

Custom ElementsNew webspecifications

Future proof

#dartlang

Polymer.dart(today)

Using web components today

#dartlang

Custom elements everywhere!

<body> <persistable-db dbname="game" storename="sologames"></persistable-db> <game-assets></game-assets> <game-app></game-app> <google-signin clientId="250963735330.apps.googleusercontent.com" signInMsg="Please sign in"></google-signin>

#dartlang

Angular is ported to Dart!

#dartlang

<div my-controller> <div class="well"> <click-counter count="{{ctrl.count}}"></click-counter> </div> </div>

Angular and Polymer together

Polymer element

Angular controller

#dartlang

Dart in production

#dartlang

"Dart allows for quick prototyping as well as robust codethat is easy to refactor" - Soundtrap

#dartlang

"Dart's familiar language, and cohesive set of libraries,allowed the team to start building very quickly." - Montage

#dartlang

"Dart offers a sane and consistent development experience for modern web applications." - Blossom

#dartlang

"The source code for this game (Escape) is 20% smaller compared to theActionScript version (69.6 KB vs 86.5 KB). The port took only 6 hours." -- Author of StageXL

#dartlang#dartlang

Export Flash movies/games toDart from Flash Pro

#dartlang

"We rewrote Google's internal CRM app in 6 months, fromscratch, with Dart and Angular." - Internal team at Google

#dartlang

TC52 to standardize Dart language

#dartlang

Ready to get started? Write a Dart app!

dartlang.org/codelabs/darrrt/

#dartlang

Dart - for the modern web

• Platform you can use today

• Easy to get started - dartlang.org

• Compiles to JavaScript

#dartlang

Questions?

GDG DART Event at Karachi

Technology

Transcript of GDG DART Event at Karachi