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 neo.mjs related job market? …

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 knowledge with you. The goal is that you can benefit as well and get to a new level of Frontend Development. …

Contents

1. Introduction
2. How Can WebWorkers Help?
3. Multi-Screen Apps
4. Multi-Screen Apps on Mobile
5. How Can We Include Our App code in a Worker?
6. What Are Remote Methods?
7. What’s the Problem With Templates?
8. Reducing the DOM by 80%+ on Average
9. ES8+ Code Directly Inside the Browser
10. Get Your App Documentation Out of the Box
11. Got curious? What is neo.mjs?
12. How to Get Up to Speed?
13. What’s Coming Next?

1. Introduction

The web moves forward at a great speed — but do you?

When Angular and React were introduced, browsers had poor support for ES6+ features. …

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 settings of non active views. Inactive views are not inside the DOM. …

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:

This article is meant for recruiters, people working in HR as well as candidates. I think that there is the need for a significant change.

Content

1. Motivation of this article
2. About me
3. Basic infos on the Amazon hiring process
4. Examples of good hiring processes
5. My personal experience with the Amazon hiring process
6. Be responsive: Communicate with your candidates
7. Provide the relevant input
8. Give feedback
9. Be open minded — Don’t stick to standard patterns
10. How to identify talent?
11. How would I interview a developer instead?
12. How to not reach out to me?
13. Last words

1. Motivation of this article

This article is controversial and you might not agree with my perspective in all points. You are welcome to add comments and start a discussion. My intention is not to highlight problems or express my personal frustration, but as a former Solutions Engineer to provide input and possible solutions on how to improve the process of hiring talented candidates. …

Content

1. What are we going to build?
2. Prerequisites
3. Setting up the Infrastructure
4. The result of this tutorial
5. Creating the Footer
6. Creating the Table View
7. Loading the data for the Table View
8. Adding renderers into the Table View
9. Creating the Helix View
10. Creating the Helix Controls Container
11. Basic Routing
12. Creating the 3d Gallery View
13. Deploying your App for production
14. Summary

1. What are we going to build?

Here is a demo video showing the different views of the App:

As you can see, this is already a pretty complex app. We will start from scratch and progressively enhance it, while looking into some of the basic concepts as well. …

Content

1. Introduction
2. Scalable frontend architectures
3. More background infos
4. Benefits of the Shared App Worker
5. How can DOM events still work?
6. How do the Apps inside the Shared Covid App look like?
7. How can we position Popup Windows to exactly overlay an existing Component?
8. What are the use cases for the Shared Workers setup?
9. Webpack based dist versions?
10. What about Webkit / Safari?
11. Online Demo
12. What is coming next?
13. Would you like a tutorial on how to transform the Covid App into the new Shared Covid App version?
14. Close to the end game?
15. Final thoughts

1. Introduction

For me, it was alway a big dream, if not a life time goal, to create a meaningful Open Source project, with the potential to make a significant impact to improve the way how UI development works in general. This is it. I am very excited to not only share this article with you, but the entire code base as well (using the MIT license). …