Showing posts from 2017

Create a simple Microsoft Orleans application

Create a simple Microsoft Orleans applicationLast week I presented an overview of Microsoft Orleans. Gave an explanation on the concepts and keywords which can be found in the framework.
Today I will explain how we can implement a simple Orleans application with a cluster composed by a localhost Silo and with a client within an ASP Net Core Mvc application.
This post will be composed by 3 parts:1. Implement the grains 2. Create the silo 3. ASP Net Core Mvc client 1. Implement the grainsThe grains are the unit of work in an Orleans application. They contain the business logic and ensure that the state is consistent.
In our example we will be implementing a Bank account grain with a withdraw and deposit functionality. There will be a single business rule being that the balance of any account cannot be lower than 0.We start first by creating the grain interface in a project where we reference Orleans.Core.public interface IBankAccount: IGrainWithStringKey { Task Deposit(double a); …

A first look at Microsoft Orleans

A first look at Microsoft OrleansMicrosoft Orleans is a framework used to build scalable distributed systems. It reduces the complexity of distributed system by abstracting away concurrency issues together with state management. Processes can then be run on multiple instances and form a cluster, they can be hosted on different environment and be scaled up and down on demand.
Today I will give a broad overview of the concepts utilized and developed by the team behind Orleans. This post will be compose by 3 parts:1. Motivations 2. Definitions 3. How does it work? 1. MotivationsThe two main benefits of Orleans is that it:reduces the complexity of coding applications by providing a simpler model to maintain object oriented codebase. Orleans moves away from the N-tier type of architecture where business logic is held in stateless services and state is persisted in database by providing its own implementation of the actor pattern where the actor is a stateful unit of work where consistency …

Implement a breadcrumb in Angular part 2

Implement a breadcrumb in Angular part 2Last month I showed how we could build a breadcrumb with PrimeNG in Angular (you can read it as appetizer if you are interested in implementing a breadcrumb bar). In my previous post, I suggested to have a service BreadcrumbService which would hold the crumbs and get updated in ngOnInit of the component used on the route. Since then, I always was uncomfortable with this approach as this meant that my component would know the existance of a breadcrumb, because it updates it, while I always believed it should not know and not care.
This led me to figure another way to abstract away from the component the concept of breadcrumb by combining guard, resolver and route. It can be achieved with the following 3 steps:1. Register your crumbs as route data 2. Create a guard which ensure that the crumbs are set on the service before page is shown 3. Change the breadcrumb service to use a ReplaySubject instead of Subject 1. Register your crumbs as route data…

Model-driven form with Angular FormBuilder

Model-driven form with Angular FormBuilderFew weeks ago I explained how we could build reactive forms with Angular. In the previous post, I emphasized on how the reactiveness was enabling us to susbscribe to the state and “react” to any state changes. Since then I have been playing quite a bit with the reactive form and more precisely with the FormBuilder. I ended up being more impressed by the link between FormGroup and UI rendering rather than about the reactiveness nature of the state held by the form. So today I would like to expand more on the FormBuilder by showing the steps needed to build a more complicated form supporting arrays of arrays and different controls like date picker and color picker. This post will be composed by 3 parts:1. Building the metadata element form 2. Building the array sections 3. Postback 1. Building the metadata elementWe start with a model which I just made up this model so there is no particular meaning in it.interface Model { name: string; colo…

Implicit flow with Identity Server and ASP NET Core

Implicit flow with Identity Server and ASP NET CoreFew months ago I talked about Resource owner password flow with Identity Server and ASP NET Core. But as mentioned in multi places, ROP is an anti pattern when it comes down to a correct implementation of Open ID Connect. A more appropriate flow for API <-> SPA authentication is the Implicit flow. Today we will see how we can implement it in 5 steps:1. Configure Identity server 2. Configure Identity server Login 3. Protect our Api 4. Log in from the JS client 5. Configure Identity server Consent 1. Configure Identity serverWith the Implicit flow, all the authentication process happens through the browser. The user will be redirected to a login page delivered by the Identity server, then the redirect authentication will all taken place within the Identity server.
For our example, we will be using the test users and will only be demonstrating login.We start first by creating a ASP NET Core 1.1 web application which will host our I…

Manage assets and static files with Angular CLI

Manage assets and static files with Angular CLIOne of the easiest way to build Angular applicationns is through Angular CLI. Using the ng serve command will build and serve the whole application or we can use ng build to output the app into the outputDir folder, but there might be occasions where we need to serve files which aren’t part of the Angular process, like static files or images. Those files are referred to as assets. Today we will see how we can configure Angular CLI to copy assets to the output directory and what sort of configuration is available.1. Copying assets 2. Glob file, input, output 1. Copying assetsFiles which need to be served by AngularCLI must be registered under assets in the .angular-cli.json file.
When we first boostrap a project, there are two places registered under assets:{ "apps": [{ "root": "src", "outDir": "dist", "assets": [ "assets", "fav…

Create type extensions in Typescript

Create type extensions in Typescript Typescript is a superset of JavaScript. It provides type safety on top of the JS libraries. Type safety is an important part of the development experience as it allows us to detect problems early thanks to the compiler preventing us from writing broken code.
JS being dynamic it is very easy to extend since anything is assumed to exist. In the context of extension methods, the only step needed is to add the method to the prototype of the class and we are done.
Typescript kept that flexibility but in order to provide type safety on top of it, extra steps are needed.Today I would like to share how we can create extension methods in Typescript by extending existing types. This post will be composed by 2 parts:1. Extending a core type 2. Extending a library type 1. Extending a core typeThe first thing we need to do is create the function which will become the extension.
Here we will create a sumBy function to extend the Array core type.function sumBy&l…

Implement a breadcrumb in Angular with PrimeNg

Implement a breadcrumb bar in Angular with PrimeNgA breadcrumb bar is a very important piece of any website. It gives an idea where the user is currently in, from where the user landed on this page and finally allow the user to navigate back to any steps wanted.
I like to call it an “enhanced version of the URL path”. The URL path in itself has the information but it might, at time, not be human readable. That is where the breadcrumb become indispensable.
I showed few features of PrimeNg in my previous posts about building an inline form and about building a tree structure. It turns out that they also provide a Angular friendly breadcrumb component.
Today we will see how we can make use of the breadcrumb component together with the Angular router to provide a breadcrumb bar.
This post is composed by 3 parts:1. PrimeNg Breadcrumb component 2. Breadcrumb service, parent/child component communication 3. Use the breadcrumb service together with the PrimeNg Breadcrumb component 1. PrimeNg …

Difference between CanActivate and CanActivateChild in Angular Router

Difference between CanActivate and CanActivateChild in Angular RouterFew weeks ago I spoke about the functionality of the Angular Router It was a brief overview of all the router features but one of the feature was not totally explain, the CanActivate feature. From there a question emerged, what is the difference between CanActivate and CanActivateChild?. Today I will answer this question and at the same time discussing extra behaviours of the router with this post composed by 4 parts:1. Refresh on CanActivate and CanActivateChild 2. Difference 3. Some considerations 4. Component reusability with router 1. Refresh on CanActivate and CanActivateChildAs we saw in my previous post, CanActivate is a interface with a single function canActivate(...).@Injectable() export class GuardTest implements CanActivate, CanActivateChild { canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { return…

Inline form Angular and PrimeNg

Inline form Angular and PrimeNgInline form are used to edit portion of long forms. This makes the process of editing a long form less tedious and less error prone as the focus is on a small portion.
The process of allowing the fields to be editable can be hard as the state of the field currently selected for editing needs to be tracked and the right input fields must be shown.
Angular offers convenient directives to handle showing and hiding elements, together with ngrx store to handle the state and PrimeNg UI components, it is an ideal solution to build inline forms. In this post we will see how to build a user friendly form in 3 steps: 1. Build a diplay of segmented forms data 2. Build the segmented forms 3. Bind the display edit buttons to the forms displays This is a preview of what we will be building:The full source code is available on my GitHub.1. Build a diplay of segmented forms dataFor the form we will be using Bootstrap, PrimeNg and FontAwesome.
Bootstrap provides univer…