Cleaning Up

Actions

---

Issues

Opened:

• Cursor shows drag-copy icon when alt is pressed rather than ctrl #41
• Date drag-over color doesn't immediately switch to green when ctrl is pressed #42
• Canvas Ring: Add frame counter #43

Closed:

• Create UI element for resetting join code #31
• Better drag handles for widgets #32 (fixed last week, forgot to close)
• Epic: Lesson overhaul #38
• Date drag-over color doesn't immediately switch to green when ctrl is pressed #42 (upstream mui/mui-x#6017)
• Canvas Ring: Add frame counter #43
• [pickers] sx property of PickersDay doesn't update properly when controlled by state in renderDay function mui/mui-x#6017

Pull Requests

Opened:

• [pickers] Add sx prop to prop equality check for PickersDay mui/mui-x#6030
• feat: allow configuring when to use the 'copy' dropEffect react-dnd/react-dnd#3498

Merged:

• [pickers] Add sx prop to prop equality check for PickersDay mui/mui-x#6030

Discussion

---

This Week

The start of this week was consumed with finishing up the lesson overhaul, adding the ability to move/copy lessons, and also the ability to copy activities to other lessons by dragging them onto different dates while holding ctrl.

After that came a lot of minor fixes, tying up some loose ends, general improvements, code cleanup. There was also a decent amount of reading through other projects' code (MUI, react-dnd, Vercel) to try to find the root cause of upstream issues and possibly contribute back, which consumed a decent chunk of time. And of course there was performance exploration and improvements.

Dyanmic Imports and Code Splitting

One of the performance improvements which should help with first load is code splitting, in which the bundler (webpack via Next.js) splits the code into "chunks" of code which depend on each other, so that it can avoid sending code over the wire which is not immediately needed. This results in faster page loads, and potentially less data being sent (though if all the chunks are eventually sent, slightly more bandwidth would be consumed, so there is a balance).

Code splitting in Webpack can be visualized as a treemap with webpack-bundle-analyzer (or in Next.js, the slightly more convenient wrapper of that, @next/bundle-analyzer). Both the client side and server side get code-splitting, though we're mostly concerned with the client since that's what has to get sent over a network¹ so only the client analysis will be shown. Here's the client chunk visualization² from before any active work towards code splitting:

The first thing that stands out is how Brython, the library I use for running Python 3, accounts for over half of the total data being sent over, so we definitely want to avoid sending it whenever the Python 3 runtime is unneeded. The treemap doesn't show us dependencies though, so we need to actually look at the code to determine when the Python 3 chunk is loaded. Hint: it's loaded any time information about Python 3 is loaded, which is loaded any time any activity is loaded or the classroom management page is loaded.

Anyways, let's hide the Brython chunks so we can get a better look at the other stuff.

We can see once again that most of the code is concentrated in just a few chunks. That could be okay, if those all of the code in those chunks was actually required, but I'm skeptical. For example, you can see that a significant fraction of the left-most chunk is consumed by Babel modules (@babel). We need Babel for certain user code transformations, but like with Brython, we don't need it every time information about JavaScript or TypeScript is loaded, just when we want to compile it.

Fortunately Webpack offers us a way to indicate that a dependency isn't needed immediately, by importing it dynamically rather than at the start of the file.

import { transformSync } from '@babel/core';
// versus
const { transformSync } = await import('@babel/core');

Though rather than importing each library that way, which would be over-splitting, I can split the behavior which needs them into a separate file, and then dynamically import that one file. Sensing a common theme, I changed the LanguageDescription API to now accept Importable<RunnableLanguage>, which requires that all language runtimes are loaded asynchronously, and makes importing grouped behavior much easier. With the change, Python 3's LanguageDescription now looks like this:

export const pythonDescription = languageDescription({
    name: 'python3',
    monacoName: 'python',
    displayName: 'Python 3',
    icon: PythonIcon,
    features: [
        supportsEntryPoint,
        supportsGlobal,
        supportsIsolated
    ] as const,
    runnable: async () => new (await import('./impl')).default() as any,
`as any` is required here in order to break circular typing dependencies.});

If we look a little closer at the analysis, we can also see that modules associated with markdown are bundled with other stuff that they shouldn't need to be. Being able to render markdown is necessary for the instructions pane, but it is only needed when the instructions pane is actually visible, which is only when an HtmlTestActivity-derived activity is loaded. Once again, rather than cutting out the markdown stuff separately, we can just make a general API change saying that activities in general should use Importable<ComponentType>s rather than the component types directly. This is what the Canvas Ring's ActivityDescription looks like after the change:³

const canvasActivityDescription = activityDescription({
    id: 'core/canvas-ring',
    displayName: 'Canvas Ring',
    requiredFeatures: [
        supportsEntryPoint
    ] as const,
    activityPage: async () => (await import('./CanvasActivity')).CanvasActivity,
    rtcPolicy: 'ring',
    defaultConfig: undefined
});

After making all of these changes, we can take another look at the bundle analysis (excluding Brython, since that will look the same) to see if we've fixed the problem.

As hoped, there are more chunks and they are more evenly sized.

The Future

There are some other miscellaneous tasks that I want to work on (drag/drop, performance), but the main focus for now is going to be on RTC, and finally getting MiKe into Necode.