Dan Wahlin's WebLog : HTML5

Building an HTML5 Web Sockets Server with ASP.NET 4.5

dwahlin — Sat, 13 Apr 2013 22:08:00 GMT

ASP.NET 4.5 now includes support for HTML5 Web Sockets which can provide a great way to add real-time communication to a Web app where a server can actually push data live to one or more clients. In this video from the New Features in ASP.NET 4.5 Pluralsight course I walk through getting started with creating a Web Sockets server using a Nuget package from Microsoft called Microsoft.WebSockets.

Learn to Use ASP.NET 4.5 Web Sockets - The Easy Way

If you'd like to learn more about the new features in the 4.5 release and in Visual Studio 2012 check out my Pluralsight course.

Download samples of using the "raw" ASP.NET support for Web Sockets as well as the Microsoft.WebSockets support here. I've also included a Node.js sample for anyone who may be interested.

Video Tutorial: AngularJS Fundamentals in 60-ish Minutes

dwahlin — Sat, 13 Apr 2013 03:07:28 GMT

The term "Single Page Application" (SPA) is one of the biggest buzz words out there right now especially when it comes to building client-centric applications. SPAs provide a great way to load different views into a screen without reloading everything from scratch. When done right, true SPAs have support for history, routing, page lifecycle management, two-way data binding and more. How you get started with SPAs though? Do you go down the road of building 100% custom SPA applications or rely on a framework?

I've debated that question a lot over the past year and preached (pretty strongly) that building a SPA from scratch just doesn't make any sense if productivity and maintenance are important to you. It may not be an issue for smaller apps but for larger, enterprise-scale apps with multiple screens, custom business rules and a plethora of other features custom SPAs just don't make sense in my opinion. If you work on a team with multiple developers all having different skill levels then you can imagine what it'd be like to have everyone contributing custom code that doesn't have any consistency across it. In the long-run it becomes a maintenance nightmare especially if there isn't any documentation or tests available (which is bad I realize). Add in several 3rd party libraries and the problem can get even worse especially over time as new versions of scripts are released and others become stale.

The good news is that several different SPA frameworks have appeared on the scene that can greatly simplify the process of building SPAs while also making maintenance easier. One of the SPA frameworks that I really like is AngularJS since it provides a robust set of features that can be used out-of-the-box without having to be an expert in routing, history, data binding and more. It provides a solid base that you can build on top of. The challenge that I hear from many people though is that "AngularJS has a steep learning curve!". I just gave a talk on AngularJS at the AngleBrackets conference in Las Vegas and heard this statement from several people. To be real honest, I felt the same way the first time I looked at it. However, the more I dug in the more I realized how powerful the framework was and all of the ways it could enhance productivity while simplifying maintenance.

Note: Before moving on I should mention that I also like the Durandal SPA framework too - it has robust functionality built-in as well and is definitely worth checking out.

To help break down the learning curve I've put together a short video series titled "AngularJS Fundamentals in 60-ish Minutes" (I added "ish" because it ended up being more than 60 minutes :-)). In the video you'll learn how to get started with the AngularJS framework and some of the key features it provides that simplify SPA development. You'll see how to use directives, filters and data binding techniques to capture and display data. Next up is views, controllers and scope and the role they play followed by a discussion of modules, routes and factories/services. At the end of the video a sample application built using AngularJS is shown. I hope you enjoy the video and that it helps jumpstart your AngularJS learning process!

AngularJS Fundamentals in 60-ish Minutes

Watch the complete video tutorial here or choose specific sections from the video below.

Jump to a Specific Section:

Download AngularJS samples and the Customer Manager sample application shown in the video.

Getting Started Managing Client-Side Data with the Breeze JavaScript Library

dwahlin — Wed, 27 Mar 2013 07:28:00 GMT

If you work with JavaScript a lot then you know that there’s no shortage of script libraries being released. New scripts come out on a daily basis providing UI functionality, data binding support, form validation, framework functionality and more. With all of the scripts in circulation it feels like nearly every aspect of client-side development has been covered. However, there’s one area that has seen precious few scripts – the area of client-side data management.

If you need to query local caches of data, track dirty objects, send modified objects to the server as a batch or validate in-memory data, then you’ve probably been writing custom code or cobbling together various script libraries to solve the problem. Fortunately, a new script library named Breeze has been released that can help with these challenges and more.

In this post I’ll provide an overview of how to get started using Breeze and discuss some of the data management features that it offers client-side developers. Let’s start by taking a quick look at some of the features that Breeze offers.

Breeze Features

