Introducing Suspense support and Async Library

It’s been a while since Dan Abramov revealed Suspense, the future vision for async rendering and data fetching in React. Users of React Async have been asking about Suspense support ever since that early announcement. Suspense for Code Splitting was released in October 2018, but Suspense for Data Fetching was postponed until late 2019.

With the year’s end drawing closer, we can finally start preparing for its arrival. That’s why we’ve just released React Async v9 with support for Suspense. Even though it’s marked experimental, you can already start using <Suspense> as a replacement for <Async.Pending> today.

Web applications have to deal with a lot of asynchronous operations. Loading and updating data is something you have to do over and over again. There’s two common approaches to this: using a global state manager (e.g. Redux) or using setState locally.

Although I’ve been a fan of Redux in the past mostly for its functional style, it tends to be too much for your average application. It’s a steep learning curve and quite a bit of boilerplate, but most of all it distances the data fetching from the data presentation. …

How Accelerated Mobile Pages and Progressive Web Apps can boost online sales

In the world of e-commerce, customers are becoming increasingly mobile. In The Netherlands, 50% of consumers is shopping on their mobile phone. Among those under 35 years of age mobile purchases is at 65%. Numbers for searching and browsing for a potential purchase is over 70% overall.

Converting these visitors into customers is a delicate task. Consumers are still hesitant to make mobile purchases. The challenge lies in optimizing the mobile user experience. Some shops have tried to improve user experience using a native mobile app. These apps…

TL;DR: Isomorphism is the functional aspect of seamlessly switching between client- and server-side rendering without losing state. Universal is a term used to emphasize the fact that a particular piece of JavaScript code is able to run in multiple environments.

Ever since Spike Brehm of Airbnb popularized the term Isomorphic JavaScript people have been confused about what exactly it means to have an Isomorphic JavaScript application and what it takes to build one. From the beginning there were people opposing the term, suggesting alternatives such as monomorphic or polymorphic, whatever that all means. …

On the road to Isomorphism and Adaptive web applications.

The web application landscape has recently seen a big shift in application architecture. Nowadays we build so-called Single Page Applications. These are web applications which render and run in the browser, powered by JavaScript. They are called “Single Page” because in such an application the browser never actually switches between pages. All interaction takes place within a single HTML document. This is great because users will not see a ”flash of white” whenever they perform an action, so all interaction feels much more fluid and natural. The application seems to respond…

Change templates based on device capability

TL;DR: I created a provider to implement adaptive templates in AngularJS. It’s on Github:

I recently attended a JavaScript meetup where I heard a talk on adaptive templates with handlebars and curl.js. The topic was very actual for me, since I had just implemented a very similar thing using RequireJS* and enquire.js. Someone in the audience asked how this could be implemented in AngularJS, which triggered me to write this article.

* Looking back, yepnope.js or curl.js might have been a better choice.

Adaptive templates are a way to implement Adaptive Web Design, which means dynamically changing the layout…

The missing piece in AngularJS

Unlike Backbone and Ember, AngularJS does not provide a standardized way to define model objects. The model part of MVC* in Angular is the scope object, which is not what we mean by model objects. A model object is the JavaScript version of a class instance. Developers familiar with object oriented programming will feel right at home using model objects. I’m a big fan of the mix of OO and functional programming that JavaScript provides.

* Actually I think of AngularJS as a ViewModel-View-Controller framework, since $scope is better described as a ViewModel rather than a data Model.

Classes are…

A collection of ideas for authentication & access control

The Netherlands knows a relatively active AngularJS community, with regular meetups and a helpful Google+ group. Last week I had the opportunity to speak at one of these meetups. Since pretty much all of the applications I build require authentication of some sort, I’ve implemented various forms of authentication in AngularJS. I decided to share some of these approaches in my talk, and I’m sharing them again in this article.

Update: This article is getting very popular. It’s been in the Medium top 100 twice now and it’s being retweeted and favorited by new people each day. Thanks! The article…

Avoiding callback hell in AngularJS controllers

An indispensable part of any web application is the URL router. The standard routing provider in AngularJS is ngRoute. Routing is one of the first things you’ll get familiar with when developing Angular applications and ngRoute will get you quite far but finally leave you wanting more…

The default routing provider has some limitations that make it not very suitable for complex applications. In fact, it’s downright insufficient for anything but the smallest projects. Apparently the AngularJS team acknowledged this and decided to remove ngRoute from the core. Starting with AngularJS v1.2 …

Implement a modular application architecture

This is the first in a series of articles about the best practices I’ve learned to apply when working on single-page applications with AngularJS. It started out as a basic list of best practices for some colleagues who were just getting to know the framework. This series will provide in-depth information and arguments supporting my tips. As the title of the series suggests, this stuff is based on opinions, both other developers’ and my own. I may be wrong, others may be wrong. Suggestions for improvement are welcome.

Organizing your code

A lot of the structure of your application is defined by the…

Gert Hengeveld

Enabling Component-Driven Development with @ChromaUI and @Storybookjs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store