Dartlang for devices with Rikulo

While working with Rikulo is as straight forward as working with any other packages of Dart, to make this work in devices, one has to keep following things in mind.
First of all “Rikulo” itself is not capable of doing device level development, rather it depends upon “phonegap” (now cordova) and to compile against this, there is another package named “Rikulo Gap“. So the basic pub setup looks as this.

dependencies:
  rikulo:
  rikulo_gap:

Once installed the development process is straight forward as Dart itself while taking advantage of the Cordova APIs.
Upon completion of the development process, jump into “Dart to Javascript” compiler and generate the javascript file for the project. Fortunately thats as simple as going to “Tools” menu and clicking “Generate Javascript” in the Dart Editor. One has to select the “.dart” file first, for which the javascript file has to be generated. Upon successful generation of the file, the generated file name would be something like “myProject.dart.js”.
Now you have to add this “js” file in your “html” file like the usual “script” tag. That means to deploy to Cordova, you have to add two script tags as below.



Once done, open up the Eclipse or which ever IDE you are using to develop the Cordova (phonegap) applications, copy the “.html” and “.js” file into the respective folders of the Cordova project.
Lastly, but most importantly, remove the version number from the cordova JS file (for example cordova-2.3.0.js to cordova.js).
Now we have a workable native application built with Dart, Rikulo and Cordova.

Happy Darting !

Dartlang, the basics

The basic things, which will help one, moving ahead in the Dart language are as below.
Its class based.
Every class has got a constructor. If one is not written, its been added by the language itself.
Constructor is not inherited.
Multiple constructors are possible.

Private properties are written with an underscore.

int _age=20;

The getter and setter are just methods with “get” and “set” added before it.

int get userAge{}

Inside a string the if something is written between “${” and “}” that value will be evaluated and appended to the string.

 'Person is of age ${j.userAge}'

Hope that helps to get you started in the language.

Some interesting Dartlang packages

There are various packages with different intentions are available to Dartlang in a global space known as “pub“. At present there are two of these packages which seems interesting to me.

  1. Dartflash
  2. Rikulo

