Dan Wahlin's WebLog

Understanding C# Events, Delegates and Lambdas – New Pluralsight Course

dwahlin — Sat, 27 Apr 2013 06:08:04 GMT

C# continues to grow in popularity attracting more and more developers looking to build Web, desktop or mobile applications targeting a variety of platforms. As developers learn the language the concept of events, delegates and lambdas tend to trip some up and generate a lot of questions. For example, what are delegates and how do they actually work? Would you ever create a custom delegate and in which scenarios? What’s a lambda used for and why would someone choose a lambda over other techniques? How do you write custom delegates/events and use them in C# classes to provide notifications to other components in an application? These are just a few of the questions that many struggle to understand.

To help answer these questions and clarify the role of events, delegates, EventArgs, lambdas and other related features, I’m excited to announce the release of a new Pluralsight course titled C# Events, Delegates and Lambdas that provides simple explanations that show the big picture and how events, delegates, lambdas and other components fit in. If you’re interested in gaining a more thorough understanding of how these C# technologies work together then you’ll definitely want to check out this new course!

Key topics covered in the course include:

The role of events, delegates and event handlers
How to create custom delegates and events
Techniques for raising events (without raising errors)
Different techniques that can be used to handle events
The role of lambdas and how they provide a concise way to write code
Built-in .NET delegates that can be used in your custom C# classes
Using lambdas with delegates to provide flexibility in an application

What’s the Developer Community Like in India? My interview with Pinal Dave and Aaron Skonnard

dwahlin — Thu, 25 Apr 2013 05:18:00 GMT

I had the opportunity to sit down with Pinal Dave and Aaron Skonnard at Pluralsight’s 2013 Author Summit to discuss the developer community in India and how immense it is. I’ve always been fascinated with the Indian culture, have a lot of friends there, and absolutely love the food so it was fun to talk with Pinal and Aaron and hear more details about the community and what Pluralsight is doing in that part of the world.

What’s a Pluralsight Study Group? Steve Woolley and I Discuss the Concept!

dwahlin — Thu, 18 Apr 2013 06:52:00 GMT

Have you ever heard about or attended a Pluralsight Study Group? If you’re new to the concept, Pluralsight provides a subscription for a study group that can be used to access Pluralsight’s entire content library. Study group leaders then organize meetings where a group of people get together and watch and discuss courses over a span of several weeks depending on the course.

I had the opportunity to visit the New York Pluralsight Study Group while on a business trip and was really impressed with how interactive the group was. Instead of having people sitting around listening to a speaker present, asking a question every now and then and then wrapping things up, the NYC study group reviewed a portion of a course, paused the video, and then interacted with each other to discuss the code, how it could be used, and more. It was a different approach that really opened my eyes to how interactive a group can be when you can completely pause the content to discuss it more in-depth. Here’s the group I met while in NYC – it was a lot of fun!

In addition to watching a course I presented a few concepts and had a lot of fun meeting the different people. Additional study groups are springing up all around the world now in Sweden, NYC, Philadelphia, Ohio, Manila, Bangalore, Odessa and many other locations.

While at the Pluralsight Author Summit earlier this year I had the opportunity to interview Steve Woolley who’s the Director of Marketing at Pluralsight and talk about what a Pluralsight Study Group is, how Pluralsight helps, and how to get going if you’re interested in starting a study group in your area. If you’ve ever run a user group before and struggled to find speakers month after month then you’ll definitely want to check out the study group option since you’ll never have to find another speaker again! It’s definitely a different approach to the standard user group meeting that can be really interactive. If you’re interested in starting a study group watch the interview below and visit http://pluralsight.com/training/Community/Sponsorships for more details.

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.

Slides and Code from my AngleBrackets/DevIntersection Talks: AngularJS, ASP.NET MVC, jQuery and JavaScript

dwahlin — Thu, 11 Apr 2013 19:38:25 GMT

The AngleBrackets and DevIntersection conference is all wrapped up for me and I had a great time as always meeting new people and talking about technologies that I really love to work with. Thanks to everyone that took the time to come to my talks - I definitely had a lot of fun giving them and chatting with people after each session.

As promised, here are the code and slides from each presentation.

Simplify SPA Development with the AngularJS JavaScript Framework

Abstract:

This talk covers the AngularJS JavaScript framework (one of my favorite frameworks out there!) and discusses challenges associated with Single Page Applications (SPA). Throughout the talk I go into detail about how AngularJS helps solve many of the challenges with built-in support for two-way data binding, directives and filters, controllers, ViewModels (scope) and more. I also discuss the relationship of modules to controllers, factories/services and how the big picture looks.

Presentation:

Simplify SPA Development with the AngularJS JavaScript Framework from Dan Wahlin

Code Samples:

http://tinyurl.com/AngularJSDemos

JavaScript Patterns to Cleanup your Code

Abstract:

