It is tough when looking at Dart to remember that compiling Dart to JavaScript isn’t the end game of Dart. This is a much bigger project than CoffeeScript or TypeScript which just aim to make writing JavaScript less painful. Dart is on a quest tocompletelychange how web browser scripting is done. So when I compare dart:html to Sizzle it is a false analogy. Sizzle is written in JavaScript and talk to the browser through a set of APIs which have grown up over the last decade or so.

The assertion of the Dart folks over at Google is that the API which has grown organically is inconsistent and unmaintainable. Based on some of their examples I can’t really disagree. Let’s take a look at a couple of them.

Say you want to query for some information out of the DOM. There is a rich JavaScript API for that. Why you just need to pick one of these methods

getElementsById() getElementsByTagName() getElementsByName() getElementsByClassName() querySelector() querySelectorAll() document.links document.images document.forms document.scripts formElement.elements selectElement.options

That’s pretty clear. In Dart your choices are

query() queryAll()

That’s it. All the power of selecting items is still there but it now hidden in the parameters passed to these two functions. The parameters are written in the same DSL as CSS so it is something that web developers already know. Vendor prefixes are another big issue in modern development. When browser vendors create newfunctionalitythey hide it behind a vendor prefix until it is ready for general consumption. It’s not a big deal if you’re on a rapidly updating browser like FireFox or Chrome but if you’re on IE with yearly release cycles the it is tedious to deal with.

If you want to get access to the camera from a browser in JavaScript you’re going to do

navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

Dart abstracts away all those silly vendor prefixes and give you

window.navigator.getUserMedia(audio:true, video: true)

Way nicer! You can still have all the nice syntactic sugar of jQuery but now jQuery itself can be much smaller and easier to maintain because it doesn’t have to smooth out the weirdbehaviorsbetween browsers.

We need this. I don’t know if Dart is the solution but we need a clean break from maintaining the garbage which is the interface between JavaScript and the browser DOM. I’m glad that somebody is at least making an effort.

Unlike CoffeeScript and TypeScript Dart is not really meant to be compiled to JavaScript. You certainly can compile it to JavaScript but the long term goal of the language is to replace JavaScript. That’s a goal which is at least a decade out. Truth be told I don’t see Dart ever replacing JavaScript wholesale. Selling Dart to Microsoft and to Mozilla is going to be quite a thing when there is already such acceptance of JavaScript. JavaScript hangs around rank 9-11 in the language ranking while Dart is not even in the top 50. That’s not to say that Dart isn’t a fantastic language it is just new and facing a pretty entrenched competitor.

So being a full replacement for JavaScript Dart must also fulfill the role of many of the fantastic libraries which have become commonplace in the land of JavaScript. Dart includes a number of libraries for manipulating html, performing asynchronous actions, running mathematical operations and even fir file I/O. These library create a sort of base class library the same as what you get with Java and .net. Obviously they are too large to cover in a single post. I thought I might talk a bit about dart:html which is the library designed for manipulating and queryingHTML.

The first thing in the html library is a sizzle like selector engine which works on CSS3 selectors. It is easily usable via the query and queryAll functions. Query returns an Element and queryAll returns a list of elements. These elements can be manipulated just as you would in JavaScript. For instance this code will add a colour a couple of divs

On the trivial html test page I put together the result was

Exciting!

If you look back at part 1 of this series I mentioned that there was some concert over the amount of crud which was created by Dart during a normal compile. To make these boxes dart2js generated 1891 lines of code. Humm”¦ that seems excessive. But it isn’t really a fair comparison is it? I included dart:html which is likely huge as it contains a bunch of the functionality of jQuery. If you read the Dart documentation it suggests that Dart will actually trim out functions which are not used. There is also a ““minify flag which can be passed to the dart2js compiler. Using the minify option the library is shrunk way down and the results are in line with other selector libraries.

Library	Size when Minified
Sizzle	17KB
jQuery	32KB
dart:html	25KB

