The New LINQ Fundamentals

Wednesday, August 17, 2016 by K. Scott Allen

The first course I ever made for Pluralsight was a LINQ Fundamentals course in 2008. I’ve received many great bits of feedback about the course over the last 8 years, but I’ve also learned a few things about teaching, presenting, and making courses during that time, too. Whenever I’m forced to listen to a clip from this early course I cringe. I sound like my speech was addled by sleeping pills and vodka.

A few months ago I decided it was time to make a new LINQ Fundamentals course, and this course was released just a few weeks ago. It’s mostly the same material as the original course, but with a more logical story arc and a perky sounding instructor.

I hope you enjoy watching the videos!

 

LINQ Fundamentals Training

Stop Running with the Visual Studio Debugger

Tuesday, August 16, 2016 by K. Scott Allen

A number of people who have seen me code this year have asked me how I can make changes in an ASP.NET web application and see the changes in the browser without restarting the web application. The person asking always runs the application by starting the Visual Studio debugger.

The problem with starting the debugger is that later you’ll have to stop the debugger, and stopping the debugger also stops the default host process (IIS Express). Refreshing the browser at this point is like waiting for an echo in the emptiness of space.

No server is available to respond!

 

 

I always run web applications without the debugger. The default shortcut key for this behavior is Ctrl + F5. Now the server can stay up and running, and changes are automatically loaded and seen in the browser after a reload. I will only run with the debugger if I have to debug code.

Unfortunately, Visual Studio encourages us to run with the debugger. Not only is the shortcut key easier (just F5), running with the debugger is also featured prominently in the menus and toolbars that appear in a web project.

image

Do yourself a favor and use Ctrl+F5 instead!

Dynamically Add Routes in Aurelia

Tuesday, May 31, 2016 by K. Scott Allen

Routes are usually defined in an Aurelia application using a model’s configureRouter method in a declarative manner.

configureRouter(config, router) {
    this.router = router; 
 
    config.title = "The App";
    config.map([
        
        { route: "", name: 'home', moduleId: "app/home", 
          title:"Home", nav:true
        },
        
        { route: "about", moduleId: "app/about", 
          title: "About", nav:true 
        }
        
    ]);
}

However, you can also add routes at anytime using the Router’s API.

constructor(router) {
    this.router = router; 
}

addRoute() {
    this.router.addRoute(
         { route: "secret", name: 'secret', moduleId: "app/secret", 
           title:"Secret", nav:true 
         }
    );
    this.router.refreshNavigation();
}

I’d stick with the declarative routing whenever possible, but dynamically adding routes is useful in a few scenarios.

Everything You Need To Program Components In Angular 1.5

Thursday, May 12, 2016 by K. Scott Allen

The 1.5 release of Angular JS is a release you should take a close look at if you, like me, still have some Angular 1 work to do. The new component based programming model simplifies application development with Angular by providing a cleaner API and sensible defaults when compared to programming with ng-controller and custom directives.

I was so impressed by the new addition to Angular 1 that I made a Pluralsight course covering how to program with components, and how to use components with old routers as well as the new component based router. The last module of the course looks at a variety of compositional patterns you can follow for building sophisticated pages using simple components.

In short, with components you’ll never need to use the ng-controller directive again. Components also replace most custom directives leaving only a few special case scenarios where you need to drop down to the lower level API of a directive.

Building Components with Angular 1.5

The Good and the Bad of Programming Forms in Angular 2

Monday, May 2, 2016 by K. Scott Allen

Compared to Angular 1, Angular 2 offer more choices for working with forms and more control over the data flow between a form and a model. However, I feel that Angular 2 provides form-related APIs and directives that are quirky and confusing, while also increasing the amount of work required to manage simple forms. This article isn’t intended to be a tutorial for working with forms in Angular 2 and some of the code inside is not code you want in a real application. Some of the code only exists to demonstrate how forms work. 

I apologize for not taking the time to make this post shorter.

Introduction

Angular 1 simplified working with forms by providing the ngModel directive. ngModel could synchronize an input’s value with a model property in a JavaScript object using 2-way data binding. ngModel also worked behind the curtains with an ngForm directive to build a data structure representing the state of the form and all the inputs inside the form. The data synchronization and the current form state gave us a straightforward approach to initializing, validating, and receiving form input.

At a high level, Angular 2 offers two different approaches to working with forms. Both approaches can use the new NgModel directive for 2-way data binding, although the new NgModel doesn’t work exactly like the old ngModel of Angular 1.

The first approach we’ll look at is a declarative approach using NgForm and NgModel. We’ll call this approach the NgForm approach, because the form level directive we’ll use is NgForm.