This talk covers JavaScript patterns that can be used to structure code and clean it up to enhance productivity and simplify maintenance. Topics covered include why "function spaghetti code" is bad, the role of closures and different patterns such as the Prototype Pattern, Revealing Module Pattern and the Revealing Prototype Pattern.

A full course on this subject can be found on Pluralsight.com.

Presentation:

JavaScript Patterns to Cleanup your Code from Dan Wahlin

Code Samples:

http://tinyurl.com/StructuringJSCode

Building an End-to-End HTML5 App with ASP.NET MVC 4, Entity Framework and jQuery

Abstract:

HTML5 is all the rage these days but where do you look to find robust examples of using it along with jQuery, client-side templates, Ajax calls, data access technologies, and more? In this talk I walk through an application that demonstrates how key HTML5 technologies can be integrated and used to present data to users in different ways. Topics covered include exposing data to the client using RESTful services created using the new ASP.NET Web API, using Handlebars templates to render data, JavaScript techniques for structuring code, the role of HTML5 semantic tags, as well as how technologies such as the canvas, SVG, and video can be used. If you want to learn server-side as well as client-side techniques and strategies then this session is for you.

A full course covering these technologies can be found on Pluralsight.com.

Presentation:

Building the an End-to-End ASP.NET MVC 4, Entity Framework, HTML5, jQuery application from Dan Wahlin

Code Samples:

http://tinyurl.com/AAG2013

Using AngularJS: My Interview with Joe Eames and Jim Cooper

dwahlin — Thu, 11 Apr 2013 17:26:29 GMT

I'm really excited about the AngularJS JavaScript framework given all of the great features it offers out of the box for building Single Page Applications (SPAs) and really any application that has a lot of client-side functionality. I just returned from the DevIntersection and AngleBrackets conference in Las Vegas and there was a lot of buzz about the framework at my different AngularJS and JavaScript talks.

While at the Pluralsight Author Summit in March, I had the opportunity to sit down with Joe Eames and Jim Cooper to talk about how they've used AngularJS, their favorite features and how it was used to build Pluralsight's HTML5 video player. In the interview we discuss some of our favorite AngularJS features, benefits it offers developers as well as a few other related subjects. If you're interested in hearing more about what AngularJS is and what it can do, check out the interview for a quick introduction.

For more information about AngularJS visit http://angularjs.org.

Model Binding in ASP.NET 4.5 Web Forms

dwahlin — Tue, 02 Apr 2013 19:15:00 GMT

In my last post on ASP.NET 4.5 Web Forms features I talked about the new strongly-typed data controls that are available and how you can now get Intellisense as you access object properties within a server control template. It's a great feature that you definitely need to check out if you haven't already. Here's a quick summary of what's new when it comes to data-specific features in the ASP.NET 4.5 release:

In this post I'm going to focus on my overall favorite new feature in ASP.NET 4.5 called model binding (check out all of the new features in my Pluralsight course). Model binding isn't exactly a "new" feature when it comes to .NET because ASP.NET MVC has had it for a long time. However, it's new to ASP.NET Web Forms and yet another feature that will truly change how you write your application code if you take advantage of what it offers.

What is Model Binding?

