First what is what.

Intro

JsViews, is the next generation of jQuery templates and data link, divided in two parts JsRender and JsViews. On github introduced as “Interactive data-driven views, built on top of JsRender templates”. For more info check out the blog Dancing with data by Boris Moore.

MvcHaack.Ajax is a “proof-of-concept prototype” by Phil Haack to ease access to mvc actions from javascript. Available as a nuget package.

Demo

To use this two in a update scenario we’re using a simple model of a Pizza.

    public class Pizza
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        public double Price { get; set; }

        public bool Available { get; set; }
    }

We’ll scaffold the model, using MvcScaffolding.

Scaffold Controller Pizza –Repository

 

So now we have the needed base to start using MvcHaack.Ajax.

We’ll edit the PizzaController to look like.

  public class PizzaController :  MvcHaack.Ajax.JsonController
    {
        private readonly IPizzaRepository pizzaRepository;

        public PizzaController(IPizzaRepository pizzaRepository)
        {
            this.pizzaRepository = pizzaRepository;
        }

        public IEnumerable<Pizza> List()
        {
            return this.pizzaRepository.All;
        }

        public object SaveList(List<Pizza> pizzas)
        {
            pizzas.ForEach(x => this.pizzaRepository.InsertOrUpdate(x));
            this.pizzaRepository.Save();

            return new { success = true, pizzas = pizzas };
        }

    }

First thing to note is that we derive from a base controller from the MvcHaack library. Second we don’t return ActionResults. Other than that there isn’t much strange things going on. We’re using injection of IPizzaRepository here, if you like you could keep the instantiation of the repository generated by the scaffolding template.

Ok, now how do we put this to use and gain ease of access to this controller from jQuery ?

First we’ll need to add a special route (code shown using an area).

context.Routes.Add(new JsonRoute("json/{controller}"));

The we’re off to the client side! In our view we now add;

<script src="/json/haack?json" type="text/javascript"></script>

This is where the magic of MvcHaack comes in to play. This will generate an access point to our actions. Please take a look in the generated script. Its simple but as often with simple - useful.

This gives us the following access points to our actions. Neat!

     $mvc.Pizza.List().success(function(data) {
                ....
     });


     $mvc.Pizza.SaveList(pizzasJson).success(function(data) {               ....       });

Now we’ll switch over to put JsViews to use. First we’ll need some scripts for JsViews.

    <script src="http://borismoore.github.com/jsviews/jsrender.js" type="text/javascript"></script>
    <script src="http://borismoore.github.com/jsviews/jquery.observable.js" type="text/javascript"></script>
    <script src="http://borismoore.github.com/jsviews/jquery.views.js" type="text/javascript"></script>

Then we’ll add a table to hold our pizzas and the a jQueryTemplate (JsRender) to display each pizza in edit mode. Then a save button.

<button id="sendJson">Send Json</button>

<table><tbody id="editPizzaTable"></tbody></table>

<script id="editRowTmpl" type="text/x-jquery-tmpl">
<tr>
    <td data-getfrom="[Name]" />
    <td>
        <input data-getfrom="[Name]" data-to="[Name]" />
    </td>
</tr>
</script>

Ok, this ain’t an ordinary template. It contains some JsViews binding specific attributes. This from and to attributes lets you track changes to your json object that we bound to template. Note that I only show Name here, you could add the other properties too.

And now how do we bind to this template ? Simple;

$("#editPizzaTable").link(pizzas, "#editRowTmpl");

The magic lies in the link operator here, that tells JsViews to track changes to our pizzas. Interested or confused ? Check out Booris samples to get the whole picture.

So all we need to do is tie this two things together. My demo module looks like.

if (!Jayway) { var Jayway = {}; }
if (!Jayway.Demos) { Jayway.Demos = {}; }

Jayway.Demos = lib(function () {
    var app = {
        pizzas: null
    };
    return {
        // Public functions
        init: function() {

            $mvc.Pizza.List().success(function(data) {
                app.pizzas = data;
                _render();

            });

            $('#sendJson').click(function() {
                $mvc.Pizza.SaveList(app.pizzas).success(function(data) {
                    alert(data.success);
                });
            });
        }
    };

    //Private
    function _render() {
        $("#editPizzaTable").link(app.pizzas, "#editRowTmpl");
    }
} ());

Conclusion

We looked at JsViews in a context where often Knockout or Backbone could be mentioned. I’ll hope you’ll follow the project to see in what scenarios this could be helpful for you.

MvcHaack.Ajax is a prototype with a question attached. Would you like to see something like this in ASP.NET MVC 4 ?

It’s simple and does not interfere with other library choices, so I think that it would be a neat addition.

Enjoy! 

I was going to write about the changes in 1.5 and 1.6, but I have
noticed that many people have missed some of the new features of the 1.4
releases. And by the way, all examples are written in Coffeescript.

Selected changes from 1.4.2+

delegate()

