Dart – Úvod do jazyka
Dnes si rozchodíme Dart Editor a preskúmame prostredie. Jedným klikom vyvinieme jednoduchú webovú aplikáciu a trochu sa na nás nalepí zo syntaxe dartu. Vyhrňme si rukávy a pusťme sa do roboty, dartizáni!
Seriál: Úvod do Dartu (9 dílů)
- Dart – Čo? Prečo? 2. 8. 2013
- Dart – Úvod do jazyka 23. 8. 2013
- Dart – Ponorme sa hlbšie 6. 9. 2013
- Dart – v DOMe 19. 9. 2013
- Dart – Futures 4. 10. 2013
- Dart – Streams 17. 10. 2013
- Dart – Používame JavaScript 1. 11. 2013
- Dart Typesystem 19. 11. 2013
- Dart – Neznesiteľná ľahkosť asynchrónneho bytia 2. 12. 2013
Nálepky:
Inštalujeme
Z oficiálnej stránky Dartu si môžeme stiahnuť Dart SDK pre všetky moderné operačné systémy, Windows XP nie je podporovaný.
Dart Editor je IDE vyvinuté pre Dart postavené na Eclipse, ponúka štandardné veci ako doplňovanie kódu, asistenciu pri refactoringu, prehľad projektu, navigáciu v kóde, debugger a statickú analýzu kódu. Dartové projekty sa samozrejme dajú vyvíjať aj v iných nástrojoch, na oficiálnej stránke sa spomínajú pluginy pre Eclipse, Vim, Emacs, Sublime a Intellij IDEA a Webstorm.
Dartium je Chromium so zabudovaným Dart VM. Na oficiálnej stránke nájdeme upozornenie, že Dartium v tejto chvíli nie je vhodné na bežné prehliadanie, hrozia problémy s bezpečnosťou a stabilitou.
Dart SDK obsahuje
- dart VM a štandardné knižnice
- dartanalyzer na statickú analýzu kódu
- dart2js na kompiláciu do JavaScriptu
- dartdoc na dokumentovanie API
- pub ako package manager
Spúšťame Dart
Po spustení Dart Editoru nás privíta obrazovka s odkazmi na ukážkové projekty, dokumentáciu a ponukou na vytvorenie aplikácie.
Klikneme na Create an application… a z ponuky vyberieme Web application. Nechajme zaškrtnutú voľbu Generate sample content, táto príjemná drobnosť zjednoduší začiatočníkovi provotné experimenty s Dartom, lebo začína s už hotovou jednoduchou aplikáciou.
Horiac nedočkavosťou spustiť prvý program v Darte a z bočného menu vyberáme web/helloworld.html. Klikneme na ikonku zelenej šípky a v Dartiu sa spúšťa jednoduchá hračka.
Prieskum prostredia
Osobne ma po chvíli klikanie na text Click me! omrzelo. Poďme sa preto radšej pozrieť, z čoho všetkého sa takáto jednoduchá zábavka skladá.
V priečinku packages sa nachádzajú symbolické odkazy na jednotlivé závislosti projektu inštalované cez pub. V tejto chvíli tam nájdeme len balík browser, nutná závislosť každého Web application projektu v Darte. Balíky sa nachádzajú v jednej spoločnej systémovej cache nezávislé od projektu. V Linuxe a OS X sa táto cache nachádza v ~/.pub-cache/, vo Windowse to je AppData\Roaming\Pub\Cache.
Podrobné informácie o projekte a závislostiach môžeme editovať v pubspec.yaml. Po otvorení v Dart Editore sa nám zjaví prehľadná obrazovka, takže nováčikov neodradí nutnosť editovať surový yaml.
Pri definovaní závislostí je možné uviesť balíky hostované na pub.dartlang.org alebo taktiež udaním git repozitára, či priamo cesty k balíku. Možno nastaviť požiadavky na verziu balíka, prípadne balík označiť ako dev dependency, čo sa hodí pri vývoji vlastných balíkov, kedy my pri vývoji oceníme napríklad balík unittest , ale používateľ nášho balíka si už vystačí aj bez neho.
Po nastavení závislosti stiahneme a nainštalujeme jedným klikom na Run Pub install a môžeme pracovať.
Pri práci na väčšom projekte nie je dobré, ak majú vývojári nainštalované rôzne verzie závislostí. Aby sa toto nedialo, tak sa po prvom nainštalovaní každej zo závislostí vytvorí pubspec.lock, v ktorom je definované, aké verzie balíkov sú použité. Keď chceme neskôr verzie balíkov aktualizovať, musíme to spraviť explicitne cez Pub Update. Takže ak chceme zaručiť, že všetci vývojári budú mať vždy rovnaké verzie balíkov, stačí vložiť pubspec.lock do nášho version control systému.
Samotné zdrojové kódy nájdeme v priečinku web. Nájdeme tu zdrojový kód v darte, zdrojové html a css súbory.
V momente, kedy sa rozhodneme projekt nasadiť, pustíme Pub Deploy a pribudne nám adresár deploy, ktorý potom už len stačí nakopírovať na server. Dnu nájdeme kópiu všetkých použitých balíkov, zdrojové súbory a javascriptovú skompilovanú verziu nášho dartového kódu.
Ponor do zdrojáku
Keď sme sa trochu zorientovali v prostredí, poďme prelúskať samotný kód.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<link rel="stylesheet" href="helloworld.css">
</head>
<body>
<h1>HelloWorld</h1>
<p>Hello world from Dart!</p>
<div id="sample_container_id">
<p id="sample_text_id"></p>
</div>
<script type="application/dart" src="helloworld.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>Html kód vyzerá úplne typicky, len na konci body elementu sa nachádzajú dva <script> tagy. Prvý <script type="application/dart"> načítava našu dartovu aplikáciu a druhý, dart.js, je zodpovedný za načítanie príslušnej javascriptovej verzie pre prehliadače nepodporujúce dart.
import 'dart:html';
void main() {
query("#sample_text_id")
..text = "Click me!"
..onClick.listen(reverseText);
}
void reverseText(MouseEvent event) {
var text = query("#sample_text_id").text;
var buffer = new StringBuffer();
for (int i = text.length - 1; i >= 0; i--) {
buffer.write(text[i]);
}
query("#sample_text_id").text = buffer.toString();
}
Ponorme sa však do tej zaujímavejšej časti, pozrime sa na helloworld.dart. Syntax pôsobí známym céčkovým dojmom – príkazy oddeľované bodkočiarkami a všade kopa zátvoriek.
Na prvom riadku sa importuje knižnica dart:html zodpovedná za sprístupnenie väčšiny prehliadačového API a základné nástroje na manipuláciu s DOM.
Nižšie je zadefinovaná funkcia main, ktorá má podobný účel ako by čakal každý céčkový programátor, je to vstupný bod celého programu. Sympaticka je garancia, že v čase jej spustenia je pripravený celý DOM, takže sme ušetrení od takýchto hackov.
Kód je ďalej pomerne priamočiary. Pomocou funkcie query(selector), ktorá je ekvivalentom $(selector) v jQuery, nájdeme na stránke <div id="sample_container_id">, nastavíme mu text na "Click me!" a nastavíme funkciu reverseText ako onClick event listener.
Zaujímavosťou, ktorú si treba všimnúť, je reťazenie týchto dvoch úkonov za seba. Často je zvykom (napríklad v jQuery a mnohých iných frameworkoch) používať method chaining. To má síce občas výhody v podobe kratšieho a prehľadnejšieho kódu, no výmenou za to sa trochu porušuje koncept funkcia má vracať výsledok svojho výpočtu. V darte sa preto rozhodli method chaining zaviesť priamo do jazyka a to pomocou cascade operátora ...
Dart umožňuje deklarovať premenné na ľubovoľnom mieste v kóde (hurá) a programátor si môže vybrať či špecifikuje aj jej typ. Premenná text v ukážkovom kóde je zadeklarovaná bez typu ako var text, ekvivalentný kód no s typom by sa zapísal String text. V darte typy slúžia len na dokumentáciu API a nejakú jednoduchú kontrolu správnosti, ich používanie alebo nepoužívanie nemá (a by design nikdy nebude mať!) dopad na rýchlosť. Preto väčšinou nemá veľký zmysel otypovávať lokálne alebo privátne premenné, no hodí sa to pri verejných API rozhraniach.
Syntax for cyklu je céčková, ako sme zvyknutí, no dart navyše podporuje aj for-in cyklus, ktorý sa používa nasledovne:
var cifry = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
for (var x in cifry) {
print(x);
}Nižšie je v kóde použitý StringBuffer slúžiaci na efektívne spájanie stringov. Ekvivalentný kód by sa dal napísať aj:
var result = "";
for (int i = text.length - 1; i >= 0; i--) {
result += text[i];
}
query("#sample_text_id").text = result;takýto kód však beží v čase kvadratickom od dĺžky stringu, čo sa všeobecne nepovažuje za úplne vhodný nápad (i keď v tomto konkrétnom prípade to nezaváži).
Zvyšok je priamočiary. Do bufferu zapíšeme text z kontrolky odzadu, StringBuffer skonvertujeme na String a ten nastavíme ako text kontrolky.
Zvyšok kódu sú už len css súbory a tie nie sú moc zaujímavé.
Vďaka za ryby
Nateraz všetko. Nabudúce sa pohráme s unittestingom a vyrobíme jednoduchú hru. Ak máte čokoľvek na jazyku, píšte, pýtajte sa a nadávajte (slušne a konštruktívne samozrejme) v diskusii.
Samuel Hapák
S kamošmi som založil VacuumLabs, špecializujeme sa na webové aplikácie. Momentálne frčíme na Pythone a pokukujeme po Darte. Nikdy neodmietam pozvanie na dobré české pivo.