In a nutshell, model binding is the process of getting model objects in and out of controls without writing a lot of plumbing code to do it. You can now bind data controls directly to methods that provide select, insert, update and delete functionality. When the methods are called you don't have to write a lot of code to access the values that were posted back in the case of update, insert, or delete operations. Instead, model binding allows you to have a given model object's properties (a class with properties if you're not familiar with model objects) automatically filled with the posted back data. Here's an example of a model object named SalesOrderHeader:

public partial class SalesOrderHeader
{
    public SalesOrderHeader()
    {
        this.SalesOrderDetails = new HashSet<SalesOrderDetail>();
    }
    
    public int SalesOrderID { get; set; }
    public byte RevisionNumber { get; set; }
    public System.DateTime OrderDate { get; set; }
    public System.DateTime DueDate { get; set; }
    public Nullable<System.DateTime> ShipDate { get; set; }
    public byte Status { get; set; }
    public bool OnlineOrderFlag { get; set; }
    public string SalesOrderNumber { get; set; }
    public string PurchaseOrderNumber { get; set; }
    public string AccountNumber { get; set; }
    public int CustomerID { get; set; }
    public Nullable<int> ShipToAddressID { get; set; }
    public Nullable<int> BillToAddressID { get; set; }
    public string ShipMethod { get; set; }
    public string CreditCardApprovalCode { get; set; }
    public decimal SubTotal { get; set; }
    public decimal TaxAmt { get; set; }
    public decimal Freight { get; set; }
    public decimal TotalDue { get; set; }
    public string Comment { get; set; }
    public System.Guid rowguid { get; set; }
    public System.DateTime ModifiedDate { get; set; }
    
    public virtual Customer Customer { get; set; }
    public virtual ICollection<SalesOrderDetail> SalesOrderDetails { get; set; }
}

Model binding will save you having to write that nasty code that's been required in the past to dive into a data control such as a GridView or ListView, extract the values and fill a model object's properties. Here's an example of the old way of accessing data posted back from a data control (this is just one way to do it - the Request object could also be used):

protected void OrdersListView_ItemUpdating(object sender, ListViewUpdateEventArgs e)
{
    var orderID = int.Parse(((Label)GetControl(e, "OrderID")).Text);
    var orderDate = DateTime.Parse(((TextBox)GetControl(e, "OrderDate")).Text);
    var dueDate = DateTime.Parse(((TextBox)GetControl(e, "DueDate")).Text);
    var shipDate = DateTime.Parse(((TextBox)GetControl(e, "ShipDate")).Text);
    var subTotal = decimal.Parse(((TextBox)GetControl(e, "SubTotal")).Text);

    //Update data in database

}

With model binding the values posted back can automatically be updated in the target model object without having to write all of the messy code shown here to extract them. Let's look at an example of how it all works.

Binding Methods Directly to a Data Control

Assume that we have a simple application that displays customers in a DropDownList. As a customer is selected their orders are displayed using a ListView and the client can then edit the order if desired:

To load the DropDownList we can take advantage of model binding and bind a collection of customers directly to the control by defining a select method using the new SelectMethod property as shown next:

<asp:DropDownList ID="CustomersDropDown" runat="server" AutoPostBack="True" 
    SelectMethod="BindCustomers"
    AppendDataBoundItems="true"
    DataTextField="FullName" DataValueField="CustomerID">
    <asp:ListItem Value="0">Select One:</asp:ListItem>
</asp:DropDownList>

The BindCustomers() method handles retrieving data from the database that's then bound into the dropdown control:

public IQueryable<Customer> BindCustomers()
{
    var custs = from cust in _DbContext.Customers
                join order in _DbContext.SalesOrderHeaders on cust.CustomerID equals order.CustomerID
                orderby cust.LastName
                select cust;
        return custs;
}

Note: To keep things simple and focused this example puts the database code in the code-behind file. I highly recommend creating a separate data access layer in real applications. See this post for a starter example of what I mean.

A data control such as a ListView can then extract the customer ID from the DropDownList and use it to grab all of the orders for the selected customer. The following example defines the select method that handles retrieving orders as well as the insert, update and delete methods that should be called when an order is inserted or edited:

<asp:ListView ID="OrdersListView" runat="server" 
    ItemType="ModelBinding.Data.SalesOrderHeader"
    DataKeyNames="SalesOrderID"
    SelectMethod="BindOrders"
    UpdateMethod="UpdateOrder"
    InsertMethod="InsertOrder"
    DeleteMethod="DeleteOrder">

   Templates go here

</ListView>

Using Model Binding Attributes

How does the BindOrders() method defined on the ListView control know where to get the customer ID from though? You could certainly write code to do it, or you could leverage model binding value provider attributes such as [Control("ControlID")] to automatically map a selected value to a method parameter. An example of doing this in the BindOrders() method is shown next:

public IQueryable<SalesOrderHeader> BindOrders([Control("CustomersDropDown")] int? customerID)
{
    var orders = from c in _DbContext.SalesOrderHeaders
                    where c.CustomerID == customerID
                    orderby c.OrderDate
                    select c;
    return orders;
}

Notice that the customerID parameter has a value provider attribute in front of it: [Control("CustomersDropdown")]. This instructs the ASP.NET runtime to automatically grab the selected value from the dropdown and pass it in as the customerID parameter. From there, the method handles grabbing the orders from the database and returning them. The ListView then uses its ItemTemplate to bind the order data into the page. There are additional value provider attributes available such as [QueryString], [Route],[Profile], [Session], [ViewState] and others. See the System.Web.ModelBinding documentation for details.

Mapping Posted Back Values to Model Object Properties

When the end user edits an order the ListView's EditItemTemplate renders and when the update button is clicked the UpdateOrder() method shown earlier on the ListView definition is called. Prior to ASP.NET 4.5 we would have to write the old code that I showed at the beginning of this post to extract all of the values from the EditItemTemplate. That's a process that I've never enjoyed very much since it's quite tedious and subject to typos. With model binding we can have the ASP.NET framework automatically fill the model object that was edited (a SalesOrderHeader object in this case) with data. Here's what the UpdateOrder() method looks like:

// The id parameter name should match the DataKeyNames value set on the control
public void UpdateOrder(int SalesOrderID)
{
    ModelBinding.Data.SalesOrderHeader order = _DbContext.SalesOrderHeaders.Find(SalesOrderID);
    if (order == null)
    {
        ModelState.AddModelError("Error", String.Format("Item with id {0} was not found", SalesOrderID));
        return;
    }

    TryUpdateModel(order);

    if (ModelState.IsValid)
    {
        try
        {
            _DbContext.SaveChanges();
            OrdersListView.EditIndex = -1;
            ErrorLabel.Text = String.Empty;
        }
        catch (Exception exp)
        {
            ErrorLabel.Text = exp.Message;
        }         
    }
}

The primary key for the order that is being edited is automatically passed as a parameter since the DataKeyNames value on the ListView (SalesOrderID) matches the parameter name in UpdateOrder(). From there, the SalesOrderHeader object is retrieved from the database using the key and if it isn't found a model error is added into the model errors collection using ModelState.AddModelError(). ModelState is a new property off of the Page class. If the order is found the TryUpdateModel() method is called and the order is passed into it as a parameter. The values that were posted back from the ListView are automatically mapped into the object's properties with that one line of code - a huge increase in productivity!

From there the code ensures that the data defined in the model object is valid (for example if any properties are required then an error will be added into the model errors collection if no data was found for them) and if it is valid the object is updated in the database using Entity Framework.

An alternative technique for performing model binding as an order is being updated is shown next:

public void UpdateOrder2(SalesOrderHeader order)
{
    if (order != null)
    {
        try
        {
            //Only updating a few properties so grab original order
            var originalOrder = _DbContext.SalesOrderHeaders.Find(order.SalesOrderID);
            originalOrder.OrderDate = order.OrderDate;
            originalOrder.DueDate = order.DueDate;
            originalOrder.ShipDate = order.ShipDate;
            originalOrder.SubTotal = order.SubTotal;

            _DbContext.SaveChanges();
            OrdersListView.EditIndex = -1;
            ErrorLabel.Text = String.Empty;
        }
        catch (Exception exp)
        {
            ErrorLabel.Text = exp.Message;
        }
    }
}

Notice that the type of object defined in the ListView's ItemType (shown earlier) is included as a parameter in the method - a SalesOrderHeader type in this example. As data is posted back, the framework will try to automatically map the values to the order object's properties. From there it's trivial to map the updated values into the order retrieved from the database and then commit the changes. You can define the model object that needs to be filled with values as a parameter or use TryUpdateModel() to map posted back values. I'll let you choose which technique you like best since both will handle updating the model errors collection if there's a problem that's encountered.

The insert and delete methods are quite similar to the update method. The InsertOrder() method below grabs the customerID for the order to insert from the dropdown control using the value provider attribute and the target model object is then created and updated using TryUpdateModel(). If the model state is valid the order is inserted into the database. The DeleteOrder() method accepts the primary key for the order to delete and then performs the delete operation.

public void InsertOrder([Control("CustomersDropDown")] int? custID)
{
    if (custID == null || custID == 0)
    {
        ErrorLabel.Text = "Select a customer before inserting a record";
        return;
    }

    var order = new SalesOrderHeader();
    TryUpdateModel(order);
    order.CustomerID = custID.Value;
    order.ModifiedDate = DateTime.Now;

    if (ModelState.IsValid)
    {
        try
        {
            _DbContext.SalesOrderHeaders.Add(order);
            _DbContext.SaveChanges();
            ErrorLabel.Text = String.Empty;
        }
        catch (Exception exp)
        {
            ErrorLabel.Text = exp.Message;
        }
    }
    else
    {
        ErrorLabel.Text = "Complete all values";
    }
}

public void DeleteOrder(int SalesOrderID)
{
    try
    {
        var order = _DbContext.SalesOrderHeaders.Find(SalesOrderID);
        _DbContext.SalesOrderHeaders.Remove(order);
        _DbContext.SaveChanges();
        ErrorLabel.Text = String.Empty;
    }
    catch (Exception exp)
    {
        ErrorLabel.Text = exp.Message;
    }
}

Conclusion

And there you have it! Model binding allows model objects to be bound directly to controls and allows data that's posted back to automatically be mapped into model object properties. It's a feature I've wanted for quite awhile since I've used it heavily in ASP.NET MVC applications. By using the feature you can significantly enhance your productivity and minimize the amount of code you have to write (which is great for maintenance). If you'd like to try out a demonstration of the code discussed here download the sample project (you'll need Visual Studio 2012 to run it).