Most people know about live() and how it can be used to attach
listeners to elements that don’t yet exist in the DOM. live() has
a younger brother that was born in 1.4.2 and he is called delegate().
delegate() is more powerful. It gives you more precision in
where to attach the listener.

$('.main-content').find('section').delegate 'p', 'click', ->
  $(this).addClass 'highlight'

As you can see above, delegate(), unlike live(), can be chained like
normal jQuery calls.

jQuery.now(), jQuery.type() and jQuery.parseXML()

Nothing special here, just some utilities that are good to know about.

$.now() is (new Date()).getTime() 

$.type('hello') is 'string' 

xml = """
<rss version='2.0'>
<channel>
<title>RSS Title</title>
</channel>
</rss>
"""
xmlDoc = $.parseXML xml
($(xmlDoc).find 'title').text() is 'RSS Title'

All these utilities are interesting, but the truly good thing that came
out of jQuery-1.5+ is Deferred().

Deferred()

With the release of jQuery 1.5 the internal implementation of $.ajax
was changed to use Deferred(), and, even better, the implementation
was deemed so useful, that it became part of the public API.

Here is how you can use it via the $.ajax method.

Declare a function hex that calls the /hex url on the server, which
will return a hex value between 00 and FF.

  hex = ->
    $.ajax { url: '/hex' }

Call the function multiple times, and you get a new Deferred back for
each call. Notice the lack of handlers for the calls.

  red = hex()
  green = hex()
  blue = hex()

Attach handlers to each of the Deferreds to do something useful with
the returned value. Notice the use of done instead of success.
success is deprecated and will be removed in 1.8.

  red.done (hh)->
    $("#r").css 'background-color', "##{hh}0000"
  green.done (hh)->
    $("#g").css 'background-color', "#00#{hh}00"
  blue.done (hh)->
    $("#b").css 'background-color', "#0000#{hh}"

I am not limited to adding one handler, I can attach as many as I like.
Here I attach another one for logging the success of the red-call.

  red.done (hh) ->
    console.log(hh)

If this was all there was to it, I would be happy, but it is not by
using the $.when method I get a new Deferred object that orchestrates
multiple Deferreds in a very simple way. Let me create a color-Deferred
that waits for the others to return and then calls a new callback when
they are all done.

  color = $.when(red, green, blue) 

  color.done (r, g, b) ->
    $("#color").css 'background-color', "##{r[0]}#{g[0]}#{b[0]}"

The results from the requests are given in the same order as the
Deferred objects are passed in. The results are given as an array with
three arguments [ data, ‘success’ , deferred ].

You can see the example, a simple Sinatra app, in action on Heroku and the source code can be found on Github

Very nice! Apart from the examples I have shown, there are methods
working with Deferred. Methods for creating, jQuery.Deferred(),
resolving, resolve(), resolveWith(), and rejecting, reject(),
rejectWith().

To attach handlers to the events, you can use done() for resolve,
fail for reject, always() for both resolve and reject. You can also
use then(doneCallback, failCallback) to attach both a done and a
fail handler with one call.

Deferreds are really cool, check them out here

The presentation was first delivered on Techdays 2011, and we recommend you to look at that blog post first. Below, you'll find some additional links to topics covered during some of the presentation occations.

The links

ReSharper 6
Currently in "Early Access Program", with better IntelliSense and refactoring support for JavaScript and CSS in Visual Studio.

Chrome DevToolbar (presentation at Google I/O)
A lot is happening here and this tool is well worth to keep your eyes on.

JSLint
Static code analysis for JavaScript

WCF Web API
We talked a bit about some of the features of WCF Web API, a.k.a." WCF Http"

SassAndCoffee
This NuGet package makes it easier to get started with CoffeeScript and Sass in ASP.NET.

Reactive Extensions (Rx) for JavaScript
Compose asynchronous and event-based programs using observable collections and LINQ-style query operators.

Project Silk
Web Application guidance from the Patterns & Practices team at Microsoft.

HTML5 Boilerplate
Gives you a good default when building HTML5 sites/apps. Also exists as a mobile version.

Knockout
The MVVM pattern implemented in JavaScript.

ASP.NET MVC Migration Tool
Help you with the migration between different versions of ASP.NET MVC.

Localization
Localization in the browser is harder than on the server. This blog post is a nice resource on the subject.

Track site speed with Google Analytics
When the "Network tab" is not enough. Lets you track the real loading time for your users.

In this blog post, I'll try to summarize my thoughts on CoffeeScript. The examples on the CoffeeScript homepage are excellent and this post should be seen as my comments to some of these examples. So far, I have only played around with CoffeeScript, to get a feel for the language, and I have enjoyed it a lot, to say the least. In short, CoffeeScript is basically just a thin layer of syntactic sugar over JavaScript, removing JavaScript's C-inheritage and compiling to JavaScript code that would validate with JSLint. The CoffeeScript syntax feels like a good mix of Ruby, Python and JavaScript, with a little addition of C# and Haskell.

