Start dart

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

How about Dart
Classes
Optional types
Lexical scoping
http://www.dartlang.org/docs/technical-overview/

Install
brew install dart
or
command line
http://www.dartlang.org/
導入

Install
http://www.dartlang.org/tools/
http://plugins.jetbrains.com/plugin/?idea&id=6351 https://github.com/dart-lang/dart-sublime-bundle#readme https://github.com/dart-lang/dart-vim-plugin
導入

be useful
使い道
on Dartium Server side[dart2js]
convert to js
fast! like node.js?wide useful

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

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

Example
サンプル

dart2js
Dartコードをjavascriptに変換する。
変換後のデバッグも
ソースコードの書き換え等は必要なし。
jsのcontextをDartで扱うライブラリもある。
javascriptへの変換
http://www.dartlang.org/docs/dart-up-and-running/
contents/ch04-tools-dart2js.html
chrome

Package manager for Dart
name: channelDart
dependencies:
appengine_channel: any
js: any
color_picker: any
ライブラリ
pub install

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();
});
});
}
サーバーサイド

Server side
http://dartvoid.com/
http://www.dartlang.org/articles/io/#writing-web-
servers
http://pub.dartlang.org/packages/route
サーバーサイド

Test
unit test
http://www.dartlang.org/articles/dart-unit-tests/
drone.io
[本家]https://drone.io/
[導入]http://muzigram.muzigen.net/
テスティング

web_ui
<html>のパーツ化
データの変化によるViewの変化駆動
http://www.dartlang.org/articles/web-ui/
MDV and Web Component

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();

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

Web_ui Example
<b-secret placeholder="Enter your Password">
</b-secret>
https://www.blossom.io/bee

Web_ui
create project result

Reccomend Packages
JS
http://pub.dartlang.org/packages/js
Web component parts
https://www.blossom.io/bee
ﬂash like API
http://pub.dartlang.org/packages/stagexl
support game create
http://pub.dartlang.org/packages/game_loop
おすすめのパッケージ

Thanks
http://muzigram.muzigen.net/search/label/dart
http://www.iconﬁnder.com/
@mogetta

Start dart

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Start dart

Similar a Start dart (20)

Start dart