1- What is Dart ?

1-  What is Dart ?

1- What is Dart ? 

 DART CODE  : Quick Overview   ::  Optional Typing   / named Params ...

// Snippet Code @bwnyasse :  Dart Meetup - GDG Toulouse

// Define a function.
whatIsYourFavoriteMeetup({name, where: 'AtHome', creationD}) =>
    // print with String interpolaion
    print("$name is my fav meetup at $where, created the $creationD.");


// Top-level required function
main() {
  String meetupName = "GDG Toulouse";

  // Without specifying the type
  var cDate = new DateTime(2012, DateTime.DECEMBER, 9);

  whatIsYourFavoriteMeetup(
      name: meetupName,
      creationD: cDate
  );
}

1- What is Dart ? 

 DART CODE  : Quick Overview    :: Librairies & Visibility

// Snippet Code @bwnyasse :  Dart Meetup - GDG Toulouse

import 'dart:html';
import 'package:gdgtoulouse/lib1.dart';
import 'package:gdgtoulouse/lib2.dart' as lib2;
import 'package:gdgtoulouse/lib3.dart' as lib3 hide GDGElement;


// Top-level required function
main() {

  GDGElement el1 = new GDGElement(); // GDGElement from lib1.

  lib2.GDGElement el2 = new lib2.GDGElement(); //  GDGElement from lib2.

  // new lib3.GDGElement(); !! ERROR !!
}

1- What is Dart ? 

 DART CODE  : Quick Overview    :: Asynchronous  Async/Await

// Snippet Code @bwnyasse :  Dart Meetup - GDG Toulouse

import 'dart:html';

final PATH = 'https://www.dartlang.org/f/dailyNewsDigest.txt';

// Imagine that this function is more complex and slow. :)
gatherNewsReportsIsSlow() async => await HttpRequest.getString(PATH);

printDailyNewsDigestInAsync() async {

  try {
    String news = await gatherNewsReportsIsSlow();
    print(news);
  } catch (e) {
    // ... handle error ...
  }
}

main() => printDailyNewsDigestInAsync();

1- What is Dart ? 

 DART CODE  : Quick Overview   :: Named constructor ... Null Aware .....  

// Snippet Code @bwnyasse :  Dart Meetup - GDG Toulouse

class Element {

  var type;

  Element();
  Element.withType(this.type); // Named constructor

  someMethod() => "Something";
}


// Top-level required function
main() {

  Element el;

  el?.type; // if ( el != null ) el.type
  el?.someMethod(); // if ( el != null ) el.someMethod()

  el ??= new Element.withType("GDG meetup");; // if ( el == null ) ...

}

1- What is Dart ? 

 DART CODE  : Quick Overview   ::  Collection iteration

// Snippet Code @bwnyasse :  Dart Meetup - GDG Toulouse

// Top-level required function
main() {

  List myList = [1, 2, 3, 4, 5];

  myList.forEach((v) => print(v));

  List moduloTwoList = myList.where((v) => v%2 == 0);
  
  print(moduloTwoList);

}

2- State of Dart Lang in 2017

2- State of Dart Lang in 2017

3- what ? .... Angular with DART ?  

3- Angular with DART !   

13 down vote

... while rewriting AngularDart we have chose to take advantage of these language features. We have also learned from our mistakes on AngularJS and taken the opportunity to correct them, such as much improved Directive API. Finally we have take advantage of the latest browser technologies and based AngularDart on top of Shadow DOM. All of the learnings we have gained in building AngularDart, will be applied back to AngularJS v2. This is only expected since AngularDart is younger than AngularJS. ...  share edit flag answered  Jan 10 '14 at 22:37 Misko Hevery 41.2k 11 33 35

3-  Angular with DART !

<toggle button="Toggle">
    <p>Inside</p>
</toggle>

directive("toggle", function(){
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {button: '@'},
        template: "<button...
        controller: function($scope)
        ...

@Component(
    selector: "toggle",
    publishAs: 'tgl',
    template: "<button ....",
    cssUrl: 'toggle.css'
)
class Toggle extends ShadowRoot... {
  @NgAttr("button")
  String button;
...

3- Angular with DART !

import { Component } from '@angular/core';

@Component({
    selector: 'my-fav-meetup',
    template: `<h1>My Fav Meetup is {{name}}</h1>`
})
export class FavMeetupComponent {name= 'GDG Toulouse'; }

import 'package:angular2/core.dart';

@Component(
    selector: 'my-fav-meetup',
    template: '<h1>My Fav Meetup is {{name}}</h1>')
class FavMeetupComponent {
  var name = 'GDG Toulouse';
}

3- Angular with DART !

3-  Angular with DART !

3- what ? .... Angular with DART ? 

Quick Live DEMO 

STAGEHAND :   Scallfolding Angular 2 Dart 

+

 
PUB :    get , compile ( dart2JS ) + build 

4- So, Dart in Production ?  

4- So, Dart in Production ?  

4- So, Dart in Production ?  

4- So, Dart in Production ?  

4- So, Dart in Production ?  

5- Interop : Dart <--> Javascript 

name: gdgtoulouse
description: Snippets Collection displayed during the meetup.
author: bwnyasse

environment:
  sdk: '>= 1.13.0 <2.0.0' 

dependencies:
  js: any # This packages requires Dart SDK 1.13.0.

import "package:js/js.dart";

///  An 'external' function : Body is defined somewhere else 

// Calls invoke JavaScript `JSON.stringify(obj)`.
@JS("JSON.stringify")
external String stringify(obj);

5- Interop : Dart <--> Javascript 

@JS('google.maps')
library maps;

import "package:js/js.dart";

// `new LatLng(...)` invokes JavaScript `new google.maps.LatLng(...)`
@JS("LatLng")
class LatLng {
  external LatLng(num lat, num lng);
}

// `new Map` invokes JavaScript `new google.maps.Map(location)`
@JS()
class Map {
  external Map(LatLng location);
  external Location getLocation();
}

5- Interop : Dart <--> Javascript 

// Javascript Cordova FacebookConnectPlugin getLoginStatus API
facebookConnectPlugin.getLoginStatus(Function success, Function failure)
    

// Define in Dart
@JS("facebookConnectPlugin")
class Facebook {
  external static getLoginStatus(Function success, Function failure);
}

Facebook.getLoginStatus(
    allowInterop((success) => print('Success login status: ${success}')),
    allowInterop((fail) => print('Login failure: ${fail}'))
    );

T5- Interop : Dart <--> Javascript 

import 'package:chartjs/chartjs.dart';
...

@override
ngAfterContentInit() async {
  ...
  ctx = (querySelector('#cpu-stats-chart') as CanvasElement).context2D;
 initCpuChart();
 ...
}

initCpuChart() {
  LinearChartData data = new LinearChartData(labels: cpuPercentReadData, datasets: <ChartDataSets>[
    new ChartDataSets(
        label: "cpu percent",
        backgroundColor: "rgba(151,187,205,0.5)",
        ...)
  ]);
  ChartConfiguration config = new ChartConfiguration(type: 'line', data: data, options: new ChartOptions(responsive: true));
  Chart cpuChart = new Chart(ctx, config);

5- Interop : Dart <--> Javascript