The second approach we’ll look at uses more imperative code and interacts with the form through one or more objects that abstractly represent controls on the page. We’ll call this the NgFormModel approach, because the form level directive we’ll use is named NgFormModel. 

Because there is a lot of flexibility in Angular 2, we’ll probably see many different variations of these 2 different approaches to forms. The code in this article is not the only way to work with forms.

The NgForm Approach

As a sample scenario, imagine we want to edit information about a movie. We have a Movie model and a MovieService to translate JSON from the server into the Movie model.  Given these pieces, a component to edit a specific movie might have code inside like the following.

movie: Movie;

constructor(private movieData: MovieService, 
            private params: RouteParams,
            private router: Router) {   
}

ngOnInit() {
    var id = this.params.get("id");
    this.movieData.get(id)
                  .subscribe(movie => {
                      this.movie = movie;
                  });
}

The important piece here being that during initialization, the component uses a service to retrieve a movie model and assign the movie to a bindable field named movie. Here’s the essence of a template to edit a movie.

<form>
    
    <input type="text" [(ngModel)]="movie.title" required>        
    
    <!-- other inputs and labels omitted ... -->
    
    <input type="submit" value="Save" (click)="save()">
    
</form>    

This simple template will give us 80% of the functionality we need. When the component updates the movie with fresh data from the server, NgModel will push updated values into the form. And, when the user types into the form, NgModel will push the form values back into the movie model. When the user presses submit, the save method only needs to take the existing movie model and ultimately serialize the values into an HTTP POST.

At this point we can even write style rules to highlight elements when they are in an invalid state. Some Angular 2 tutorials imply this is only possible after manually adding an additional directive. However, there is an NgControlStatus directive that automatically attaches to elements using the NgModel directive and modifies the classNames property to indicate when an input is valid, invalid, valid, dirty, pristine, etc. Since we have a required attribute on the input for a movie title, we could turn the entire input red when the input is empty using the following CSS.

.ng-invalid {
    background: red;
}

Angular 1 users will recognize the CSS name ng-invalid. We could use the same style rule with Angular 1. The similarities with Angular 1 mostly end here, however. To achieve the last 20% of the functionality the form requires we need to dive into some additional directives and syntax involving an unhealthy amount of misdirection.

Imagine we want to add a simple validation message that appears when the movie title is empty. In Angular 1 you could name a form and the inputs inside a form and have access to a data structure representing the entire form in the template scope. In Angular 2 there is still an NgForm directive that automatically attaches itself to <form> elements and provides an API to determine if a form is valid or invalid. Unfortunately, the NgModel directive no longer coordinates with NgForm to track the validity of a specific input.  This is unfortunate because the NgModel directive knows about the validity of its associated input (NgControlStatus relies on this knowledge). We can see NgModel at work by grabbing a local reference to the NgModel directive inside the template.

<input type="text" required
       [(ngModel)]="movie.title"
       #title="ngForm">        

<span *ngIf="!title.valid">
    Title is required!
</span>

In the above code, title becomes a local variable in the template and is assigned a reference to the ngForm directive. There is no actual ngForm directive on the input, however, but the code works because NgModel uses the exportAs property of its directive definition to alias itself as ngForm for these types of expressions. A confusing bit of indirection, I think, but an indirection that at least consistently repeats itself in one other scenario we’ll see later.

Although the above code can help us write validation messages for a specific input, it won’t help us track the validity of the form or the model as a whole. To achieve the holistic view, we need to start working with the real NgForm directive, the one attached to the form element. We’ll also switch to using NgForm’s submit event instead of using a click handler on the submit button.

<form #form="ngForm" (ngSubmit)="save(form)" novalidate>
    
    <input type="text" required 
           [(ngModel)]="movie.title"
           #title="ngForm">        
    
    <span *ngIf="!title.valid">
        Title is required!
    </span>
    
    <!-- other inputs and labels omitted ... -->
    
    <input type="submit" value="Save" />
    
</form>        

With this new code we are now passing a reference to the NgForm directive into the save method of the component. The save method might look like the following.

save(form) {
    if(form.valid) {
         this.movieData.save(this.movie)
             .subscribe(updatedMovie => {
                this.router.navigate(['Details', {id: updatedMovie.id}]);
            });
    }
} 

Except … the check for form.valid in the above code won’t work. Again, in Angular 1 the NgModel directive would register itself with its parent NgForm so the form would know about the validity of all the data bound inputs of the form. In Angular 2, NgModel knows if the model is in a valid state, or not, but NgModel doesn’t coordinate with the form directive. In other words, the user could have an empty title input, but the NgForm we are working with will still present itself as valid.