if you'd like to learn more about the new features in the ASP.NET 4.5 release check out my Pluralsight course titled New Features in ASP.NET 4.5. There's a lot of great stuff in this release!

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.

ASP.NET 4.5 Web Forms Features - Strongly-Typed Data Controls

dwahlin — Wed, 27 Mar 2013 05:37:00 GMT

I've been spending a lot of time over the past few months digging into the new features offered by ASP.NET 4.5 Web Forms while creating my new Pluralsight course and have been pleasantly surprised by all of the great stuff in this release. Web Forms isn't exactly the cool kid on the block any more given all of the attention that ASP.NET MVC, jQuery, SPA and other technologies get, but there are still a ton of Web Forms developers out there using it productively every day to build robust, enterprise-scale applications. Microsoft has really stepped up their game with version 4.5 of the framework and added some features that will truly change how you write your applications. I'll be blogging about a few of the features related to data over the next month.

In addition to Visual Studio 2012 enhancements to the HTML/CSS/JavaScript editors, enhanced HTML5 support, oAuth and anti-XSRF support, integration with Web Sockets and SignalR, the ability to use the ASP.NET Web API, FriendlyUrls, plus more much more, some of the most impressive features are focused on working with data. Here's a quick summary of what's new when it comes to data-specific features:

In this post I'll discuss strongly-typed data controls and the benefits they offer as well as how HTML-encoded data bindings can be defined.

