Most of my background is developing in a structured language, Java in my case, and I have gotten used to using enterprise tools and technologies to help me and my team deliver a quality product.
My goal with this blog is to help support the Dart initiative, and to provide a way for developers coming from a Java background (or any background) to more easily adopt Dart as another tool in their web development efforts. There should be plenty here for anyone wanting to learn Dart, regardless of their background.
I will try to choose topics that I feel have helped me the most in adopting the language, and I will attempt to draw similarities and contrasts with Java.
Before I get started, I also want to point out that Google has released this language at a very early stage, so you should lower your expectations early on and take an opportunity to make the language as good as it can be by providing feedback to the Dart team. I have found that the Dart team, and the community that has grown from their efforts, have been terrific in addressing any questions or issues that I have had.
From the title of this blog, you can probably tell that I subscribe to the proven approach described as Test Driven Development. My intention is not to debate the merits of TDD, but I am hopeful that those of you who have never tried this approach will see some benefit in such an approach. Particularly when it comes to web development, which has not typically lent itself well to this type of approach.
I will begin my series by covering the basics of setting up a development environment, in particular for the benefit of those who would like to follow along with some of the code samples. I will base this series on a Windows environment, mainly because I am seeing a great deal of Linux and Apple based Dart material out there already. In addition to this, I will be encouraging you to download the binaries, not because it is not fun compiling for hours, but because it will get you up and running quickly.
Download Resources
The current version I am using for my development environment is build 3331. You can find the same files here. You should see a list of files something like the following.
I have highlighted the specific files that I use in my environment. If you extract both files to a directory of your choosing on your computer, the directory structure will look something like this.
The folder labeled 'dart' (<DART_EDITOR_HOME>) contains an editor for you to develop your applications, based on the popular Eclipse platform. Some of the features I have grown to really like are not implemented yet, but as mentioned, it is still early, and the editor is constantly improving.
The other folder contains the Dart runtime files that includes the Dart executable as well as a compiler written in Dart called frogc. We will use these files occasionally, so it is good to have them in a known location early on.
I would suggest that you follow the convention as set out by the Dart team, to use your home folder as the starting point, and create a directory called dart your home directory. In here, I keep all of my projects that get created in the editor. This way, I can use different builds of Dart, but always be pointing to the same directory for source code. There are other things that I prefer to do in my environment, but I will leave that out for now.
As long as you have a recent version of Java installed and recognized on your OS, you can navigate to <DART_EDITOR_HOME> , and execute DartEditor.exe. Here is what you should see.
I was fortunate to find an article on Unit Testing with Dart, and I have used this article as a starting point for my unit testing. Use the same libraries I am using by downloading this file, and extracting to your home\dart directory.
Create a Simple Demo using TDD
One of the principles of TDD is to write a test first and watch it fail. I will create a project that represents a sample application, and a second application for testing that sample app.
In the Dart editor, click File > New Application. Fill-in as shown here.
Click Finish, and you will have a skeleton application that technically can be run directly, but that is not what we want here. What I would like is to create a sample library and test that library.
Replace what is in the editor window with one statement as follows.
#library('calculator');
Save the file.
Notice that the Libraries view now has an icon labelled 'calculator', indicating that there is now a library with that name.
Now right-click on the package labelled 'calculator', and choose New File. Fill-in as shown here.
A new class file will be in the editor window, with only a class definition. This class declaration is identical to how a class would be declared in java, except that the source file ends in a .dart extension.
Select the original source file labelled MySampleApplication.dart, and you will notice that the editor has already added a new entry for the source file just created.
Repeat the steps just performed so that there is another source file called addition.dart. Make a small change to the addition and subtraction class definitions such that the class declarations begin with a Capital letter. This will not require, unlike Java, that the source file name be changed.
So, all that we have at this time in out primary source file for our library are these 3 lines.
#library('calculator');
#source('subtraction.dart');
#source('addition.dart');
So far, so good. Now lets write some tests!
Create a new application and fill-in as follows.
Notice we are choosing 'Web' this time, because the testing framework is graphical.
Change the string text 'hello World!' with 'MySampleApplication Test Suite!'. As a sanity check, save all (and wait for compiling to finish) and click Tools > Run in Browser. If your default browser is not currently Chrome, copy the url that is displayed in your default browser, and paste it into Chrome. For this series, I will assume Chrome as your browser.
You should see something like this.
Add the following statement as the second line in the TestMySampleApplication.dart file.
#import('../MySampleApplication/MySampleApplication.dart');
This is all that is required to expose the class Addition and Subtraction.
Now add 2 additional lines as shown here.
#import('../testing/unittest/unittest_dartest.dart');
#import('../testing/dartest/dartest.dart');
Also, after the last line in the main method, add this line.
new DARTest().run();
Save all files and wait for the build to finish (done automatically). Go back to the Chrome browser window you had open previously and press F5 or click refresh.
You will now see something like.
As you can see, there is now a console that appears, allowing you to run unit tests. We have no unit tests at the moment, but that can't last long! :)
Write a Test and Watch it Fail!
In my very simple scenario here, we have a use case where a client of our library would like to call a method/function that accepts 2 parameters of type int and returns a value of type int that represents the sum of the 2 parameters passed in. (I will not debate the merits of statically typed and dynamically typed languages. Not now anyway. )
To write a test, we need to define a new method/function, and we will call it simpleTests().
Immediately after the main method definition, define the function called simpleTests(). In that function, define a nested function called setupData(), followed by a nested function called group() that accepts a String and an anonymous function for parameters. In the anonymous function, define a function called test() that accepts a String and another anonymous function for parameters.
It should look like this if you were following along.
That is not very interesting yet, so we will add some additional code that actually exercises something.
The first test we want to write will be to test a function called 'add()'. Here is what we start with.
Naturally, the editor complains because the add() function does not exist, so following TDD, we will satisfy the compiler by adding a static method called add to the Addition class as shown here.
This allows us to compile, in spite of the fact that we did not provide any implementation to the add function.
Add a new call to the function simpleTests(); in the main method, just before the call to new DARTest().run();
If we save all files and look at our application in the chrome browser, we will now see that there is a test. Click the button with the right arrow to run the test listed. You will see something like this.
Great work!! We got it to fail.
Now lets change the implementation so that our test passes.
If we provide the simplest code that will get the code to work, then we may have something like this.
return operand1 + operand2;
Save, wait for compile and refresh our page. Click the right arrow to execute the tests. We will see this.
Now that we have this simple function behaving as we would expect it to in this test, we can re-factor the code knowing that running this test again will ensure that we know if and when we break the code.
I admit that this is a very simple example, but now that we have a grasp of our environment and how to set-up tests, we will continue in the next series with testing a more real application that most can relate to.
No comments:
Post a Comment