Posts

aspnetcore_nodeservices

AspNet Core NodeServices – Execute JavaScript on the Server at Runtime

Screencast on how to execute javascript from AspNet Core on the backend, inspired by Steve Sanderson NDC Sydney talk. Thumbnail trying to illustrate how my mind gets blown by the possibilities! 😉

Screencast

Awesome work by the AspNet team, until next time, have an excellent day!

ng2_router30_upgrade

Angular 2 Upgrading to new 3.0 Router

In this episode we upgrade the ng2play repo to leverage the new 3.0 router and implement a route guard to protect components that require authentication. Here’s the entire changeset, not that bloody considering the changes but this is also a very small application.

Screencast

Defining Routes

With the old router we decorated our app component with the RouteConfig annotation to configure the routs.

  @Routes([		
    { path: '/', component: Todo },
    { path: '/about/:id', component: About },
    { path: '/profile', component: Profile}		
  ])
  export class AppComponent { ... }

With the new router the routing configuration is no longer bound to a specific component, instead we make it accessible as a provider by exporting it as a const from a separate routes.ts file. Another essential change is that we need to remove the forward slash in the beginning when defining the path.

  import { provideRouter, RouterConfig } from '@angular/router';

  export const appRoutes: RouterConfig = [
    { path: '', component: Todo },
    { path: 'about/:id', component: About },
    { path: 'profile', component: Profile }
  ];

  export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

Wich we can pass in to the bootstrap function in boot.ts instead of passing ROUTER_PROVIDERS as we did earlier.

import {APP_ROUTER_PROVIDER} from './routes';

bootstrap(AppComponent, [
  ...
  APP_ROUTER_PROVIDER,
  ...
]);

Route Parameters

A component that we route to can access information about route parameters, query parameters and URL fragments by something called, ActivatedRoute, which we can inject into the constructor. The key difference is that route parameters can be accessed through the params property as an Observable or by the snapshot property if subscribing for future changes is overkill. Here’s both ways in our about.ts component:

  import {Component, OnInit} from '@angular/core';
  import { ActivatedRoute } from '@angular/router';

  @Component({
    selector: 'about',
    template: `Welcome to the about page! This is the ID: {{id}}`
  })
  export class About implements OnInit {
    id: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
      this.id = this.route.snapshot.params['id'];
      this.route.params
        .map(params => params['id'])
          .subscribe(id => {
            this.id = id;
        });
    }
  }

Guarding routes

Previously we could prevent our components from activating for unauthenticated users by using the @CanActivate and @CanDeactivate annotations. The guarding logic could be put inside a callback function:

import {CanActivate} from '@angular/router';
@Component({ ... })
@CanActivate(() => tokenNotExpired())
export class Profile { ... }

This approach suffered from that we don’t have access to the applications dependency injection and that we need to decorate each component class with it. The new router solves these problems, we can easily create an auth-guard injectable service that we can pass in to the route configuration accordingly:

  import { provideRouter, RouterConfig } from '@angular/router';
  import { AuthGuard} from './auth-guard';

  export const appRoutes: RouterConfig = [
    { path: '', component: Todo },
    { path: 'about/:id', component: About },
    { path: 'profile', component: Profile, canActivate: [AuthGuard] }
  ];

  export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

The auth guard has access to the applications dependency injection and we can redirect the user to the root component if they are not allowed to navigate to the component.

import {tokenNotExpired} from 'angular2-jwt';
import { Injectable } from '@angular/core';
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router
} from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (tokenNotExpired()) {
      return true;
    }

    this.router.navigate(['']);
    return false;
  }
}

Let’s also not forget that we’ll need to pass the auth-guard to our bootstrap method to be able to resolve the dependency:

import {APP_ROUTER_PROVIDER} from './routes';
import {AuthGuard} from './auth-guard';

bootstrap(AppComponent, [
  ...
  APP_ROUTER_PROVIDER,
  AuthGuard
  ...
]);

Summary

With these steps we’ve managed to migrate our application to the new 3.0 router, quite frictionless seemingly, but imho they started calling angular2 for RC way too early. It’s still moving too much to even consider using this for production anytime soon.

Until next time, have an excellent day!

pluralsight_new

First pluralsight course live

ps_course
I’m proud to announce that my first pluralsight course now is live, make sure to check it out:

Authenticating Your Angular SPA with ASP.NET Web API and Auth0

Modules

The course is split into the following three modules.

An Introduction

