Kimserey's blog

Create React App with Mobx in Typescript I have been using state management frameworks for the past few years, mainly with Angular and NGRX . Today we will see how we can get started with Create-React-App using Mobx as a state management system. Bootstrap a fresh application Create components Create an observable state / store Create observers components 1. Bootstrap a fresh application Start by installing the latest version of NPM then use npx to setup a fresh project. npx create-react-app my-app --typescript Then navigate to /my-app and run npm start . This will start the application in a development server with a live reload. The command run by npm start is defined under package.json scripts > start and runs react-scripts start . cd my-app npm start The application should now build and run properly and any changes done on the application should be reflected on the browser. We now have all the necessary tool to start writing code in React. 2. Create component...

Moving from chaining to piping in rxjs 6.x Last month I updated all my NPM packages and realised that everything was broken! The reason why was that rxjs decided to move out of extensions on observable in favor of pipable functions from 5.x to 6.x. A major breaking change where majority if not all codebase built using rxjs needs to be changed. Today we will explore the reasoning behind this change. Reasons Example of migration Learnings 1. Reasons The reasons given on the official documentation are: Any library importing the patch operator augmenting the observable prototype would also augment it for all consumers. For example, when a library imports map extension from import 'rxjs/add/operators/map' , it makes map available for all code importing the library itself. This could bring confusion due to the inconsistent way of importing extensions. Some places would not need to important map (those were the library is used) while in other place of the code we would ...

Async pipe versus Subscribe in Angular Over the past year, working in companies using Angular, many times have I been in situations where I was asked to explain the differences between async pipe and .subscribe in Angular. More precisely explain my standpoint which is to always use async pipe when possible and only use .subscribe when side effect is an absolute necessity . The challenge in explaining this comes to how to convince without giving an hour boring lesson of why side effects in logic are hard to maintain and how prematured .subscribe forces developers to make unecessary side effects. So today I would like to talk about that and provide explanations which I hope will help to understand which to use. This post will be composed of three parts: Observable and Rxjs Subscribe function Async pipe Best practices 1. Observable ans RxJS First to understand the context, we need to understand what is an observable. 1.1 Observable Observable is an abstraction of asynch...

Prime NG data table for Angular In every web application there is a need to display data in a tabular form. If the amount of data is small, a simple combination of HTML with Bootstrap is enough. But when the data is large, or more advanced functionalities are needed like sort or pagination, a more elaborated table needs to be used. If you followed me, you must have noticed that I am a huge fan of Prime NG and once again, Prime NG saves us the burden of implementing a complex data table by providing an Angular component fully featured. Today we will see how to use it in 3 parts: 1. Use Prime NG data table 2. Customized cell template 3. Pagination All the source code for this example is available on my GitHub . 1. Use Prime NG data table 1.1 Basic usage Start by installing Prime NG. npm install primeng --save Then in your main app module, register the DataTableModule to get access to its components. @NgModule({ imports: [ ... other imports DataTableModule ], ... o...

Validation in ASP NET Core and Angular Validation is an important part of any application. There are two parts where validation is required, the API level and the frontend. The API validation is meant to prevent any malformed input to corrupt our data while the frontend validation is meant to guide the user to fill in a form by providing interactive feedback on her input. ASP NET Core for the backend and Angular for the frontend both ship with validation mechanisms fulfilling are requirements. Today we will see how we can implement validation in ASP NET Core using data annotation and inline validation with Angular reactive form. This post will be composed by 2 parts: 1. Implement validation for ASP NET Core 2. Implement inline validation for Angular form 1. Implement validation for ASP NET Core In ASP NET Core, validation can be implemented using data annotation. On each call, parameters are tested against the annotation and the ModelState property is filled up. When any of the p...

Implement PATCH on ASP NET Core with JSON Patch When building web APIs, most of the HTTP methods are implemented, GET, POST, PUT, PATCH and DELETE. While GET, POST and PUT are easily implemented, PATCH functionality is slightly different as it allows to change one or more properties of the resource. It is used to patch the resource. One way to do it is to use a protocol called JSON Patch . Today we will see how we can use JSON Patch through the ASP NET Core implementation and how we can construct the request from the frontend. This post will be composed by 3 parts: 1. JSON Patch protocol 2. Implementation on ASP NET Core 3. Usage from frontend in TypeScript 1. JSON Patch protocol JSON Patch is a protocol defining a format expressing operations to be applied on JSON objects. The operations are composed by the following object: { op: '', path: '', value: '' } op being the operation, path being the path of the property of the JSON object and lastly value...

Implement a breadcrumb in Angular part 2 Last 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 ...

Model-driven form with Angular FormBuilder Few 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 element We start with a model which I just made up this model so there is no particular meaning in it. interface Model { name: st...

Implicit flow with Identity Server and ASP NET Core Few 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 server With 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...