What if I don't know JavaScript?

"Do I need to learn JavaScript before CoffeeScript, if I don't know JavaScript?" In the end, you should definitely learn JavaScript if you don't know it, but I see no reason not to start with CoffeeScript and see how the generated JavaScript looks like, knowing that you have a knowledge gap in why the generated code looks like it does. Then, I think you should read JavaScript: the Good Parts and start to write JavaScript that passes JSLint. I guess it all boils down to if you want to learn something through an abstraction or not, and I believe you have enough experience to know for yourself how you learn most effectively. Remember to iterate, though.

Whitespace vs. semi-colons and curlies

The first thing you notice about CoffeeScript is that it lacks curly braces and semi-colons. Instead, CoffeeScript uses significant whitespace to delimit blocks of code, just like Python, Haskell and some other languages. If you're not used to this, this feature of the language is going to bite you first.

Functions

Please notice how slick it is to define functions in CoffeeScript:

add = (x, y) -> x + y
square = (x) -> x * x

If you know C#, this syntax is very similar to C#'s lambda syntax:

var add = (x, y) => x + y
var square = x => x * x

(Note that writing parenthesis around the argument(s) is mandatory in CoffeeScript, which is not the case for single argument lambdas in C#.)

When calling a function, parentheses are optional and arguments are separated with commas (like Ruby):

two = add 1, 1
four = square 2

A Y combinator example

Since JavaScript has more in common with Lisp or Scheme than it has with C or Java, the lightweight syntax of function definition in CoffeeScript is a big win. Also, since almost everything is an expression in CoffeeScript, return is seen much more seldom in CoffeeScript code than in JavaScript code. This example may be extreme, but look at the difference between the Y combinator (Crockford's version) written in both JavaScript and CoffeeScript:

// Y combinator in JavaScript
function Y(le) {
    return (function (f) {
        return f(f);
    }(function (f) {
        return le(function (x) {
            return f(f)(x);
        });
    }));
}

# Y combinator in CoffeeScript
Y = (le) -> ((f) -> f(f))((f) -> le (x) -> f(f) x)

If needed, \ could be inserted to make the code a little bit more readable.

Y = (le) -> ((f) -> f(f))\
    ((f) -> le((x) -> f(f)(x)))

(If we would have omitted the \, then we would have gotten an compiler error, since Y would have been defined as only the first line of code and then CoffeeScript would have found the second line as mis-indented. You could also play around with placing the parenthesis differently, if you don't like to use \.)

Other features

Another CoffeeScript feature worth mentioning is array comprehensions. An array comprehension that prints the square of all the even numbers looks like this:

numbers = (num * num for num in [1..100] when num % 2 == 0)

As I see it, array comprehensions could be useful if you have very long lists and don't want to take the penalty of calling a function on each item, as you would do in for example jQuery, underscore.js or the native Array.forEach (implemented in some browsers).

Other features that I like are the do keyword and the fat arrow (=>). Briefly, do helps you create closures in a loop, avoiding this problem. The fat arrow (=>) binds the value of this to the context that defines the function and not the context that calls the function (see why this is needed here).

Considerations

As mentioned in this interview with Jeremy Ashkenas, the creator of CoffeeScript, the drawback of using CoffeeScript is that you introduce a compile step, which makes it harder to debug. Though, Mozilla is hoping to provide better support for languages that compile to JavaScript in the future. I hope the other browser vendors follow that initiative.

And, of course, if you choose to use CoffeeScript in a project, you have yet another language for a new member of the team to learn. For experienced web developers this may not be an issue, but for developers that don't have that much experience in web development I guess that it could be frightening at first sight.

Summary

I really like my first impressions of CoffeeScript and I'm eager to learn more about it. Please do as I did and try the embedded CoffeeScript interpreter (under the "Try CoffeeScript" link) after reading the first examples.

And remember to have fun!

/@gustaf_nk

To simulate the behavior using functionality provided by maps v3 API, you'll need to find an element that supports the drag event, such as the Marker object. A marker has a position, a shape and provides events such as click, dragstart, drag and dragend.

The code

First off, we need to load the google maps API and specify which version to use. The code uses some extra goodies to calculate the length of the line, which is provided in the geometry library and it looks like this is available in the v3.3 of the API. Here's how to do specify this:

   <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3"></script>

The complete code looks like:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #map_canvas {
            height: 100%
        }
    </style>
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&v=3.3">
    </script>
    <script type="text/javascript">
        var g = google.maps;
        function initialize() {
            var latlng = new g.LatLng(62.397, 12.644);
            var myOptions = {
                zoom: 4,
                center: latlng,
                mapTypeId: g.MapTypeId.ROADMAP
            };
            var map = new g.Map(document.getElementById("map_canvas"), myOptions);
            registerMapDragHandler(map);
        }

        function registerMapDragHandler(aMap) {

            var map = aMap;

            g.event.addListener(map, 'click', function(event) {
                createLineBeingDragged(map, event.latLng);
            });

            function createLineBeingDragged(map, pos) {
                var line = new g.Polyline({map: map, path: [pos, pos]});
                g.event.addListener(map, 'mousemove', function(event) {
                    line.getPath().setAt(1, event.latLng);
                });
                g.event.addListener(line, 'click', function(event) {
                    g.event.clearListeners(map, 'mousemove');
                    g.event.clearListeners(line, 'click');
                    createMarkersForLine(map, line);
                });

                function createMarkersForLine(map, line) {
                    var startMarker = createMarker(line, 0);
                    var endMarker = createMarker(line, 1);
                    startMarker.nextMarker = endMarker;
                    endMarker.previousMarker = startMarker;
                }

                function createMarker(line, pathPos) {
                    var position = line.getPath().getAt(pathPos);
                    var marker = new g.Marker({map: map, position: position, visible: true, flat: true, draggable: true, raiseOnDrag: false});

                    // Marker functions
                    marker.getPathIndex = function() {
                        if (this.previousMarker != null) {
                            return this.previousMarker.getPathIndex() + 1;
                        } else {
                            return 0;
                        }
                    }

                    marker.startDrag = function(pos) {
                        if (!marker.previousMarker || !marker.nextMarker) {
                            line.getPath().insertAt(marker.getPathIndex(), pos);
                            var newMarker = createMarker(line, marker.getPathIndex());
                            if (marker.nextMarker) {
                                newMarker.previousMarker = marker;
                                newMarker.nextMarker = marker.nextMarker;
                                newMarker.nextMarker.previousMarker = newMarker;
                                marker.nextMarker = newMarker;
                            } else {
                                newMarker.nextMarker = marker;
                                newMarker.previousMarker = marker.previousMarker;
                                newMarker.previousMarker.nextMarker = newMarker;
                                marker.previousMarker = newMarker;
                            }
                        }
                    }

                    marker.beingDragged = function() {
                        line.getPath().setAt(marker.getPathIndex(), marker.getPosition());
                    }

                    // Listeners
                    g.event.addListener(marker, 'dragstart', function(event) {
                        marker.startDrag(event.latLng);
                    });

                    g.event.addListener(marker, 'drag', function(event) {
                        marker.beingDragged();
                    });

                    g.event.addListener(marker, 'click', function(event) {
                        var length = g.geometry.spherical.computeLength(line.getPath()) / 1000;
                        var infoWindow = new g.InfoWindow(
                        {
                            content: "<ul><li>Line length: " + length.toFixed(2) + " km</li>"+
                                    "<li>Latitude: " + marker.getPosition().lat().toFixed(6) + "</li>"+
                                    "<li>Longitude: " + marker.getPosition().lng().toFixed(6) + "</ul>"
                        });
                        infoWindow.open(map, marker);
                    });

                    return marker;
                }
            }
        }
    </script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

To start drawing, click on the map to specify the starting point and move the mouse to the end point.

The highlighted function is the most interesting. It creates a marker representing one segment of the path of a PolyLine. The marker knows about the previous and next marker and calculates its position in the MVCArray of the path so that it updates the geo-position of the correct segment. This is done by the getPathIndex() function added to the marker.

The Marker.dragStart() function checks whether the marker is the first or last marker in the path. If it is, a segment is added to the PolyLine at the geo-position where the drag starts, and a new marker is created representing the new segment. This means that the line is extended when dragging the end markers.

The Marker.beingDragged() function updates the position of the segment for the PolyLine to the geo-position for the marker, which makes the segment 'editable'.

When clicking on a marker, the length of the line is computed using the google.maps.geometry.spherical.computeLength() function and an InfoWindow is shown displaying the length and the longitude/latitude for the selected marker.

Conclusion

It is possible to simulate the older Google Maps Javascript V2 functionality for editing shapes but it requires you to write your own editing functionality. The code above is just a proof-of-concept and needs a lot more love and caring to be useful.

We developers instinctively focus on the code. It must be testable, decoupled, beautiful, robust, and (here’s the thing) it should hopefully do what it supposed to do. Let’s create a situation where, for once, only the “do what it’s supposed to do” part matters.

The Background

I used to be a Swedish-Russian interpreter in the Swedish Army, where we had to learn fluent Russian from scratch in about 10 months. We got it done with no social life and the ever present threat of failure, which would have forced us to endure an extra twelve months of army fun in Lapland or somewhere equally miserable.

But. We also had a secret weapon. The word slip:

So simple, yet so powerful. Take a small piece of paper. Write the word in one language on one side, and the translation on the other side. A few hundred slips make a good sized stack. Flip through the stack, try to translate without cheating. Shuffle the stack. Gradually put aside the words you feel you know. Organize the slips as you wish. Repeat In Absurdum.

This seemed like the perfect little something that could be ported to the digital world in about 90 minutes by our red-hot coders… Or could it?

The Spec

Let’s put it on paper.

As a user I want to be able to…

• Create/delete slips
• Organize slips in stacks
• Flip through a stack in both directions
• Shuffle the stack

… so that I can teach myself a crazy amount of words in the shortest time possible.

I don’t care which platform, technology or language you use. Just replace the paper slips with a digital equivalent, and make it work.

Tagging of stacks? Sharing stacks? Web backend, smart phone frontend? Go nuts, I don’t care.

At one of our monthly competence development days I presented the challenge: "App Attack! Implement The Spec in ninety minutes!". Seven guys picked up the gauntlet. After having devoured The Spec, they formed into three teams of 2-2-3 persons. A (secret) prize was promised for the team coming up with the ‘best’ solution.

Now, ninety minutes in a swimming pool with poisonous jellyfish is an eternity, but ninety minutes trying to get something done in code is… perhaps too short. My helpful last-minute tips were greeted with the disdain only a manager can evoke. "You know, there's this thing called AppHarbor that..." "Yeah we're already running it on that now, thank you.".  "In case you were wondering, I... " "No, we're not. Go away.". Ah, those developers. Better leave them to it.

The results

It was time for the teams to strut their stuff.

Team One

Sladjan explains his and Andreas’s solution: “The words are stored in xml-files together with the stack metadata, one file per stack. The idea was to be able to import words from your Dropbox; the phone app would read the files and show a list of all stacks.”

Now, the guys didn’t quite get the Dropbox-to-phone integration up and running and had to manually load the files into the phone. But they could present a WP7 app to flip through words with. They stressed the “innovative design of the word presentation, with nice flip-animations”. Yeah, don’t be shy.

Team Two

Johan and the other Andreas created a WPF client for the word input and, just as Team One, planned a Dropbox connection to a WP7 app. Alas, the Dropbox idea tripped up this team as well. With no connection between the input app and the phone, they too were forced to manually load the files into the phone.

Johan: “We regretted not setting up a proper VCS repos, instead of just sharing files. It slowed us down.”

A special feature of their WP7 app is to force the user to manually input the translation instead of trusting her with the ‘flip’. I guess they live by the “Trust is good, control is better” principle. Awesome.

Team Three

The young guns, Peter and Gustav, with Per as the senior mentor, took quite a different approach than the other teams. Per: “Our team set off to create the app building on plain HTML5 and JavaScript. Storing the data in local storage and having an animated UI via jQuery. With three code files and no compiling we had a neat setup, that quickly gave results.”

Venturing into JavaScript and HTML5 territory was a gutsy move, but would it work?

Here’s their modest UI. You’ll have to imagine the pink to green transition that (so realistically) mimics the ‘flip’:

Besides the snafu of naming their app “App Attack!” (yeah, that’s like Roger Federer changing his name to "Wimbledon"), they got the job done quite nicely. The obvious drawback of their approach is the local storage, restricting the reading of words to the device (browser, really) in which they were created.

And the Winner is…

Well, there was only one team that got the thing working properly. Congratulations, Team Three! And don't eat all those candy bars before dinner now.

Good work guys!

Team .NET Web was represented by Gustaf (@gustaf_nk), Per (@per_okvist) and Karl (@herradriansson), with a session about our views on modern web development. In this session we discussed HTML5, client architecture and ASP.NET MVC 3, among other related subjects.

In this post, as promised during the session, we will list and comment on some of the frameworks and utilities mentioned.

Frameworks

We touched on several server frameworks in addition to the usual suspects.

WCF HTTP
Fubu MVC
OpenRasta
Nancy

HTML5 today

Since the current features in HTML5 is implemented in different priorities browser to browser, we need some help of feature detection libraries and resources.

Modernizr
HTML5 Readiness
Graceful Degradation and Progressive Enhancement

JavaScript

A good part of the session was spent on good practices about JavaScript architecture.

yepnope.js
JavaScript Module Pattern: In-Depth
Javascript Module Pattern with jQuery
jQuery Templates
An early look at jQuery UI Grid in ASP.NET
JSON

NuGet

Some of the frameworks used in the demo case was fetched using NuGet.

ASP.NET MVC HTML5 Helpers
AutoFac

Compiled client code

We discussed the possibilities with richer languages that compile to either CSS or JavaScript. Even though we didn't have time to show any usages of these during the session, we think that usages of such frameworks will increase in the near future.

Sass
Compass
LESS
CoffeeScript

Finally

Thank you for stopping by at our session and a big thank you to the TechDays staff for moving the session to a bigger room due to high demand.

jQuery is the best thing that has happened to Javascript since it got first class functions in version 1.2. The library is elegant, powerful and has exactly the right level of abstraction for working with the DOM. There is nothing more to say. Learn it and use it. Good resources are: the jQuery API, my view of the jQuery API

Learn Javascript

Javascript is the programming language of the web. Learn it! Javascript is different from most other programming languages. It is dynamic, it has prototypical inheritance, and works more like Scheme than any of the languages that you are probably used to. If you want to learn Javascript you should get the following books, The Little Schemer, The Seasoned Schemer, Javascript, the Good Parts, and possibly High Performance Javascript

Learn CSS

Many programmers think that CSS is the language of designers and not programmers. This is not the case at all. If you are lucky enough to have a designer on your team (most people don't), CSS is the language with which you communicate. It is the interface between designers and programmers and as a programmer you should know it better than the designers. By knowing CSS well you will reduce the misunderstandings between you and your designer.

Unfortunately, many designers don't care about how code looks, as long as the design looks good on the surface. It will be up to you to make sure that the CSS doesn't get out out of hand. It will also be up to you to keep the HTML clean, and a good way to do this is to use semantic HTML, combined with CSS. You have no idea what the designers can come up with.

<!-- 
  Old School rounded corners, invented by a GOOD designer. 
  All this code was actually needed to achieve the purpose.
  -->
<style>
.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
</style>
<div class="t">
  <div class="b">
    <div class="l">
      <div class="r">
        <div class="bl">
          <div class="br">
            <div class="tl">
              <div class="tr">
                Lorem ipsum dolor sit amet consectetur adipisicing elit
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As an additional benefit you will become better at jQuery. Not only is CSS the query language of the browsers it is the query language of jQuery. Jariba!

Bulletproof Web Design is a good book web design, including CSS.

Decide how "Rich" your application should be

How rich should your application be? The scale varies from no Javascript to only Javascript, but you will probably want to land somewhere in between. Here are a few suggestions.

• No Javascript, everything is server generated.
• Slightly enhanced pages, simple validations, but no Ajax.
• Ajax enhanced pages, but every page still reloads frequently.
• Single page per area, entire area is handled by Javascript.
• Only Javascript, Ajax interaction with the server
• Only Javascript, no interaction with the server.

The important thing is to make a decision. If you don't make the decision, everyone will do different things on different parts of the application and you will loose consistency. In GUI, consistency is king. Make a decision and move on, you can always change your decision later.

Organize your code

Javascript

Make sure that all your Javascript code is namespaced properly. It is impolite to pollute the global namespace and it will bite you in the end. A simple variable declaration will do.

// Common namespace for your entire application
// This declaration lets you split your code of multiple files.
// If MyNamespace is defined use it, otherwise declare it.
MyNamespace = window.MyNamespace || {};

But, of course, it is also possible to get fancy and encapsulate the functions that you don't want to expose, if that is your cup of tea.

MyNamespace = window.MyNamespace || {};

MyNamespace.Tournament = function() {
	// Private stuff
	var tournamentCount = 0;
	function addTournament(tournament) {
		tournamentCount++;
	}

	return {
		//public stuff
		numberOfTournaments: function() {
			return tournamentCount;
		}
	}
}();

You should also separate your Javascript code into different files. The namespace idiom above helps to have the same namespace across multiple files. The same principles as with other type of code is valid with Javascript, organize the code by area, when it changes, where it is used, etc. Don't be afraid of the additional load time, splitting the files will give you. The files can easily be concatenated with tools like Rake, SCons, Ant or even a simple:

$ cat file1.js file2.js file3.js > all.js

They can also be compressed with JSMin or YUI Compressor.

Optimize your environment for development, not for production!

HTML

HTML is code! Divide your pages into partials by responsibilities. It allows you to keep your pages DRY and readable. The Single Responsibility Principle applies to HTML too.

Make sure you keep the Javascript with the code that it manipulates. If you, for example, have a calendar partial that uses jQuery DatePicker, you have to make sure that the partial includes all the necessary Javascript to configure the calendar. Don't keep Javascript code in the page away from the partial. Things that change together should be together.

CSS

Stylesheets are code too. They should also be split into areas that allow you to easily find and navigate them. Use Sass or SCCS to keep your CSS files DRY. Sass is good for designers to. It gives them the ability to use variable names, mixins, etc. and simplifies their usage of semantic names such as notice, and sidebar instead of yellow and left.

Optimize your environment for development, not for production!

Separate your Javascript from your HTML

All too often I see generated HTML pages with Javascript code in them. Don't do it. Keep the HTML free from Javascript.

<!-- DON'T DO THIS!  -->
<button id='update-button' onclick="MyNamespace.updateList();">Update List</button>

// In the Javascript file for the page.
MyNamespace.updateList = function() {...}

<!-- DO THIS! -->
<button id='update-button'>Update List</button>

// In the Javascript file for the page.
MyNamespace.updateList = function() {...}

$(function() {
  $("#update-button").click(function() {
    MyNamespace.updateList();
  });
});

It may seem like there is a lot more code in the good example, but notice the symmetry. The code that attaches the listener is in the same file as the code that uses the listener. This is good. Symmetry is good.

Use clone()

Separating the HTML and the Javascript goes both ways. Don't generate HTML code in Javascript. It doesn't matter that it is super simple to do it using jQuery.html(). Keep them separate, use jQuery.clone() instead.

// DON'T DO THIS
$("<li data-id='123'>My new item</li>").appendTo("ul");
// OR THIS
$("ul").append("<li data-id='123'>My new item</li>");

<!-- DO THIS -->
<ul>
<li id="list-template" class="template">All .template are hidden (display: none) in the CSS</li>
</ul>

// AND THIS
var $clone = $("#list-template").clone();
$clone.attr("data-id", "123").text("My new item").removeClass("template");
$("ul").append($clone);

The point of this is, again, to keep the HTML separate from the Javascript.

Decide how content flows between, the page, Javascript and the Server.

Once you have decided how rich your application should be, you have to decide on a method for moving the data between the HTML Page, Javascript and the Server. My preferred choice is to have every page that is served from the server include a context object with all the static data for the page and to have additional data that belongs to parts of the page be sent as data-attributes on the elements concerned.

The context object will contain all the data that is commonly needed in the page.

// Sample context object that is generated with the page.
MyNamespace = MyNamespace || {};
MyNamespace.Context = {
  user: {
    id: "28",
    name: "Anders Janmyr"
  },
  tournament: {
    id: "78344",
    name: "Fifa World Cup"
  }
};

I use the context object(s) to keep state on the client to. If it is important that the page looks exactly the same, even if the user reloads the page, I make sure that the state I stick into my context object is synched back to the server. This can easily be done, asynchronously, with Ajax and does not affect performance noticeable.

Elements specific data is sent along with the element it defines.

<!-- Element specific data attached to the elements with data-attributes -->
<ul id="tournament-menu">
  <li data-id="78344" data-participant-count="64">Fifa World Cup</li>
  <li data-id="666"  data-participant-count="44">Americas Cup</li>
  <li data-id="1464" data-participant-count="32">Rugby World Cup</li>
</ul>

The same argument as with the context object applies, as soon as I change an element in the GUI i need to feed that information back to the server. With elements I usually send the information to the server before updating the GUI, since element specific data is usually permanent data and not just session data.

An alternative solution to the context object above is to use the body element as the data-container, like this:

<body data-user-id="28" data-user-name="Anders Janmyr" data-tournament-id="78344" data-tournament-name="Fifa World Cup">

I tend to use the context object because I find it easier to add functionality to it than to the DOM element.

Only send the data that is needed to the client with the page. The rest of the data should be loaded on demand, with Ajax. Both JSON data and HTML templates can be loaded on demand. There is no need to deliver the entire page at once. Experiment and do what gives the best user experience.

Use file watchers to speed up feedback

If you compare the feedback cycle of Javascript and HTML development to Java and C# development, you are probably very happy with the short, tight feedback loop. This doesn't mean that you should be content. A feedback cycle cannot be too short.

xrefresh for Firefox and IE, and LiveReload for Safari and Chrome, are a couple of tools that will tighten your feedback loop even more.

Both tools are file watchers that listen to changes for files and refresh the browser when they change. If you combine this with two screens, you will have one screen for the browser, that updates continuously, while you edit your code on the other screen. Fabulous!

Conclusion

Rich web applications are very close to the traditional client-server model. We have to keep state on the client side to give the user a good experience. At the same time the application state, and indeed the entire application, can be swept away by a click of a button or a page reload.

This puts new demands on us as developers. We have to realize that we are responsible for the entire application, not just the business logic, but the HTML and CSS too. More that anything, we have to realize that Javascript is a first class programming language with its own programming techniques, which we need to master to be able to develop good web applications.

Another request required me to make my own plugin for TinyMce. Only, it turned out it's not the simplest thing to do, adding a plugin to TinyMce when it's integrated to Wicket. There is almost no help on how to do this so, after having fiddled with this for some time I thought I should help all other plugin creators out there.

Here we'll make a very redundant BoldMakerPlugin just because it's so easy to se it working. I'm assuming that you've got Wicket and also that you have managed to get TinyMce running, if you haven't it's just a matter of cut and paste from WicketStuffs TinyMce page.

To create a plugin you will need two files. Your plugin java file and an editor_plugin_src.js file. I placed my java file among the other wicket java files under src/main/java and named it BoldMakerPlugin.java. This is what it looks like.

 
import wicket.contrib.tinymce.settings.Plugin;
import wicket.contrib.tinymce.settings.PluginButton;
 
public class BoldMakerPlugin extends Plugin{
 
	private PluginButton boldMakerButton;
 
	public BoldMakerPlugin(){
		super("boldmaker");//decides which plugin folder to look in.
		boldMakerButton = new PluginButton("boldmakerbutton", this);
	}
 
	public PluginButton getBoldMakerButton(){
		return boldMakerButton;
	}
}
 

Next I have to fool the TinyMce main script that my plugins JavaScript file is actually located in the same location as the other scripts. I do this by creating a package structure that is similar to what the TinyMce jar file uses. In this case I create a package called wicket.contrib.tinymce.tiny_mce.plugins.boldmaker and put it in src/main/resources. The last package should be similar to whatever you insert into your superclass from your java file.

In this location I put my editor_plugin_src.js file. Mine looks like this:

 
(function() {
	var DOM = tinymce.DOM;
 
	tinymce.create('tinymce.plugins.BoldMakerPlugin', {
		init : function(ed, url) {
			var t = this, s = {};
 
			t.editor = ed;
 
			// Register commands
			ed.addCommand('mceBoldMaker', function() {
				var win, de = DOM.doc.documentElement;
			});
 
			// Register buttons
			ed.addButton('boldmakerbutton', {title : 'Test', cmd : 'mceBoldMaker', image : url + '/../test/img/example.gif',
         	   onclick: function() {
         	   		ed.selection.setContent("<b>" + ed.selection.getContent() + "</b>");
            	}
            });
		}
	});
 
	// Register plugin
	tinymce.PluginManager.add('boldmaker', tinymce.plugins.BoldMakerPlugin);
})();
 

Don't worry if you don't have a button image just yet, it'll be an invisible button with the plugin functionality.

After having done this you should compress it using some kind of JavaScript compressor. I used the one on http://javascriptcompressor.com/
Create a new file, name it “editor_plugin.js” and paste your newly compressed JavaScript into it.

I'm adding my plugin in a InPlaceEditComponent instead of in a TextArea but the basics are the same. Add your plugin to the TinyMCESettings, add the settings to the component and then add your component to your page.

 
InPlaceEditComponent component = new InPlaceEditComponent("editable", "
<h4 class='headline' style='color: black; font-weight: bold; font-family: sans-serif; font-size: 80%;'>Insert headline here</h4>
 
" +
"<span class='standardText' style='color: black; font-family: sans-serif; font-size: 80%;'>Insert text here</span>");
 
TinyMCESettings settings=component.getSettings();
 
BoldMakerPlugin boldMakerPlugin=new BoldMakerPlugin();
settings.add(boldMakerPlugin.getBoldMakerButton(), Toolbar.first, Position.before);
 
component.add(new InPlaceEditBehavior(settings, component));
item.add(component);
 

If you've done everything correctly you should now be able to run your application and get your very first plugin working.

1. wicket-event.js
2. wicket-ajax.js

wicket-event.js

This file contains everything Wicket needs for event handling, but also methods for detecting browser like Wicket.Browser.isIELessThan7() which could come in handy if youre doing your own script, no need to write it again..

wicket-ajax.js

This file hold everything Wicket needs for doing ajax. So it's a big file containing a lot of interesting possibilities.

The most interesting method are wicketAjaxGet its the way to contact the server doing ajax. It's signature are this:

 
function wicketAjaxGet(url, successHandler, failureHandler, precondition, channel)
 

The first parameter are the url for wicketAjaxGet to call server side with, it usually gets generated from serverside, and you can add parameters to it and get them server side. Furthermore it takes 3 functions and a channel. Channel are also usually populated for you so dont think about that. The functions however are called either on sucess, failure or as a precondition. These supply very nice options for you if you need to do something special with the result of the wicketAjaxGet you can put in callbacks. Small example from the mooTip ajax integration:

 
function mootipAjaxtooltip022(callback) {
var content='';wicketAjaxGet('?wicket:interface=:0:tooltip02::IBehaviorListener:1:',
 function(){
 var tip=document.getElementById('mooTipContent').innerHTML;
 var callbackInside=callback;
 var runCallback=  callbackInside.pass(tip);
 runCallback();
  }
, null,null);
 

As you can see, if you count the parameters, I put in a success method for wicket to call once the request has finished, in this case it sets up a tooltip and displays it, by a method thats passed along using the content of the dom element called 'mooTipContent'.

Theres also lighter methods like for example wicketHide and wicketshow. Methods for manipulating visibility of dom objects. Theres many more functions in there. But these should get you going.

The complete package

A small example that shows a invisible veil when a abstractajaxTimerEventBehavior is called:

 
css/html:
#veil{
position:absolute;top:0;left:0;
 width:100%;height:100%;
 z-index: 99;
 /*cursor: wait;*/
 }
<"p id="veil" style='display: none;' "><"/p">
Java:
		AbstractAjaxTimerBehavior ajaxTimerBehavior = new AbstractAjaxTimerBehavior(
				Duration.seconds(1)) {
			@Override
			protected CharSequence getCallbackScript() {
				// TODO Auto-generated method stub
				return "wicketShow('veil');" + super.getCallbackScript();
			}
 
			@Override
			protected CharSequence getSuccessScript() {
				// TODO Auto-generated method stub
				return "wicketHide('veil');" + super.getSuccessScript();
			}
....
 

And thats it, now you should be ready to do your own stuff