Ever since one of the teams I worked with was using Web Components I was intrigued. Taking the rewrite of a web site as an excuse, I finally got around to learn how to implement and use them.

THE PROBLEM TO SOLVE

For the new web site I want to have a feature that shows readers the last few stories that they viewed and enable them to go back and look at them again. Since the site will be a static site, encapsulating the view and functionality was important to not copy/paste code all over the place.

On a former job, a team was…


Working with other people is great: You get to learn how other people think about problems and their solutions, learn new approaches and sometimes get to provide some insight into the way you think about certain things. That’s what happened to me a few times recently when it came to Rx.js, a technology near and dear to my heart.

In this post, I’m going to write about and discuss two approaches I saw that I consider to be problematic. I’ll describe the original code, why I see problems with it and how I would refactor it.

Nested Rx chains

In a recent class…


Rx.js offers a lot of operators out of the box, but sometimes, you just have to roll your own.

That happened to me when I needed functionality to handle navigation in an Angular application via key commands. Specifically, I needed to listen to multi-key commands such as rev, which were supposed to reverse the order in a table, for example. The relevant part of the currently implemented Rx chain looks as follows:

this.obsRef = this.keyPressObservable
.pipe(
filter(this.permitKey),
map(this.convertToString)
)
.subscribe(
this.reactToKeyPress.bind(this),
);

In short, it listens for key press events, filters out unwanted keys and then converts the information about…


Data can be a messy thing: We sometimes have to manage data where a large part is the same between different items, but differ in some details according to the type of thing we’re collecting data for.

In this post, I’m going to look at a form for a hypothetical library application, which needs to capture library inventory consisting of multiple types: books, CDs, DVDs. Each of these library items has different requirements for data.

Common among them is the author/artist, title, dewey number, release date etc. But whereas a book has a page count and edition number, a CD…


On a recent Angular project, I received the requirement to load all the data for a table view at once and page through the resulting array in-memory — or, if the data set was too large, to revert to loading the data for each page separately from the server. To accomplish this, I came up with the following architecture:

The essence of this implementation is the following:

  1. A component (here DataListComponent) instantiates a factory class, DataSourceFactory.
  2. The factory class then loads the initial data, whereby the size of the initial data set is defined in the factory or can alternatively…


Sometimes, a single representation of data is just not sufficient.

If we take a music library app as an example, one would want to look at the music collection either in list form, or as a pretty list of the albums’ cover images while keeping the rest of the UI unchanged. Both are using the same underlying data set, and ideally, the change in presentation happens without reloading the data from the server every time.

In Angular, the @ViewChild can be used to implement that scenario, and in this post, we’re going to develop an example where the user can…

Torsten Müller

Software developer/architect in Munich. More of my writing is on my blog http://torsten-muller.dev

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