Blog: Posts by Marco Otte-Witte

Effective infrastructure for efficient development workflows

Building software products of any kind is hard enough. Doing so without the support of powerful infrastructure that enables efficient workflows is even harder. Yet, many teams are suffering from the absence of such infrastructure, forcing them into very much inefficient workflows with substantial time and effort going into synchronizing the work of different engineers, tracking down bugs, and getting back to tasks later that were already thought to be complete.

Ember.js in 2021 – a beacon of productivity

Ember has been around since the early days of the frontend renaissance that already started several years ago by now. It's almost a decade old and dates back well before React, Vue, Svelte and all the others. The framework has never been on the forefront of the frontend hype train but quietly enabled teams to ship steadily and sustainably – among them Qonto and CLARK, two of Europe's Top 50 FinTechs in 2020 (more on their success with Ember below).

In this post, I want to make the case for Ember in 2021 and explain why I consider it a beacon of productivity in the middle of a roaring sea of complexity. While everyone is obsessed with change and innovation (often mistaking the former for the latter), Ember allows teams to excel at executing their product vision and focus on shipping instead of getting lost in low-level rabbit holes where little business value is to be found.

The guide to making remote work work

Remote work has been a hot topic in the tech community for decades. While in the late 90s and early 2000s, relatively few people were actually doing it and there were quite some limitations to overcome to make it work at all, today in 2020, remote work is well possible in many industries and even the norm for many companies already. And of course, the global pandemic that forced everyone to work from home gave remote work an extra push. In this guide, we will share some techniques to make a remote working model actually work well for everyone and not just something we all have to cope with because an international crisis struck.

Failing (and winning) at planning software projects

Scoping and planning software projects of any kind is a challenging task that many teams struggle with. The negative consequences of mis-planning are manyfold – teams are unable to give reliable estimates, synchronize dependent activities (e.g. marketing) with the project's progress or maintain a high level of quality that will allow maintaining and evolving an application over the long term. In this post, I will analyse these typical problems in some detail and present techniques to address and overcome them, reducing uncertainty, risk and frustration.

How to over-engineer a static page

When we set out to rebuild our own website simplabs.com in 2019, we wanted to use that project as an opportunity to ignore all economic considerations (and reason you could say) and dive deep into what was technically possible. Doing so would allow us to build something that was super customized for our specific needs and highly optimized for performance. We ended up spending a lot of time and effort but are quite pleased with the result.

While we cannot recommend anyone following our example as your time is most likely better spent elsewhere, this post explains the approach we took. I will be covering topics like static pre-rendering and client-side rehydration, advanced bundling and caching strategies as well as service workers.

SPAs, PWAs and SSR

Single Page Apps, Progressive Web Apps and classic Server side rendered websites are often seen as orthogonal approaches to building web apps where only one is best suited for a particular project and one has to make a choice to go with one of them. In this post we'll explore why that doesn't have to be the case, since all 3 approaches can actually be combined in order to achieve the best result.

From SPA to PWA

Progressive Web Apps are the next level of browser based applications. While Single Page Apps (SPAs) have already meant a giant leap forward, PWAs are taking things even one step further. They offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide. In this post, we'll look at how to turn a Single Page App into a Progressive Web App.

Building a PWA with Glimmer.js

We recently set out to build a progressive web app with Glimmer.js. Instead of building it with Ember.js, which is our standard framework of choice, we wanted to see how suitable for prime-time Glimmer.js is and what we'd be able to accomplish with it. To put it short, we are really happy with how building the app went and the result that we were able to achieve. In this series of posts, we will give some insights into how we built the app, why we made particular decisions and what the result looks like.

On Computed Properties vs. Helpers

Ember's computed properties are a great mechanism for encapsulating reactive logic and implementing consistent, auto-updating UIs. Since the past year or so though, there seems to be an increasing tendency in the community to use template helpers as the main tool for expressing this kind of logic right in the templates. Following up on a talk I gave at last year's EmberFest, I'll elaborate in this post why I think that is often not the best choice and what the drawbacks are.

Class based Computed Properties

We think Computed Properties in Ember are awesome. We also think they are in many cases the better alternative to template helpers as they allow for cleaner separation of where a computation is triggered and the implementation of that computation. In some cases though it is currently very hard to do things in Computed Properties (and Computed Property macros in particular) that are possible with Class based helpers. With the introduction of Class based Computed Properties we're aiming at making these scenarios solvable easily.

Out-of-the-box FastBoot support in Ember Simple Auth

Ever since FastBoot was first announced at EmberConf 2015 it was clear to us that we wanted to have out-of-the-box support for it in Ember Simple Auth. Our goal was to make sure that Ember Simple Auth did not keep anyone from adopting FastBoot and adopting FastBoot would not result in people having to figure out their own authentication and authorization solutions. Today we're happy to announce the availability of Ember Simple Auth 1.2.0-beta.1, the first release with out-of-the-box support for FastBoot.

Using better element selectors in Ember.js tests