Getting Started with Strongly-Typed Data Controls

If you build data-driven Web applications with ASP.NET Web Forms then you've learned to live with <%# Eval("FieldName") %> statements (although if you're like me you've never had much love for them) when binding data. No longer! With ASP.NET 4.5 you can now leverage strongly-typed data controls, catch errors and typos upfront, and write more maintainable code. Here's a typical data control ItemTemplate prior to ASP.NET 4.5:

<ItemTemplate>
    <tr>
        <td>
            <asp:Button ID="EditButton" runat="server" Text="Edit" CommandName="Edit" />
        </td>
        <td>
            <asp:Label ID="OrderID" runat="server" Text='<%# Eval("SalesOrderID") %>' />
        </td>
        <td>
            <asp:Label ID="OrderDate" runat="server" Text='<%# Eval("OrderDate", "{0:d}") %>' />
        </td>
        <td>
            <asp:Label ID="DueDate" runat="server" Text='<%# Eval("DueDate", "{0:d}") %>' />
        </td>
        <td>
            <asp:Label ID="ShipDate" runat="server" Text='<%# Eval("ShipDate", "{0:d}") %>' />
        </td>
        <td>
            <asp:Label ID="SubTotal" runat="server" Text='<%# Eval("SubTotal","{0:C}") %>' />
        </td>
    </tr>
</ItemTemplate>

Data controls like GridView, ListView and others now provide a new property named ItemType that allows you to define the type of the object being bound to the control. Here's an example of using ItemType to specify that a SalesOrderHeader object will be bound into a ListView control:

<asp:ListView ID="OrdersListView" runat="server" 
    ItemType="StronglyTypedControls.Data.SalesOrderHeader">|

    ...

</asp:ListView>

Once the type of item being bound is defined you can stop using <%# Eval("FieldName") %> (scream hallelujah!) and leverage strongly-typed binding instead. Here's an example of how the ItemTemplate shown earlier changes when the ItemType is set on the ListView control:

<ItemTemplate>
    <tr>
        <td>
            <asp:Button ID="EditButton" runat="server" Text="Edit" CommandName="Edit" />
        </td>
        <td>
            <asp:Label ID="OrderID" runat="server" Text='<%#: Item.SalesOrderID %>' />
        </td>
        <td>
            <asp:Label ID="OrderDate" runat="server" Text='<%#: Item.OrderDate.ToString("d") %>' />
        </td>
        <td>
            <asp:Label ID="DueDate" runat="server" Text='<%#: Item.DueDate.ToString("d") %>' />
        </td>
        <td>
            <asp:Label ID="ShipDate" runat="server" Text='<%#: (Item.ShipDate.HasValue) ? Item.ShipDate.Value.ToString("d") : "" %>' />
        </td>
        <td>
            <asp:Label ID="SubTotal" runat="server" Text='<%#: Item.SubTotal.ToString("C") %>' />
        </td>
    </tr>
</ItemTemplate>

Note that you can now use the Item keyword to access properties of the object defined in ItemType. In this case the SalesOrderID, OrderDate, DueDate, ShipDate and SubTotal properties are bound. As you type Item followed by a period in the editor you'll actually get intellisense against the object being bound (scream hallelujah again!) as shown next:

This not only helps prevent typos, but if you do mess something up accidentally you'll be able to catch the error upfront in Visual Studio - super cool and much better than having to define quoted values as with Eval("FieldName")!

Did you notice the colon character used above in the binding expressions: <%#: %>? By adding the colon the data being bound is automatically HTML-encoded. It's a nice feature that was brought over from ASP.NET MVC and is recommend any time you're writing data out to a page. By using the colon you'll prevent people from being able to slip <script> tags and other potentially bad stuff into forms which is good from a security standpoint.

In cases where you need two-way bindings to be defined such as in an EditItemTemplate, the old <%# Bind("FieldName") %> expression can be replaced with it's strongly-typed cousin named BindItem as shown next:

<EditItemTemplate>
        <tr>
        <td>
            <asp:Button ID="CancelButton" runat="server" Text="Cancel" CommandName="Cancel" />
            <asp:Button ID="UpdateButton" runat="server" Text="Update" CommandName="Update" />
        </td>
        <td>
            <asp:Label ID="OrderID" runat="server" Text='<%#: Item.SalesOrderID %>' />
        </td>
        <td>
            <asp:TextBox ID="OrderDate" runat="server" Text='<%# BindItem.OrderDate %>' />
        </td>
        <td>
            <asp:TextBox ID="DueDate" runat="server" Text='<%# BindItem.DueDate %>' />
        </td>
        <td>
            <asp:TextBox ID="ShipDate" runat="server" Text='<%# BindItem.ShipDate %>' />
        </td>
        <td>
            <asp:TextBox ID="SubTotal" runat="server" Text='<%# BindItem.SubTotal %>' />
        </td>
    </tr>