It is difficult to say if comparing dart:html to Sizzle or jQuery is more accurate. There is more that just a selector engine in there but there is also less that full blown jQuery. There is some interesting stuff built into dart:html and its companion libraries. With dart:uri and dart:async we pick up support for web sockets as well as Ajax. I don’t feel like the syntax is all there yet but it does have the advantage of being built into the language. Well built into the base libraries. Most times developers are more likely to use the built in libraries instead of finding third-party libraries so there is probably more consistency moving from one Dart project to another than moving from one JavaScript project to another. The libraries aren’t terrible but they aren’t fantastic either.

“Not terrible but not fantastic” pretty much sums up my feelings about Dart in general.

Classes are a common structure in many programming languages. They are used to arrange code into logically related groupings. In object oriented programming the idea is that each class represents a thing. This thing may be a real world object like a Book or a thing which operates on a book like a BookSorter. Much like the other languages at which we’ve looked Dart has support for classes and also for full inheritance.

Here you can see Book has a descendant class TextBook which adds the additional edition field. Just like CoffeeScript and TypeScript there is syntactic sugar to allow for setting of public properties from the constructor. In this case the “this” keyword us used to denote what should be set. Interestingly on line 18 we have access to the edition information even though the instance was created as a Book and not a TextBook. This would not be possible with a language like C# or Java.

Dart has an interesting feature which is a built in factory method. Factories can be used to construct objects in a non-initialized way. Basically it is a way of overriding construction. Honestly it is a useful pattern but it isn’t one which I use so frequently that I feel the need to have my language support it. But perhaps you’re different.

In this example I retrieve the book from HTML5 local storage instead of creating a new book.

In preparation for my upcoming talk about next generation JavaScript I’ve been looking atalternativesto writing pure JavaScript. Largely my discussion is predicated on the idea that JavaScript isn’t great for building large applications. As others have suggested JavaScript is the assembly language of the web. So far I’ve looked at TypeScript and CoffeeScirpt, today bring Dart into the mix.

Dart is a product of Google and having been announced in October of 2011 it is fairly mature. When it first came out the compiler for it was terrible and produced the most verbose JavaScript imaginable. It was unfortunate because it was soundly mocked for being junk. I seem to remember that a hello world application compiled to over 1000 lines of JavaScript code. Things are greatly improved now and Google recently announced that the JavaScript emitted by the latest compiler, dart2js, runs faster than hand written JavaScript. That’s quite an achievement considering the crazy lengths to which browsers go to optimize JavaScript.

What’s interesting about Dart, which makes it different from the other two languages we’ve looked at, is that you can actually run dartnativelyon Chrome. There is no need to compile it to JavaScript first. Well no need assuming that everybody who uses your site runs a special build of Chromium. However, I hear that the new Blink rendering engine is going to include support for Dart so there may be a future for native Dart and that future could be very close.

This post’s goal is just to get started with the Dart development tools. Google provide a Dart editor which is based on Eclipse(ugh). So let’s ignore that for now and use the command line tools. Grabbing the install package fromhttp://www.dartlang.org/tools/gives us the editor and the SDK. Within the SDK are a number of tools but we’re interested in dart2js.

It can be run without any flags to produce both the compiled JavaScript and a map file. A real basic bit of Dart like this

prints

0 Hello 1 Hello 2 Hello 3 Hello

The code demonstrates some small part of Dart but nothing too exciting. We’ll get more into Dart in upcoming days.

Today I would like to talk a bit about source maps. Back when the world was new and languages like TypeScript and CoffeeScript which transcompile to JavaScript were just poking their heads out of the primordial soup there was no way to trance an error in your JavaScript back to the line of code in the generating language. For simple programs this wasn’t a huge deal because you could squint a bit and figure it out. But as the languages became more powerful and programs more complicated the situation worsened.Fortunatelya hero arose in the form of source maps.

Source maps are about what you would expect: they are a way of translating from one representation of the source to another. In our case from JavaScript to the source language, CoffeeScript. These maps can be consumed by the browser and the output shown in the debugging consoles in Chrome and FireFox. As source maps are still a bit new you may need to enable them manually before you make use of them. In Chrome, my development browser, this can be done by hitting F12 the clicking on the little cog icon in the bottom right corner of the developer tools. Under sources there is a check box for Enable source maps

