Post on 08-May-2015
description
Dart und JavaScript
Christian Grobmeierwww.grobmeier.de
@grobmeier
Quo Vadis? Quo Vadis? JavaScript?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 Browserist 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' // false0 == '' // true0 == '0' // truefalse == 'false' // falsefalse == '0' // truefalse == undefined // falsefalse == null // falsenull == undefined // true' \t\r\n ' == 0 // true
Nur die Harten überleben.
Verkaufs-Verkaufs-argumenteargumente
Überall.
DartSource
DartVM
JavaScriptEngine
dart2js
PuPubb
PuPubb
Nix Nix neues.neues.
Nix Nix neues.neues.
Viele Viele Libs.Libs.Viele Viele Libs.Libs.
Isolates.
Serverseitig.
JS -> Dart Roadcrew.js
github.com/grobmeier/Roadcrew.js
<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>
Use Case
function Roadcrew() { // Constructor}
Roadcrew.prototype = { // Prototyp};
Roadcrew.prototype.act = function () { // Function};
Roadcrew.another = function () { // Static Function};
.js
class RoadcrewController { var pages;
RoadcrewController() { // Constructor }
void act(e) { // Method } void static another() { // Static method }}
Properties kopierenFramework extend
.js
class RoadcrewController extends C { ...}
class C { ...}
class A implements B { ...}abstract class B { ...}
function Roadcrew() { test = „blub“; var xyz = „bla“;}
var act = function () { console.log(test);};
.js
library Roadcrew;
import 'dart:html';
part ,RCController.dart';part 'RCInterceptor.dart';part 'RCException.dart';
var myobj = (function() { var name = „CG“; return { getName = function() { return name; } }}());
.js
class Roadcrew { var _name = „CG“; _getTest() => name;}
var test = „Christian“;test = true;test = 10.32;
.js
class Roadcrew { String _name = „CG“; String _getTest() => name; List<DivElement> pages;}
function RcErr(m,c,r){}
RcErr.prototype = new Error();RcErr.prototype.constructor = RcErr;
try { interceptor(d, data);} catch (error) { ...}
.js
class RcEx { String msg = "An error..."; int c; RcEx(this.msg, [this.c = 1] );}
try { interceptors[pageId].act(d);} on RcEx catch(e) {}
pages = $('.page');page = $('#myPage');
.js
pages = queryAll('.page');page = query('#myPage');
$("a").live( 'click', $.proxy(this,'goto'));
.js
queryAll('a').forEach( (el) { el.on.click.add((e) { goto(e); }); });
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/OJSON
MirrorsLogging
...
Wo steht Wo steht Dart?Dart?
DiskussionDiskussion
Wo steht Wo steht Dart?Dart?
DiskussionDiskussion
Danke!Christian Grobmeierwww.grobmeier.de
@grobmeier
Image CreditsOmikuji: 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)