Replaced Vue with vanilla js for the simon game

[kingstenbanh]

I am a big fan of making the web fast and Addy Osmani's work. Thus, the first thing I could contribute is looking for ways to reduce the amount of JavaScript that is shipped to our users. After poking around the codebase to understand how things work, I realized that there is a huge potential improvement with the Simon Easter egg game. The game was built using Vue, which requires the user to download ~31 kb of the library while only a small portion of the library was needed.

I tried to find another smaller library that allows me to achieve the same functionality with a lot of smaller in size. I came across hyperapp (1kb), but the way state work is very difficult to reason. Then Tencent just released a new promising and exciting library called Omi (4kb). Omi is the new cool kid that combines Shadow DOM (Web Components) and Virtual DOM to give you the best for your bucks. It was very straightforward and easy to implement. However, without using JSX compiler, I have to use its h rendering function to replicate the JSX syntax and including CSS inside the file which makes the file very lengthy. You can check out the implementation here. Here are some performance stats for the app using Omi

VueJS

Data download: 61.9 KB
First Contentful Paint: 1,580 ms
Time to Interactive: 1,730 ms

Omi

Data download: 36.4 KB (41% less)
First Contentful Paint: 980 ms (38% faster)
Time to Interactive: 980 ms (43% faster)

Although there was a significant improvement in term of fewer data to download and faster interaction time, the developer experience in building the app using Omi without JSX compiler is less pleasant than using Vue. I went back digging again to see how I could improve this further. Then a lightbulb 💡moment came, "What if I rebuilt this in just vanilla JavaScript?" This way, users don't have to download any third party libraries, the app will be lighter and faster.

Vanilla JavaScript

Data download: 29.1 KB (20% less)
First Contentful Paint: 980 ms (unchanged)
Time to Interactive: 980 ms (unchanged)

Without using any libraries, we can see that the site is 20% less while the experience remains the same. I still didn't satisfied with the change. I think we could do better. Examined the app a little deeper, there are two things we could improve.

1. Theme:

By default the theme is dark. Therefore, we shouldn't load the theme if the storedTheme is dark.

2. Simon App Initialization

When users first visited the app, they probably wouldn't know that there is an Easter egg hidden somewhere in the app until they are clicking around. Therefore, it doesn't make sense to initialize the Simon app the first thing when the user visiting the page. Instead, I defer the import of the code to initialize the app when user clicks anywhere using dynamic import feature. The page still works even without the simon.js. This results in the following

Vanilla JavaScript with Deferring simon.js

Data download: 25.7 KB (12% less)
First Contentful Paint: 900 ms (8% faster)
Time to Interactive: 900 ms (8% faster)

Overall, we get the same user experience for our users like before this PR with a lot less code for our users and a lot faster time to interaction.

Type	# of Requests	Size (KB)	FCP (ms)	TTI (ms)
Vue	9	61.9	1,580	1,730
Omi	9	36.4	980	980
Vanilla JS	8	29.1	980	980
Vanilla JS w/ defer	7	25.7 (-58%)	900 (-43%)	900 (-48%)

[msftclas]

All CLA requirements met.

[kingstenbanh]

Hi @prichodko, could you please take a look?