Next up is telling the CoffeeScript compiler to generate source maps too while it is compiling. That is just a question of including the -m flag

coffee -m -c test.coffee

You will now see that the compiler does two things. First it emits a .map file which is the mapping from JavaScript back to CoffeeScript. Next it adds the line

/ //@ sourceMappingURL=test.map /

To the bottom of the generated JavaScript file. That’s pretty much it now. I tested mine out with a little bit of mildly complicated CoffeeScript

This generates output which is pretty different from the input so source mapping is handy

In Chrome now I see not only the JavaScript but also the CoffeeScript when I jump into the source view. I’m able to set break points on the CoffeeScript and execution will actually stop there allowing me to debug CoffeeScript directly instead of guess at the source CoffeeScript line.

Pretty nifty! You can actually use source maps to map minified JavaScript too, you can even use multiple layers of maps to translate from minified JavaScript -> full JavaScript -> CoffeeScript. Not every minifier has support for this butUglifyJS certainly does.

Welcome to part 4! This is the first part which is divisible by 2 but isn’t equal to 2. Of course that wouldn’t be true if I started my blog series at 0. Son of a gun ““ you just wait for the next series.

Deconstruction are one of my favorite features of CoffeeScript. Deconstructions allow for rapid assignment of variables or rapid remapping on complex objects. The simplest case is the old interview question of how to swap two variables.

This isn’t limited to only two items either, you can do anarbitrarynumber

Nifty but not all that useful, right? Not so fast my part 4 friend. Using this technique we can easily supportmultiplereturns from a function which is really the dream. Frequently you want to return complex data from a function but don’t want to waste time building a bunch of data transfer objects

Just. Like. That.

It can also be used to expand object like the options hash which is commonly passed in when building jQuery plugins.

See? That’s why part 4 is all about the fun of deconstructions.

CoffeeScript brings a number of renamed and new operators to your JavaScript. The first one is our old friend ==. JavaScript has two equality operators == and ===. The difference is that == will not perform type conversion before performing the comparison. That has the result of allowing really strange things to be true

Fortunately CoffeeScript clears this weirdness up by masking JavaScript’s == and introducing its own == operator which compiles to ===.

Confused yet? It’s a lot of =s that’s to be sure. To maintain consistency with the conversational tone of CoffeeScript you can use English words in place of the standard operators. For instance that == can be written as is.

Taken from the CoffeeScript documentation

CoffeeScript	JavaScript
is	===
isnt	!==
not	!
and	&&
or	||
true, yes, on	true
false, no, off	false
@, this	this
of	in
in	no JS equivalent

In addition to being able to use the operators as one would in JavaScript one can use nifty post statement branches.

The final goodie for today is the existential operator. It is represented using the ? symbol. It can be used to check to see if a value is null or undefined.

A more impressive use is in operator chaining

You can’t tell me that isn’t a far cleaner and easier to understand syntax.

There are a couple of different approaches to looping in CoffeeScript. The designers of CoffeeScript felt that the majority of loops are really just iterating over a collection. Thus the majority your looping needs can be served using a for-each style loop. The syntax for doing so looks about how you would expect

Here we have a loop over the trees in theforest. Pretty easy. What if I really need to know the index of the element on which I was operating? Unlike for-each loops in many languages which assume that the index of and element in an enumeration in meaningless CoffeeScript offers a way out

By passing in a secondparameterto the for loop you can gain access to an element which contains the index. If you don’t have a collection but wish to execute some operation multiple times you can either use a for loop syntax on a range or use a while loop.

For loop with range:

While loop:

Perhaps the coolest feature of loops in CoffeeScript are that you can perform filtering on the elements as youiterateover them. If I only wanted to perform an action on my forest when the tree was birch then I can create an implicit if by doing

Now let’s say that the trees in the forest are a bit more complex that before and we wanted to filter on a property, that’s no problem:

Loops are much more powerful in CoffeeScript than in pure JavaScript. I think the syntax is also more readable.

I’m doing a couple of talk at Prairie DevConin Winnipeg in early May. One of them is about data visualizations and the other is about next generation JavaScript. This is the first time I’ve talked about JavaScript in front of an audience which actually knows about JavaScript. Scary.

