What are Progressive Web Apps and how to start?

Picture a company that has a nice web application, but also has plans to create a Native Application for mobile devices. Unfortunately creating a complete Native app, will cost a lot of time and money to develop. If this is your situation, maybe transforming your web application into a Progressive Web App can help you.

The term “Progressive Web App” isn’t a formal or official name. It’s just a shorthand used initially by Google for the concept of creating a flexible, adaptable app using only web technologies.

The goal of Progressive Web Apps is to make the end-user feel as if they are working in a Native App, as we know it from mobile devices (Android and Ios).

Another big advantage of a Progressive Web App is the fact that any existing web application can easily become a Progressive Web App.

Continue reading What are Progressive Web Apps and how to start?

Azure Key Vault and use self-signed certificates in your App

Most of the time when I need to use a self-signed certificate, I use Openssl. But I saw that you can easily create a self-signed certificate with Azure Key Vault.
In this blog post, I will use the Azure portal to create a simple self-signed certificate and make it available in your Azure App service.

Continue reading Azure Key Vault and use self-signed certificates in your App

Migrating AngularJs to Angular – part 1

In my previous article, I explained that every company has to think about what they want to do with the old AngularJs application? For some companies, it’s better to completely rewrite the application. Maybe even not in Angular anymore? (if you have the resources for it) And for some companies, it’s better to create a hybrid situation/application in which you can let the AngularJs application, with new Angular components, co-exist. This can really help you to easily make the transition from AngularJs to Angular. 

This blog post is the first part of a series of blogs that will help you to take a look at a hybrid AngularJs/Angular application. Let’s start by setting up an environment for our migration.

Continue reading Migrating AngularJs to Angular – part 1

The end is near for AngularJs

In 2010 Google introduced AngularJs. Originally it is developed in 2009 by Miško Hevery en Adam Abrons. AngularJs is a Model View Controller (MVC) javascript framework. It has been / or still is used by many companies for creating SPA (Single Page Applications). Few years later AngularJs became part of the MEAN Stack. MEAN stands for MongoDB, Express.js, AngularJS, and Node.js. MEAN is an end-to-end JavaScript stack used for cloud-ready applications.

AngularJs became very popular because of a set of features that really helped programmers constructing stable, scalable and robust web-applications. AngularJs reached the top segment of the market and was compared to ReactJs and EmberJs also a good choice to build your product with.  

But all good things, come to an end.

Continue reading The end is near for AngularJs

SPA (Angular, Vue, React) security issue, switch to PKCE code flow

These past few weeks I have worked on the implementation of OpenID within a Hybrid AngularJs / Angular application. For this implementation, I used the Angular OpenID client from Manfred Steyer. This client is OpenID certified and makes it easy to connect your Identity Provider (IdP). It supports implicit flow and PKCE code flow. There is also good documentation and examples so I am not gonna show you the code because it’s pretty clear in the documentation.
But what I do want to tell, is that by using implicit flow you are vulnerable to a couple of security issues.

Continue reading SPA (Angular, Vue, React) security issue, switch to PKCE code flow

Looking under the hood async/await

Sometimes I see code that is totally wrong in dealing with async/await Tasks.
Also it’s nice to get sometimes a refresh of your memory on how its working exactly.
I came across this nice video about the async Task handling. Enjoy!


Update: Also David Fowler wrote a great article on Async https://github.com/davidfowl/AspNetCoreDiagnosticScenarios/blob/master/AsyncGuidance.md

Update2: And Stephen Toub also wrote some great explanation about the configureAwait. Check it out here: https://devblogs.microsoft.com/dotnet/configureawait-faq/

Testing an Owin based application with the CQRS pattern.

The other day I was working for a client on an owin based web-application. In this application they are using the CQRS pattern which is running on MediatR. The application has many depencies which are being registered and loaded using Autofac.
They were also using the IAppbuilder of Owin the initialse all middleware for there application.

The problem I was having, was the fact that I couldn’t easly test my fresh created commands because I had some problems in creating a clean and easy way to use Owin for configuring the dependencies.
Because I wanted to re-use the already existing ConfigureDependencies operation. (because otherwise I needed to created a new place for configurtions) That would not be an option, since this is easly forgotten when introducing new dependecies.
This application has many depencies and configurations since it is using stuff like MediatR, Autofac (constructor injection, method injection), AutoMapper, Owin, etc.. And all these things need complex configurations in order to work correctly.

Then I found out about the TestServer of the Owin.Testing lib. https://docs.microsoft.com/en-us/previous-versions/aspnet/dn782655(v%3Dvs.113)

That seemed to be very usefull. So I made my own customstartup class. which I then used in the Testserver. Like this

this.customStartup = new CustomStartup();
this.action = new Action<IAppBuilder>(this.customStartup.Configuration);

And here is my startup class

public class CustomStartup
   {
       public IContainer Container { get; set; }
       public void Configuration(IAppBuilder app)
       {
           var containerBuilder = new ContainerBuilder();
           WebApiConfig.ConfigureDependencies(containerBuilder, app);
           this.Container = containerBuilder.Build();
       }
   }

This worked out perfectly for me. So the only thing I needed to was building my container and Iside that container I had all my stuff. Automapper profiles, MediatR modules, Dependencies, everything.

Snippet

using(var server = TestServer.Create(this.action))
     {
        var mediator = this.customStartup.Container.Resolve<IMediator>();
        mediator.Should().NotBeNull();
     }