際際滷

際際滷Share a Scribd company logo
Dart
und JavaScript


 Christian Grobmeier
 www.grobmeier.de
    @grobmeier
Quo Vadis?
JavaScript?
JavaScript ?false^:


false, 0, ?^, undefined,
           null
Batterien selbst besorgen.


jQuery ist Pflicht.
Segen oder Fluch?


Keine Typen
1000 und 1 M?glichkeit


Vererbung
Patterns helfen:


Namespace
Jeder Browser
ist ein Individuum.
Nicht nett.
var a1 = new Array(1,2,3,4,5);
    var a2 = new Array(5);
Einer f┨r alle.
if(a === null ||
    a === undefined){}
Fallstricke.
'' == '0'            //   false
0 == ''              //   true
0 == '0'             //   true
false == 'false'     //   false
false == '0'         //   true
false == undefined   //   false
false == null        //   false
null == undefined    //   true
' trn ' == 0      //   true
Nur die Harten
 ┨恢艶姻鉛艶恢艶稼.
Verkaufs-
argumente
Dart
                       VM

 Dart
Source

                     JavaScript
           dart2js
                       Engine



         ?berall.
Dart und JavaScript
Pub
Nix neues.
Viele Libs.
Isolates.
Serverseitig.
JS -> Dart
  Roadcrew.js
github.com/grobmeier/Roadcrew.js
Use Case
<div class="page" id="tablePage">
   <h1>Table Page</h1>
   <a href="#otherPage">Other</a>
</div>

<div class="page" id="otherPage">
   <h1>Other Page</h1>
   <a href="#tablePage">Table</a>
</div>
.js
function Roadcrew() {
   // Constructor
}

Roadcrew.prototype = {
   // Prototyp
};

Roadcrew.prototype.act = function () {
   // Function
};

Roadcrew.another = function () {
   // Static Function
};
class RoadcrewController {
  var pages;

    RoadcrewController() {
       // Constructor
    }

    void act(e) {
       // Method
    }

    void static another() {
      // Static method
    }
}
.js




Properties kopieren
Framework extend
class RoadcrewController
   extends C {
   ...
}

class C {
   ...
}
class A implements B {
   ...
}
abstract class B {
   ...
}
.js


function Roadcrew() {
  test = ?blub^;
  var xyz = ?bla^;
}

var act = function () {
 console.log(test);
};
library Roadcrew;

import 'dart:html';

part ,RCController.dart';
part 'RCInterceptor.dart';
part 'RCException.dart';
.js


var myobj = (function() {
  var name = ?CG^;
  return {
    getName = function() {
      return name;
    }
  }
}());
class Roadcrew {
  var _name = ?CG^;
  _getTest() => name;
}
.js




var test = ?Christian^;
test = true;
test = 10.32;
class Roadcrew {
  String _name = ?CG^;
  String _getTest() => name;
  List<DivElement> pages;
}
.js

function RcErr(m,c,r){}

RcErr.prototype = new Error();
RcErr.prototype.constructor =
RcErr;

try {
  interceptor(d, data);
} catch (error) {
   ...
}
class RcEx {
  String msg = "An error...";
  int c;
  RcEx(this.msg, [this.c = 1] );
}

try {
  interceptors[pageId].act(d);
} on RcEx catch(e) {
}
.js




pages = $('.page');
page = $('#myPage');
pages = queryAll('.page');
page = query('#myPage');
.js




$("a").live(
  'click',
$.proxy(this,'goto'));
queryAll('a').forEach(
 (el) {
  el.on.click.add((e) {
    goto(e);
  });
 }
);
Dart und JavaScript
import 'dart:isolate';

echo() {
    port.receive((msg, reply) {
      reply.send('I received: $msg');
    });
}

main() {
    var sendPort = spawnFunction(echo);
    sendPort.call('Hello').then((reply) {
      print(reply);
    });
}
<element name="x-click-counter"

   constructor="CountComponent"
   extends="div">

   <template> ´ </template>

   <script type="´">
    ´
   </script>

</element>
<element name="x-click-counter"
constructor="CountComponent" extends="div">


<template>
 <button
   on-click= ̄inc()">Click</button>

 <span>{{count}}</span>
</template>

</element>
<element name="x-click-counter"
constructor="CountComponent" extends="div ̄>


<script type="application/dart ̄>
class CountComponent
   extends WebComponent {
   int count = 0;
   void inc() { count++; }
}
</script>
</element>
<head>
<link rel="components ̄
       href="click.html">
</head>
<body>

<x-click-counter></x-click-counter>


<script type="application/dart">
   main() {}
</script>
Mehr?
  I/O
 JSON
Mirrors
Logging
   ...
Wo steht Dart?
 Diskussion
Danke!
 Christian Grobmeier
 www.grobmeier.de
    @grobmeier
