Build a secure Angular client using ASP.NET Core and OAuth

What is the resource owner password credentials grant? How can I secure my Angular client using OAuth and JWT bearer tokens? In this post I will focus on the resource owner password credentials grant, a different kind of credential flow supported by the OAuth protocol, and how it can be used to secure certain resources on an Angular application. Similarly to previous post, I will create the authorization server from scratch, then the resource server, a simple ASP.NET Core RESTful API, and finally the Angular 6 application, with all the bits and pieces required to prevent unauthorized access.

Continue reading

Learning React – Managing state with React Redux

Designing your application using a component-based architecture is a first step towards a nice decoupled design. But with great power comes great complexity! Components might need to interact in different ways in order to achieve some common goals. How can components communicate with each other? In this post, I am going to show how to make components communicate by using the redux pattern.

Continue reading

Learning React – Components and state

Components are small, isolated and reusable units of work that make up a piece of a user interface. Each component is independent, with emphasis in separation of concerns, having it’s own business & presentation logic.

In this post, I am going to show you how to create a single component, as well as how to mutate state within that component by either passing variables, one way in the component or by changing an input value which changes the component’s state.

Continue reading

Learning React – Hello World

Care to learn some React, build your own application and become from zero to hero in just some few steps? Well, you are in the right place, this blog post is all about learning how to setup your environment and get you up and running with React. In just 7 easy steps you will be able to run your hello world app, no sweat.

Continue reading

Generator

ES6 generators and async/await in Typescript

Some exciting features Javascript has developed during the latest versions (ES6, ES2016) are without doubt the generator functions and the async/await support.

These features exist in Typescript for quite some time; the language supported async/await since 1.7 version. But what about them? What they really are and how they work?
In this post I am going to explore their world, their Typescript syntax and implementations.

Continue reading

Socket.io integration tests with chai and mocha

All the goodies that you are building need to be of highest quality. But how is quality possible when no tests are in place?

If you have followed along, this very website promotes test driven development, very passionately if you ask me. I want my code to be thoroughly tested, I want confidence, I want speed. Remember, test driven development is the practice that makes you agile, in terms of speedy development and ability to cope with the code’s evolution. You go faster when you write tests.

That is no different when we code real time applications, in this particular instance, with socket.io, which heavily relies on an event driven style. We need to make sure that our channels, our business rules and the wiring work properly and that is exactly the story that I am going to tell you, so let’s dive in.

Continue reading

Migrating from typings to npm @types

Typescript definitions. What a confusing topic. Prior to Typescript 2.0 we were using tools like typings to manage and install them. After 2.0 we moved to npm@types, but what does that really mean? And how can we migrate an existing project that uses typings? What about custom type definitions?

In this post I will show you how to migrate to newest @types, answering all these questions.
Continue reading

Loading JSON files with SystemJS module loader

I really hate this mess on JavaScript modules. We have AMD, CommonJS or UMD to support both. Then ES6 came into the game. But what about .json files on browser? There are different ways to load them and not all libraries support them! Your module loader should be sophisticated enough to handle this.

In this post, I am going to talk about SystemJS and how it simply loads files in the browser, other than .js files, like text or JSON, especially from third party modules, without driving you nuts!
Continue reading

Unit test code with Jasmine and code coverage with Karma coverage using Istanbul

Karma is an awesome testing environment, it is open source, it supports a plethora of testing frameworks and it is easy to use.

In this post I am going to create some simple tests, run them on Karma using Jasmine and finally, show some code coverage reports, through Karma coverage.

Continue reading