Continue reading →

In AngularJS, especially when you’re using a 'modern' Web Component like approach, you often have directives request the same information from your services multiple times. Since we’d rather not do round-trips we don’t need to to save on server resources caching is our go-to solution. In this post I will show two different approaches to caching resources: the built-in angular way using $resource and a home-grown solution.

Original post

Continue reading →

From May 18-20 myself and Richard attended the Google IO 2016 conference. We both visited different tracks and have some different experiences we'd like to share. Here are mine. Read on about topics in the likes of VR, Progressive Web Apps, and Artificial Intelligence. For a quick impression have a look at the photo album.

Continue reading →

Since I had issues finding a good explanation on how to tie together a controller and a directive with isolated scope I decided to create my own blog post on this subject. This repo contains a runnable example of the solution. It contains a Spring Boot Web Application that can be started to act as a HTTP server but all the interesting stuff is in the src/main/webapp folder.

To create modular code with AngularJS you want to create reusable components; directives. Directives should not depend in any way on the parent controller. They should not be able to see any of the parent scope unless it's explicitly provided to them. To do this Angular directives can have an isolated scope (which in my opinion should be the default). This however leads to an issue: typically a directive needs information provided for them, needs to provide methods that can be called and often also has to fire events that the layers above the directive need to be able to respond to. Especially the latter part, informing the scopes above of changes, is done in a somewhat particular way.

Continue reading →

This third and final part in my Stateless Spring Security series is about mixing previous post about JWT token based authentication with spring-social-security. This post directly builds upon it and focusses mostly on the changed parts. The idea is to substitude the username/password based login with "Login with Facebook" functionality based on OAuth 2, but still use the same token based authentication after that.

The user clicks on the "Login with Facebook" button which is a simple link to "/auth/facebook", the SocialAuthenticationFilter notices the lack of additional query parameters and triggers a redirect leading the user of your site to Facebook. They login with their username/password and are redirected back, again to "/auth/facebook" but this time with "?code=...&state=..." parameters specified. (If the user previously logged in at facebook and had a cookie set, facebook will even instantly redirect back and no facebook screen is shown at all to the user.) The fun part is that you can follow this in a browsers network log as it's all done using plain HTTP 302 redirects. (The "Location" header in the HTTP response is used to tell the browser where to go next)

Continue reading →

As you may already know web components consist out of a set of technologies which are combined to create a custom element for use in your HTML markup. The main additions, as described in several blogposts, are HTML imports, Shadow Dom and Templates combined with isolated scripts and styling. (If these concepts are new to you i suggest you read up on web components at WebComponents.org). This blog post has a living example on plnkr.co. If we look at Angular it already supports html imports and isolated scripts through it's directive approach. This means we can already create custom components by using directives. The downside of this approach however is that there is no true isolation of markup and styling. Meaning both markup and styling may be inadvertently influenced by an outside source. Let's start with a basic directive and template:

angular.module('shadow.app', ['component.api'])
.directive('simpleDirective', function() {
    return {
      restrict: 'E',
      replace: false,
      templateUrl: 'template.html',
      transclude: true,
      scope: {
        dynamic: '='
      },
      link: function($scope, element) {
        // your code here
      }
    };
  })

Continue reading →

This second part of the Stateless Spring Security series is about exploring means of authentication in a stateless way. If you missed the first part about CSRF you can find it here. So when talking about Authentication, its all about having the client identify itself to the server in a verifiable manner. Typically this start with the server providing the client with a challenge, like a request to fill in a username / password. Today I want to focus on what happens after passing such initial (manual) challenge and how to deal with automatic re-authentication of futher HTTP requests.

The most common approach we probably all know is to use a server generated secret token (Session key) in the form of a JSESSIONID cookie. Initial setup for this is near nothing these days perhaps making you forget you have a choice to make here in the first place. Even without further using this "Session key" to store any other state "in the session", the key itself is in fact state as well.  I.e. without a shared and persistent storage of these keys, no successful authentication will survive a server reboot or requests being load balanced to another server.

Continue reading →

This year we attended Devoxx 2013 with a total of 9 JDriven colleagues. After more than a week we finally recovered from a vast amount of great sessions, personal encounters and  'some' Belgian beer. Looking back at Devoxx we had a great conference and like to thank the Devoxx team for making this possible. It was also good to notice that the majority of the sessions are related to subjects that drive us at JDriven, during our daily job and while further developing our expertise and craftsmanship, to name a few: Continuous Delivery, AngularJS, RESTful API's, Gradle, Groovy, Grails, Java 8, Java EE.

The Devoxx 2013 sessions will be available at Parleys soon, hopefully just before the holidays. To protect you from infobesity we'd like to share our list of must watch sessions with you:

Continue reading →

When experimenting with AngularJS features I often create a so-called Plunk on http://plnkr.co/. Although this site provides built-in templates for AngularJS, I found it useful to create my own since:

• The “1.0.x (stable)” / “1.0.2 + Jasmine” templates use old versions of AngularJS;
• “1.0.2 + Jasmine” template solely outputs Jasmine results but no AngularJS content.

Continue reading →

Next to creating controllers and directives, AngularJS also supports “singleton” services. Services, like on the server-side, offer a great way for separating logic from your controllers. In AngularJS anything that’s either a primitive type, function or object can be a service. Although the concept of service is quite straight forward, the declaration of them in AngularJS isn’t:

• There are 4 different ways to declare a service.
  • Registering a existing value as a service
  • Registering a factory function to create the singleton service instance
  • Registering a constructor function to create the singleton service instance
  • Registering a service factory which can be configured
• Only 1 of them is extensively documented

Continue reading →

AngularJS is an excellent JavaScript web framework offering so-called "directives" to 'teach' HTML some new tricks. Examples of built-in AngularJS directives are:

• "ngView": defines the placeholder for rending views
• "ngModel": binds scope properties to "input", "select" and "text" elements
• "ngShow" / "ngDisabled": for showing or disabling an element based on the result of an expressions

Continue reading →

Like most Java developers I used to have a serious aversion to JavaScript. I was quite happy to delegate any 'scripting' stuff to fellow developers. At my current project, we initially decided to use the Vaadin web framework. It seemed the perfect choice for creating Rich Internet Application (RIA) user-interfaces without writing a single line of JavaScript. However what originally seemed to be a sensible choice, turned out to be a dead-end:

• Vaadin is highly dependent on http sessions and as it turns out doesn't play well when being clustered.
• No default support for server push; also the 'most stable' Vaadin add-on turned out to be quite unstable and incompatible with clustering.
• No wrapper existed for v3 of Google Maps; as an alternative we used the OpenLayers Add-on instead. However this add-on turned out to be not so stable either and lacked the user experience of Google Maps to which users are accustomed to (like dragging the 'pegman' on the map in order to show street view).

Continue reading →