Image Credits
    Omikuji: Flickr (jessleecuizon)
     Dollars: Flickr (401(K) 2012)
        Pub: Flickr (ell brown)
        Dog: Flickr (joshme17)
      Package: Flickr (lemonhalf)
   Threads: Flickr (The Big Quack)
      Server: Flickr (getButterfly)
     School Bus: Flickr (loop_oh)
    Batteries: Flickr (scalespeeder)
Discussing Monks: Flickr (wonderlane)

More Related Content

What's hot (20)

喘 Javascript F低議誅
喘 Javascript F低議誅喘 Javascript F低議誅
喘 Javascript F低議誅
Anna Su
?
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
v望 卅儲
?
jQuery PLUGIN
jQuery PLUGINjQuery PLUGIN
jQuery PLUGIN
blueweb_sk
?
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
?
Prototype UI
Prototype UIPrototype UI
Prototype UI
S└bastien Gruhier
?
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajoInvoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
?
Collection pipeline par Mathieu Godart
Collection pipeline par  Mathieu GodartCollection pipeline par  Mathieu Godart
Collection pipeline par Mathieu Godart
CocoaHeads France
?
衲h安艶恢粥壊壊艶馨恢鉛霞
衲h安艶恢粥壊壊艶馨恢鉛霞衲h安艶恢粥壊壊艶馨恢鉛霞
衲h安艶恢粥壊壊艶馨恢鉛霞
v望 卅儲
?
An introduction to Ember framework
An introduction to Ember frameworkAn introduction to Ember framework
An introduction to Ember framework
Diana Falkowska
?
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
?
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?
thiagoalessio
?
JS programowanie obiektowe
JS  programowanie obiektoweJS  programowanie obiektowe
JS programowanie obiektowe
Piotr Czajkowski
?
Clase 7 el modelo
Clase 7  el modeloClase 7  el modelo
Clase 7 el modelo
hydras_cs
?
ECMAScript 6 im Produktivbetrieb
ECMAScript 6 im ProduktivbetriebECMAScript 6 im Produktivbetrieb
ECMAScript 6 im Produktivbetrieb
Sebastian Springer
?
Javascript Funcional - TDC Florian┏polis 2017
Javascript Funcional - TDC Florian┏polis 2017Javascript Funcional - TDC Florian┏polis 2017
Javascript Funcional - TDC Florian┏polis 2017
Taller Neg┏cio Digitais
?
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
Shogo Sensui
?
喘 Javascript F低議誅
喘 Javascript F低議誅喘 Javascript F低議誅
喘 Javascript F低議誅
Anna Su
?
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
遺/遺++と安艶恢粥壊壊艶馨恢鉛霞を旋喘したライブラリ蝕k
v望 卅儲
?
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
?
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajoInvoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
?
Collection pipeline par Mathieu Godart
Collection pipeline par  Mathieu GodartCollection pipeline par  Mathieu Godart
Collection pipeline par Mathieu Godart
CocoaHeads France
?
衲h安艶恢粥壊壊艶馨恢鉛霞
衲h安艶恢粥壊壊艶馨恢鉛霞衲h安艶恢粥壊壊艶馨恢鉛霞
衲h安艶恢粥壊壊艶馨恢鉛霞
v望 卅儲
?
An introduction to Ember framework
An introduction to Ember frameworkAn introduction to Ember framework
An introduction to Ember framework
Diana Falkowska
?
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
?
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?
thiagoalessio
?
Clase 7 el modelo
Clase 7  el modeloClase 7  el modelo
Clase 7 el modelo
hydras_cs
?
Javascript Funcional - TDC Florian┏polis 2017
Javascript Funcional - TDC Florian┏polis 2017Javascript Funcional - TDC Florian┏polis 2017
Javascript Funcional - TDC Florian┏polis 2017
Taller Neg┏cio Digitais
?
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
Shogo Sensui
?

Viewers also liked (7)

Go Mobile with Apache Cordova, Zagreb 2014
Go Mobile with Apache Cordova, Zagreb 2014Go Mobile with Apache Cordova, Zagreb 2014
Go Mobile with Apache Cordova, Zagreb 2014
Christian Grobmeier
?
Dart @ JUG SaxonyDart @ JUG Saxony
Dart @ JUG Saxony
Christian Grobmeier
?
Zen Programming
Zen ProgrammingZen Programming
Zen Programming
Christian Grobmeier
?
World of Logging
World of LoggingWorld of Logging
World of Logging
Christian Grobmeier
?
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and Phonegap
Christian Grobmeier
?
The "Why Should You Talk" Talk
The "Why Should You Talk" TalkThe "Why Should You Talk" Talk
The "Why Should You Talk" Talk
Christian Grobmeier
?
How to Battle Bad Reviews
How to Battle Bad ReviewsHow to Battle Bad Reviews
How to Battle Bad Reviews
Glassdoor
?

Dart und JavaScript