Image for post
Image for post

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.

Image for post
Image for post
Wrap your Async components with Suspense.

The way Suspense works is similar to React Async’s pending state, but also very different. While <Async.Pending> has to be a descendant of your Async component, <Suspense> must be an ancestor. That’s because with Suspense, pending promises are thrown, so they traverse up the tree until they are caught by an error boundary, in this case the <Suspense> component. One benefit of this behavior is that you can use a single Suspense boundary for multiple Async components, which wasn’t possible before. …


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. …


Image for post
Image for post

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 are installed through the Apple or Google app store. However, installation rates for mobile apps are decreasing. The app boom is over. Most smartphone users download zero apps per month. …


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 much quicker which has a positive effect on user experience and conversion of the site. …


Change templates based on device capability

TL;DR: I created a provider to implement adaptive templates in AngularJS. It’s on Github: https://github.com/ghengeveld/angular-adaptive-templating

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 and function of your application based on the device’s capabilities. AWD is very similar to Responsive Web Design, in the sense that the page may render differently based on screen resolution. However, AWD takes it a bit further and also changes the function (features) of the page based technical capabilities of the device such as support for touch events, geolocation and HTML5 audio/video. …


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 blueprints for instantiating objects, which have a constructor and can have public, private and static properties as well as public, private and static methods. There are various ways in which you can define a class in JavaScript. I prefer using a named function, with methods added to the prototype. The main reason for this is the naming, which gives you the option to use the instanceof operator to check its type. Using the prototype has the advantage of sharing functions between objects of the same class, saving memory. …


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 has also received some comments (the little chatbubbles in the sideline) with several people asking for more explanation on some parts. I noticed the main thing people struggle with is how and where to assign the currentUser object, so I decided to clarify that a bit. Meanwhile, I’ve switched jobs. I now work at Xebia, a software development and consulting firm with a strong focus on craftsmanship and personal growth. …


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 way your files are organized. AngularJS doesn’t prescribe a certain directory structure, but there are three commonly used patterns. …

About

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