Aurelia VS AngularJS 2.0

Angular

I spend a couple of hours familiarizing myself with angular 2 for a pluralsight audition which resulted in the following screencast.

Aurelia

I then got an interesting comment that aurelia is the client side app framework to use. I try to be agnostic about the frameworks, libs and the tools that I use, so spent a couple of hours familiarizing myself with aurelia as well which resulted in the following screencast where I port the angular app in a matter of minutes.

Conclussions

Angular is at the time I’m writing this post in alpha and it’s changing a lot, which is really frustrating since something always seems to be broken and documentation/examples are inaccurate even on their own site. It’s hard to keep track of if it’s *for, *ngfor, *ng-for or something completely different from one build to the other.

I like that web components are the mainstay and it unifies react.js, angular.js and polymer. One big thumbs up to that $scope is gone, but also a big thumbs down for that two-way data-bindings is gone. Kind of a deal breaker for me. Angular has teamed up with the typescript team and they are pushing it which definitely is a good thing but not angular specific ergo no credit for that.

Learning curve was about the same for both frameworks, both are using the ES6 module loading system and depending on runtime transpilation to ES5 for now. What tips the scale towards Aurelia for me is that it’s cleaner, supports two-way data-bindings and that it’s all about conventions over configuration/code. That’s my opinion after a first look at both frameworks, watch the screencasts and judge for yourself.

As I mentioned I try to stay agnostic about the frameworks, libs and tools that I use, but I’ll definitely give aurelia a try for my next web project and try to forget that there is an IDE named VS Code out there. *BOOM* ;-)

EDIT: About 2-way data binding

It’s ridiculous how many emails I’ve received about this, but really, there is no 2-way data binding in angular 2. Do not confuse the square-bracket-parenthesis-syntax [(ng-model)] with two-way bindings — it one-way binds to the property with square brackets and listens for events with parenthesis. They obviously realized that typing


is cumbersome so they introduced a new directive called ng-model


So now you have very angular specific code in your view templates instead of just two-way binding to the DOM property. I refactor the code to bind to the checked property from this screencast in the beginning of next one here.

I like angular

Don’t get me wrong, I like angular and I will use angular 2, but I don’t mindlessly love everything they do like some fan boy. Stay open minded people and don’t be afraid to express your opinion, it’s just yet another framework. You don’t need to love everything the angular team produces.

By the way, make sure to check out my latest screencast on angular 2 forms!

 

Until next time, have a nice day!  

 

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

Links: aurelia.io angular.io

Keywords : Visual Studio Code, HTML5, JavaScript, AngularJS 2.0, Aurelia, TypeScript

Azure Bootcamp 2015 with Swenug

We’ll be speaking at Global Azure Bootcamp in Linköping about Identity and Access (AD) on the 25th of april, don’t forget to register!

You can read more about it (in Swedish) on https://azurelkpg.eventday.com/.

Cheers!

Entity Framework 6 Change Tracking POCOs vs nHibernate

Let me warn you that this post is kind of a rant. Entity Framework is on version 6 and Code First with POCOs still can’t track changes on detached object graphs that has been sent over the wire. The scenario is quite simple:

  1. A client request an entity from the server, e.g. asp.net mvc controller renders a view.
  2. The client modifies the entity and posts it back, i.e. form post.
  3. The MVC model binder deserializes the form data to our domain model.
  4. The MVC controller should be able to update the database without first fetching the data and applying the update per property.

Well this isn’t entirely fair since we can actually do this for first level properties, but not for navigation properties, e.g. has-many relationships. NHibernate has been able to do this for ages.

A colleague working on the web team asked me for help regarding this matter and I knew that this was the case in EF4/5, but I figured they’ve implemented it by now. So I threw together a test, just to confirm that it was still as bad as I remembered it.

Let’s say our db context looks like this:

public class Db : DbContext
{
    public Db() : base("Db")
    {
        Configuration.LazyLoadingEnabled = true;
    }

    public DbSet Foos { get; set; }
    public DbSet Bars { get; set; }
}

With the following entities:

public class Foo
{
    public int Id { get; set; }
    public string Value { get; set; }
    public virtual ICollection Bars { get; set; }
}

public class Bar
{
    public int Id { get; set; }
    public string Value { get; set; }

    public int FooId { get; set; }
    public virtual Foo Foo { get; set; }
}

