start dart

18
Let’s start Dart Dart をはじめよう。 @mogetta

Upload: hiroshi-mimori

Post on 10-Nov-2014

7.045 views

Category:

Documents


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Start dart

Let’s start DartDartをはじめよう。

@mogetta

Page 2: Start dart

How about Dart

Classes

Optional types

Lexical scoping

http://www.dartlang.org/docs/technical-overview/

Page 3: Start dart

Install

brew install dartor

command line

http://www.dartlang.org/

導入

Page 5: Start dart

be useful使い道

on Dartium Server side[dart2js]convert to js

fast! like node.js?wide useful

Page 6: Start dart

Syntax

try!!!

http://try.dartlang.org/

compare other language

http://synonym.dartlang.org/

文法class Dot {

num x, y;Dot(this.x, this.y);String toString() => "($x,$y)";

}void main() {

var p = new Dot(3, 4);var q = new Dot(5, 6);print(p);

}

entry point

optional type

short hand

Page 7: Start dart

<!DOCTYPE html>

<html>  <head>    <title>Hi Dart</title>  </head>  <body>    <h2 id="status">Waiting for Dart to start</h2>

    <script type="application/dart" src="hi.dart"></script>    <script src="dart.js"></script>  </body></html>

library hi;

import 'dart:html';

main() {  query('#status').text = 'Hi, Dart';}

<!-- Copyright (c) 2012, the Dart project authors.  Please see the AUTHORS file     for details. All rights reserved. Use of this source code is governed by a     BSD-style license that can be found in the LICENSE file. -->

Exampleサンプル

Page 8: Start dart

dart2js

Dartコードをjavascriptに変換する。

変換後のデバッグも

ソースコードの書き換え等は必要なし。

jsのcontextをDartで扱うライブラリもある。

javascriptへの変換

http://www.dartlang.org/docs/dart-up-and-running/contents/ch04-tools-dart2js.html

chrome

Page 9: Start dart

Package manager for Dart

name: channelDartdependencies: appengine_channel: any js: any color_picker: any

ライブラリ pub install

Page 10: Start dart

Server side

import 'dart:io';

main() { HttpServer.bind('127.0.0.1', 8080).then((server) { server.listen((HttpRequest request) { //request.uri.path request.response.write('Hello, world'); request.response.close(); }); });}

サーバーサイド

Page 11: Start dart

Server side

http://dartvoid.com/

http://www.dartlang.org/articles/io/#writing-web-servers

http://pub.dartlang.org/packages/route

サーバーサイド

Page 12: Start dart

Test

unit test

http://www.dartlang.org/articles/dart-unit-tests/drone.io

[本家]https://drone.io/

[導入]http://muzigram.muzigen.net/

テスティング

Page 13: Start dart

web_ui

<html>のパーツ化

データの変化によるViewの変化駆動

http://www.dartlang.org/articles/web-ui/

MDV and Web Component

Page 14: Start dart

web_ui Model Driven View

// Dart code:import 'package:web_ui/web_ui.dart';

@observable String myString = '';

String get shouted => myString.toUpperCase();

String get palindrome => myString + myString.split('').reversed.join();

<!-- HTML code: --><input type="text" bind-value="myString" placeholder="Type here"> <div> Shouted: {{shouted}} </div><div> Palindromic: {{palindrome}} </div> <script type="application/dart" src="little.dart"></script><script src="packages/browser/dart.js"></script>

MDV and Web Component

Page 15: Start dart

Web_ui Example

<b-secret placeholder="Enter your Password">

</b-secret>

https://www.blossom.io/bee

MDV and Web Component

Page 16: Start dart

Web_ui

create project result

MDV and Web Component

Page 17: Start dart

Reccomend Packages

JS

http://pub.dartlang.org/packages/js

Web component parts

https://www.blossom.io/bee

flash like API

http://pub.dartlang.org/packages/stagexl

support game create

http://pub.dartlang.org/packages/game_loop

おすすめのパッケージ