</EditItemTemplate>

Both Item and BindItem are a huge step forward for data binding and if you're already on ASP.NET 4.5 they're definitely a great feature that you can take advantage of right away. If you're interested in an example of strongly-typed data controls in action download a demonstration project here (ASP.NET 4.5 and Visual Studio 2012 are required).

In my next post on ASP.NET 4.5 Web Forms features I'll discuss model binding - my favorite new feature in the framework. In the meantime, if you'd like to learn more about the new features in the 4.5 release check out my Pluralsight course titled New Features in ASP.NET 4.5.

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

Windows Azure Boot Camp Coming to Phoenix on April 27th!

dwahlin — Mon, 25 Mar 2013 03:35:56 GMT

The Global Windows Azure Boot Camp is coming to Phoenix on April 27th, 2013! Registration is now open at https://phxglobalazurebootcamp.eventday.com.

This is a truly global event in which the Phoenix community will come together to share and learn what you can do on Windows Azure.

This one day deep dive class will get you up to speed on developing for and deploying to Windows Azure. The class will be led by Microsoft MVP Rick Garibay along with myself, Joe Guadagno and Scott Cate. You’re guaranteed to learn a ton and in addition to the talks, you’ll work on some great hands on labs so you can apply what you learn on the same day and take the labs with you!

Agenda

We will start at 9:00 with welcome and introductions and get right into an end-to-end overview of Windows Azure. From there, we’ll participate in a massive, coordinated, global deployment to Windows Azure, teaming with over 60 other worldwide locations to see the workload in action (details are super secret, so you have to show up to get your security clearance- this a a boot camp after all)!

After we’ve done our best to take down a datacenter, we’ll take a break and take a lap around storage and database options on Windows Azure while we enjoy a catered lunch kindly sponsored by Microsoft. We’ll also have fresh primo coffee, sodas (or water if you prefer) and snacks to help you power through the labs which will give you real-world exposure to what its like to actually apply what you’ve learned and take the working applications home with you.

From there we’ll take another break and wrap up the day with a look at how Windows Azure Service Bus changes how you think about messaging and integration when working at cloud scale. We’ll have a Service Bus lab and from there likely plan some nefarious after event activities at one of downtown Chandler’s fine watering holes.

Here are the details:

Activity	Time
Welcome and Introductions	9:00 – 9:15
Windows Azure Overview	9:15 – 10:30
Deploy to the cloud!	10:30 – 11:15
Break	11:15 – 11:30
Windows Azure Storage and Database	11:30 – 1:00
Hands On labs	1:00 – 2:00
Break	2:00 - 2:15
Windows Azure Service Bus	2:15 – 3:45
Wrap Up	3:45 – 5:00

How much does the boot camp cost?

This event is FREE to the attendees. We’ll certainly take any good karma you want to send our way, but your attendance and full engagement is all we ask. Be sure to check out the prerequisites to ensure you are ready to rock.

Do I need to bring anything?

This is a BYOL (Bring Your Own Laptop) event. To get the most of the event, you will want to come to the boot camp with your own laptop pre-loaded with Visual Studio, the Azure SDK and all prerequisites. Please see http://globalwindowsazure.azurewebsites.net/?page_id=171 to download and install everything you’ll need to make this a great event.

I'm completely new to this Azure cloud thing!

This event is for you! We’ll have a mix of content both for experienced developers and those brand spanking new to Windows Azure. Our trainers will be here to answer all of your questions and help you with the labs, so remember, there are no stupid questions.

I already know this stuff!

Awesome! We’d love to have you share your knowledge with other attendees as you interact with them throughout the event and we guarantee you’ll walk away learning a few things too!

Where's it at?

The boot camp will be held at Gangplank in Chandler, located at 260 South Arizona Avenue | CHANDLER, AZ 85225.

What's next?

Seating is limited for this event so please register now at https://phxglobalazurebootcamp.eventday.com/ to guarantee your seat and help us plan for coffee, drinks, snacks and lunch.

Talking versus Teaching–There’s a Big Difference

dwahlin — Fri, 22 Feb 2013 19:48:50 GMT

I’m at the Pluralsight Author Summit this weekend outside of Salt Lake City and excited about the opportunity to interact with some of the top people in the technology industry, share ideas with them and learn new things myself. Teaching has been something I’ve been involved with for nearly 15 years now through my own company as well as several others and it’s something that I really enjoy doing. I’ve had the opportunity to teach developers in some of the largest companies around the world as well as developers just starting out. Regardless of their experience level it’s always fun watching as they get excited about learning a given technology or concept. You can literally see their faces change as the “light bulb” moment happens.

