Pierwsze kroki z Dart

Mam ostat­nio wraże­nie, że wszy­scy dookoła posta­no­wili „ulep­szać” Java­Script. Co chwilę widzę jakieś nakładki, mena­dżery pakie­tów, nawet całe frame­worki do tworze­nia apli­ka­cji. Google też wzięło udział w tej zaba­wie i to całkiem z grubej rury — stwo­rzyło od podstaw cały język — Dart, który ma tę właści­wość, że działa na maszy­nie wirtu­al­nej, ale równie dobrze za pomocą narzę­dzia dart2js kompi­luje się do nieza­leż­nego kodu JavaScript.

Część środo­wi­ska z góry neguje, że Google chce zmusić progra­mi­stów do przej­ścia na Chrome. Osobi­ście nie podzie­lam tego zdania. Testo­wa­łem kod na Fire­fok­sie i działa jak należy. Na IE nie spraw­dza­łem z racji tego, że nie uznaję za właściwe testo­wać programu do pobie­ra­nia przeglądarek ;-)

Muszę przy­znać, że po godzi­nie zabawy z nowym języ­kiem jestem pozy­tyw­nie nakrę­cony. To co podoba mi się najbar­dziej to warun­kowe statyczne typo­wa­nie zmien­nych. Dart pracuje w dwóch trybach: chec­ked modeproduc­tion mode. Przy chec­ked mode spraw­dza wszyst­kie aser­cje, typy argu­men­tów, zmien­nych i zwra­cane typy funk­cji. W produc­tion mode wyrzuca wszel­kie „zwalniacze”.

Dobra, nie będę piał z zachwytu tylko pokażę Wam efekt godzin­nego zapo­zna­wa­nia się z API Darta. Poni­żej omówię cieka­wostkę, którą tam zasto­so­wa­łem: isola­tes (izolaty?). To taka namiastka wielo­wąt­ko­wo­ści w jedno­wąt­ko­wym środo­wi­sku prze­glą­darki. Te obra­ca­jące się cyferki to nie żaden animo­wany gif. Wpisu­jąc kilka­na­ście cyfe­rek wyraź­nie widać zwolnienie.

Kod wyko­ny­wany „w izolatce” ma formę funk­cji nie zwra­ca­ją­cej warto­ści, za to mają­cej dostęp do zmien­nej port umoż­li­wia­ją­cej komu­ni­ka­cję ze świa­tem. Para­metr msg to komu­ni­kat „w dół”, a replyTo „w górę”.

void numCounter() {
  port.receive((msg, replyTo) {
    Element h1 = query("h1#counter${msg['id']}");
    int counter = 0;
    int currentNumber = 0;
    new Timer.repeating(25, (Timer timer) {
      if (currentNumber > 9) {
        currentNumber = 0;
      }
      h1.text = currentNumber.toString();
      currentNumber++;
      counter++;
      if (counter > msg['counter']) {
        timer.cancel();
        h1.text = msg['number'];
        replyTo.send(msg['number']);
      }
    });
  });
}

Wszę­dzie mógł­bym użyć var zmienna, ale nie chcia­łem sobie psuć zabawy. Funk­cja query to taki zaka­mu­flo­wany jQuery, który zwraca nam obiekty dzie­dzi­czące po Element. Selek­tory tworzymy w podobny sposób.

Kod obsłu­gu­jący izolaty wygląda tak jakoś „Javopodobnie”.

void main() { 
  Element submitInput = query('input#submit');
  Element errorBox = query('span#errorbox');
  Element countersDiv = query('div#counters');
  submitInput.on.click.add((e) {
    errorBox.text = '';
    countersDiv.text = '';
    HTMLInputElement inputNumbers = query('input#numbers');
    String inputtedNumbers = inputNumbers.value;
    List<String> numbers = inputtedNumbers.splitChars();
    bool hasErrors = false;
    numbers.forEach((element) {
      try {
        int.parse(element);
      } on FormatException {
         hasErrors = true;
         print('element $element is not an integer');
      }
    });
 
    if (hasErrors) {
      errorBox.text = 'Wpisz same cyfry!';
    }
    else {
      for (num i = 1; i <= numbers.length; i++) {
        HeadingElement h1 = new HeadingElement.h1();
        h1.id = 'counter$i';
        h1.text = '0';
        countersDiv.append(h1);
      }
 
      List<SendPort> spawned = new List<SendPort>();
 
      num timeout = 20;
      num firstId = 1;
 
      numbers.forEach((item) {
        SendPort sender = spawnFunction(numCounter);
        sender.call({
          'number' : item,
          'counter' : timeout,
          'id' : firstId
        }).then((String res) => print('result was: [$res]'));
        spawned.add(sender);
        timeout += 10;
        firstId += 1;
      });
    }
  });
}

Izolaty można obsłu­gi­wać na kilka sposo­bów. Ja wyko­rzy­sta­łem obiekt klasy Future, który powstaje poprzez sender.call(), a następ­nie przej­muję odpo­wiedź izolaty za pomocą then().

Kod można sobie ścią­gnąć poprzez Gist na GitHu­bie.

Na koniec ważna uwaga: nie pisz w Darcie nic poważ­nego, bo za dwa miesiące pewnie coś nie będzie dzia­łać. Ostat­nio robią duże prze­ta­so­wa­nia w biblio­te­kach poprzez masowe tworze­nie klas BaseCośTam.

Podobne wpisy:

  1. Google Chrome — pierw­sze wrażenia
  2. Multi­th­re­ading in web brow­ser (Web Workers + jQuery)
  3. HeyahGG — pierw­sze wrażenia
  4. Wielo­wąt­ko­wość w prze­glą­darce (Web Workers + jQuery)

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <p> <pre lang="" line="" escaped=""> <q cite=""> <strike> <strong>