As you might be already guessing that “Dartflash” is a port of Flash API to Dartlang. That makes any flash developer instantly play with “canvas” element of HTML5. So yes, its not working on the DOM of the page rather works on the “canvas” element of the DOM.
The second one, that is “Rikulo” seems to promise a lot. It says, it can create “cross-platform web and native mobile applications using HTML5″, while its true to create web applications, but the native mobile application is done through, you guessed it right, phonegap(now known as CORDOVA). And now there is another dart package,which is the port of CORDOVA in Dartlang. Its known as

  • Rikulo Gap
  • That means, one has to have the “Phone Gap” development environment ready to start doing mobile development.
    Rikulo works in DOM manipulation and gives a displaylist hierarchy (if one compare it with flashplayer displaylist, its similar in concept and how it works).

    Some interestin Dartlang packages

    There are various packages with different intentions are available to Dartlang in a global space known as “pub“. At present there are two of these packages which seems interesting to me.

    1. Dartflash
    2. Rikulo

    As you might be already guessing that “Dartflash” is a port of Flash API to Dartlang. That makes any flash developer instantly play with “canvas” element of HTML5. So yes, its not working on the DOM of the page rather works on the “canvas” element of the DOM.
    The second one, that is “Rikulo” seems to promise a lot. It says, it can create “cross-platform web and native mobile applications using HTML5″, while its true to create web applications, but the native mobile application is done through, you guessed it right, phonegap(now known as CORDOVA). And now there is another dart package,which is the port of CORDOVA in Dartlang. Its known as

  • Rikulo Gap
  • That means, one has to have the “Phone Gap” development environment ready to start doing mobile development.
    Rikulo works in DOM manipulation and gives a displaylist hierarchy (if one compare it with flashplayer displaylist, its similar in concept and how it works).

    Two absolutely necessary Node packages, within a week of Nodding

    As my learning continues with NodeJS, it is now becoming obvious to me that probably I could never live without Node in future from now on, even if I do not continue developing on NodeJS. In just about a week there are the below two packages which became absolutely necessary for me in day to day work, while doing front-end web work or just playing around with javascript in general.
    serve
    nodemon
    These two enable any folder to act as a web server. Once installed from “npm” one can directly fire up these commands and see the folder as a website through a browser.
    If you want to run the webserver at port “1234″, just navigate to the folder you want to serve as a website and fire up the command below.

    serve -p 1234
    

    If you do not care about the port, just

    serve

    will do the job, where the site will be served at a default port “3000″.
    Now to access the website go to “http://localhost:3000/” in your favorite browser.
    If you change a file, you have to manually restart the server.
    Now “nodemon” helps us in automatically restarting the server on any file change. If one is working on any web application and does continuous changes to the files, one just have to refresh the webpage (No need to restart the server over and again for updates). That gives continuous focus on development.
    Happy Nodding :)

    On my search for a JS variant, triggered by NodeJS study

    Well while going ahead with my NodeJS study and after looking at the functionality that NodeJS provides, I got a little curious to search for something which might help me develop in JS a little more easily. To my surprise, I found a lot of languages which does that, but I picked 3 as it seemed these are got some history to themselves and backed by big corporate or have a huge community to support.
    1. CoffeeScript
    2. TypeScript
    3. Dart
    All these three compile to javascript. While CoffeeScript and TypeScript are nodeJS dependent and installed by “npm”, Dart comes with its own installation and IDE. Personally I liked the first two, at first glance as they are installed with “npm”. But then Dart comes with its own IDE, which is an advantage.
    Now a little bit about the face value of the three.
    CoffeeScript : A huge community and has proven history of a good player.
    TypeScript : Its a microsoft initiative.
    Dart : Its a Google initiative.

    Looking at all these, I still feel HAXE is the best for JS dev too, may be thats my biased opinion.

    Modules in NodeJS

    There is this concept of Modules in NodeJS, which is kind of but not exactly the same as Class concept of programming languages like Java and ActionScript. To add a module the syntax is

     
    require() // its like import in Java and Actionscript
    

    A detailed implementation of “require()” statement is as below

     
    var myModule = require('./myModule.js');
    

    So that’s all to include a module, if the module JS file and your application JS file are in the same folder, for the time being lets do the understanding this way. :)
    Now lets see what kind of features or flexibility “modules” gives us as a nodeJS developer.
    If we think of modules as the Classes then it will be easier for us to understand.
    First of all, everything inside a module is private. Ohh yes, private things in javascript. Thats interesting, is not it!
    Lets write a simple class kind of thing in a module, which has a private property and getter-setter method of the same.

    stupidVar='Global Scope. Avoid this.';// Never put anything in Global Scope
    var nameOfModule='I am private';
    exports.getName=function(){
    	return nameOfModule;
    }
    exports.setName=function(newName){
    	nameOfModule=newName;
    }
    

    Couple of things to note here. First of all every variable that is not declared with “var” is on the Global scope. I think thats true in general for javascript. Apart from this anything else in a module is private, that means the variable “nameOfModule” in our example is only accessible from inside that module itself. If we try to access it from out side the module NodeJS will throw an error. Now to expose methods and properties to outside world, we have to add the methods and properties to an object named “exports”.
    Now to consume the module, lets write a “main” class which we can assume as the application entry.

    console.log("Hello Modules.");
    var modOne=require ('./modOne.js');
    console.log(modOne.getName());
    modOne.setName("I am set by the setter. Setter is Public.");
    console.log(modOne.getName());
    //console.log(nameOfModule);// this will throw an ERROR as we are trying to access private var
    console.log(stupidVar);
    

    Save both the files in the same directory. Open the commandline and navigate to the directory. To run our application we have to write

    node main
    

    Just a note that we do not have to specify “.js” after the “main”, while feeding the file to NodeJS.

    The source files for this are here to download.
    [reference : net.tutsplus.com ]
    Now there are publicly available packages, libraries and modules in our case. To install a module in a nodeJS application, one has to navigate to the folder containing the application through commandline and install the required module. An implementation detail is as below.

    npm install module_name
    

    I hope you remember “npm” from previous tutorial. For a quick reminder, “npm” and “node” both the tools are installed by default when we have installed nodeJS. The “npm” is the package manager for nodeJS.

    Happy Nodding :)

    How I started with NodeJS

    To be clear with the following contents, let me tell you that the whole experiment or learning was done in a Windows environment, but then I found that MAC is easier to start with NodeJS.
    Installation is straightforward. Just download the binary and get going.
    Once installation is done, node and npm command should be available from command-line, if not try restarting and then test the commands. Testing the commands means typing “node” or “npm” in the command line and pressing ENTER. If installed, the result should be something other than “missing command or error message”.

    The next commands I went through are

     npm root
    npm bin 

    why ? To see the details of below explained stuff

    npm root // to see where modules go
    npm bin // to see where executables go
    

    [ ref : https://npmjs.org/doc/faq.html ]

    Next I tried with “-g” switch as below.

     npm root -g
    npm bin -g

    Why ? Thats because node installs differently for global and local specifications.
    [ ref : https://npmjs.org/doc/faq.html
    If you install something with the -g flag, then its executables go in npm bin -g and its modules go in npm root -g ]

    Next is my favorite first timer stuff, to list all the installed packages,

    npm ls

    Next to know a little bit about Node itself

     npm view npm author
    npm view npm contributors

    So thats the start.
    Next is the node official doc. [ ref : http://nodeguide.com/beginner.html ]

    Hello 2013

    Happy new year and its already started. As you can see the post is a little late, for the year is started for me, in a busy mode, which is always a positive sign.

    Time for a retrospect of the last year. The year 2012 was a very happening year for me after my college days.
    1. I got into a startup in Jan 2012 ( pixykids and now renamed to Kazaana )
    2. Met a friend and her family from Swizerland ( Stephanie Booth http://climbtothestars.org/ )
    3. Attended first Tweet-meetup for Pune in Pune
    4. Took interviews for senior flex developer from all around India for the start-up I joined
    5. A lot of learning and research and development happened for multi-user application development. Finally demoed and implemented Union Platform for the product I was working on the start-up.
    6. Got Married.
    7. Looking the product I was working on being released in staging server, alpha version and public beta.
    8. And finally towards the end of the year, I lost my mom, may her soul rest in peace.

    So the eventful year of highs and lows came to an end and given a chance to look at things in new perspective.