Development

Tips and Tricks to Master Development

We are Obsessed With Quality

Development

We’re committed to ship software with high quality standards. It’s in our company’s heart.


As mentioned in our previous article, Are You Buying Quality Software, we aim to deliver features at fast pace while maintaining the highest possible code quality. Our last article about our code quality has been written more than one year ago, how are we doing today? The following sections get you an insight about the code quality of our backend server written in Java. So you’re saying you have no bugs?

Upgrade to AngularJs 1.6

Upgrade to AngularJs 1.6

Development

This blog post lists the various steps we took to upgrade OctoPerf’s frontend to the latest AngularJS version.


When we started developing our load testing solution we had to choose a technology to create the UI. Most of us had previous experiences with GWT or Vaadin but we were not satisfied with it. It took us too much effort to create a sketch of the application and it didn’t even look good. So, we gave a try to AngularJS, even though none of us knew a bit of JavaScript.

Impl classes are evil

Impl classes are evil

Development

Why you should never name your class with Impl suffix.


Like Martin Fowler said in TwoHardThings: There are only two hard things in Computer Science: cache invalidation and naming things. I’ve just seen too many times developers using Dependency Injection frameworks like Spring or Guice or Dagger the wrong way. Naming classes with Impl suffix is an Anti-pattern and i’m going to explain why. Why Impl is Bad ServiceImpl is a common practice Many developers, including myself years ago, are using the Interface + Impl pattern to create services which are injected by their interface.

The builder pattern

The builder pattern

Development

Builders are a powerful tool to avoid telescoping constructors.


The builder software design pattern is an object creation one. It’s a great building block for classes with optional fields. It provides a maintainable and readable way to instantiate immutable classes with more than 3 or 4 fields. It greatly reduces the time developers needs to understand how to instantiate the class properly. You have surely faced one day or another a code similar to the one below. public class Person { private final String firstname; private final String lastname; private final String address; private final String zipCode; public Person(final String firstname, final String lastname) { this(firstname, lastname, ""); } public Person(final String firstname, final String lastname, final String address) { this(firstname, lastname, address, ""); } public Person(final String firstname, final String lastname, final String address, final String zipCode) { this.

Angular2: simple Drag and Drop

Angular2: simple Drag and Drop

Development

Creating simples drag and drop zones using Angular2.


We are using drag and drop extensively for creating virtual users in OctoPerf. As I plan to migrate to Angular2, today I wanted to check how to handle drag and drop in the future of AngularJS. I started from the W3Schools plain HTML / JS example and created the following component: import { Component } from 'angular2/core'; @Component({ selector: 'dnd', directives: [], styles: [` .container{ border: 1px solid red; width: 336px; height: 69px; } `], template: ` <div id="div1" class="container" (drop)="drop($event)" (dragover)="allowDrop($event)"> <img id="drag1" src="http://www.

Why objects must be Immutable

Why objects must be Immutable

Development

Immutable objects are objects whose state cannot change after construction.


Immutable objects have multiple advantages over mutable objects which makes them the perfect building block to create software. You may already have many questions about the subject like: Why should I use immutable over mutable objects? How can I design software where no single object can be modified? You’ll see in this article what an immutable object is, the advantages to use them every time you can and how they can speed up your software developments.

Angular2: filtering ngFor using pipes

Angular2: filtering ngFor using pipes

Development

How to filter the content of a table using pipes in Angular2.


Angular2 / Bootstrap4 table I’m still working on a Stripe administration console for OctoPerf, a SaaS performance testing tool. Stripe lets us manage our customers and their subscriptions. I have a table that lists all of our customers (Customers.html): <table class="table table-striped"> <thead class="thead-default"> <tr> <th>#</th> <th>Id</th> <th>Email</th> </tr> </thead> <tbody> <tr *ngFor="#customer of customers; #i = index"> <th scope="row">{{i}}</th> <td>{{customer.id}}</td> <td>{{customer.email}}</td> </tr> </tbody> </table> It’s an Angular2 application build using this excellent starter with BootStrap 4.

Angular2: hard time unit testing Http requests

Angular2: hard time unit testing Http requests

Development

Mocking the Angular2 Http service for unit tests using karma/jasmine.


To follow up on my article about unit TypeScript generics in Angular2, I would like to unit test my Stripe client. It involves mocking the Angular2 Http service, and it’s far more complicated than unit testing the Router service. I first tried to inject a mock of the Http service and return custom Observable responses but this led to strange errors and cumbersome code. I quickly switched to the recommended way, using MockBackend.

Angular2: using TypeScript generics

Angular2: using TypeScript generics

Development

A sample usage for TypeScript generics when using Angular2 Http service.


This post is an example of TypeScript generics usage, when writing an Angular2 application. I’m working on a Stripe administration console. Stripe is a payment / subscription SaaS service that we use at OctoPerf. I need to create pages that lists all our customers and plans. But Stripe returns paginated lists, and we need to do successive calls to their API to get the complete data. This mechanism is the same for both customers and plans lists.

Angular2: method callback type in TypeScript

Angular2: method callback type in TypeScript

Development

How to set the type for a method callback in TypeScript when using Angular2 Http service.


It’s my third post about Angular2 and TypeScript as I’m creating an admin console for OctoPerf load testing platform. Intro This article explains how to set a type for callbacks. If, like me, you are used to AngularJS you may often use callbacks for asynchronous calls, typically for HTTP requests. I wrote a StripeClient service that can return the list of my Customers. In pure JavaScript it would be fairly simple as you don’t need to give a type to your callback.