I’ve learned a lot about the learning process itself over the years and one of the most important things I’ve come across is the difference between talking versus teaching. There’s a big difference between the two so I thought I’d write about techniques that I’ve learned and how they can be used to help people learn more effectively. A good speaker doesn’t necessarily equate to a good teacher. I’ve known a lot of great speakers over the years who were funny, knowledgeable, and well versed in the technology they were speaking about. Some of these speakers are simply “edutainers” who joke their way through a given talk while others are focused (and pride themselves) on ensuring that the people attending the talk/course leave with a solid understanding of the concepts. It’s definitely an art and something that takes practice, a willingness to truly listen to feedback and a commitment to continually improve. Here are a few of the things I’ve learned about talking versus teaching over the years based on direct feedback, 1000s of evaluations and personal study.

Set the Stage

There’s no better way to get in the way of the learning process than to jump into a concept without setting the stage for what will be covered, why it’s important, what it can be used for and how all of the pieces tie together. If you’ve ever sat through a presentation or class and felt frustrated because you couldn’t tie all of the concepts together then you know the importance of setting the stage. Here are a few things I like to do:

Start a talk or course off with a quick discussion of what general concepts you’ll cover. I can’t tell you how many times I’ve seen someone jump into a talk without taking a few minutes to set the context/stage around what they’ll be covering and why people should care to learn it. It’s important to give people an initial context or starting point.
Set people at ease, ensure them that it’s easy to learn the topic you’re covering (and that you’ll help them with that process) and express with confidence that by the time you’re done that they’ll have the necessary tools to get started with whatever it is they’re learning. I don’t normally do this for a 1 hour talk, but do like to do it where appropriate when teaching courses.
If a topic is advanced and you know from experience that it’s difficult to grasp right away, let them know that although the content might be involved in spots that it’s not nearly as difficult as it may seem at first glance. In those situations I’ll make comments like, “If I can learn to master these concepts then you definitely can!” Those types of comments set people at ease (a very important part of the learning process) and bolster their confidence.

Provide a Map

I like to let students know where they are and where they’re going throughout a talk or course. I normally do this with a table of contents slide added throughout the deck that highlights the topic being covered. Doing this adds structure to the content (a type of map) so that people stay more on track and remember where they are and what they can look forward to. Here’s an example:

Use Visualizations Whenever Possible

They say a picture is worth a 1000 words and when it comes to effective learning I think this is one of the most important concepts out there. Many people learn better visually (myself included) so showing graphics and images to illustrate the main components or players for a topic being covered works well. It’s nice to discuss how things fit together but I’ve found that most people need to see concepts visually especially if several pieces are involved. As an example, we offer a new end-to-end course covering several technologies and one chapter demonstrates how MVC4 and IoC containers can be used together. There are several players involved so I put together a slide similar to the following to quickly highlight the section being discussed and show students where it fits into the overall picture. I’ll have several of these visualizations in the presentation so that people are constantly reminded about how things fit together.

Don’t Make Assumptions

It’s easy to assume that people already know a lot about a technology being presented. However, as a general rule I’ve found it’s nearly always a bad idea to make assumptions about knowledge levels. If I’m not sure about the general level of an audience I’ll set the stage and context for the presentation and then ask a few questions such as “How many have built a production level application using technology X?” If the majority of people raise their hands then I’ll throw in extra tips for them while still catering the presentation to the intended audience. I’ve found that people tend to overstate what they actually know when they’re in a group which is important to take into consideration.If you’ve put in the necessary effort required to teach a technology or concept then you have the ability to adjust the level of the presentation up or down depending on the audience level to maximize learning. Don’t go in with the assumption that you will be able to stick to the original “planned” presentation because in many cases things change.

When it comes to knowledge assumptions, injecting comments such as “You probably already know this” can really frustrate people who may not know what you’re talking about but are too embarrassed to ask a question about it. As soon as people get frustrated they stop listening as intently and the learning process is significantly reduced. Bottom line – don’t make any assumptions about what people know or don’t know and be willing and prepared to adjust the presentation to accommodate the people in attendance.

Break It Down Small

I see a lot of developers getting away from coding live as they talk. That isn’t a problem in and of itself since most people don’t like to watch someone typing a bunch of text or code. However, I’ve found that walking people through an existing application code base or cutting and pasting large chunks of code isn’t as effective as it could be. People need small, digestible chunks fed to them especially if they’re new to a technology or concept.

Typing (or pasting) small chunks of code while discussing them is extremely effective in my experience because people can focus on something small and not be distracted by everything else around it. Opening a file with a lot of code in it and then focusing on a small chunk can be effective if the stage has been set properly. However, it can also be intimidating to people new to the given technology. I prefer to show an overview before jumping into a demo and then show small chunks of code that relate directly to the overview that was presented. I don’t like to open a demo application and simply walk through the code base because some people seem to get frustrated (which as mentioned earlier significantly hinders the learning process) as you jump between files especially if they didn’t completely understand the last code or concept you showed. If I do open a file with a fair amount of code in it I’ll take the time to first explain the overall purpose of it and what we’ll cover. I’ll then zoom in directly to the code being discussed effectively eliminating the other code from view. It’s easy to overwhelm people by showing large amounts of code or content.