Our db initializer just adds one record of Foo that has a child record Bar with the values Value:

public class DbInitializer : DropCreateDatabaseAlways
{
    protected override void Seed(Db context)
    {
        context.Foos.Add(new Foo
        {
            Value = "Value", 
            Bars = new List
            {
                new Bar { Value = "Value" }
            }
        });

        context.SaveChanges();
    }
}

Our test first reads the entity and disposes the context, i.e. the graph is now detached. We make some changes to the detached graph and try to apply the changes by passing the object to SaveOrUpdate with a new db context, i.e. simulating a post from the client to our server:


[TestFixture]
public class Test
{
    [Test]
    public void TestChangeTracking()
    {
        System.Data.Entity.Database.SetInitializer(new DbInitializer());
        
        Foo foo;
        // Read and send to the client over the wire
        using (var db = new Db())
        {
            foo = db.Foos.First();
            Assert.AreEqual(1, foo.Bars.Count);
        }

        // Client changes some values
        foo.Value = "Changed";
        foo.Bars.First().Value = "Changed";

        // Post to server for an update
        using (var db = new Db())
        {
            db.Foos.AddOrUpdate(foo);
            db.SaveChanges();
        }

        // What got saved?
        using (var db = new Db())
        {
            foo = db.Foos.First();
            Console.WriteLine("Foo.Value: {0}", foo.Value);
            Console.WriteLine("Foo.Bars[0].Value: {0}", foo.Bars.First().Value);
        }

        Assert.Fail("Use nhibernate instead.");
    }
}

What got saved? Foo.Value got updated to Changed but Bars didn’t. Pretty lame if you ask me. If you insist on using EF instead of nhibernate you’ll need to fetch the record in the new db context, diff and apply the changes to it and save.

ef_update_fail

Hope they do something about this soon, until next time, have a great weekend!

Asynchronous proxy for a synchronous WCF service

I recently had this scenario while working for a client where we wanted to consume a synchronous service asynchronously. We couldn’t change the service contract since it would break other proxy implementations. Luckily conventions implemented by the guys at microsoft made this task surprisingly easy, this is how we solved it.

Let’s say our service contract looks like this:

[ServiceContract]
public interface IService1
{
    [OperationContract]
    string GetData(int value);
}

With the following service implementation:

public class Service1 : IService1
{
    public string GetData(int value)
    {
        return string.Format("You entered: {0}", value);
    }
}

An synchronous proxy would look something like this:

class ServiceClient : IService1
{
    private readonly IService1 _channel;

    public ServiceClient()
    {
        var factory = new ChannelFactory(binding, address);
        _channel = factory.CreateChannel();
    }

    public string GetData(int value)
    {
        return _channel.GetData(value);
    }
}

And consuming it synchronously is trivial:

var client = new ServiceClient();
var data = client.GetData(10)

So how do we consume this asynchronously? We simply define a parallel async service contract with the same ServiceContract name, like this:

[ServiceContract(Name = "IService1")]
interface IService1Async
{
    [OperationContract]
    Task GetDataAsync(int value);
}

And an asynchronous proxy would look something like this:

class ServiceClientAsync : IService1Async
{
    private readonly IService1Async _channel;

    public ServiceClientAsync()
    {
        var factory = new ChannelFactory(binding, address);
        _channel = factory.CreateChannel();
    }

    public Task GetDataAsync(int value)
    {
        return _channel.GetDataAsync(value);
    }
}

And consuming it asynchronously becomes trivial:

var client = new ServiceClientAsync();
var data = await client.GetDataAsync(10);

To summarize: The convention is as long as the service name is the same on the contract the method will be called if the method name matches and also if you’ve appended Async to the method name. Pretty smooth imho, and all without the need to change the “legacy service” contract.

Cheers!

Corporate branding intro/outro videos for screencasts and demos

We’ve created a couple of intros/outros for our screencasts, demos and presentations. Check them out!

Short 3 sec intro

Full version of intro

3D logo fly-over

 

Have a nice day, cheers!

IST – IT For Education

The new year kicks off with an exciting new client that delivers IT for education. IST is the largest supplier of IT solution for schools and preschools in the Nordic region. IST develops and maintains flexible and limitless IT solutions for supporting one throughout the entire education life cycle – from preschool to university

We’re looking forward to working closely together to deliver amazing solutions!