Skip to content
This repository has been archived by the owner on Jul 4, 2023. It is now read-only.

Technical differences between ModernDeck 10 and ModernDeck 9

dangered wolf edited this page Jun 12, 2022 · 3 revisions

ModernDeck 10

With this release, we are finally hitting lucky number 10. With this milestone, you might expect there to be a massive influx of changes. And there are, but a lot of them are going to be invisible to the user. This wiki article is going to cover some of the major ones.

Major TypeScript rewrite

TypeScript is now the language of choice for ModernDeck, and most JavaScript code has already been either converted to take advantage of TypeScript's features or has been rewritten from the ground up. Some of the more major component rewrites are covered elsewhere on this page. But virtually every corner of ModernDeck has been touched by this change. These changes will help make ModernDeck both easier to maintain and easier for others to contribute to.

Webpack replacing Rollup

Rollup has been the default build tool for ModernDeck since ModernDeck 8.0, when ModernDeck's renderer functionality was (finally) split into different modules. Rollup was easier to set up than Webpack and made sense at the time.

However, these days I both use Webpack more than Rollup and also would like to let ModernDeck take advantage of plugins designed for Webpack. Plus, more developers are used to Webpack anyway.

Goodbye ModernDeckInit, hello ModernDeck Boot

Through all its changes and component rewrites, the fundamental loading system of ModernDeck, ModernDeckInit.js, has remained fundamentally unchanged for ~5 years or so. Born out of the old init functions of the old MTDinject, ModernDeckInit is currently the place where everything was imported to be run. However, in recent times it's been more of a nuisance than anything. It's continued to take on more tasks despite ModernDeck 8 moving a lot of what used to be there out of it.

The new loader, ModernDeck Boot, has a lot of improvements. It is way simpler than before, while also being Promise-based, TypeScript from the start. It is also fast and keeps its own performance metrics for each part of the boot process. It also has friendlier logging that can make troubleshooting easier.

In ModernDeck Boot, each boot item is a separate, isolated function. In ModernDeckInit, most functions relied on a separate error handling helper to catch errors. In ModernDeck Boot, this is done automatically, and universally, for every single function, so even the failure of an early function could be recoverable if the right things are in place for dependent functions further down the line.

ModernDeck Boot divides the list of boot functions into multiple stages, Core, LowLevel, and Main. Core has the first initialization code run and sets up stuff like Sentry, fetching TweetDeck's jQuery, and the like. LowLevel has other core functionality, like starting the I18n engine, injecting the main ModernDeck CSS stylesheet, and similar. Main initializes later boot process items, such as user settings, keyboard shortcuts, Advanced Mute Engine, Electron IPC, etc.

GitHub Actions integration

For a while, we used Travis CI for continuous integration, but now GitHub Actions is the only one we will use going forward.

Also, Electron artifacts for all the desktop platforms are published from every GitHub Action build. Test builds of ModernDeck for all platforms can be made with zero effort now. Auto-updating does not work in these test builds. The vast majority of end-users should stick to official Beta builds as they are much better tested.

common/resources is now common/assets

For over 7.5 years, assets were stored in a folder called resources / sources. It was renamed sources for a while because of Safari's weirdness. And now that we might support iOS, and it has the same stupid weirdness all those years ago, I figure it's time for a better, more permanent name. Asset was an obvious contender for a replacement, and so ModernDeck assets will now go there.

main.js broken up into TypeScript modules built in Webpack

main.js is facing the same problems we have with moderndeck.js (formerly MTDinject.js) in that it is becoming too complicated to maintain in a single script. Also, I wanted to convert it to TypeScript to give it the same benefits as the page inside. Currently, this file resides in common/assets/js/moderndeck-electronhost.js.

Replaced MTDURLExchange with moderndeck-base-url

The MTDURLExchange handshake has remained completely unchanged since 2015. Its replacement is largely similar but instead of getting type from a <div> tag (which is weird and nonstandard) it instead uses a <meta> tag whose content is the base URL. Just a minor thing to make ModernDeck more standards-oriented.

UISettings rewrite

UISettings was rewritten to take advantage of TypeScript features and to make it more modular and easier to maintain. It relies more heavily on TypeScript enums to ensure consistency. Settings components are instantiated and are given a container for themselves to write and maintain. Settings enums work in a similar way but get the whole screen to play with.

Mustache injector rewrite

A lot of the mustache injector stuff has been abstracted away with new patchMustache and replaceMustache functions. They also warn if a patch was unsuccessful (i.e. text to find in replace function not found, mustache doesn't exist). These improved functions also allowed us to clean mustache patches from mustaches that no longer exist.

src/buildID is now src/BuildProps.json and has more info

The new BuildProps object contains the version, build ID, and compile start time.

A lot of minor changes

There are too many small under-the-hood changes in ModernDeck 10 to list them all. But these changes altogether will make the full release of ModernDeck 10.0 more stable, maintainable, and open to outside contributions.