In order to add the input’s state to the form, we need to use a new directive with an alias of NgControl.

<input type="text" required 
       [(ngModel)]="movie.title"
       ngControl="title">        

<span *ngIf="!form.controls.title?.valid">
    Title is required!
</span>

Now the form will know about the title input and form.valid will include a validity check of the title. We can even dot into the form.controls object to find the title, as demonstrated in the NgIf expression. We can still alias the input to a local variable if the expression is too cumbersome.

<input type="text" required 
       [(ngModel)]="movie.title"
       ngControl="title"
       #title="ngForm">        

<span *ngIf="!title.valid">
    Title is required!
</span>

Note that in this case the title variable is not going to get a reference to NgModel, but instead reference the directive put in place by the ngControl attribute (which is the NgControlName directive because this directive, like NgModel, uses exportAs to alias itself as ngForm). 

Here then, are some of the facts to know about the current situation.

  • NgControlName uses a selector of ngControl but exports itself as ngForm
  • Both NgControlName and NgModel derive from an NgControl abstract base class, so both can work with validation directives (like the RequiredValidator) and report on their validation status.
  • The NgModel directive selector excludes elements where the NgControlName directive is present, but NgControlName can use an existing NgModel expression to effectively two-way bind the model and input value.
  • NgModel and NgControlName thus share an amazing number of similarities, but …
  • Only NgControlName will register itself with the parent NgForm and give us the complete picture for validation

When I dig into the details like the ones listed above, I have to wonder why NgControlName exists. NgModel could give us the same capabilities without adding an extra directive. I’m biased with the (relative) simplicity of Angular 1, but what’s happening looks like unnecessary complexity.

The NgFormModel Approach

Perhaps one reason for the complexity of the model approach is that Angular is pushing developers away from using two-way data binding features. I feel this is unfortunate. Two-way binding has gotten a bad reputation because it was easy to abuse in situations where two-way binding isn’t an appropriate solution. For example, updating a model value in one controller of the application and allowing the change to implicitly propagate through other controllers on the screen which in turn could also update the same value. Other UI frameworks provide solutions for these complex UI scenarios using events, messages buses, or event aggregators.

Most forms, on the other hand, are a closed loop. I need to populate the inputs with values, and then retrieve the input values into an object I can serialize and and send off to the server. NgModel was perfect for this scenario where data would only flow between the form and the model. Certainly there are complex forms out there in the world, but I suspect the simple case represents more than 80% of the forms in existence.   

For complex forms, Angular 2 provides control and form abstractions that allow explicit data shuffling and validation in code.  The template code in this approach is a bit simpler.

<form [ngFormModel]="form" (ngSubmit)="save()">
    
    <input type="text" [ngFormControl]="title">
    
    <span *ngIf="!form.controls.title?.valid">
        The title is required!
    </span>
    
    ...
    
    <input type="submit" value="Save">
    
</form>

In the above template, NgFormModel and NgFormControl will bind their respective DOM elements to controls created by the underlying component. In contrast to our previous snippet of component code, the component associated with this template does not contain a field of type Movie. Instead, the component contains fields representing the form and the inputs inside the form.

form: ControlGroup;
title: Control;

constructor(private movieData: MovieService, 
            private params: RouteParams,
            private router: Router) {  

    this.title = new Control("initial value", Validators.required);
    this.form = new ControlGroup({
        title: this.title
        // ... 
    });      
}

Notice how validation rules have moved. Instead of being attributes in the template the rules are applied in code. The API here feels a bit clumsy and forces you to compose all rules for a control into a single composite rule using Validators.compose. There are many places in the Angular 2 API where arrays of things are accepted as a parameter, but not here for validation rules.

Also, instead of constructing a ControlGroup directly, the component could inject a FormBuilder and use the builder to create the control group. The API is the same for both, and again a bit clumsy since you pass the grouped controls as key value pairs. I think a reasonable alternative would be to give each individual control a name (which a control should have in any case), and then create a group from a collection of controls.

In theory, creating controls and their associated validation rules inside the component makes unit tests against the component more valuable. We can write asserts to make sure the proper validation rules are in place. In practice I think this is overkill for most simple forms with declarative validations. There is a lot of test code needed to make sure a single required attribute is in place, and it is the type of test that will live in the test mass for years without failing. Certainly complex validation logic needs testing, but perhaps not the application of the logic. If anything, an argument could be made to push complex validations into the model itself instead of coupling the logic with a specific UI component.

Although it is not necessary to create a field for each individual control, doing so allows for cleaner code when you access the control. For example, when data arrives from the server we can use the fields to update the screen.

 