Breeze (http://breezejs.com) is a free open source library from IdeaBlade that aims to solve many of the data management challenges that developers face when building SPAs and other client-centric applications. Although it’s a relatively new library, it provides robust functionality out of the box such as client-side caching, change tracking, entity validation, a variety of data management features (support for custom metadata, import/export entities, entity ID strategies, support for multiple caches, etc.), rich entity query support (both local and remote) directly from JavaScript, and batch saves of entities to a server.

In addition to these features, Breeze is designed to integrate with many of the popular libraries out there such as KnockoutJS, AngularJS, Backbone and more. If you’re already using KnockoutJS to handle client-side data binding then you can plug-in Breeze anywhere you’re currently retrieving, querying, or manipulating data and still keep all of the existing KnockoutJS functionality intact. The same can be said when using the other libraries mentioned.

Breeze can also integrate with different back end server technologies and doesn’t force you to use a particular framework. Out of the box it provides support for ASP.NET Web API and Entity Framework so if you’re already using ASP.NET MVC 4 you can get started quickly. A different back end framework such as Node.js can also be used although you’d have to write the code to handle serving data to the client and processing data received from the client.

Now that you’ve seen some of the general features that Breeze offers let’s take a look at how you can get started using it. Although I’ll use Visual Studio and NuGet in the examples that follow, any editor can be used.

Getting Started with Breeze

One of the best ways to get started with Breeze is to load a sample application into an empty ASP.NET MVC 4 project using NuGet. To do that, right-click on the project References, select Manage NuGet Packages, and then click the Online option to the left of the dialog window. In the Search Online box type Breeze. Once the search results come back select the Breeze for ASP.NET MVC4 Web Api Client Sample package and select Install. Here's an example of the NuGet dialog. The Breeze site also has a video walk-through of getting started with the NuGet package at http://www.breezejs.com/documentation/start-NuGet if you're new to it.

Once the NuGet package loads a readme.txt file is displayed in Visual Studio 2012 that walks through the application. To get started with it you can simply press F5 to run the sample. Once the application loads in the browser you'll see a screen similar to the one shown next:

You can edit tasks, mark tasks as done, and save changes. Anything you change gets pushed back to the server using the Breeze library and is handled by an ASP.NET Web API controller class (more on this later). Key server-side classes added into the project by the Breeze NuGet package include BreezeClientSampleConfig which handles default routing for the application, BreezeWebApiConfig which handles ASP.NET Web API routing, BreezeSampleController which acts as the ASP.NET Web Api controller and BreezeSampleShellController which handles serving up the initial view and HTML to the browser.

Key client-side files added into the project include breeze.debug.js (the debug version of the Breeze script), breeze.js (the production version), logger.js and sampleViewModel.js. The sampleViewModel.js script relies on KnockoutJS to provide data binding capabilities. Here are the files that you'll see in the Solution Explorer:

Now that a Breeze project has been created let's take a closer look at some of the code that's used on the server-side.

The Server-Side Code

The BreezeSampleController class derives from the standard ApiController class and provides ASP.NET Web Api controller support for sending data to and from a client. It includes a Breeze-specific class named EFContextProvider<T> that wraps a custom Entity Framework Code First DbContext class named BreezeSampleContext. The code for the BreezeSampleController and BreezeSampleContext classes are shown in Listings 1 and 2 respectively. It's important to note that although the sample application relies on specific Breeze server-side objects such as EFContextProvider<T>, Breeze is designed to work with a variety of server-side frameworks.

[BreezeController]
public class BreezeSampleController : ApiController {

    readonly EFContextProvider<BreezeSampleContext> _contextProvider =
        new EFContextProvider<BreezeSampleContext>();

    [HttpGet]
    public string Metadata() {
        return _contextProvider.Metadata();
    }
        
    [HttpPost]
    public SaveResult SaveChanges(JObject saveBundle) {
        return _contextProvider.SaveChanges(saveBundle);
    }
        
    [HttpGet]
    public IQueryable<BreezeSampleTodoItem> Todos() {
        return _contextProvider.Context.Todos;
    }

}

Listing 1. The BreezeSampleController class that acts as the ASP.NET Web API controller for the sample application.

public class BreezeSampleContext : DbContext 
{
    // DEVELOPMENT ONLY: initialize the database
    static BreezeSampleContext()
    {
        Database.SetInitializer(new BreezeSampleDatabaseInitializer());
    }    
    public DbSet<BreezeSampleTodoItem> Todos { get; set; }
}

Listing 2. The BreezeSampleContext handles dynamically initializing the database and defines a Todos property used by the application to display Todo data.

Looking at the code in Listing 1 you can see that a readonly field named _contextProvider of type EFContextProvider<BreezeSampleContext> is defined in the controller class. Because the service relies on Entity Framework for data access, this ContextProvider wraps an instance of an Entity Framework (EF) context. It extracts metadata from the EF model that the client needs and translates client save requests into EF save operations after applying server-side business logic to authorize and validate those changes. It also exposes the DbContext’s Todos property, an IQueryable that can be filtered, sorted, and paged before returning BreezeSampleTodoItem objects (see Listing 3) to the client.

public class BreezeSampleTodoItem
{
    public int Id { get; set; }             // 42
    public string Description { get; set; } // "Try Breeze"
    public bool IsDone { get; set; }        // false
}

Listing 3. The BreezeSampleTodoItem class.

To see the metadata returned by the Metadata() action found in BreezeSampleController you can open your browser and navigate to the following path (note that you'll have to change the port to match the port assigned to your application):

http://localhost:55143/api/BreezeSample/metadata

The metadata describes important aspects of the model that is used by the client-side portion of Breeze such as the entity types, each type’s property names, their data types, key properties, and the relationships among entities.

Now that you've seen the Web API controller class let's switch gears and look at the client-side code that interacts with the Web Api controller and see how Breeze fits into the overall picture.

The Client-Side Code

The Breeze sample application contains a script in the Scripts/app folder named sampleViewModel.js that contains the main client-side Breeze functionality. It handles retrieving metadata and Todo objects from the server and then binds the Todo objects into the page using KnockoutJS. As changes are made it uses Breeze to batch up changes and then send them back to the server for processing. Keep in mind that in a more complex application the view model may call out to a separate BreezeJS JavaScript object that focuses specifically on data functionality. That helps promote re-use in situations where multiple view models need to access and manipulate data through Breeze.

The sampleViewModel.js script starts by creating a new Breeze EntityManager object that targets the Web Api controller discussed earlier. The KnockoutJS view model relies on the entity manager for queries and saves (see Listing 4).

// service name is route to the Web API controller
var serviceName = 'api/BreezeSample';

// manager is the service gateway and cache holder
var manager = new breeze.EntityManager(serviceName);

// define the viewmodel
var vm = {
    todos: ko.observableArray(),
    includeDone: ko.observable(false),
    save: saveChanges,
    show: ko.observable(false)
};

// start fetching Todos
getTodos();

// re-query when "includeDone" checkbox changes
vm.includeDone.subscribe(getTodos);

// bind view to the viewmodel
ko.applyBindings(vm);

Listing 4. Creating an EntityManager to handle interacting with the server.

All data interaction goes through the EntityManager object including queries to the server, sending saved batches of data to the server and more. To query data from the server an EntityQuery object must be created and then executed by the EntityManager. Listing 5 shows an example of creating an EntityQuery object, executing the query and handling the results.

// get Todos asynchronously
// returning a promise to wait for     
function getTodos() {

    logger.info("querying Todos");

    var query = breeze.EntityQuery.from("Todos");

    if (!vm.includeDone()) {
        query = query.where("IsDone", "==", false);
    }

    return manager
        .executeQuery(query)
        .then(querySucceeded)
        .fail(queryFailed);

    // reload vm.todos with the results 
    function querySucceeded(data) {
        logger.success("queried Todos");
        vm.todos(data.results);
        vm.show(true); // show the view
    }
};

Listing 5. Executing a query against the ASP.NET Web API controller using the Breeze EntityManager and EntityQuery objects.

The code starts by identifying which method to query on the server-side controller (Todos in this example), creates a dynamic query, and then executes it. If the view model's includeDone property is false then a dynamic WHERE clause is added that will be sent to the server when querying Todo objects. The ability to write client-side queries that ultimately make their way to the server is a unique feature of Breeze and something I've personally wanted for quite a while for client-side application development. More complex queries can be written as well using the EntityQuery object combined with a Predicate object as shown in Listing 6 (see http://www.breezejs.com/documentation/query-examples#Composite Where clauses for additional examples).

// Start with a base query for all Todos 
var query = breeze.EntityQuery.from("Todos"); 

// A Predicate is a condition that is true or false
// Combine two predicates with ".and" to
// query for Todos that are done and
// the description contains the letter 's'
var p1 = new breeze.Predicate("IsDone", "eq", true);
var p2 = new breeze.Predicate("Description", "contains", "s");
query = query.where(p1.and(p2));

return manager.executeQuery(query);

Listing 6. Creating queries using the EntityQuery and Predicate objects. The queries can be used to query client-side or server-side objects.

In addition to querying objects on the server, the EntityManager can also save changes made on the client back to the server. When the user clicks the “save” link, the view model calls the EntityManager’s saveChanges() function. The EntityManager batches up all pending changes and sends them back to the controller for processing. Listing 7 shows how the EntityManager's saveChanges() function can be invoked and used to detect success or failure using promises.

function saveChanges() {
    return manager.saveChanges()
        .then(function () { logger.success("changes saved"); })
        .fail(saveFailed);
}

function saveFailed(error) {
    logger.error("Save failed: " + error.message);
}

Listing 7. Using Breeze's EntityManager to save changes made on the client back to the server.

Conclusion

Breeze fills a huge hole in client-side development through its data management capabilities. By providing query capabilities, batch save functionality, and the ability to perform a variety of other features it greatly simplifies the process of building CRUD-style (create, read, update, delete) applications and allows developers to focus on application logic as opposed to data plumbing code. Find out more information about Breeze by visiting the website at http://www.breezejs.com.

New Features in ASP.NET 4.5 Web Forms Course Released on Pluralsight.com

dwahlin — Mon, 25 Mar 2013 06:36:00 GMT

I've been hard at work the past few months filming a new course for Pluralsight covering some of the great new features in ASP.NET 4.5 Web Forms. I'm excited to announce that the new course is titled New Features in ASP.NET 4.5 Web Forms and is now available on Pluralsight.com! If you're an ASP.NET Web Forms developer (and there are many of you out there!) then you should definitely take a look at the new features available in the 4.5 release if you haven't already. In my opinion, this is the most significant release since ASP.NET 2.0. I say that because some of the new features will truly change how you write your ASP.NET applications - especially the data binding features.

Here's the official description of the course and the content that's covered. I hope you enjoy it and are able to apply some of the new features in your applications! If you're not a Pluralsight subscriber and still want to view some of the course check out their free trial offer.

The New Features in ASP.NET 4.5 Web Forms course provides a tour of what's new in Visual Studio 2012 for ASP.NET Web Forms developers and how it can make you more productive as a developer. The course begins by showing you key enhancements to Visual Studio's HTML editor and its improved support for working with CSS and JavaScript. Next, you’ll explore what's new with data binding (some significant features have been added here!) including model binding and strongly typed data controls. You’ll also see enhancements that have been made to the ASP.NET framework such as bundling and minification of JavaScript and CSS, asynchronous modules and handlers, SignalR and more. Several new HTML5 features are also demonstrated including new HTML5 input types, Web Sockets and support for multiple file uploads. The course concludes with a look at important security-related improvements in ASP.NET including support for oAuth, request validation and support for preventing cross-site request forgery (XSRF) attacks.

Course Content

Visual Studio Features
Course Overview
Introduction
HTML Editor Features
Demo: HTML Editor Features
JavaScript Editor Features
Demo: JavaScript Editor Features
CSS Editor Features
Demo: CSS Editor Features
The Page Inspector
Demo: The Page Inspector
Using Web Essentials
Demo: Using Web Essentials
Summary

Working with Data
Introduction
Strongly Typed Data Controls
Demo: Strongly Typed Data Controls
Model Binding
Model Binding Attributes
Demo: Model Binding
HTML Encoded Data Binding Expressions
Unobtrusive Validation
Summary

Framework Features
Introduction
Bundling and Minification
Demo: Bundling and Minification
Async Support
Demo: Creating Asynchronous HttpModules
Demo: Creating Asynchronous HttpHandlers
FriendlyUrls
Demo: Implementing FriendlyUrls
ASP.NET Web API
Demo: Using the ASP.NET WebAPI
Demo: Using HTTP Verbs
SignalR
Demo: Using SignalR
Summary

HTML5 Features
Introduction
TextMode Property Enhancements
Demo: TextBox HTML5 Enhancements
Multiple File Uploads
Demo: Uploading Multiple Files with FileUpload
WebSockets
Demo: WebSockets with System.Web.WebSockets
Demo: WebSockets with Microsoft.Web.WebSockets
Additional HTML5 Features
Demo: Unobtrusive Validation and Validator Controls
Summary

oAuth and Security Features
Introduction
oAuth Support
Demo: oAuth Facebook Integration
Demo: Enhancing Facebook Integration
Deferred Request Validation
Demo: Using Deferred Request Validation
Unvalidated Requests and AntiXSS Encoding
Demo: Handling Unvalidated Requests and Encoding with the AntiXssEncoder
Anti-XSRF Validation
Demo: Anti-XSRF Validation Code
Summary

What's Hot in the World of JavaScript and SPAs?

dwahlin — Mon, 14 Jan 2013 00:06:00 GMT

Client-side development continues to be more and more popular which is both good and bad for developers. It's good (great!) because we have more power than ever at our fingertips. It's bad because it can be challenging to stay up-to-speed with all of the libraries and frameworks being released (I call that job security). I hear some developers complaining about Web development and all of the script libraries being released but I personally think it provides us with a lot of choice and flexibility, not to mention enhanced productivity. I’d rather have the flexibility of choosing from a variety of scripts as opposed to only a handful.

From time to time people ask me about what libraries I'm using or keeping an eye on as my company builds custom applications or provides training to companies. As a result, I thought I'd put together a post that includes a few script libraries and frameworks that I find interesting and that I think might interest you as well. Some of them have been around for quite some time while others are brand new to the scene. I plan to update the list over time as I find something else interesting or move away from a particular script for whatever reason.

Keep in mind that I can’t list every library and framework out there. My goal is to list ones that I personally find quite compelling and that I (or someone I know very well) has direct experience using.

Script Libraries

There are a lot of great script libraries out there that perform a variety of functionality. Here are a few scripts that I find interesting and quite useful for building client-side applications.

jQuery

http://jquery.com

This one is rather obvious and no surprise if you've been building client-side applications over the past 5+ years. jQuery is the most widely used script library on the planet and the base for many other scripts out there. It provides support for selecting DOM elements, handling events, performing animations, making Ajax calls, working with plugins and more. If you haven't taken the time to learn jQuery then there's no time like the present. Check out my jQuery Fundamentals course on Pluralsight for additional details on what you can do with it in client-side applications. I've also blogged quite a bit about jQuery over the years. See http://weblogs.asp.net/dwahlin/archive/tags/jQuery/default.aspx for more details.

If you’re new to jQuery and interested in learning it check out my jQuery Fundamentals course on Pluralsight.

Knockout

http://knockoutjs.com

Knockout is arguably the most popular script library out there for handling client-side data binding. It provides a flexible way to declare bindings in HTML, write view model objects that are bound to HTML, handle dependency tracking and write templates. If you're working with a lot of data in a client-centric application then KnockoutJS is definitely worth taking a look at. It has an excellent set of online tutorials available at http://learn.knockoutjs.com. Check out John Papa's course on Pluralsight as well for a nice walk-through of the features it offers and how they can be used. My good friend John Papa has a nice course on Knockout!

RequireJS

http://requirejs.org

As more and more script libraries are used in an application it can become difficult to manage all of the dependencies between scripts and ensure that they're loaded when they're needed. RequireJS is a module-based script loader that can handle loading scripts upfront or as they're needed. By using it you can simplify the process of managing script dependencies.

AmplifyJS

http://amplifyjs.com

AmplifyJS provides a set of jQuery components that can be used for Ajax requests, client-side communication between components (publish/subscribe), and client-side storage (desktop or mobile). It provides a unified API for accessing different data sources that can make your code more re-useable and easier to maintain. If you find yourself duplicating Ajax calls across an application then you can use AmplifyJS to define them in a more centralized component.

Bootstrap

http://twitter.github.com/bootstrap

Twitter released the Bootstrap library that provides dozens of components that speed-up client-side development and make it look good at the same time. It includes built-in components such as dropdown menus, buttons, navbars, pagination and progress bars as well as jQuery plugins that handle transitions, modal dialogs, tabs, tooltips, slideshow carousels and more. Bootstrap also includes CSS to help make the various components look good without having to write a lot of custom styles or code. I’ve used jQuery UI quite a bit over the years as well but also like what Bootstrap offers.

Backbone.js

http://backbonejs.org

Backbone.js is a popular client-side option that can be used to build MVC-like applications that have models, collections, views and routes. It provides a way to introduce a formal structure into an application which is great for overall architecture and maintenance and supports declarative binding, templates, events, routing and more. Objects used in an application are created by extending the Model, View, Collection, or Router objects provided by Backbone.js. Check out the Todo application available at https://github.com/addyosmani/todomvc/tree/gh-pages/architecture-examples/backbone to get started using it. While I personally consider Backbone.js to be a framework since you build upon it, it’s “officially” categorized as a library.

Breeze

http://breezejs.com

Are you working with a lot of data in your application and performing a variety of CRUD (create, read, update, delete) operations? If you are, you’ll definitely want to check out Breeze since it provides much needed client-side data management capabilities. It can handle data caching, change tracking, entity data validation, entity query support and batch saves of data back to the server. Breeze integrates well with many popular script libraries and can also play nicely with different back-end frameworks as well. To get started with Breeze check out the interactive tutorials at http://learn.breezejs.com.

Script Frameworks

My close friends will tell you that I haven't been a huge fan of Single Page Applications (SPAs) – at least not "true" SPAs as they’re defined today since they involve a lot of scripts, dependencies and complexities that I find to be overkill in some cases. You won't find a single post on my blog dedicated to SPAs because I just haven't been a big believer in them up to this point.

Why haven't I jumped on the SPA bandwagon? I've done a lot of production support over my career working with both large and small teams and am worried about what happens down the road as a lot of interrelated scripts in an application change versions, people come and go on dev teams without sharing the "tribal knowledge" they have, different developer skill levels are involved with a SPA application, etc. If you only have a few scripts in an application then it’s not a big deal to manage but once you approach 10+ scripts things get more interesting over time as those scripts evolve. Hopefully they’ll always play together nicely but past experience leads me to believe otherwise. You can certainly build a solid SPA application with some of the script libraries I mentioned (and others not mentioned) but you'll definitely have to spend quite a bit of time learning the ins-and-outs of the different libraries (that’s not a bad thing of course). You'll also want to factor in maintenance costs if you're building them with a team – something that a lot of people just don't seem to think about (one direct reason I've spent quite a bit of time working with TypeScript over the past few months by the way).

So what's my take on SPAs now days? The good news is that SPA frameworks are emerging to help manage the complexity and dependencies (history, navigation, data management, data binding, storage, templates, etc.) which I'm really excited about. If you've been holding off on building SPAs at your company due to some of the reasons I mentioned above then here are a few frameworks that might change your mind. I've started to blog about some of these frameworks and why I think they're a much better approach compared to creating a SPA from scratch using a mish-mash of scripts and will have more posts in the near future.

AngularJS

http://angularjs.org

Although not explicitly stated on its homepage, AngularJS is a robust Single Page Application (SPA) framework with an enormous amount of functionality built-in. It stands on its own and doesn't require any other scripts while providing features such as two-way data binding, MVC-like architecture, form validation, routing, history, Ajax functionality and much more. I've blogged about AngularJS in the past and recommend you check out their tutorials as well located at http://docs.angularjs.org/tutorial. If you’re worried about managing multiple scripts over time in an application then the AngularJS framework provides a nice alternative.

Durandal

http://durandaljs.com

Durandal is a brand new framework by Rob Eisenberg (creator of frameworks such as Caliburn Micro) but I wanted to include it here since I'm excited about what I've seen so far. It's another option for building SPAs (I personally think a better name would be Rich Web Applications or RWAs but that's just me) and provides a lot of functionality such as a clean architecture, modularity, messaging between components in a page, navigation and history to name a few. It's built on top of the jQuery, Knockout and RequireJS script libraries so they’re still used behind the scenes and as you build your views and view models. However, I really like how it abstracts many of the complexities of SPAs away and seems to offer a more maintainable and modular solution compared to building SPAs by hand. Documentation for Durandal can be found at https://github.com/EisenbergEffect/Durandal/wiki and I'll be blogging about it more over the next few months (I’m considering doing a new Pluralsight course on it as well). I'll also be speaking about Durandal at the upcoming DevIntersection conference in Las Vegas in April.

Sammy.js

http://www.sammyjs.org

Sammy.js is one of the smallest frameworks out there (currently around 5.2k compressed/gzipped) but is designed to be modular so that it can be extended using plugins and adapters. It’s built on top of jQuery and provides a way to organize code into routes that are linked to callback functions (very handy in SPA applications) and you can use built-in events or define your own. A great way to get started with Sammy.js is to check out their tutorial at http://sammyjs.org/docs/tutorials/json_store_1. A list of some of the plugins available for the framework can be found in the Github repository located at https://github.com/quirkey/sammy/tree/master/lib/plugins.

Node.js

http://nodejs.org

Node.js is different than the other frameworks mentioned since it can be used in a variety of ways. It's primarily a server-side JavaScript framework (although it can be used in other ways as well) that can be used to build fast and scalable Web applications, serve up data through RESTful services and more. What's unique about Node.js compared to other server-side frameworks is that all of the code is written in JavaScript providing an end to end story for application development - JavaScript on the client and JavaScript on the server. It's also supported by a large community that consistently adds new modules that can be accessed using the built-in Node Package Manager (NPM). Node.js is capable of performing functionality seen in other server-side frameworks such as ASP.NET, PHP and Ruby on Rails. A lot of companies are using Node.js more and more now (I just did some custom training on the framework for a big bank in the United States with a large team using Node.js).

Conclusion

So is that all of the libraries and frameworks that you should take a look at? Not even close – there are many other worthy scripts out there that can be used and that are quite popular. I've tried to cover a few of the key scripts that I like (or find interesting) and hope that will spark your interest in taking a closer look at some of them. There are certainly others I’m interested in as well. I think it’s safe to say that we’re on the cusp of a new movement where more and more frameworks like AngularJS and Durandal will be released to simplify the process of creating robust client-side SPA applications.

Do you have other scripts you use a lot? Leave a comment about them below to give myself and anyone else reading the post some details about what you like about them.

Code and Slides from my Fall 2012 DevConnections Talks

dwahlin — Thu, 01 Nov 2012 05:06:36 GMT

Thanks to everyone who attended my sessions at the Fall 2012 DevConnections conference in Las Vegas. There was a ton of interest in different JavaScript and HTML5 topics. Here’s a picture taken after finishing up my first talk. The second one was packed (standing room only…forgot to take a picture though unfortunately) – thanks to everyone for the great questions and interest in the sessions! I really enjoyed talking with everyone that came up afterward.

As promised, here’s where you can find the code and slides I demonstrated during my talks on building an HTML5 application with a variety of technologies and structuring JavaScript code.

If you’re on Twitter keep in touch with me through my DanWahlin alias.

Getting Started with TypeScript – Classes, Static Types and Interfaces

dwahlin — Thu, 01 Nov 2012 04:38:00 GMT

I had the opportunity to speak on different JavaScript topics at DevConnections in Las Vegas this fall and heard a lot of interesting comments about JavaScript as I talked with people. The most frequent comment I heard from people was, “I guess it’s time to start learning JavaScript”. Yep – if you don’t already know JavaScript then it’s time to learn it. As HTML5 becomes more and more popular the amount of JavaScript code written will definitely increase. After all, many of the HTML5 features available in browsers have little to do with “tags” and more to do with JavaScript (web workers, web sockets, canvas, local storage, etc.). As the amount of JavaScript code being used in applications increases, it’s more important than ever to structure the code in a way that’s maintainable and easy to debug. While JavaScript patterns can certainly be used (check out my previous posts on the subject or my course on Pluralsight.com), several alternatives have come onto the scene such as CoffeeScript, Dart and TypeScript. In this post I’ll describe some of the features TypeScript offers and the benefits that they can potentially offer enterprise-scale JavaScript applications.

It’s important to note that while TypeScript has several great features, it’s definitely not for everyone or every project especially given how new it is. The goal of this post isn’t to convince you to use TypeScript instead of standard JavaScript….I’m a big fan of JavaScript. Instead, I’ll present several TypeScript features and let you make the decision as to whether TypeScript is a good fit for your applications.

TypeScript Overview

Here’s the official definition of TypeScript from the http://typescriptlang.org site:

“TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.”

TypeScript was created by Anders Hejlsberg (the creator of the C# language) and his team at Microsoft. To sum it up, TypeScript is a new language that can be compiled to JavaScript much like alternatives such as CoffeeScript or Dart. It isn’t a stand-alone language that’s completely separate from JavaScript’s roots though. It’s a superset of JavaScript which means that standard JavaScript code can be placed in a TypeScript file (a file with a .ts extension) and used directly. That’s a very important point/feature of the language since it means you can use existing code and frameworks with TypeScript without having to do major code conversions to make it all work. Once a TypeScript file is saved it can be compiled to JavaScript using TypeScript’s tsc.exe compiler tool or by using a variety of editors/tools.

TypeScript offers several key features. First, it provides built-in type support meaning that you define variables and function parameters as being “string”, “number”, “bool”, and more to avoid incorrect types being assigned to variables or passed to functions. Second, TypeScript provides a way to write modular code by directly supporting class and module definitions and it even provides support for custom interfaces that can be used to drive consistency. Finally, TypeScript integrates with several different tools such as Visual Studio, Sublime Text, Emacs, and Vi to provide syntax highlighting, code help, build support, and more depending on the editor. Find out more about editor support at http://www.typescriptlang.org/#Download.

TypeScript can also be used with existing JavaScript frameworks such as Node.js, jQuery, and others and even catch type issues and provide enhanced code help. Special “declaration” files that have a d.ts extension are available for Node.js, jQuery, and other libraries out-of-the-box. Visit http://typescript.codeplex.com/SourceControl/changeset/view/fe3bc0bfce1f#samples%2fjquery%2fjquery.d.ts for an example of a jQuery TypeScript declaration file that can be used with tools such as Visual Studio 2012 to provide additional code help and ensure that a string isn’t passed to a parameter that expects a number. Although declaration files certainly aren’t required, TypeScript’s support for declaration files makes it easier to catch issues upfront while working with existing libraries such as jQuery. In the future I expect TypeScript declaration files will be released for different HTML5 APIs such as canvas, local storage, and others as well as some of the more popular JavaScript libraries and frameworks.

Getting Started with TypeScript

To get started learning TypeScript visit the TypeScript Playground available at http://www.typescriptlang.org. Using the playground editor you can experiment with TypeScript code, get code help as you type, and see the JavaScript that TypeScript generates once it’s compiled. Here’s an example of the TypeScript playground in action:

One of the first things that may stand out to you about the code shown above is that classes can be defined in TypeScript. This makes it easy to group related variables and functions into a container which helps tremendously with re-use and maintainability especially in enterprise-scale JavaScript applications. While you can certainly simulate classes using JavaScript patterns (note that ECMAScript 6 will support classes directly), TypeScript makes it quite easy especially if you come from an object-oriented programming background. An example of the Greeter class shown in the TypeScript Playground is shown next:

class Greeter {
    greeting: string;

    constructor (message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

Looking through the code you’ll notice that static types can be defined on variables and parameters such as greeting: string, that constructors can be defined, and that functions can be defined such as greet(). The ability to define static types is a key feature of TypeScript (and where its name comes from) that can help identify bugs upfront before even running the code. Many types are supported including primitive types like string, number, bool, undefined, and null as well as object literals and more complex types such as HTMLInputElement (for an <input> tag). Custom types can be defined as well.

The JavaScript output by compiling the TypeScript Greeter class (using an editor like Visual Studio, Sublime Text, or the tsc.exe compiler) is shown next:

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Notice that the code is using JavaScript prototyping and closures to simulate a Greeter class in JavaScript. The body of the code is wrapped with a self-invoking function to take the variables and functions out of the global JavaScript scope. This is important feature that helps avoid naming collisions between variables and functions.

In cases where you’d like to wrap a class in a naming container (similar to a namespace in C# or a package in Java) you can use TypeScript’s module keyword. The following code shows an example of wrapping an AcmeCorp module around the Greeter class. In order to create a new instance of Greeter the module name must now be used. This can help avoid naming collisions that may occur with the Greeter class.

module AcmeCorp {
    export class Greeter {
        greeting: string;

        constructor (message: string) {
            this.greeting = message;
        }

        greet() {
            return "Hello, " + this.greeting;
        }
    }
}

var greeter = new AcmeCorp.Greeter("world");

In addition to being able to define custom classes and modules in TypeScript, you can also take advantage of inheritance by using TypeScript’s extends keyword. The following code shows an example of using inheritance to define two report objects:

class Report {
    name: string;

    constructor (name: string) {
        this.name = name;
    }

    print() {
        alert("Report: " + this.name);
    }
}

class FinanceReport extends Report {
    constructor (name: string) {
        super(name);
    }

    print() {
        alert("Finance Report: " + this.name);
    }

    getLineItems() {
        alert("5 line items");
    }
}

var report = new FinanceReport("Month's Sales");
report.print();
report.getLineItems();

In this example a base Report class is defined that has a variable (name), a constructor that accepts a name parameter of type string, and a function named print(). The FinanceReport class inherits from Report by using TypeScript’s extends keyword. As a result, it automatically has access to the print() function in the base class. In this example the FinanceReport overrides the base class’s print() method and adds its own. The FinanceReport class also forwards the name value it receives in the constructor to the base class using the super() call.

TypeScript also supports the creation of custom interfaces when you need to provide consistency across a set of objects. The following code shows an example of an interface named Thing (from the TypeScript samples) and a class named Plane that implements the interface to drive consistency across the app. Notice that the Plane class includes intersect and normal as a result of implementing the interface.

interface Thing {
    intersect: (ray: Ray) => Intersection;
    normal: (pos: Vector) => Vector;
    surface: Surface;
}

class Plane implements Thing {
    normal: (pos: Vector) =>Vector;

    intersect: (ray: Ray) =>Intersection;

    constructor (norm: Vector, offset: number, public surface: Surface) {
        this.normal = function (pos: Vector) { return norm; }
        this.intersect = function (ray: Ray): Intersection {
            var denom = Vector.dot(norm, ray.dir);
            if (denom > 0) {
                return null;
            } else {
                var dist = (Vector.dot(norm, ray.start) + offset) / (-denom);
                return { thing: this, ray: ray, dist: dist };
            }
        }
    }
}

At first glance it doesn’t appear that the surface member is implemented in Plane but it’s actually included automatically due to the public surface: Surface parameter in the constructor. Adding public varName: Type to a constructor automatically adds a typed variable into the class without having to explicitly write the code as with normal and intersect.

TypeScript has additional language features but defining static types and creating classes, modules, and interfaces are some of the key features it offers. So is TypeScript right for you and your applications? That’s a not a question that I or anyone else can answer for you. You’ll need to give it a spin to see what you think. In future posts I’ll discuss additional details about TypeScript and how it can be used with enterprise-scale JavaScript applications. In the meantime, I’m in the process of working with John Papa on a new Typescript course for Pluralsight that we hope to have out in December of 2012.

Working with Tile Notifications in Windows 8 Store Apps – Part I

dwahlin — Thu, 04 Oct 2012 06:38:49 GMT

One of the features that really makes Windows 8 apps stand out from others is the tile functionality on the start screen. While icons allow a user to start an application, tiles provide a more engaging way to engage the user and draw them into an application. Examples of “live” tiles on part of my current start screen are shown next:

I’ll admit that if you get enough of these tiles going the start screen can actually be a bit distracting. Fortunately, a user can easily disable a live tile by right-clicking on it or pressing and holding a tile on a touch device and then selecting Turn live tile off from the AppBar:

The can also make a wide tile smaller (into a square tile) or make a square tile bigger assuming the application supports both squares and rectangles. In this post I’ll walk through how to add tile notification functionality into an application. Both XAML/C# and HTML/JavaScript apps support live tiles and I’ll show the code for both options.

Understanding Tile Templates

The first thing you need to know if you want to add custom tile functionality (live tiles) into your application is that there is a collection of tile templates available out-of-the-box. Each tile template has XML associated with it that you need to load, update with your custom data, and then feed into a tile update manager. By doing that you can control what shows in your app’s tile on the Windows 8 start screen.

So how do you learn more about the different tile templates and their respective XML? Fortunately, Microsoft has a nice documentation page in the Windows 8 Store SDK. Visit http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx to see a complete list of square and wide/rectangular tile templates that you can use. Looking through the templates you’ll

It has the following XML template associated with it:

<tile>
  <visual>
    <binding template="TileSquareBlock">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
    </binding>  
  </visual>
</tile>

An example of a wide/rectangular tile template is shown next:

<tile>
  <visual>
    <binding template="TileWideImageAndText01">
      <image id="1" src="image1.png" alt="alt text"/>
      <text id="1">Text Field 1</text>
    </binding>  
  </visual>
</tile>

To use these tile templates (or others you find interesting), update their content, and get them to show for your app’s tile on the Windows 8 start screen you’ll need to perform the following steps:

Define the tile template to use in your app
Load the tile template’s XML into memory
Modify the children of the <binding> tag
Feed the modified tile XML into a new TileNotification instance
Feed the TileNotification instance into the Update() method of the TileUpdateManager

In the remainder of the post I’ll walk through each of the steps listed above to provide wide and square tile notifications for an application. The wide tile that’s shown will show an image and text while the square tile will only show text. If you’re going to provide custom tile notifications it’s recommended that you provide wide and square tiles since users can switch between the two of them directly on the start screen.

Note: When working with tile notifications it’s possible to manipulate and update a tile’s XML template without having to know XML parsing techniques. This can be accomplished using some C# notification extension classes that are available. In this post I’m going to focus on working with tile notifications using an XML parser so that the focus is on the steps required to add notifications to the Windows 8 start screen rather than on external extension classes. You can access the extension classes in the Windows 8 samples gallery if you’re interested.

Steps to Create Custom App Tile Notifications

Step 1: Define the tile template to use in your app

Although you can cut-and-paste a tile template’s XML directly into your C# or HTML/JavaScript Windows store app and then parse it using an XML parser, it’s easier to use the built-in TileTemplateType enumeration from the Windows.UI.Notifications namespace. It provides direct access to the XML for the various templates so once you locate a template you like in the documentation (mentioned above), simplify reference it:

HTML/JavaScript

var notifications = Windows.UI.Notifications;
var template = notifications.TileTemplateType.tileWideImageAndText01;

XAML/C#

var template = TileTemplateType.TileWideImageAndText01;

Step 2: Load the tile template’s XML into memory

Once the target template’s XML is identified, load it into memory using the TileUpdateManager’s GetTemplateContent() method. This method parses the template XML and returns an XmlDocument object:

HTML/JavaScript

var tileXml = notifications.TileUpdateManager.getTemplateContent(template);

XAML/C#

var tileXml = TileUpdateManager.GetTemplateContent(template);

Step 3: Modify the children of the <binding> tag

Once the XML for a given template is loaded into memory you need to locate the appropriate <image> and/or <text> elements in the XML and update them with your app data. This can be done using standard XML DOM manipulation techniques. The example code below locates the image folder and loads the path to an image file located in the project into it’s inner text. The code also creates a square tile that consists of text, updates it’s <text> element, and then imports and appends it into the wide tile’s XML.

HTML/JavaScript

var image = tileXml.selectSingleNode('//image[@id="1"]');
image.setAttribute('src', 'ms-appx:///images/' + imageFile);
image.setAttribute('alt', 'Live Tile');

var squareTemplate = notifications.TileTemplateType.tileSquareText04;
var squareTileXml = notifications.TileUpdateManager.getTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.selectSingleNode('//text[@id="1"]');
squareTileTextAttributes.appendChild(squareTileXml.createTextNode(content));

var node = tileXml.importNode(squareTileXml.selectSingleNode('//binding'), true);
tileXml.selectSingleNode('//visual').appendChild(node);

XAML/C#

var tileXml = TileUpdateManager.GetTemplateContent(template);
var text = tileXml.SelectSingleNode("//text[@id='1']");
text.AppendChild(tileXml.CreateTextNode(content));

var image = (XmlElement)tileXml.SelectSingleNode("//image[@id='1']");
image.SetAttribute("src", "ms-appx:///Assets/" + imageFile);
image.SetAttribute("alt", "Live Tile");
Debug.WriteLine(image.GetXml());

var squareTemplate = TileTemplateType.TileSquareText04;
var squareTileXml = TileUpdateManager.GetTemplateContent(squareTemplate);
var squareTileTextAttributes = squareTileXml.SelectSingleNode("//text[@id='1']");
squareTileTextAttributes.AppendChild(squareTileXml.CreateTextNode(content));

var node = tileXml.ImportNode(squareTileXml.SelectSingleNode("//binding"), true);
tileXml.SelectSingleNode("//visual").AppendChild(node);

Step 4: Feed the modified tile XML into a new TileNotification instance

Now that the XML data has been updated with the desired text and images, it’s time to load the XmlDocument object into a new TileNotification instance:

HTML/JavaScript

var tileNotification = new notifications.TileNotification(tileXml);

XAML/C#

var tileNotification = new TileNotification(tileXml);

Step 5: Feed the TileNotification instance into the Update() method of the TileUpdateManager

Once the TileNotification instance has been created and the XmlDocument has been passed to its constructor, it needs to be passed to the Update() method of a TileUpdator in order to be shown on the Windows 8 start screen:

HTML/JavaScript

notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

XAML/C#

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

Once the tile notification is updated it’ll show up on the start screen. An example of the wide and square tiles created with the included demo code are shown next:

Download the HTML/JavaScript and XAML/C# sample application here. In the next post in this series I’ll walk through how to queue multiple tiles and clear a queue.

JavaScript Data Binding with AngularJS Part II – Binding a View to a Controller/ViewModel

dwahlin — Sun, 05 Aug 2012 17:00:00 GMT

Related Posts:

In my previous post I showed how the AngularJS framework could be used to bind data into a webpage. By using special directives such as ng-model combined with moustache data binding syntax (i.e. {{ name }}) it’s easy to get started binding data into a page. In this post I’ll walk you through the process of creating a controller that stores data and provides functions that can be called from a page. The controller will reference and rely on a special object named $scope that acts as a type of “View Model” (a common term to those who use the MVVM pattern) and is responsible for monitoring changes to properties. Let’s take a look at the steps required to create an AngularJS controller and bind its properties into a page’s controls.

Step 1: Add the ng-app Directive and the AngularJS Script

To get started you’ll need to add the ng-app directive into the page (adding it on the root <html> tag makes AngularJS functionality available throughout the entire page) and add a script reference to AngularJS. You can grab it directly from the CDN location at https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js if you want – just change the version to the latest as needed.

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    </head>
    <body>




       ...        
    </body>
</html>

Step 2: Create a Controller/ViewModel Script

Add a new JavaScript file named peopleCtrl.js into the site with the following code:

function PeopleCtrl($scope)  {
    $scope.people = [
        {firstName: 'John', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}},
        {firstName: 'Jane', lastName: 'Doe', address: {city: 'Chandler', state: 'AZ', zip: 85248}},
        {firstName: 'Johnny', lastName: 'Doe', address: {city: 'Phoenix', state: 'AZ', zip: 85003}}
    ];

    $scope.addNew = function() {
        $scope.people.push({ firstName: $scope.firstName, lastName: $scope.lastName,
                             address: {city: $scope.city, state: $scope.state, zip: $scope.zip} });
    }
}

This example defines a people property that has an array of objects assigned to it as well as a function named addNew() that can be used to add additional people to the array. The property will be bound into the view. In looking through the code you’ll note that a $scope parameter is passed into PeopleCtrl. This parameter acts as the “glue” between the view (the webpage) and the controller and handles watching the model for changes (think of it as the view model). Any model changes that are detected are propagated back to the view or to the controller depending on which side initiated the model change. The $scope parameter is automatically passed by AngularJS into the controller.

The $scope parameter is used inside of the controller to define properties and functions. This allows the controller to be completely isolated from the view and the DOM which is necessary if you’d like to do unit testing. Using $scope also allows properties such as people in this example to automatically be monitored for changes without having to write any quirky code inside of it. Any property that needs to be monitored for changes can be associated with $scope to have its changes pushed down to the view. If the property is bound to a control such as a textbox in the view, any changes made by the end user will cause the appropriate controller property to automatically be updated. This provides an excellent mechanism for writing data-oriented code as opposed to control-oriented code.

Step 3: Define the Controller/ViewModel in the Page

To associate the controller with the view the ng-controller directive can be added into the HTML as shown next.

Note that AngularJS directives can be prefixed with data- if you prefer which can be helpful when running the code against validators that don’t like custom attributes and instead require that any custom attributes be prefixed with data-. For example, data-ng-controller=”PeopleCtrl” is perfectly acceptable with AngularJS as is data-ng-app.

<div ng-controller="PeopleCtrl">        
    <div id="peopleContainer">




    </div>
    <div>
        <h4>Add New Person:</h4>
        <table style="width: 300px">
            <tr>
                <td style="width: 30%;">First Name:</td>
                <td style="width: 70%;"><input type="text" ng-model="firstName" /></td>
            </tr>
            <tr>
                <td style="width: 30%;">Last Name:</td>
                <td style="width: 70%;"><input type="text" ng-model="lastName" /></td>
            </tr>
            <tr>
                <td style="width: 30%;">City:</td>
                <td style="width: 70%;"><input type="text" ng-model="city" /></td>
            </tr>
            <tr>
                <td style="width: 30%;">State:</td>
                <td style="width: 70%;"><input type="text" ng-model="state" /></td>
            </tr>
            <tr>
                <td style="width: 30%;">Zip:</td>
                <td style="width: 70%;"><input type="text" ng-model="zip" /></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button>Add</button>
                </td>
            </tr>
        </table>                
    </div>
</div>

This code handles referencing the controller as well as some textboxes and a button that the user can use to add a new person. Each textbox has an ng-model attribute on it to allow the values to easily be accessed in the controller. You’ll see how the textbox values are accessed in a later step.

Step 4: Iterate Through the people Property Values

Once the PeopleCtrl is referenced in the view you can add code to iterate through the controller’s people property. Iteration can be accomplished using AngularJS’s ng-repeat directive as shown next.

<div id="peopleContainer">
    <ul>
        <li ng-repeat="person in people">
            <span class="bold">{{person.firstName}} {{person.lastName}}</span>
            <br />
            {{person.address.city}}, {{person.address.state}}&nbsp;&nbsp;{{person.address.zip}}
        </li>
    </ul>
</div>

The ng-repeat directive iterates through each object in the people property of the controller and assigns each object to a variable named person. Each person object is then bound into the view using the mustache syntax (for example, {{person.lastName}} binds the lastName property of each person into the view) resulting in multiple <li> elements being created dynamically.

Step 5: Calling Controller Functions

The controller has a function named addNew() that needs to be called when the Add button is clicked. To wire up the button to the controller function the ng-click directive can be used:

<button ng-click="addNew()">Add</button>

When the button is clicked the values from the textboxes are accessed in the controller through the $scope and the new person is added to the people property array. This is made possible due to the presence of the ng-model directive on each each textbox.

$scope.addNew = function() {
    $scope.people.push({ firstName: $scope.firstName, lastName: $scope.lastName,
                            address: {city: $scope.city, state: $scope.state, zip: $scope.zip} });
}

In this example we’re accessing each textbox value directly through the $scope variable. It’s important to note that no code is written to manually find textbox controls by their ID (something I call control-oriented programming) and then extract the value. Instead, we’re relying on JavaScript data binding which significantly reduces the amount of code that has to be written.

While this works well, it can be cleaned up a little by having AngularJS create a JavaScript object literal for us automatically that is then added into the controller’s people collection. By prefixing the ng-model directive with person. an object literal will be created which can then be added more easily into $scope.people in the controller. Here’s an example of how the modified HTML looks – notice the change to each ng-model directive on the different textboxes.

<table style="width: 300px">
    <tr>
        <td style="width: 30%;">First Name:</td>
        <td style="width: 70%;"><input type="text" ng-model="person.firstName" /></td>
    </tr>
    <tr>
        <td style="width: 30%;">Last Name:</td>
        <td style="width: 70%;"><input type="text" ng-model="person.lastName" /></td>
    </tr>
    <tr>
        <td style="width: 30%;">City:</td>
        <td style="width: 70%;"><input type="text" ng-model="person.address.city" /></td>
    </tr>
    <tr>
        <td style="width: 30%;">State:</td>
        <td style="width: 70%;"><input type="text" ng-model="person.address.state" /></td>
    </tr>
    <tr>
        <td style="width: 30%;">Zip:</td>
        <td style="width: 70%;"><input type="text" ng-model="person.address.zip" /></td>
    </tr>
    <tr>
        <td colspan="2">
            <button data-ng-click="addNew(person)">Add</button>
        </td>
    </tr>
</table>

This will create the following object literal behind the scenes automatically:

{
    firstName: '...',
    lastName: '...'
    address: {
        street: '...',
        city: '...',
        zip: '...'
    }
}

Code in the addNew() function can be reduced quite a bit by having the object literal available. This is nice especially when you consider that with a control-oriented approach you’d have to write code to access each control by ID and grab the value. Using this approach, addNew() in the webpage becomes addNew(person) and the function in the controller changes to the following:

$scope.addNew = function(person) {
    $scope.people.push(person);
    $scope.person = {}; //Clear out person object
}

A live example of the demo code in action is shown next. Click the Result tab to run it.

Conclusion

In this post you’ve seen how an AngularJS controller/view model can be created and how its properties can be bound to a view. By using a data-oriented framework like AngularJS (see my previous post for a list of additional frameworks) you can minimize the amount of code that has to be written and simplify the overall application. In future posts I’ll keep digging into the AngularJS framework and provide additional examples of some of the great features it provides.

Pluralsight Subscribers: Would you be interested in seeing a course on AngularJS? Help me out by completing the simple 1-question survey here. If there’s enough interest I’ll add it to my list of future courses to consider building.

Pluralsight Courses:

JavaScript Data Binding with AngularJS Part I – Getting Started

dwahlin — Mon, 30 Jul 2012 04:52:00 GMT

Related Posts:

In a previous post I talked about where I see things moving when it comes to the world of client-side JavaScript development. Although a lot of applications are still being built using control-oriented programming with JavaScript frameworks like jQuery, I think that the the development landscape is gradually embracing a more data-oriented programming approach and starting to take advantage of data binding frameworks that make it easier to build and maintain CRUD applications.

In this post I’m going to introduce one of the JavaScript data binding frameworks that can be used for data-oriented programming called AngularJS and show how it can be used. I’ve been experimenting with AngularJS a lot lately and like what I’ve seen up to this point. I’ll follow this post up with additional posts that drill-down into the framework more and provide details on pros and cons I’ve found. If you’re interested in seeing alternative data binding frameworks check out my earlier post.

Getting Started with AngularJS

So what is AngularJS and why is it worth taking a closer look? To answer that question take a moment to think about the features provided by HTML. It’s no secret that it wasn’t designed with dynamic applications in mind – it’s a static markup language after all. With raw HTML you can’t perform looping operations that create new elements, filter UI elements as other elements change, or perform a variety of other tasks that dynamic Web applications require. When compared to Flex, Silverlight, WPF, and other UI frameworks it’s quite limiting. We work around the limitations by generating HTML dynamically on the server or by using JavaScript frameworks like jQuery to manipulate the DOM on the client-side.

AngularJS extends HTML to support dynamic applications which means it’s well suited for CRUD-centric types of applications. For example, it allows <option> tags in a <select> to be dynamically generated without having to write custom JavaScript code to perform that task, tracks changes made to UI elements and the data they’re bound to, provides filtering/sorting support, and much more. The AngularJS documentation (http://docs.angularjs.org/guide/overview) words it this way:

“Angular takes another approach. It attempts to minimize the impedance mismatch between document centric HTML and what application needs by creating new HTML constructs. Angular teaches the browser new syntax through a construct we call directives.”

AngularJS frees you from having to do the following:

Register callbacks
Manipulate the DOM programmatically
Move data in and out of the UI manually with code
Writing a bunch of initialization code just to get started

Here’s a list of features that it provides out of the box.

Data binding
Data filtering/sorting
Data templates
Ajax support
Form validation
Routing
History support
Deep linking
Modular and reusable components
Loosely coupled architecture (dependency injection)
MVC-style applications
Architected with unit testing in mind

You can see that AngularJS is much more than a simple data binding framework – it’s more of a client-side JavaScript application framework. If you don’t like a particular feature that AngularJS provides you can inject custom code using the dependency injection functionality that’s provided. I won’t cover that topic here but you can find additional details about it and many other topics in the AngularJS docs.

To help get you started with AngularJS I’ve put together a “Hello World” type tutorial that I plan to follow-up with additional posts in the future. Let’s jump in and take a look at the basics.

Step 1: Get the Script

To get started using AngularJS you’ll need to grab the script from http://www.angularjs.org (or from their github site) and include it in your page.

<!DOCTYPE html>
<html>
    <head>
        <script src="js/libs/angular-[version].js"></script>
    </head>
    <body>
        ...
    </body>
</html>

Step 2: Add the ng-app Directive

Next, you’ll need to add an AngularJS directive named ng-app into the page that defines your application root. You can put ng-app on the <html> tag or on a tag somewhere else in the document (such as a <div>) if only a portion of a page needs AngularJS functionality. AngularJS initializes when the DOMContentLoaded event fires and then looks for the ng-app directive.

Here’s an example of defining the ng-app directive on the <html> element. This example doesn’t assign a value to the directive but in a future post I’ll show how ng-app can be used to define custom application modules that provide additional functionality such as routing, REST calls, and more.

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="js/libs/angular-[version].js"></script>
    </head>
    <body>




       ...        
    </body>
</html>

Alternatively, you can define the application root programmatically if you’d prefer to go with a more jQuery-style approach:

<!DOCTYPE html>
<html>
  <head>
    <script src="js/libs/angular-[version].js"></script> 
    <script>
        angular.element(document).ready(function () {
            angular.bootstrap(document);
        });
    </script>
  </head>
  <body> 

     ...  
  </body>
</html>

Note that jQuery can be used with AngularJS but it isn’t required.

Step 3: Add a Control with an ng-model Directive

Once the ng-app directive is added you can start using AngularJS’s data binding functionality. You can do simple data binding which I’ll show here or bind to objects that define properties and functions. To get started, add a control such as a textbox that has another AngularJS directive named ng-model on it. The ng-model directive defines the property of the model that you’ll bind to. In this example I don’t have a model object (I’ll show how to create one in a future post) and will bind the “name” property to text in the page.

Name: <input type="text" ng-model="name" />

To bind another part of the page to the value of the textbox simple “mustache” brackets ({{ and }} brackets) can be used. This is common with template frameworks like Mustache.js and others. An example of binding to the ng-model value defined on the textbox is shown next:

Welcome to AngularJS {{name}}

And that’s it! You’ve just performed your first AngularJS data binding operation. As the textbox value changes the {{name}} binding will automatically change as well. Try it out in the following live example (you’ll need to click on the “Result” tab below to run it):

Conclusion

I’ve barely scratched the surface when it comes to building data-oriented applications with AngularJS – the goal with this post is to provide a rudimentary sample. In the next post I’ll show how AngularJS can be used to bind to model object properties and perform two-way data binding.

The JavaScript Cheese is Moving: Data-Oriented vs. Control-Oriented Programming

dwahlin — Fri, 27 Jul 2012 22:52:00 GMT

In a previous post I listed several of the JavaScript data binding frameworks that are available and talked about why they’re essential as applications move more and more functionality to the client. Data binding is a key aspect of client-centric programming that can significantly minimize the amount of code written, simplify maintenance, and ultimately reduce the number of bugs that crop up in an application. Without data binding you have to locate each control in a page with code and then assign or extract a value to/from it – something I call “control-oriented” programming. Here’s an example of control-oriented programming:

function loadApprovalDiv()
{
    var subTotal = parseFloat($('#SubTotal').text());
    $('#ClientSubTotal').val(subTotal.toFixed(2));
    var salesTaxRate = parseFloat($('#SalesTaxRate').val()) / 100;
    var salesTaxAmount = (subTotal * salesTaxRate) * .9;
    var deliveryFee = parseFloat($('#DeliveryFee').val());
    var adminFee = ((subTotal + salesTaxAmount + deliveryFee) * .05);
    var total = (Round(subTotal) + Round(salesTaxAmount) + Round(deliveryFee) + 
                 Round(adminFee));
    $('#ClientTotal').val(total);
    var deliveryAddress = $('#Delivery_Street').val();
    //See if they entered a suite
    if ($('#Delivery_Suite').val() != '') deliveryAddress += ', Suite ' + $('#Delivery_Suite').val();
    deliveryAddress += ' ' + $('#Delivery_City').val() + ' ' + 
                       $('#Delivery_StateID option:selected').text() + ' ' + $('#Delivery_Zip').val();
   
    var data = {
                   FinalSubTotal  : subTotal.toFixed(2),
                   FinalSalesTax  : salesTaxAmount.toFixed(2),
                   FinalTotal     : total.toFixed(2),
                   DeliveryFee    : deliveryFee.toFixed(2),
                   AdminFee       : adminFee.toFixed(2),
                   DeliveryName   : $('#Delivery_Name').val(),
                   DeliveryAddress: deliveryAddress,
                   DeliveryDate   : $('#Delivery_DeliveryDate').val(),
                   DeliveryTime   : $('#Delivery_DeliveryTime option:selected').text(),
                   MainItems      : generateJson('Main'),
                   AccessoryItems : generateJson('Accessory')
               };


        $("#OrderSummaryOutput").html(
            $("#OrderSummaryTemplate").render(data)
        );
}

Looking through the code you can see that a lot of it is dedicated to finding controls in the page and extracting their values. This works absolutely fine – after all, many applications take this approach. However, when an application is focused on controls and not on data a lot of extra code and plumbing ends up being written which complicates things if control IDs are changed, new controls are added, or existing controls are removed. If you only have a few controls that’s not a big deal, but as the number of controls grows it becomes problematic. I think the cheese is definitely moving when it comes to client-side programming and that the smart money is on building data-oriented applications rather than control-oriented applications like the one above. That’s why we’re seeing more and more data binding frameworks for JavaScript being released.

What is Data-Oriented Programming?

I refer to applications that use data binding as being “data-oriented” (here’s a previous post on that very topic) since they’re focused on the actual data as opposed to writing code to access controls in a given page (“control-oriented” as mentioned earlier). I’ve built a lot of control-oriented applications over the years and found that making the transition to building data-oriented applications definitely requires a different thought process. However, making the move to building data-oriented applications is well worth the effort and ultimately results in better applications in my experience. I think it’s especially important for client-centric applications built using JavaScript.

Although I’m a big fan of jQuery, I’ve started realizing over the past few years that when it’s used mainly to build control-oriented applications (where jQuery is used to find controls, update values, extract values, etc.) a lot of unnecessary code is being written that could be eliminated by using a data-oriented framework. jQuery absolutely has its place in applications, but using it to build control-oriented applications isn’t a good use of its functionality in my opinion given some of the other options now available. It’s great when you require low-level DOM access but not as great when an application has a lot of CRUD operations going on. This probably sounds a bit controversial given the popularity of jQuery (and to people who know I’m definitely a huge jQuery fan), but when you understand what a data-oriented application is and why it’s important, then using a data-oriented framework makes more sense for many CRUD applications.

The Role of Data Binding

By using a data binding library/framework you can wire JavaScript object properties to controls and have the controls and object properties update automatically (a process referred to as “two-way” binding) as changes are made on either side without having to write control-specific code. This means that you don’t have to write selectors to find controls in the DOM and update them or grab values. If you’ve ever worked with application frameworks such as Flex, Silverlight, or Windows Presentation Foundation (WPF) then you’re used to this type of functionality and I’m willing to bet that you can’t live without it. Data binding is addictive once you start using it.

With application frameworks like Flex or Silverlight the data binding engine is built-in so you use whatever the framework gives you. The challenge in the JavaScript world is that there isn’t simply one “best” data binding framework to choose. Many different script libraries/frameworks are appearing on the scene with their own set of pros and cons.

I’m a big fan of data binding libraries such as KnockoutJS (my friend John Papa has an excellent course on KnockoutJS if you’re interested) but have been spending more and more time lately using a framework called AngularJS and plan to write a series of posts on what it is and how it can be used in client-centric applications to perform data binding, routing, Ajax functionality, validation, and much more when building data-oriented applications. In the next post I’ll provide a simple “getting started” example of using AngularJS for basic data binding (the post is live now) and then follow-up with additional posts that provide more details on what AngularJS is capable of doing. Until then, check out some of the data binding frameworks I wrote about previously if you want to get prepared for the data-oriented application revolution that’s coming.

Pluralsight Meet the Author Podcast on HTML5 Canvas Programming

dwahlin — Tue, 10 Jul 2012 17:27:06 GMT

In the latest installment of Pluralsight’s Meet the Author podcast series, Fritz Onion and I talk about my new course, HTML5 Canvas Fundamentals. In the interview I describe different canvas technologies covered throughout the course and a sample application at the end of the course that covers how to build a custom business chart from start to finish.

Meet the Author: Dan Wahlin on HTML5 Canvas Fundamentals

Transcript

[Fritz] Hi. This is Fritz Onion. I’m here today with Dan Wahlin to talk about his new course HTML5 Canvas Fundamentals. Dan founded the Wahlin Group, which you can find at thewahlingroup.com, which specializes in ASP.NET, jQuery, Silverlight, and SharePoint consulting. He’s a Microsoft Regional Director and has been awarded Microsoft’s MVP for ASP.NET, Connected Systems, and Silverlight. Dan is on the INETA Bureau’s — Speaker’s Bureau, speaks at conferences and user groups around the world, and has written several books on .NET. Thanks for talking to me today, Dan.

[Dan] Always good to talk with you, Fritz.

[Fritz] So this new course of yours, HTML5 Canvas Fundamentals, I have to say that most of the really snazzy demos I’ve seen with HTML5 have involved Canvas, so I thought it would be a good starting point to chat with you about why we decided to create a course dedicated just to Canvas. If you want to kind of give us that perspective.

[Dan] Sure. So, you know, there’s quite a bit of material out there on HTML5 in general, and as people that have done a lot with HTML5 are probably aware, a lot of HTML5 is actually JavaScript centric. You know, a lot of people when they first learn it, think it’s tags, but most of it’s actually JavaScript, and it just so happens that the HTML5 Canvas is one of those things. And so it’s not just, you know, a tag you add and it just magically draws all these things. You mentioned there’s a lot of cool things you can do from games to there’s some really cool multimedia applications out there where they integrate video and audio and all kinds of things into the Canvas, to more business scenarios such as charting and things along those lines. So the reason we made a course specifically on it is, a lot of the material out there touches on it but the Canvas is actually a pretty deep topic. You can do some pretty advanced stuff or easy stuff depending on what your application requirements are, and the API itself, you know, there’s over 30 functions just in the Canvas API and then a whole set of properties that actually go with that as well. So it’s a pretty big topic, and that’s why we created a course specifically tailored towards just the Canvas.

[Fritz] Right. And let’s — let me just review the outline briefly here for everyone. So you start off with an introduction to getting started with Canvas, drawing with the HTML5 Canvas, then you talk about manipulating pixels, and you finish up with building a custom data chart. So I really like your example flow here. I think it will appeal to even business developers, right. Even if you’re not into HTML5 for the games or the media capabilities, there’s still something here for everyone I think working with the Canvas. Which leads me to another question, which is, where do you see the Canvas fitting in to kind of your day-to-day developer, people that are working business applications and maybe vanilla websites that aren’t doing kind of cutting edge stuff with interactivity with users? Is there a still a place for the Canvas in those scenarios?

[Dan] Yeah, definitely. I think a lot of us — and I include myself here — over the last few years, the focus has generally been, especially if you’re, let’s say, a PHP or ASP.NET or Java type of developer, we’re kind of accustomed to working on the server side, and, you know, we kind of relied on Flash or Silverlight or these other plug-ins for the client side stuff when it was kind of fancy, like charts and graphs and things along those lines. With the what I call massive shift of applications, you know, mainly because of mobile, to more of client side, one of the big benefits I think from a maybe corporate standard way of thinking of things, since we do a lot of work with different corporations, is that, number one, rather than having to have the plug-in, which of course isn’t going to work on iPad and some of these other devices out there that are pretty popular, you can now use a built-in technology that all the modern browsers support, and that includes things like Safari on the iPad and iPhone and the Android tablets and things like that with their browsers, and actually render some really sophisticated charts. Whether you do it by scratch or from scratch or, you know, get a third party type of library involved, it’s just JavaScript. So it downloads fast so it’s good from a performance perspective; and when it comes to what you can render, it’s extremely robust. You can do everything from, you know, your basic circles to polygons or polylines to really advanced gradients as well and even provide some interactivity and animations, and that’s some of the stuff I touch upon in the class. In fact, you mentioned the last part of the outline there is building a custom data chart and that’s kind of gears towards more of the, what I’d call enterprise or corporate type developer.

[Fritz] Yeah, that makes sense. And it’s, you know, a lot of the demos I’ve seen with HTML5 focus on more the interactivity and kind of game side of things, but the Canvas is such a diverse element within HTML5 that I can see it being applicable pretty much anywhere. So why don’t we talk a little bit about some of the specifics of what you cover? You talk about drawing and then manipulating pixels. You want to kind of give us the different ways of working with the Canvas and what some of those APIs provide for you?

[Dan] Sure. So going all the way back to the start of the outline, we actually started off by showing different demonstrations of the Canvas in action, and we show some fun stuff — multimedia apps and games and things like that — and then also some more business scenarios; and then once you see that, hopefully it kinds of piques your interest and you go, oh, wow, this is actually pretty phenomenal what you can do. So then we start you off with, so how to you actually draw things. Now, there are some libraries out there that will draw things like graphs, but if you want to customize those or just build something you have from scratch, you need to know the basics, such as, you know, how do you draw circles and lines and arcs and Bezier curves and all those fancy types of shapes that a given chart may have on it or that a game may have in it for that matter. So we start off by covering what I call the core API functions; how do you, for instance, fill a rectangle or convert that to a square by setting the height and the width; how do you draw arcs or different types of curves and there’s different types supported such as I mentioned Bezier curves or quadratic curves; and then we also talk about how do you integrate text into it. You might have some images already that are just regular bitmap type images that you want to integrate, you can do that with a Canvas. And you can even sync video into the Canvas, which actually opens up some pretty interesting possibilities for both business and I think just general multimedia apps. Once you kind of get those core functions down for the basic shapes that you need to be able to draw on any type of Canvas, then we go a little deeper into what are the pixels that are there to manipulate. And that’s one of the important things to understand about the HTML5 Canvas, scalable vector graphics is another thing you can use now in the modern browsers; it’s vector based. Canvas is pixel based. And so we talk about how to do gradients, how can you do transforms, you know, how do you scale things or rotate things, which is extremely useful for charts ’cause you might have text that, you know, flips up on its side for a y-axis or something like that. And you can even do direct pixel manipulation. So it’s really, really powerful. If you want to get down to the RGBA level, you can do that, and I show how to do that in the course, and then kind of wrap that section up with some animation fundamentals.

[Fritz] Great. Yeah, that’s really powerful stuff for programmatically rendering data to clients and responding to user inputs. Look forward to seeing what everyone’s going to come up with building this stuff. So great. That’s — that’s HTML5 Canvas Fundamentals with Dan Wahlin. Thanks very much, Dan.

[Dan] Thanks again. I appreciate it.

JavaScript Data Binding Frameworks

dwahlin — Sun, 08 Jul 2012 23:17:00 GMT

Data binding is where it’s at now days when it comes to building client-centric Web applications. Developers experienced with desktop frameworks like WPF or web frameworks like ASP.NET, Silverlight, or others are used to being able to take model objects containing data and bind them to UI controls quickly and easily. When moving to client-side Web development the data binding story hasn’t been great since neither HTML nor JavaScript natively support data binding. This means that you have to write code to place data in a control and write code to extract it. Although it’s certainly feasible to do it from scratch (many of us have done it this way for years), it’s definitely tedious and not exactly the best solution when it comes to maintenance and re-use.

Over the last few years several different script libraries have been released to simply the process of binding data to HTML controls. In fact, the subject of data binding is becoming so popular that it seems like a new script library is being released nearly every week. Many of the libraries provide MVC/MVVM pattern support in client-side JavaScript apps and some even integrate directly with server frameworks like Node.js. Here’s a quick list of a few of the available libraries that support data binding (if you like any others please add a comment and I’ll try to keep the list updated):

	AngularJS MVC framework for data binding (although closely follows the MVVM pattern).
	Backbone.js MVC framework with support for models, key/value binding, custom events, and more.
	Derby Provides a real-time environment that runs in the browser an in Node.js. The library supports data binding and templates.
	Ember Provides support for templates that automatically update as data changes.
	JsViews Data binding framework that provides “interactive data-driven views built on top of JsRender templates”.
	jQXB Expression Binder Lightweight jQuery plugin that supports bi-directional data binding support.
	KnockoutJS MVVM framework with robust support for data binding. For an excellent look at using KnockoutJS check out John Papa’s course on Pluralsight.
	Meteor End to end framework that uses Node.js on the server and provides support for data binding on the client.
	Simpli5 JavaScript framework that provides support for two-way data binding.
	WinRT with HTML5/JavaScript If you’re building Windows 8 applications using HTML5 and JavaScript there’s built-in support for data binding in the WinJS library.

I won’t have time to write about each of these frameworks, but in the next post I’m going to talk about my (current) favorite when it comes to client-side JavaScript data binding libraries which is AngularJS. AngularJS provides an extremely clean way – in my opinion - to extend HTML syntax to support data binding while keeping model objects (the objects that hold the data) free from custom framework method calls or other weirdness. While I’m writing up the next post, feel free to visit the AngularJS developer guide if you’d like additional details about the API and want to get started using it.

Now that you’ve seen several client-side data binding libraries, let’s talk through whether or not it’s worth it to move shift an application’s focus from the server to the client and some of the issues that may come up.

Client-Centric or Server-Centric – That is the Question

Over the past 10 years Microsoft, Sun/Oracle, IBM, and others have been pushing developers to write server-side code that outputs HTML to the browser. As a result, making the leap to client-centric programming can be challenging if you’ve never done it before. Given the disparity across browsers in the past, generating HTML on the server made sense (and still works fine in today’s applications of course) but today’s modern browsers and even browsers going back to IE6 are much more capable of rendering HTML on their own and performing additional functionality. Enhanced browser features, faster JavaScript engines, and more and more mobile devices like the iPad have definitely shifted the trend from server-side development to client-side development.

One of the questions I hear a lot is whether or not server-side templates and code should still be used for data binding or if it’s worth it to move a lot of code down to the client and support data binding there. The answer isn’t simply “use the server” or “use the client” of course since a lot of factors have to be taken into account. I don’t believe in the “one size fits all” approach since applications all have their own unique characteristics. First off, do you (or the team you’re working on) already have a lot invested in server-side technologies? If so then it may be worthwhile to continue doing what you’re doing and sprinkle in some Ajax where appropriate to minimize postback operations. There’s no hard and fast rule that says you have to convert everything to client-side code. If you’re using ASP.NET Web Forms or ASP.NET MVC it’s pretty straightforward to add Ajax functionality without having to write much (if any) JavaScript code. Going that route won’t be as efficient as doing it with pure JavaScript (or using a library like jQuery) but it gets the job done and you can always start learning the new client-centric techniques along the way.

As far as templates and data binding, ASP.NET Web Forms controls like ListView, Repeater, GridView, and others definitely make it easy to bind data to a template that automatically generates HTML for the browser. If you use ASP.NET Web Forms a lot you’re probably familiar with this, but here’s a quick example of a ListView control template that data could be bound to:

<asp:ListView runat="server" ID="CustomersListView">
    <LayoutTemplate>
        <table runat="server">
            <tr runat="server" id="itemPlaceholder" ></tr>
        </table>
    </LayoutTemplate>
    <ItemTemplate>
        <tr>
            <td>
                 <asp:Label ID="CustomerNameLabel" runat="server" 
                    Text='<%#Eval("CustomerName") %>' />
            </td>
        </tr>
    </ItemTemplate>
</asp:ListView>

ASP.NET MVC has data templates, editor extensions, model binders, and other great features that also simplify the process while generating very clean markup on the server. An example of using the EditorFor() method to auto-generate HTML for a Customer type in an ASP.NET MVC view is shown next. If a custom editor template for Customer is defined the template will automatically handle binding properties of the Customer type to different UI controls.

@Html.EditorFor(model => model.Customer)

Server-side programming definitely isn’t the only game in town any more. Custom templates combined with data binding can be used quite successfully on the client-side leading to a more interactive, engaging, and productive application from the client perspective if done right. Whether you write custom code or use a JavaScript library, you can integrate some pretty impressive functionality directly into the client. Going this route definitely requires a solid knowledge of JavaScript but if you already know a language then JavaScript is quite easy to pick up. With the available libraries out there you don’t even have to write a lot of JavaScript code in some cases. As an example, here’s a simple code sample that uses a framework called AngularJS to perform bi-directional client-side data binding:

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
  </head>
  <body>
    <div>
      <input type="text" ng-model="age" placeholder="Enter your age...">
      <br />
      <h1>You are {{age}} years old!</h1>
    </div>
  </body>
</html>

As the user types into the textbox the “model” property named “age” will be updated. It’s bound into the h1 element using the {{ age }} syntax. Anytime age changes the text inside the h1 element will change as well. Not bad for zero lines of custom JavaScript. For more real-world applications you can go much deeper and perform some impressive data binding operations whether you use AngularJS or one of the other available frameworks.

For me personally, the server versus client discussion all comes down to data exchange. Do you want the server to send pre-formatted HTML down to the client or do you want it to send raw data that is dynamically formatted on the client? If you’re looking for increases in speed, better performance on mobile devices, and more, then sending raw JavaScript Object Notation (JSON) data can be a win for dynamic applications especially given that the payload sent over the wire will likely be much smaller.

Making the Leap to Client Side Development

Up to this point I’ve focused on client-side and server-side developer skills but they certainly aren’t the only factor to consider. Who will be using the application and how dynamic does it need to be? Will the application be used on mobile devices in addition to standard desktop browsers? If you want to minimize postbacks, move a lot of the application’s functionality down to the client, and provide an overall better experience for the client then learning JavaScript and one or more JavaScript frameworks may be worthwhile. Moving functionality down to the client isn’t a decision that should be taken lightly though especially for teams that don’t have much experience there. Here are a few things to consider:

How well does your team know JavaScript?
Do you know different JavaScript Patterns that can be used to structure code and make it re-useable and maintainable?
How are you going to divide up your JavaScript files to promote re-use, avoid naming collisions, and support future maintenance?
How are you going to load your JavaScript files – an important point to consider if you’ll be working with a lot of .js files since they load synchronously by default in browsers.
Do you know how to expose JSON data through RESTful endpoints on the server so that it can be consumed by JavaScript clients?
How much of your code do you want available for prying eyes to see on the client? Although there are ways to obfuscate JavaScript code, it’s quite easy to get to it using browser developer tools.
How will dynamically generating HTML code in the browser affect search engine optimizations?
Have you thought through any security implications of moving a lot of application functionality to the client?
Does the application need to run offline?

If you answered “no” or were unsure about several of the above questions then it’s time to invest in educating yourself about client-side development practices. As more and more applications move this direction you’ll see more and more customers demanding this type of rich client functionality. I’ll talking about that very subject in upcoming posts.

Mobile Friendly Websites with CSS Media Queries

dwahlin — Mon, 25 Jun 2012 07:06:18 GMT

In a previous post the concept of CSS media queries was introduced and I discussed the fundamentals of how they can be used to target different screen sizes. I showed how they could be used to convert a 3-column wide page into a more vertical view of data that displays better on devices such as an iPhone:

In this post I'll provide an additional look at how CSS media queries can be used to mobile-enable a sample site called "Widget Masters" without having to change any server-side code or HTML code. The site that will be discussed is shown next:

This site has some of the standard items shown in most websites today including a title area, menu bar, and sections where data is displayed. Without including CSS media queries the site is readable but has to be zoomed out to see everything on a mobile device, cuts-off some of the menu items, and requires horizontal scrolling to get to additional content. The following image shows what the site looks like on an iPhone. While the site works on mobile devices it's definitely not optimized for mobile.

Let's take a look at how CSS media queries can be used to override existing styles in the site based on different screen widths.

Adding CSS Media Queries into a Site

The Widget Masters Website relies on standard CSS combined with HTML5 elements to provide the layout shown earlier. For example, to layout the menu bar shown at the top of the page the nav element is used as shown next. A standard div element could certainly be used as well if desired.

<nav>
    <ul class="clearfix">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#aboutus">About Us</a></li>
        <li><a href="#contactus">Contact Us</a></li>
        <li><a href="#store">Store</a></li>
    </ul>
</nav>

This HTML is combined with the CSS shown next to add a CSS3 gradient, handle the horizontal orientation, and add some general hover effects.

nav
{
    width: 100%;
}
        
nav ul
{
    border-radius: 6px;
    height: 40px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: rgb(125,126,125); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, 
                rgba(14,14,14,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,rgba(125,126,125,1)), 
                color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%, 
                rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(125,126,125,1) 0%, 
                rgba(14,14,14,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%, 
                rgba(14,14,14,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(125,126,125,1) 0%, 
                rgba(14,14,14,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( 
            startColorstr='#7d7e7d', 
            endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
        
nav ul > li
{
    list-style: none;
    float: left;
    margin: 0;
    padding: 0;
}
        
nav ul > li:first-child
{
    margin-left: 8px;
}
        
nav ul > li > a
{
    color: #ccc;
    text-decoration: none;
    line-height: 2.8em;
    font-size: 0.95em;
    font-weight: bold;
    padding: 8px 25px 7px 25px;
    font-family: Arial, Helvetica, sans-serif;
}
        
nav ul > li a:hover
{
    background-color: rgba(0, 0, 0, 0.1);
    color: #fff;
}

When mobile devices hit the site the layout of the menu items needs to be adjusted so that they're all visible without having to swipe left or right to get to them. This type of modification can be accomplished using CSS media queries by targeting specific screen sizes. To start, a media query can be added into the site's CSS file as shown next:

@media screen and (max-width:320px) {

    /* CSS style overrides for this screen width go here */

}

This media query targets screens that have a maximum width of 320 pixels. Additional types of queries can also be added – refer to my previous post for more details as well as resources that can be used to test media queries in different devices. In that post I emphasize (and I'll emphasize again) that CSS media queries only modify the overall layout and look and feel of a site. They don't optimize the site as far as the size of the images or content sent to the device which is important to keep in mind.

To make the navigation menu more accessible on devices such as an iPhone or Android the CSS shown next can be used. This code changes the height of the menu from 40 pixels to 100%, takes off the li element floats, changes the line-height, and changes the margins.

@media screen and (max-width:320px)
{
        
    nav ul
    {
        height: 100%;
    }
        
    nav ul > li
    {
        float: none;
    }
        
    nav ul > li a
    {
        line-height: 1.5em;
    }
        
    nav ul > li:first-child
    {
        margin-left: 0px;
    }
        
    /* Additional CSS overrides go here */
        
}

The following image shows an example of what the menu look like when run on a device with a width of 320 pixels:

Mobile devices with a maximum width of 480 pixels need different CSS styles applied since they have 160 additional pixels of width. This can be done by adding a new CSS media query into the stylesheet as shown next. Looking through the CSS you'll see that only a minimal override is added to adjust the padding of anchor tags since the menu fits by default in this screen width.

@media screen and (max-width: 480px)
{
        
    nav ul > li > a
    {
        padding: 8px 10px 7px 10px;
    }
        
}

Running the site on a device with 480 pixels results in the menu shown next being rendered. Notice that the space between the menu items is much smaller compared to what was shown when the main site loads in a standard browser.

In addition to modifying the menu, the 3 horizontal content sections shown earlier can be changed from a horizontal layout to a vertical layout so that they look good on a variety of smaller mobile devices and are easier to navigate by end users. The HTML5 article and section elements are used as containers for the 3 sections in the site as shown next:

<article class="clearfix">
    <section id="info">
        <header>Why Choose Us?</header>
        <br />
        <img id="mainImage" src="Images/ArticleImage.png" title="Article Image" />
        <p>
            Post emensos insuperabilis expeditionis eventus languentibus partium animis, quas
            periculorum varietas fregerat et laborum, nondum tubarum cessante clangore vel milite
            locato per stationes hibernas.
        </p>
    </section>
    <section id="products">
        <header>Products</header>
        <br />
        <img id="gearsImage" src="Images/Gears.png" title="Article Image" />
        <p>
            <ul>
                <li>Widget 1</li>
                <li>Widget 2</li>
                <li>Widget 3</li>
                <li>Widget 4</li>
                <li>Widget 5</li>
            </ul>
        </p>
    </section>
    <section id="FAQ">
        <header>FAQ</header>
        <br />
        <img id="faqImage" src="Images/faq.png" title="Article Image" />
        <p>
            <ul>
                <li>FAQ 1</li>
                <li>FAQ 2</li>
                <li>FAQ 3</li>
                <li>FAQ 4</li>
                <li>FAQ 5</li>
            </ul>
        </p>
    </section>
</article>

To force the sections into a vertical layout for smaller mobile devices the CSS styles shown next can be added into the media queries targeting 320 pixel and 480 pixel widths. Styles to target the display size of the images in each section are also included. It's important to note that the original image is still being downloaded from the server and isn't being optimized in any way for the mobile device. It's certainly possible for the CSS to include URL information for a mobile-optimized image if desired.

@media screen and (max-width:320px)
{
        
    section
    {
        float: none;
        width: 97%;
        margin: 0px;
        padding: 5px;
    }
        
    #wrapper
    {
        padding: 5px;
        width: 96%;
    }
        
    #mainImage, #gearsImage, #faqImage
    {
        width: 100%;
        height: 100px;
    }
        
}
        
@media screen and (max-width: 480px)
{
        
    section
    {
        float: none;
        width: 98%;
        margin: 0px 0px 10px 0px;
        padding: 5px;
    }
        
    article > section:last-child
    {
        margin-right: 0px;
        float: none;
    }
        
    #bottomSection
    {
        width: 99%;
    }
        
    #wrapper
    {
        padding: 5px;
        width: 96%;
    }
        
    #mainImage, #gearsImage, #faqImage
    {
        width: 100%;
        height: 100px;
    }
        
}

The following images show the site rendered on an iPhone with the CSS media queries in place. Each of the sections now displays vertically making it much easier for the user to access them. Images inside of each section also scale appropriately to fit properly.

CSS media queries provide a great way to override default styles in a website and target devices with different resolutions. In this post you've seen how CSS media queries can be used to convert a standard browser-based site into a site that is more accessible to mobile users. Although much more can be done to optimize sites for mobile, CSS media queries provide a nice starting point if you don't have the time or resources to create mobile-specific versions of sites.

Detecting HTML5/CSS3 Features using Modernizr

dwahlin — Fri, 22 Jun 2012 15:05:00 GMT

HTML5, CSS3, and related technologies such as canvas and web sockets bring a lot of useful new features to the table that can take Web applications to the next level. These new technologies allow applications to be built using only HTML, CSS, and JavaScript allowing them to be viewed on a variety of form factors including tablets and phones. Although HTML5 features offer a lot of promise, it’s not realistic to develop applications using the latest technologies without worrying about supporting older browsers in the process. If history has taught us anything it’s that old browsers stick around for years and years which means developers have to deal with backward compatibility issues. This is especially true when deploying applications to the Internet that target the general public. This begs the question, “How do you move forward with HTML5 and CSS3 technologies while gracefully handling unsupported features in older browsers?”

Although you can write code by hand to detect different HTML5 and CSS3 features, it’s not always straightforward. For example, to check for canvas support you need to write code similar to the following:

<script>
    window.onload = function () {
        if (canvasSupported()) {
            alert('canvas supported');
        }
    };
        
    function canvasSupported() {
        var canvas = document.createElement('canvas');
        return (canvas.getContext && canvas.getContext('2d'));
    }
</script>

If you want to check for local storage support the following check can be made. It’s more involved than it should be due to a bug in older versions of Firefox.

<script>
    window.onload = function () {
        if (localStorageSupported()) {
            alert('local storage supported');
        }
    };

    function localStorageSupported() {
        try {
            return ('localStorage' in window && window['localStorage'] != null);
        }
        catch(e) {}
        return false;
    }
</script>

Looking through the previous examples you can see that there’s more than meets the eye when it comes to checking browsers for HTML5 and CSS3 features. It takes a lot of work to test every possible scenario and every version of a given browser. Fortunately, you don’t have to resort to writing custom code to test what HTML5/CSS3 features a given browser supports. By using a script library called Modernizr you can add checks for different HTML5/CSS3 features into your pages with a minimal amount of code on your part. Let’s take a look at some of the key features Modernizr offers.

Getting Started with Modernizr

The first time I heard the name “Modernizr” I thought it “modernized” older browsers by added missing functionality. In reality, Modernizr doesn’t actually handle adding missing features or “modernizing” older browsers. The Modernizr website states, “The name Modernizr actually stems from the goal of modernizing our development practices (and ourselves)”. Because it relies on feature detection rather than browser sniffing (a common technique used in the past – that never worked that great), Modernizr definitely provides a more modern way to test features that a browser supports and can even handle loading additional scripts called shims or polyfills that fill in holes that older browsers may have. It’s a great tool to have in your arsenal if you’re a web developer.

Modernizr is available at http://modernizr.com. Two different types of scripts are available including a development script and custom production script. To generate a production script, the site provides a custom script generation tool rather than providing a single script that has everything under the sun for HTML5/CSS3 feature detection. Using the script generation tool you can pick the specific test functionality that you need and ignore everything that you don’t need. That way the script is kept as small as possible. An example of the custom script download screen is shown next. Notice that specific CSS3, HTML5, and related feature tests can be selected.

Once you’ve downloaded your custom script you can add it into your web page using the standard <script> element and you’re ready to start using Modernizr.

<script src="Scripts/Modernizr.js" type="text/javascript"></script>

Modernizr and the HTML Element

Once you’ve add a script reference to Modernizr in a page it’ll go to work for you immediately. In fact, by adding the script several different CSS classes will be added to the page’s <html> element at runtime. These classes define what features the browser supports and what features it doesn’t support. Features that aren’t supported get a class name of “no-FeatureName”, for example “no-flexbox”. Features that are supported get a CSS class name based on the feature such as “canvas” or “websockets”. An example of classes added when running a page in Chrome is shown next:

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage 
              websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla 
              multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity 
              cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d 
              csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers 
              applicationcache svg inlinesvg smil svgclippaths">

Here’s an example of what the <html> element looks like at runtime with Internet Explorer 9:

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation 
              postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets 
              rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow 
              opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms 
              no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage 
              sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

When using Modernizr it’s a common practice to define an <html> element in your page with a no-js class added as shown next:

<html class="no-js">

You’ll see starter projects such as HTML5 Boilerplate (http://html5boilerplate.com) or Initializr (http://initializr.com) follow this approach (see my previous post for more information on HTML5 Boilerplate). By adding the no-js class it’s easy to tell if a browser has JavaScript enabled or not. If JavaScript is disabled then no-js will stay on the <html> element. If JavaScript is enabled, no-js will be removed by Modernizr and a js class will be added along with other classes that define supported/unsupported features.

Working with HTML5 and CSS3 Features

You can use the CSS classes added to the <html> element directly in your CSS files to determine what style properties to use based upon the features supported by a given browser. For example, the following CSS can be used to render a box shadow for browsers that support that feature and a simple border for browsers that don’t support the feature:

.boxshadow #MyContainer {
    border: none;
    -webkit-box-shadow: #666 1px 1px 1px;
    -moz-box-shadow: #666 1px 1px 1px;
}
    
.no-boxshadow #MyContainer {
    border: 2px solid black;
}

If a browser supports box-shadows the boxshadow CSS class will be added to the <html> element by Modernizr. It can then be associated with a given element. This example associates the boxshadow class with a div with an id of MyContainer. If the browser doesn’t support box shadows then the no-boxshadow class will be added to the <html> element and it can be used to render a standard border around the div. This provides a great way to leverage new CSS3 features in supported browsers while providing a graceful fallback for older browsers.

In addition to using the CSS classes that Modernizr provides on the <html> element, you also use a global Modernizr object that’s created. This object exposes different properties that can be used to detect the availability of specific HTML5 or CSS3 features. For example, the following code can be used to detect canvas and local storage support. You can see that the code is much simpler than the code shown at the beginning of this post. It also has the added benefit of being tested by a large community of web developers around the world running a variety of browsers.

$(document).ready(function () {

    if (Modernizr.canvas) {
        //Add canvas code
    }

    if (Modernizr.localstorage) {
        //Add local storage code
    }

});

The global Modernizr object can also be used to test for the presence of CSS3 features. The following code shows how to test support for border-radius and CSS transforms:

$(document).ready(function () {

    if (Modernizr.borderradius) {
        $('#MyDiv').addClass('borderRadiusStyle');
    }
        
    if (Modernizr.csstransforms) {
        $('#MyDiv').addClass('transformsStyle');
    }

});

Several other CSS3 feature tests can be performed such as support for opacity, rgba, text-shadow, CSS animations, CSS transitions, multiple backgrounds, and more. A complete list of supported HTML5 and CSS3 tests that Modernizr supports can be found at http://www.modernizr.com/docs.

Loading Scripts using Modernizr

In cases where a browser doesn’t support a specific feature you can either provide a graceful fallback or load a shim/polyfill script to fill in missing functionality where appropriate (more information about shims/polyfills can be found at https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Modernizr has a built-in script loader that can be used to test for a feature and then load a script if the feature isn’t available. The script loader is built-into Modernizr and is also available as a standalone yepnope script (http://yepnopejs.com). It’s extremely easy to get started using the script loader and it can really simplify the process of loading scripts based on the availability of a particular browser feature.

To load scripts dynamically you can use Modernizr’s load() function which accepts properties defining the feature to test (test property), the script to load if the test succeeds (yep property), the script to load if the test fails (nope property), and a script to load regardless of if the test succeeds or fails (both property). An example of using load() with these properties is show next:

Modernizr.load({
    test: Modernizr.canvas,
    yep:  'html5CanvasAvailable.js’,
    nope: 'excanvas.js’, 
    both: 'myCustomScript.js' 
});

In this example Modernizr is used to not only load scripts but also to test for the presence of the canvas feature. If the target browser supports the HTML5 canvas then the html5CanvasAvailable.js script will be loaded along with the myCustomScript.js script (use of the yep property in this example is a bit contrived – it was added simply to demonstrate how the property can be used in the load() function). Otherwise, a polyfill script named excanvas.js will be loaded to add missing canvas functionality for Internet Explorer versions prior to 9. Once excanvas.js is loaded the myCustomScript.js script will be loaded.

Because Modernizr handles loading scripts, you can also use it in creative ways. For example, you can use it to load local scripts when a 3rd party Content Delivery Network (CDN) such as one provided by Google or Microsoft is unavailable for whatever reason. The Modernizr documentation provides the following example that demonstrates the process for providing a local fallback for jQuery when a CDN is down:

Modernizr.load([
    {
        load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js',
        complete: function () {
            if (!window.jQuery) {
                Modernizr.load('js/libs/jquery-1.6.4.min.js');
            }
        }
    },
    {
        // This will wait for the fallback to load and
        // execute if it needs to.
        load: 'needs-jQuery.js'
    }
]);

This code attempts to load jQuery from the Google CDN first. Once the script is downloaded (or if it fails) the function associated with complete will be called. The function checks to make sure that the jQuery object is available and if it’s not Modernizr is used to load a local jQuery script. After all of that occurs a script named needs-jQuery.js will be loaded.

Conclusion

If you’re building applications that use some of the latest and greatest features available in HTML5 and CSS3 then Modernizr is an essential tool. By using it you can reduce the amount of custom code required to test for browser features and provide graceful fallbacks or even load shim/polyfill scripts for older browsers to help fill in missing functionality.