The same can be said for text in slides. If people have to read through a massive amount of text then it’s a bad slide in my opinion and definitely doesn’t help the learning process. I prefer to have as few bullet points as possible and as many graphics as appropriate. If I find that a slide needs more content in it but that it’s already full I’ll create a continuation slide rather than cramming everything into the one slide. I’m certainly guilty of creating busy slides over the years but try hard to keep them as minimal as possible. If I’m doing classroom training and need people to have additional information then I’ll add notes and ensure that students can access them.

Involve the Audience

There’s no better way to help the learning process than to involve the audience. A presenter who simply stands up and lectures may be a good speaker but in my opinion is a horrible teacher. Teaching is a two-way street with information flowing both ways. Involve the audience by asking questions from time to time to give people a quick break from the presentation and make them think and evaluate what they’re learning. I recently did some training for a group at Microsoft consisting of advanced developers that really knew their stuff when it came to C# and C++. I was covering technologies that were quite new to many in attendance though so I’d ask specific questions such as “What’s bad about this piece of code?” I'll pause for a bit to give them time to think and if no one responds I’ll rephrase the question. If I still don’t get any responses I’ll explain how the code could be improved. The first few times are generally low on responses but if you stick with it you’ll see that people start to get involved in the presentation and you have that two-way information sharing going.

Another way to involve the audience is to do some guided demonstrations where you build code with the students. Some people will choose to watch of course but I’ve found those that participate get more involved in the presentation, get more excited about some of the topics since they’re building them on their own and seeing them in action, and learn more than those who choose to watch.

Conclusion

I’ve found the following techniques useful while striving to become a good teacher:

Set the stage
Provide a map
Use visualizations whenever possible
Don’t make assumptions
Break it down small
Involve the audience

There are definitely a lot more techniques that I could list here but hope that you’re able to apply one or more of these techniques. The best speakers understand how people learn and consistently work towards becoming the best teachers.

TypeScript Fundamentals Course Released on Pluralsight.com

dwahlin — Mon, 14 Jan 2013 05:15:18 GMT

Over the past few months I’ve have been digging into TypeScript and learning the ins and outs of the language. If you’re new to TypeScript, it’s a language that provides a way to write modular code that includes support for types (string, number, bool, etc.) and compiles down to JavaScript. It’s definitely interesting especially if you’d like to catch issues upfront rather than after the fact. For more information on TypeScript check out my Getting Started with TypeScript – Classes, Static Types and Interfaces post.

I’m excited to announce that the TypeScript Fundamentals course that I co-authored with John Papa has now been released on Pluralsight. In the course we cover the problems TypeScript helps solve, how to work with variables, functions, and types, how classes and interfaces are defined and how modules can be used. A full course outline is listed below. I hope you enjoy the course!

TypeScript is a new open source language that provides support for building enterprise scale JavaScript applications. Although several patterns exist that can be used to structure JavaScript (see my Structuring JavaScript Code course for examples of patterns), TypeScript provides container functionality that object-oriented developers are familiar with such as classes and modules. It also supports strongly-typed code to ensure inappropriate values aren’t assigned to variables in an application. This course will walk you through the key concepts and features that you need to know to get started with TypeScript, and use it to build enterprise scale JavaScript applications. You’ll learn the role that TypeScript plays as well as key features that will help jump-start the learning process.

Getting Started with TypeScript
Course Introduction
Introduction
Why use TypeScript?
TypeScript Features
Tooling and Framework Options
Tooling and Framework Options - TypeScript Playground
Tooling and Framework Options - Visual Studio
Tooling and Framework Options - Web Essentials
Tooling and Framework Options - Sublime Text
Tooling and Framework Options - TypeScript Compiler
Tooling and Framework Options - NodeJS
Hello World Example
Hello World Example - Creating a Class
Summary

Typing, Variables and Functions
Overview
Type Annotations
Type Inference
Grammar
Static and Dynamic Typing
Compile Time or Run Time
Ambient Declarations and Type Definition Files
The Any Type and Primatives
Applying Types
Objects
Functions
Arrow Functions and Debugging
Functions and Interfaces
Static Typing Recap

Classes and Interfaces
Introduction
Defining Classes
Demo: Defining Classes
Demo: Property Limitations
Casting and Type Definition Files
Demo: Casting and Type Definition Files
Extending Types
Demo: Extending Types
Using Interfaces
Demo: Using Interfaces
Extending an Interface
Demo: Extending an Interface
Summary

Modules
Overview
Identifying a Module
Creating an Internal Module
Internal Module Accessibility and IIFE
Named Modules
Extending Modules and Importing Shortcuts
Organizing Internal Modules
Separating Internal Modules
External Modules and Dependency Resolution
Module Dependencies
Importing External Modules using AMD
Importing 3rd Party Libraries using AMD
Modules Recap

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.