Course introduction with brief overview of Auth0, where we also register for a free developer account.

Building the Back-end API

In this module we create the back-end and secure it with Auth0, we also test our API by making secure calls with postman.

Building the Front-end SPA

In this module we create the front-end using AngularJS to communicate securely with our back-end. We use Auth0Lock to get a professional looking login dialog that displays well on any resolution and device.

Time spend

I must admit that it was quite cumbersome to edit the material especially since camtasia was really buggy on windows 10. I kept track of all my time and this is how I spent it.

Audition

8 hours to learn/record/edit the audition video. Check it out here if you’ve missed it!

Recording

19 hours to learn the tech I want to teach and record.

Editing

11 hours editing.

Total

38 hours for an hour of production material.

Financially worth it? (UPDATE)

Since I’m an independent consultant I can calculate if it was worth my time. UPDATE: Now after I’ve received my first royalty check and with my second course in the pipeline to be released soon, I can confidently say it was worth it. Both experience wise and financially. I also got reimbursed $200 for the new microphone, which was cool since I needed a new one for my youtube screencasts anyway.

One thing I do know though is that it’s good PR to be a pluralsight author, which could lead to higher hourly rating.

Working with pluralsight

From the initial contact with the audition to working close with my editor on the course, pluralsight was super professional. I really enjoyed the experience, and it’s definitely something I recommend and encourage others to do. Being a web developer using the aspnet stack it was quite hard to find a course that wasn’t already done though. First I wanted to do an angular 2 course, but that was off the table since it’s still in alpha and a lot of authors are standing in line on that topic. My second idea was to do something with aspnet5, but that was off the table as well since it’s in beta, soon to be RC.

One thing that bothers me though is that as I was completing my course, I saw Shawn Wildermuth do a course on aspnet5 that has gone viral. Seems like different rules apply to different authors, which isn’t cool. Other than that, I really enjoyed working with pluralsight.

In conclusion

So, 38 hours to produce a 1 hour long course, to be fair the audition process is something I only need to do once so it’s really 30 hours spend on the actual course. As I recorded the course I became better at it, I’m sure the next course I do will be quicker. I definitely encourage other developers to go through the experience of creating a course, even if I have some experience from creating screencasts on youtube this was something entirely different.

My ambition is definitely to create more courses for pluralsight, preferrably on angular 2 when it’s released.

Until next time, have an excellent day!

build_automation_gulp

Build automation for Angular 2 and TypeScript with Gulp

In this screencast we focus on creating a smooth workflow, we’ll build, run code analysis and serve the code, all with gulp. We also learn how to keep the browser in sync with the code. Let me know what you guys think.


Source code @ https://github.com/ajtowf/ng2_play/

Setup npm and gulp

Start off by installing gulp globally and then run npm init to create a packages.json file. Then install the gulp modules we’ll use locally.

npm install -g gulp
npm init // answer the questions, default values are OK
npm install gulp gulp-typescript gulp-sourcemaps gulp-tslint --save-dev
npm install browser-sync superstatic --save-dev // for serving the app

Create the following files in the root directory: gulpfile.js, gulp.config.js and tslint.json

Serve the application

Now that we have everything setup, we’ll get our code analyzed, compiled, served and updated as we save changes to our files just by typing:

gulp

Pretty neat, right? I hope you guys enjoyed the screencast, until next time, have an excellent day!

aurelia

Aurelia Validation

In this screencast we implement validation in our simple todo application that we created here, it’s basically the same exercise as we did in the angular 2 forms screencast, make sure to check it out if you missed it. The idea is to compare aurelia with angular2, imho aurelia is winning the race right now, let me know what you think.

Steps to get validation with Aurelia

If you’re new to aurelia, make sure you check out my first screencast on aurelia here, before you follow these steps on how to implement validation.

Install the validation plugin by executing the following command via JSPM:

jspm install aurelia-validation

 
And change the aurelia-app attribute to aurelia-app=”main”.