CoffeeScriptis a language which compiles down to JavaScript instead of some binary language. In that way it is not unlike TypeScript about which I have written a few things.To get started the easiest thing to do is download and install node.js from their site. Node provides an implementation of the V8 JavaScript engine which can be run headless and it includes the npm package manager. Once you have node installed it is as simple as running

npm install -g coffee-script

that will even add CoffeeScriptto your path. What a friendly fellow that node package manager is! If you’re running this on OSX or Linux and you want to install it globally (that’s what the -g flag does) then you’ll need to have sudo.

We can now get started with a simple CoffeeScriptprogram. By convention CoffeeScript files end in .coffee but for maximum confusion you should end them with .java or .c (please don’t). The lengthening of file extensions is kind of funny, don’t you think?

.c -> .cpp-> .java -> .coffee -> .heythisisajavascriptfile

So let’s start with a really simpleCoffeeScript program.

I’ve spoken before about how to arrange large code bases using namespaces and classes. CoffeeScript doesn’t have a built in concept of namespace or module but it does have a concept of classes. You can simulate modules but that’s a lesson for another day, classes will do just fine for now.

The first thing you’ll notice is that the syntax is different from JavaScript. CoffeeScript uses a python style syntax which means that whitespace is important. The constructor keyword creates a constructor which takes a single parameter name. You’ll notice that name is prefaced by an @ symbol. This makes name an automatically assigned property.

Here you can see the syntax for setting up ifs and elses. Again notice the lack of braces, code blocks are denoted by indentation.

Over the next week I’ll be delving more into coffeescript in preparation for my talk.

I frequently feel that if there is a hole in my knowledge of my development stack it is SQL Server. Honestly the thing is a mystery to me for the most part. I put data in it and data comes out. From time to time I add an index and data comes out faster. Sometimes I look at query plans but mostly I do that in front of other developers so they believe that I know SQL Server. I tell you looking at a query plan then tapping your monitor with a pen and going “yep, yep” gives you a lot of street cred in development shops.

But my lack of understanding of SQL Server backups ends this day!

Okay so the first thing is that there are 3 different recovery modes for SQL Server: Simple, Full and Bulk logged.

Simple -In this mode no log files are backed up only a snapshot of the data. This mode means that there is no need to keep transaction log files around. However if you lose the database then you also lose all the data since your last backup. Depending on your use case this might be okay but I doubt it. I would, personally, stay away from simple recovery mode.

Full ““ The log file is backed up in this version which means that you can recover up to the last transaction. In addition you can stop the restore at any point, essentially giving you a snapshot of the database at any point in time. That’s pretty awesome for many applications which are not even disaster recovery related.

Bulk logged -This is a special case of full backups which allows for better performance by not logging the details of certain bulk operations. For the most part this mode is as recoverable as the previous but saves you space if you make use of a lot of bulk operations. You probably shouldn’t make use of a lot of bulk operations anyway.

Great that clears things up, except: what’s a transaction log?

A transaction log is an append only file which contains a record of every transaction, or change, which occurs on a SQL server. Information is written during the lifetime of a transaction which means that if the sever crashes it can finish up or roll back half finished transactions using the log. Replaying a full log can restore a database. The log can also be shipped to other instances which can replay the log to bring themselves up to date. You might want to do that if you have a number of read only mirrors of your database for scalability or high availability purposes.

As you might imagine these log files can grow out of control pretty quickly.Fortunatelyyou can truncate them from time to time. From what I’m reading the log file is truncated as soon as it has been backed up. However the log file may not actually be reduced in size. This is because allocating disk is expensive so SQL server keeps hold of what is, in effect, an empty file. If you really need the space back you can run

DBCC SHRINKFILE (‘YourDataBase_Log’, 1000)

There are also some corner cases where the log file will not be truncated during a backup ““ such as when a restore is running using that transaction log.

The log file should be stored on a different disk from the mdf file. And when I say a different disk I mean a different storage systementirely. So if the mdf is on a SAN then the log file shouldn’t be on that SAN unless you’re willing to lose data should the entire SAN fail(hey, it happens).