What should be in a Single Page Application?

Single Page Applications (SPA) are really popular these days. And that is understandable as React, Angular and similar libraries with browser based routing make it quite easy to do so for developers. End users like SPA’s as well because navigating around is really fast. Much faster than the traditional browser-based applications that do lots of postbacks. So everyone is happy right? Well everyone is happy if SPA’s are done right but quite often they are not   The problem with SPA’s The problem with SPA’s is quite typical: If a bit of something is good then more of the same … Continue reading What should be in a Single Page Application?

Lazy loading and Angular routing

One problem with creating a Single Page Application (SPA) is that you might load the entire application when the user first starts the application but most of it is never used. Sure navigation is nice and fast after the initial load but that slows down the initial load as that becomes larger. And that might be worth it if the user navigates to all, or most, routes loaded. But when most routes are never activated that is just a big waste. Fortunately with Angular that is easy enough to fix with lazy loading. And lazy loading is really easy to … Continue reading Lazy loading and Angular routing

Angular 2 and HTTP Request headers

Angular 2 does a lot of awesome work for you. But it doesn’t do everything you might expect. One thing it doesn’t do is set a lot of HTTP request headers. Now that makes sense as Angular doesn’t know what you are doing with a request so you really need to do so. But most Http request made with the Http service are going to be for JSON serialized data. The default request however add no headers to let the server know this. The result is that different browsers will do very different requests. This is an example of an … Continue reading Angular 2 and HTTP Request headers

Creating a React based Chrome extension

Creating Chrome extensions is quite easy. In fact it is so easy I found it hard to believe how quick I had a sample up and running. And given how useful Chrome extensions can be I wondered how hard it would be to create one using React. It turns out that it is easy   Creating a basic React app To get started I decided to create a React app using create-react-app.  This gave me a working React application to get started with. To turn an HTML page with JavaScript into a Chrome extension you need to add a package.json … Continue reading Creating a React based Chrome extension

Bring your own React

React is a a great UI library from Facebook that works well for creating fast browser based user interfaces. Working with it is quite easy. Once you learn the basics you can be quite productive. But to create great applications it is helpful to understand some of the internals of React. But that is where things become a bit more complex. The React source code is not easy to understand. There are a lot of performance optimizations that make code harder to read. Also there are  a lot of browser related issues. Small differences that add a lot more complexity. … Continue reading Bring your own React

Introducing the React Tutorial

React is hot and it seems that almost every front-end web developer wants a piece of it. Not surprising maybe because Facebook created and open sourced React. And React not only powers the Facebook website but also many others like Netflix and Airbnb. Because I have been using and teaching React for the last year I decided to try doing things a bit bigger. If you want to learn React I want to help you with a series of online video tutorials. Each video covers one part and the whole series will give you a deep understanding of React. Of … Continue reading Introducing the React Tutorial

Turbocharging Docker build

Building a Docker image can take a bit of time depending on what you have to do. Specially when you have to do something like DNU Restore, DotNet Restore, NPM Install or Nuget Restore builds can become slow because packages might have to be downloaded from the internet. Take the following Dockerfile which does a DNU Restore. FROM microsoft/aspnet:1.0.0-rc1-update1-coreclrMAINTAINER Maurice de Beijer <maurice.de.beijer@gmail.com>COPY . ./app WORKDIR ./appRUN dnu restoreEXPOSE 5000CMD [“–server.urls”, “http://*:5000”]ENTRYPOINT [“dnx”, “web”] Running the Docker build multiple times without any changes is quite fast. To time it I am using the command: time docker build -t dotned . … Continue reading Turbocharging Docker build

Docker, From zero to hero

  Yesterday I did a presentation for the dotNed users group in the Netherlands. The slides can be found here on SlideShare. The demo code here on GitHub and the demo container image is on the Docker hub here. Thanks to Centric for sponsoring the event.

JavaScript functional goodness

Using some functional principals and using immutable data can really make your JavaScript a lot better and easier to test. While using immutable data in JavaScript seems like something really complex it turns out is really isn’t that hard to get started with if you are already using Babel. And while libraries like Immutable.js are highly recommended we can start even simpler. Babel does a lot of things for you as it lets you use all sorts of next generation JavaScript, or ECMAScript 2015 to be more correct. And it is quite easy to use whatever your build pipeline is … Continue reading JavaScript functional goodness