Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Start dart


Published on

  • Dating for everyone is here: ❤❤❤ ❤❤❤
    Are you sure you want to  Yes  No
    Your message goes here

Start dart

  1. 1. Let’s start DartDartをはじめよう。@mogetta
  2. 2. How about DartClassesOptional typesLexical scoping
  3. 3. Installbrew install dartorcommand line導入
  4. 4. Install導入
  5. 5. be useful使い道on Dartium Server side[dart2js]convert to jsfast! like node.js?wide useful
  6. 6. Syntaxtry!!! other language文法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 pointoptional typeshort hand
  7. 7. <!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サンプル
  8. 8. dart2jsDartコードをjavascriptに変換する。変換後のデバッグもソースコードの書き換え等は必要なし。jsのcontextをDartで扱うライブラリもある。javascriptへの変換
  9. 9. Package manager for Dartname: channelDartdependencies:appengine_channel: anyjs: anycolor_picker: anyライブラリpub install
  10. 10. Server sideimport dart:io;main() {HttpServer.bind(, 8080).then((server) {server.listen((HttpRequest request) {//request.uri.pathrequest.response.write(Hello, world);request.response.close();});});}サーバーサイド
  11. 11. Server sideサーバーサイド
  12. 12. Testunit test[本家][導入]テスティング
  13. 13. web_ui<html>のパーツ化データの変化によるViewの変化駆動 and Web Component
  14. 14. 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
  15. 15. Web_ui Example<b-secret placeholder="Enter your Password"></b-secret> and Web Component
  16. 16. Web_uicreate project resultMDV and Web Component
  17. 17. Reccomend PackagesJS component parts like API game createおすすめのパッケージ
  18. 18. Thanks