Wednesday, January 1, 2014

Dart - Brief Overview

What is Dart ?

From dartlang.org, "Dart is a new platform for scalable web app engineering". Dart is not only a new language based on lessons learned from best of both dynamically and statically typed languages but also offers a virtual machine (Dart VM) that run both server and client side code, libraries and a dart editor to build and test dart code. 

Dart can run natively on the Dart VM or can be compiled to JavaScript to run on all modern browsers. Dart is an open source language and still evolving. Dart powered by contributions from Google and others from the open source community. 

The dart language site, dartlang.org is organized very nicely and has all that you need to quickly get started.

Simple Dart Web Application

I have put together a simple Web Application (A card matching memory game) to check out basic dart features and get a feel for the language.















1. Create new Web Application in Dart Editor.
















2. Update the CSS file to create classes for the Cards and Card Covers.

3. Update the .html file to create the cards and card covers for the card matching game. (Yep.... we can dynamically create the divs instead of hard coding them in the html page...will save that for some other time :)... )


4. Now the dart source code.

  • Import the required dart libraries. 
  • Create the data list that we would manipulate in the code. 
    • CardData - This will be the title of the cards that we would use to match.
    • CardSet - This will be the div id of the cards we will use to randomly assign card title.
    • cardCoverSet - This will be the div id of the card covers we will use these to cover the cards and write some event handlers to show/hide the cards.
  • The Random logic which will be used to assign titles to the cards randomly. 
  • Code to assign card covers to the card and set up event handlers for the card covers, then show or hide divs if matching cards are selected or not. 
  • Code to assign card title and the main entry point. 
5. Run the application in Dartium.





























6. Run the application using JavaScript.




























When Run as JavaScript is selected, dart editor will run dart2js to compile dart source code into JavaScript.















Source Code for Simple Web Application available on GitHub.

Until next time, Thank you
Malcolm