I am excited about this topic, since the technology we are going to talk about opens the way for a new generation of web-based apps, which can directly communicate across multiple browser windows without involving a backend.

[side note] The article got pretty long. In case you got only a short amount of time, take a look at the video in 2., read the highlight in 10. and then decide if you want to read all of it.

Content

  1. Introduction
  2. The demo app
  3. Are we using the HTML5 drag & drop API?
  4. How can we communicate between browser windows?
  5. How is…


You have most likely used MobX, Redux or looked into the React Context API.

To quote the Context API landing site:

“Context provides a way to pass data through the component tree without having to pass props down manually at every level.”

This is basically the common ground for most state management solutions:

How to make data accessible for child components and how to dynamically update the state.

This article will cover some of the possibilities and advantages of using view models. We will talk about code. A lot!

While using view models inside neo.mjs is extremely powerful and fairly…


In case the name does not ring a bell, template literals were previously called template strings. Syntax-wise they look like a string, just wrapped into ``.

Example: `<button>${myButtonText}</button>`

Template literals resolve variables like ${myButtonText} right away inside the given scope.

We can do a lot more with them!

Content

  1. Introduction
  2. Examples of how you can improve your frontend architectures with using view models
  3. How to extract data variables from a string?
  4. The ugly part: How to convert a string into a template literal?
  5. Where to store data properties used inside binding formatters?
  6. How can we get change events for nested data…


[Important update] This article is already deprecated. For the neo.mjs version 2 release, the logic got significantly improved. Here is the new version:

This article will cover some of the possibilities and advantages of using the new view model implementation. We will talk about code. A lot!

While using view models inside neo.mjs is fairly easy, understanding the internal logic on how it works is challenging, even for experienced Javascript developers.

The article is split into two parts:

  1. How to use view models for your apps, including the code for several example apps as well as videos & online demos


Especially in case you have a lot of Tabs open inside your Browser, you are most likely using this feature on a daily basis. The drag&drop based re-sorting is fun to use and provides a great user experience.

Just to ensure that you have the same picture in mind:

Now, in case you look at most of today’s Web-based User Interfaces which are using Tabs, you will notice that there is no drag&drop based re-sorting in place.

This is actually a problem, since users are familiar with the feature and like it.

I picked up the challenge to implement…


Bundling Application code for dist versions has always been a challenge, especially in case you want to share code with several Apps or load multiple Apps on one Page.

Content

  1. Introduction
  2. The “data flows downwards” paradigm
  3. How does importing JS modules directly into the Browser work?
  4. Is the Worker Scope supported as well?
  5. How can we achieve the same behaviour for our dist versions?
  6. A Webpack Love Story
  7. What is the tradeoff?
  8. Introducing the neo.mjs v1.4 Release
  9. Can we achieve the same without using neo.mjs?
  10. What can we do with this now?
  11. What is coming next?
  12. What is happening on the…


Many former colleagues and friends have reached out to me and asked: “How did you get this efficient and fast when working inside the UI area?”

While I have been using Javascript for 20 years, experience is really just a small point in a very fast evolving ecosystem.

The biggest impact was switching to JSON based virtual DOM, which boosted my own productivity by at least 200%. Yes, this literally means that I can develop complex UI code 3 times faster as I could before.

Since these concepts are still mostly unknown, I am writing this article to share my…


Especially in case your UIs are growing, it can significantly increase the performance → UX in case you keep the DOM minimal. For many use cases you still want to change the state of inactive (no longer rendered) views.

Content

  1. Introduction
  2. The Problem
  3. The Solution
  4. How does it work?
  5. Can we achieve the same in Angular, React or Vue?
  6. Online Demo
  7. What is neo.mjs?
  8. Expanding Single Page Apps into multiple Browser Windows

1. Introduction

While watching the video, please focus on the DOM inside the dev tools. I am switching between different cards (active views), opening the settings side bar and am changing…


Content

  1. Introduction
  2. The Problems
  3. The Solution
  4. Welcome to the neo.mjs v1.3.0 Release
  5. Is this App a PWA?
  6. The Website Source Code
  7. Live Demo
  8. Can we get a Tutorial on creating this App?
  9. What is coming next?
  10. Final Thoughts

1. Introduction

Please take a look at the Intro Video first, to get the idea:

2. The Problems

You might know the feeling: You create a new GitHub repository and start with a default GH Pages implementation using a default GH design skin. You add more and more content, and suddenly it looks like this:

Tobias Uhlig

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