We just released ember-test-selectors, an Ember Addon that enables better element selectors in Ember.js tests. It removes all data attributes starting with data-test- from the application's templates in the production environment so that these attributes can be used to select elements with in acceptance and integration tests without polluting the markup that is delivered to the end user.

Updating to Ember Simple Auth 1.0

With Ember Simple Auth 1.0.0 having been released a few days ago, a lot of people will want to upgrade their applications to it so they can finally make the switch to Ember.js 2.0. While quite a big part of the public API has been changed in 1.0.0, updating an application from Ember Simple Auth 0.8.0 or earlier versions is actually not as hard as it might appear at first glance. This post explains the steps that are necessary to bring an application to 1.0.0.

Rails API Auth

We are happy to announce the first public release of the rails_api_auth gem. rails_api_auth is a lightweight Rails Engine that implements the "Resource Owner Password Credentials Grant" OAuth 2.0 flow as well as Facebook authentication and is built for usage in API projects. If you’re building a client side application with e.g. a browser MVC like Ember.js (where you might be using Ember Simple Auth which works great with rails_api_auth of course), a mobile app or anything else that’s backed by a Rails-based API, rails_api_auth is for you.

Ember Simple Auth 1.0 - a first look

The first beta of Ember Simple Auth 1.0 will be released soon and this post provides a first look at the changes that come with it.

Ember.js Workshop in Munich, July 22nd-24th

We are organizing a three day Ember.js Workshop in Munich from July 22nd to 24th, taking participants through building a full Ember.js application.

The most important command when working with XCode 6

Switching off XCode's Crash Reporter saved my day.

Testing with Ember Simple Auth and Ember CLI

The last blog post showed how to use Ember Simple Auth with Ember CLI to implement session handling and authentication. This post shows how to test that code.

Using Ember Simple Auth with ember-cli

With the latest release of Ember Simple Auth, using the library with ember-cli has become much simpler. As ember-cli in general is still pretty new to many people though, this post describes how to setup a project using Ember Simple Auth with ember-cli.

Ember.SimpleAuth needs a logo!

The project needs a logo.

Ember.SimpleAuth 0.3.0

Ember.SimpleAuth 0.3.0 was just released. The main change in this release is the split of Ember.SimpleAuth into one core library and a set of extension libraries. These extension libraries include everything that’s not mandatorily required for Ember.SimpleAuth like authenticators, stores etc. so that every application would only have to load whatever it needs.

Ember.SimpleAuth 0.2.1

We released Ember.SimpleAuth 0.2.1.

Ember.SimpleAuth 0.2.0

We released Ember.SimpleAuth 0.2.0.

Ember.SimpleAuth 0.1.0

Since Ember.SimpleAuth was released in October 2013, there were lots of issues reported, pull requests submitted and merged etc. Now all this feedback together with some fundamental design improvements results in the release of the 0.1.0 version of Ember.SimpleAuth. This is hopefully paving the way for a soon-to-be-released version 1.0.

Ember.SimpleAuth implements RFC 6749 (OAuth 2.0)

Update: Ember.SimpleAuth 0.1.0 has been released! The information in this is (partially) outdated.

With the release of Ember.SimpleAuth 0.0.4 the library is compliant with OAuth 2.0 - specifically it implements the "Resource Owner Password Credentials Grant Type" as defined in RFC 6749 (thanks adamlc for the suggestion). While this is only a minor change in terms of functionality and data flow, used headers etc. it makes everyone’s life a lot easier as instead of implementing your own server endpoints you can now utilize one of several OAuth 2.0 middlewares that already implement the spec.

Ember.SimpleAuth

Update: Ember.SimpleAuth 0.1.0 has been released! The information in this is (partially) outdated.

After I wrote 2 blog posts on implementing token based authentication in Ember.js applications and got quite some feedback, good suggestions etc., I thought it would be nice to pack all these ideas in an Ember.js plugin so everybody could easily integrate that into their applications. Now I finally managed to release version 0.0.1 of that plugin: Ember.SimpleAuth.

(better) Authentication in ember.js

Update:I released an Ember.js plugin that makes it very easy to implement an authentication system as described in this post: Ember.SimpleAuth.

When we started our first ember.js project in June 2013, one of the first things we implemented was authentication. Now, almost 2 months later, it has become clear that our initial approach was not really the best and had some shortcomings. So I implemented a better authentication (mostly based on the embercasts on authentication).

excellent 2.0.0

We just released excellent 2.0.0 which has some big improvements:

excellent 1.7.2

We just released excellent 1.7.2 which includes the following fixes:

Authentication in ember.js

Update:I released an Ember.js plugin that makes it very easy to implement an authentication system as described in this post: Ember.SimpleAuth.

Update: After I wrote this I found out that it’s actually not the best approach to implement authentication in Ember.js… There are some things missing and some other things can be done in a much simpler way. I wrote a summary of the (better) authentication mechanism we moved to.

I’m using the latest (as of mid June 2013) ember/ember-data/handlebars code directly from the respective github repositories in this example.