Javascript classes: state management v2

Tobias Uhlig
codeburst
Published in
3 min readMar 11, 2020

After writing the article Javascript classes: state management, I got a lot of input from Nige White (Kudos!) and went back to the drawing board. The concept of using an afterSetQueue worked great for property cross-dependencies inside afterSetX methods, however it could not work inside beforeSetX methods.

What does the new version want to achieve?

Running this test should result in:

As you can see, beforeSetA is using this.b and beforeSetB is using this.a. One of the meanest possible x-dependencies.

instance.set({a:3, b:4}) will however handle it correctly.

Can I run this test online?

Yes, here: https://neomjs.github.io/pages/node_modules/neo.mjs/test/siesta/index.html#tests/ClassSystem.mjs

Does this concept require using the neo.mjs framework?

No. You can manually enhance the JS class system in the same or a similar way. However, in case you did not take a closer look at the neo.mjs framework yet, I can strongly recommend to do so. You get multi-threading out of the box (the apps you create as well as most parts of the framework run inside a web worker) and the JSON based virtual dom has a lot of benefits (cleaner & simpler code, performance,…). Here is the link:

Let’s talk about code!

In case you want to manually set up a class config system, the applyClassConfig() logic will help: https://github.com/neomjs/neo/blob/dev/src/Neo.mjs#L48

The most important changes compared to my previous article are inside autoGenerateGetSet():

https://github.com/neomjs/neo/blob/dev/src/Neo.mjs#L545

Side note: Neo will now store the getters / setters inside a cache, so that when multiple classes have the same config names, the logic will no longer create an overhead.

core.Base is now using a config symbol object, which will store the new values for initially setting the config values as well as for bulk config updates using set():

https://github.com/neomjs/neo/blob/dev/src/core/Base.mjs#L266

You also want to look at processConfigs() which also gets used by initConfig() => constructor()

The trick here is that processConfigs() will only consume the first key of the new config object (stored inside the instance symbol) and then call itself recursively. The reason for this is, that when parsing a new key, the beforeSet or afterSet methods of this key could access other configs, for which you want to get the new value(s) right away, which also allows for removing those config(s) from the new config symbol.

Feedback appreciated!

I know this is rather advanced JS coding, but I hope you can get the concepts. Feel free to modify / extend the test class and ask questions!

Best regards & happy coding,
Tobias

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in codeburst

Bursts of code to power through your day. Web Development articles, tutorials, and news.

No responses yet

What are your thoughts?