Top Banner
Google Dart 介紹 Ticore Shih 2013/07/04
41

Google Dart 介紹

May 08, 2015

Download

Education

Ticore Shih
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Google Dart 介紹

Google Dart 介紹

Ticore Shih 2013/07/04

Page 2: Google Dart 介紹

Dart 是什麼?

• 一個全新的語言 • 針對結構化 Web 開發 • 直譯式執行 • 具有獨立的 VM • 高效能 • 沒有意外的 OOP • 多個 Isolate,單一執行緒 • 具有一定的相容性

Page 3: Google Dart 介紹

為什麼需要 Dart ?

• 開發複雜且高效的 Web Application

Page 4: Google Dart 介紹

充滿意外的 Javascript ? • parseint radix parseInt('fuck'); // NaN parseInt('fuck', 16); // 15

• why am i a number "Why am I a " + typeof + ""; // "Why am I a number" • infinity madness parseFloat( 'Infinity' ) // returns Infinity Number( 'Infinity' ) // returns Infinity parseInt( 'Infinity' ) // returns NaN

http://wtfjs.com/

Page 5: Google Dart 介紹

Dart 全面改善

結構、語法、語意 核心庫、效能

測試、除錯、工具

Page 6: Google Dart 介紹

Dart 背景

• Power by Google • Lars Bak - V8, JVMs • Gilad Bracha - Java JVM Spec. • 80+ Engineers • Syntax

– Java, C#, C++, ActionScript, JavaScript

Page 7: Google Dart 介紹

Dart 跨平台

用同一種語言開發多種平台 – Web Server

– Web Application

– Mobile Application

– Command-line Application

Page 8: Google Dart 介紹

Dart 效能

• DartVM 2x of V8

• Dart2JS ~= Plain JS

http://www.dartlang.org/performance http://github.com/xxgreg/deltablue

Page 9: Google Dart 介紹

DeltaBlue

Page 10: Google Dart 介紹

Dart 相容性

• 語法特色能完整編譯為 JS

• 支援各種瀏覽器最後兩版

• 利用既有 JS 庫 - JS Interop

• 支援 SourceMap 除錯

Page 11: Google Dart 介紹

和諧 Harmony

• 從另一個角度看 Web 開發

• 長期可能取代 Android Java

• Dart 亦實作 ECMA 6 部分特色

Page 12: Google Dart 介紹

Dart 開發工具

• Dart Editor – Dartium - Chromium w/ Dart VM – Dart SDK

• dart • dart2js • analyzer • dartdoc • pub

http://www.dartlang.org/docs/editor/

Page 13: Google Dart 介紹

Hello Dart! (Command-line App)

main() => print("Hello Dart!"); main () { print("Hello Dart!"); }

Page 14: Google Dart 介紹

Hello Dart! (Web App)

<!DOCTYPE html> <html> <body> <script type="application/dart"> main() { print("Hello Dart!"); } </script> </body> </html>

Page 15: Google Dart 介紹

Dart in HTML 限制

• 一頁只能有一個 Dart Script Tag

• 整頁載入後才執行 main 進入點

• 不能使用 Inline Listener

• 不能動態注入 Script Tag

http://www.dartlang.org/articles/embedding-in-html/

Page 16: Google Dart 介紹

Dart Web UI

• ToDoMVC

– Dart Editor Built-in Example

• Dart Widgets

– http://kevmoo.github.io/widget.dart/

Page 18: Google Dart 介紹

Dart StageXL

http://www.stagexl.org/

Page 19: Google Dart 介紹

ToolKit for Dart StageXL

http://toolkitfordart.github.io/

Page 20: Google Dart 介紹

DARTENDO NES 模擬器

http://dartendo.appspot.com/

Page 21: Google Dart 介紹

Rikulo Framework

http://www.rikulo.org/

Page 22: Google Dart 介紹

Dart 語言特色 • 只有 true 為真

• null vs. undefined

• 簡易物件相等性

• 所有東西皆為物件

• 所有物件皆有 hashCode

Page 23: Google Dart 介紹

Dart 字串

• 代換字串 "Hello $name!"; "Hello ${ name }!";

• 原始字串 r'raw string. \x00\a\n';

• 多行字串 '''Multi-line string.''';

• 鄰接字串 "String 1" 'String 2';

Page 24: Google Dart 介紹

Dart 語彙空間

• 真實語彙空間

• for loop 語彙空間

• No hoisting

Page 25: Google Dart 介紹

Dart 型別

• 選擇性型別宣告 • 型別檢查

– 開發期、執行期、不檢查

• runtimeType

• 支援泛型

Page 26: Google Dart 介紹

Dart 函式 • 一級公民

• Closure

• 具名可選參數

• 循序可選參數

• 定義函式變數型別

Page 27: Google Dart 介紹

Dart 類別宣告

• 類別即介面

• 抽象類別

• Mixin

• 泛型

Page 28: Google Dart 介紹

Dart 類別建構

• 工廠模式

• 具名建構子

• 常數建構子

Page 29: Google Dart 介紹

Dart 類別成員

• 私有成員

• getter / setter

• 模擬函式呼叫

• noSuchMethod

Page 30: Google Dart 介紹

Dart 運算子

• 多載運算子

< , > , <= , >= , == , - , + , / , ~/ , * , % , | , ^ , & , << , >> , []= , [] , ~

• 階層運算子

..

Page 31: Google Dart 介紹

Dart 註解 • 單行註解

// 一般註解 /// 文件註解

• 多行註解

/* 一般多行註解 */ /** 文件多行註解 */

• 巢狀註解

/* /* 巢狀註解 */ */

http://www.dartlang.org/articles/doc-comment-guidelines/

Page 32: Google Dart 介紹

Dart 結構化管理 • allow top-level

variable, function, getter/setter, class

• declare library part files

• import library

import as, hide, show export

• library's visibility

Page 33: Google Dart 介紹

Dart 非同步特色

• mixing sync, async call

• mixing parallel, sequential async call

• async try-catch-finally

• pass value or error object

Page 34: Google Dart 介紹

Dart Async Future

new Future ( ... ) .then ( onValue : ... , onError : ... ) .catchError ( ... , { bool test : ... } ) .whenComplete ( ... ); Future.wait( <Future> [ ... ] );

Page 35: Google Dart 介紹

Dart Async Error Flow

new Future( ... )

.then ( onValue : ... , onError : ... )

.catchError ( ... )

.whenComplete ( ... );

Page 36: Google Dart 介紹

Dart 更多特色 • Lazy Load Library

http://blog.sethladd.com/2013/04/lazy-load-libraries-in-dart.html http://api.dartlang.org/docs/bleeding_edge/dart_async/DeferredLibrary.html

• Reflection (Mirror)

http://www.dartlang.org/articles/reflection-with-mirrors/

• Metadata (Annotation) http://futureperfect.info/2013/06/20/a-case-for-metadata.html

• Enum

http://news.dartlang.org/2013/04/enum-proposal-for-dart.html

• SIMD http://www.dartlang.org/slides/2013/02/Bringing-SIMD-to-the-Web-via-Dart.pdf

Page 37: Google Dart 介紹

Dart 語法代換表

http://synonym.dartlang.org/

Page 38: Google Dart 介紹

Dart Built-in API

http://api.dartlang.org/docs/releases/latest/

Page 39: Google Dart 介紹

Dart 3rd Packages

http://pub.dartlang.org/packages

Page 40: Google Dart 介紹

Dart Style Guide

http://www.dartlang.org/articles/style-guide/

Page 41: Google Dart 介紹

http://www.dartlang.org/ http://try.dartlang.org/ http://blog.dartwatch.com/