ngOnInit() {
    var id = this.params.get("id");
    this.movieData.get(id)
                  .subscribe(movie =>{
                      this.title.updateValue(movie.title);                     
                  });
} 

Here again there is a bit of an oddity in the API. A control has several set methods (setParent, setErrors), but when it comes to the value property, the method to set the value is named updateValue. Yes, I’m picky, but it is often the small inconsistencies that tell the biggest story about an API.

Updating a model or sending the form information back to the server is the above operation in reverse. In other words, you can go to each control and read the value property to receive the associated input value.

If all the code required to update and read the control values is bothersome, you can still use NgModel in combination with NgFormControl, just like NgModel works with NgControlName.

<input type="text" [ngFormControl]="title" 
       [(ngModel)]="movie.title" >

<span *ngIf="!form.controls.title?.valid">
    The title is required!
</span>

Now a component only needs to set a movie field to set the control values, and read the field to fetch the control values.

Summary

There are many variations to the different approaches I’ve presented here. The approach you’ll want to use comes down to answering a couple questions. Do you want to avoid using NgModel because two-way binding is evil? If so, use NgFormModel and explicitly read and write control values from the code. Do you want to avoid writing component code for every individual control on the screen? If so, use NgForm and NgControlName to instantiate controls from the template (and synchronize values using NgModel).

Although I might sound critical of the Angular 2 approach to forms, there are some interesting scenarios these approaches enable which I’ve run out of room to cover. For example, treating changes in a form as an observable stream of events. Also, all the APIs and directives provided allow for a tremendous amount of flexibility and cover more application scenarios compared to Angular 1. 

Overall though, I worry that all of the similar names (ngControl versus ngFormControl), the similar but different syntaxes (ngControl=”..” versus [ngFormControl]=”..”), and aliasing (NgControlName uses an NgControl selector but exports as ngForm) is too much for busy developers who will cargo cult a solution without understanding the implications. And in the end, there is no simple approach to handle simple forms.

Play by Play with Jon Skeet and Rob Conery

Tuesday, March 22, 2016 by K. Scott Allen

It started, as most endeavors involving Rob do, with a simple email that ends with “I think it will be fun!”.

Fast forward a bit and I’m in the ExCel London being mic’d up by a film crew. Jon is in the room wearing a t-shirt and the mic keeps falling off. Mine keeps folding under my collar, so I’m buttoned up to the top as if I were ready for morning mass. There’s an AV guy in front of us with safecracker headphones trying to eliminate all the hissing and crackling that comes to life in a room full of electrically powered machinery. We’re swapping microphones, changing cables, and positioning laptops. Just as we think we are ready to go – blam! My microphone belt pack falls off my chair. The lapel mic is ripped off my shirt and is tumbling arse over elbow across the floor. Safecracker guy is grimacing and muttering something in polite British. We’ve been at this setup for 30 minutes now and I’m starting to think the show will not go on.

We get setup again, and the recording begins. For the next 75 minutes we are knee deep in C# code, disassemblies, and expression trees. You can watch those 75 minutes in the Pluralsight Play by Play: C# Q & A.

Rob’s always right. It was fun.

 

Pluralight Play by Play: C# Q & A

Reusing JavaScript Template Literals

Monday, March 21, 2016 by K. Scott Allen

Stencil_Template_Ruler_

The word template in web programming makes one think of a reusable document or string you can combine with model data to produce output. Famous examples include Razor, Jade, and Handlebars. Template literals in JavaScript are not templates in this same sense, which is perhaps why they were originally referred to as quasi-literals in early specification work.

I've seen a number of developers become angry when thinking they can declare a template literal and then reuse the template with different inputs. Note: the following code doesn't work, but represents how one might think template literals should work.

let template = `${x} + ${y} = ${x+y}`;

let three = template.format({x:2, y:3});
let ten = template.format({x:5, y:5});

The runtime will evaluate the expressions inside the template immediately.  If x and y aren't available when the template is defined, a ReferenceError brings the script to a halt.

The easy solution, like most solutions in JavaScript, is to use a wrapper function.

let template = (x,y) => `${x} + ${y} = ${x+y}`;

let four = template(2,2);
let eight = template(6,2);

If you'd rather think in terms of model objects instead of individual parameters, add some destructuring to the parameter list.

let template = ({x,y}) => `${x} + ${y} = ${x+y}`;

let seven = template({x:4, y:3});
let three = template({x:1, y:2});
Pluralsight Courses
What JavaScript Developers Should Know About ECMAScript 2015
The Podcast!