<body aurelia-app="main">

 
The aurelia framework will now bootstrap the application by looking for your main.js file and executing the exported configure method. Add a new main.js file with the following contents:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation'); 

  aurelia.start().then(a => a.setRoot('app', document.body)); 
}

 
Once you’ve loaded the plugin, validation is set up using the fluent validation API in the view model (borrowed from http://aurelia.io/validation/#/).

import {Validation} from 'aurelia-validation';
export class Person {
  static inject() { return [Validation];}
  constructor(validation) {
    this.firstName = 'John';
    this.validation = validation.on(this)
      .ensure('firstName')
        .isNotEmpty()
        .hasLengthBetween(3,10);
  }
}

 
With the following template:

<template>
  <form role="form" validate.bind="validation">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" value.bind="firstName" class="form-control" >
    </div>
  </form>
</template>

 

That’s it, you’re done! You don’t need to mess around with annotations and keep track of what needs to be passed as viewBindings or directives to the template as seen in angular 2 forms. Honestly, it just works!

Conclusion

For the moment Aurelia feels a lot more finished and easier to use. I was struggling with getting angular2 forms up and running and it’s poorly documented, whereas I could just follow the documentation on the aurelia validation github repo and be up and running within minutes. Let me know what you think in the comments, it’s OK to disagree! 😉

Anyways, I hope you guys enjoyed the screencast, until next time, have an excellent day!
 

Source code as always at @ https://github.com/ajtowf/ng2_overview/

pluralsight

Pluralsight Author

My last couple of screencasts, including the last blog entry was about angularjs 2.0 and aurelia. That’s because I decided to audition for producing courses for pluralsight, and guess what — I’m now an approved pluralsight author. If you don’t know what pluralsight is, here’s a definition by google (authored by themselves?):

Pluralsight is the leading online provider of tech and creative training for professionals.

The audition

To become an author for pluralsight, you need to do an audition. There’s a hard time limit on 10 minutes and you should cover a topic completely in this time, having an introduction, main part and a summary. You can obviously do some assumptions about the viewers’ prior knowledge since 10 minutes really isn’t that much of time. I did a module on bootstrapping the application with angularjs 2.0, as if it was a part of a larger course. You can see it here below, let me know what you guys think!

Time spent

I spent a day familiarizing myself with the framework and producing an example, you’d save some time if you pick a topic you already know of course. Then another day editing and revising the video, bear in mind I hadn’t used the video editing software, camtasia, before. All and all, including emailing back and forth with my acquisition editor I spent roughly two work days, 8 hours each. Was it worth it? Well, we’ll just have to wait and see, so far it hasn’t been too much work in my opinion.

I really look forward to producing a course in the next couple of months. Until next time, have a nice day!

angular2forms

AngularJS 2.0 Forms & Validation

In this screen cast I familiarized myself with angular 2 forms by extending the todo application that we created in our previous screencast, check out the screencast below and let me know what you think.

Common misstakes

I’ve seen many questions on stackoverflow where people even struggle to setup the most basic example. The angular team are lagging behind with sample code on angular.io and the typescript definition file on definitely typed is a mess.

At the time of writing the current alpha release is up to 34, the highlighted lines are essential to get right be able to use angular 2 forms.

import {Component, View, bootstrap} from 'angular2/angular2';
import {formDirectives, FormBuilder, ControlGroup, Control} from 'angular2/angular2';
import {Validators} from 'angular2/angular2';

@Component({
  selector: 'app',
  viewBindings: [FormBuilder]
})
@View({
  templateUrl: 'app.html', 
  directives: [formDirectives]
})
class AppComponent {
  constructor(fb: FormBuilder) {    
    // use the formbuilder here...
  }
}

 

  1. Don’t try to import from angular2/forms even if their documentation says so if you’re using the definition file from definitely typed, it’s all under angular2/angular2.
  2. Make sure you pass the FormBuilder to a property named viewBindings to the Component-annotation and nothing else, this keeps changing name so it’s easy to get wrong.
  3. If dependency injection to the constructor fails, you are probably doing the first point wrong.

Completing the angular.d.ts file

The angular team seems to be lazy on updating the definitely typed repo definition file. If you’re playing around with forms, you probably want to mark a field as required. To be able to do so by following some samples, you’ll need to add a static property to the Validators class in the definition file angular2.d.ts.

class Validators {
  static required: any;
}

 

Conclusion

I can’t shake the feeling that they are over complicating things, the syntax is very verbose and stuff is happening behind the scenes that always don’t seem that intuitive. The code is changing a lot from one version to another, it feels a bit premature to see all the ng-conf sessions talking about angular 2. It’s obvious that the community is frustrated (from reading blogs and stack overflow questions) over that it’s quite hard to get a simple sample up and running even though I personally don’t share that feeling.

Anyways, I hope you guys enjoyed the screencast, until next time, have a nice day as always!

 

Source code as always at @ https://github.com/ajtowf/ng2_overview/tree/ng2