DEV Community: Jeff Caldwell

Dynamic ES6 class instantiation using proxy classes

Jeff Caldwell — Wed, 14 Oct 2020 16:34:37 +0000

I'm working on a project that lets users create different types of broadcast graphics for their live streams. This is a great place to use classes because I can have a base Graphic class and extend that for the different kinds of graphic that will play out onscreen.

This can get a little difficult to deal with later when it comes time to instantiate one of ten or twenty graphic subclasses. Nobody wants to have to have to try using logical if/else statements, or even switch statements to sift through every kind of subclass.

Enter proxy classes.

Sticking with the example above, let's say we have a base Graphic class

class Graphic {
    _id = Date.now();
    position = [2,2];
    autoplay = false;
    entranceAnimation = {type: 'fade', direction: 'none', duration: 500, delay: 0};
    exitanimation = {type: 'fade', direction: 'none', duration: 500, delay: 0};
    isPlaying = false;

    constructor(options) {
        this.showName = options.showName;
        this.scene = options.scene;
    }

    play() {
        if(this.isPlaying === false) {
         this.isPlaying = true;
        }
    }

    stop() {
        if(this.isPlaying === true) {
            this.isPlaying = false;
        }
    }
}

Now, this base class is just here so we can have some nice defaults for all of the graphic subclasses, so let's make a subclass called Bug (a bug is just a very simple graphic that shows in one of the top corners).

class Bug extends Graphic {
    type = 'bug';
    position = [1,1];
    entranceAnimation = {type: 'fly', direction: 'left', duration: 500, delay: 500}
    exitAnimation = {type: 'fly', direction: 'left', duration: 500, delay: 0}

    constructor(options) {
        super(options);

        this.content = options.content;
    }
}

Cool, cool. Now, we can instantiate a bug.

const myFirstBug = new Bug({content: 'LIVE'});
console.log(myFirstBug);

Bug {
  _id: 1602690699857,
  position: [ 1, 1 ],
  autoplay: false,
  entranceAnimation: { type: 'fly', direction: 'left', duration: 500, delay: 500 },
  exitanimation: { type: 'fade', direction: 'none', duration: 500, delay: 0 },
  isPlaying: false,
  showName: undefined,
  scene: undefined,
  type: 'bug',
  exitAnimation: { type: 'fly', direction: 'left', duration: 500, delay: 0 },
  content: 'LIVE'
}

This is what we want. A base class with reasonable default fields that we can inherit from or override when we need to. The basics are working as they should.

Now let's create another type of graphic, LowerThird (a graphic that plays on the lower part of the screen, usually with a speaker's name and title or details about what's on screen).

class LowerThird extends Graphic {
    position = [3,1];
    entranceAnimation = {type: 'scale', direction: 'left', duration: 700, delay: 0};
    exitAnimation = {type: 'scale', direction: 'left', duration: 700, delay: 0};

    constructor(options) {
        super(options);

        this.subjects = options.subjects;
    }
}

And the instantiated LowerThird:

const myLowerThird = new LowerThird(
    {
        subjects: [
            {
                title: 'John Brown',
                info: 'Radical Abolitionist'
            },
            {
                title: 'James Baldwin',
                info: 'Writer, Expatriot'
            }
        ]
    });

console.log(myLowerThird);

LowerThird {
  _id: 1602690699917,
  position: [ 3, 1 ],
  autoplay: false,
  entranceAnimation: { type: 'scale', direction: 'left', duration: 700, delay: 0 },
  exitanimation: { type: 'fade', direction: 'none', duration: 500, delay: 0 },
  isPlaying: false,
  showName: undefined,
  scene: undefined,
  exitAnimation: { type: 'scale', direction: 'left', duration: 700, delay: 0 },
  subjects: [
    { title: 'John Brown', info: 'Radical Abolitionist' },
    { title: 'James Baldwin', info: 'Writer, Expatriot' }
  ]
}

Simple stuff, but we're not here to watch someone create and instantiate classes all day. We're here to see why proxy classes can help.

I don't want to have to call new LowerThird() or new Bug() or new HundredthGraphicType() when someone creates a new graphic. I want to be able to allow my program to decide what subclass of graphic needs to be instantiated at runtime and just instantiate it for me. You can see a breakdown of proxy classes in this StackOverflow answer.

It's a pretty simple pattern - create a class whose constructor parameters are the name of the class you want to make and any options you want to pass to that classe's constructor. Then, in the ProxyClass constructor block you just use the return statement to construct your new class.

Here, look:

class ProxyGraphic {
    constructor(className, options) {
        const graphicClasses = {
            Bug,
            LowerThird
        };

        return new graphicClasses[className](options);
    }
}

Now, instead of instantiating a new class directly you can just pass all of that to the proxy class and it will instantiate the correct kind of graphic for you (as long as you have the class referenced in the graphicClasses object. This can be really helpful when you want to create different kinds of classes depending on what users are selecting.

Here's everything together:

class Bug extends Graphic {
    type = 'bug';
    position = [1,1];
    entranceAnimation = {type: 'fly', direction: 'left', duration: 500, delay: 500}
    exitAnimation = {type: 'fly', direction: 'left', duration: 500, delay: 0}

    constructor(options) {
        super(options);

        this.content = options.content;
    }
}

class LowerThird extends Graphic {
    position = [3,1];
    entranceAnimation = {type: 'scale', direction: 'left', duration: 700, delay: 0};
    exitAnimation = {type: 'scale', direction: 'left', duration: 700, delay: 0};

    constructor(options) {
        super(options);

        this.subjects = options.subjects;
    }
}

class ProxyGraphic {
    constructor(className, options) {
        const graphicClasses = {
            Bug,
            LowerThird
        };

        return new graphicClasses[className](options);
    }
}

new ProxyGraphic('Bug', {content: 'LIVE'});

Returns:

Bug {
  _id: 1602690769341,
  position: [ 1, 1 ],
  autoplay: false,
  entranceAnimation: { type: 'fly', direction: 'left', duration: 500, delay: 500 },
  exitanimation: { type: 'fade', direction: 'none', duration: 500, delay: 0 },
  isPlaying: false,
  showName: undefined,
  scene: undefined,
  type: 'bug',
  exitAnimation: { type: 'fly', direction: 'left', duration: 500, delay: 0 },
  content: 'LIVE'
}

Okay, fair enough. But the whole point is to allow for greater flexibility in our programs by passing in whatever dynamic content we want. Let's simulate that by creating a couple of variables that we'll pretend are hooked up to some input fields on our page:

let userSelectedGraphic = 'LowerThird';
let userInputOptions = {subjects: [{title: 'Billy Batson', info: 'Average Kid'}, {title: 'Clark Kent', info: 'Mild Mannered Reporter'}]};

new ProxyGraphic(userSelectedGraphic, userInputOptions);

Returns:

LowerThird {
  _id: 1602691813627,
  position: [ 3, 1 ],
  autoplay: false,
  entranceAnimation: { type: 'scale', direction: 'left', duration: 700, delay: 0 },
  exitanimation: { type: 'fade', direction: 'none', duration: 500, delay: 0 },
  isPlaying: false,
  showName: undefined,
  scene: undefined,
  exitAnimation: { type: 'scale', direction: 'left', duration: 700, delay: 0 },
  subjects: [
    { title: 'Billy Batson', info: 'Average Kid' },
    { title: 'Clark Kent', info: 'Mild Mannered Reporter' }
  ]
}

That's it! I found this pretty useful and think it's a pattern that can make using classes a lot easier.

Why did Array.from()work?

Jeff Caldwell — Sat, 28 Dec 2019 23:57:32 +0000

I'm watching Shaun Pelling's Modern JavaScript course on Udemy (great way to get started, by the way) — and I just worked through an example that doesn't seem like it should have worked.

The challenge was to iterate through all of the elements within an article tag and add a class to each one:

<article id="example-article">
  <h2>Article Title</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  <div>Written by the Some Person</div>
</article>

Selecting querySelector returns an HTMLCollection, which can't be iterated through by using forEach(). Instead Shaun recommended using the Array.from method and iterating through that instead.

Cool! Easy enough:

const article = document.querySelector('#example-article');

const articleContents = article.children;

let copiedContents = Array.from(articleContents);

copiedContents.forEach(child => {
    child.classList.add('article-element');
});

And that's it. The DOM was updated with the new classes. Here's my question:

I thought Array.from() made a new array from the information in the HTMLCollection. I thought for sure that I was going to have to do something like article.innerHTML = [...copiedContents] or something, but I didn't have to copy the new array back into the article element at all. In fact when I console.log(article.children); I get:

HTMLCollection(5)

0: <h2 class="article-element">
1: <p class="article-element">
2: <p class="article-element">
3: <p class="article-element">
4: <div class="article-element">

length: 5

How?

Rendering nested objects in Svelte

Jeff Caldwell — Sat, 30 Nov 2019 01:25:26 +0000

Hi.

Total beginner here.

I've been re-learning some basic web development over the past few weeks and, along with vanilla JS, I've been working on a project in Svelte. One of the stumbling blocks for me was iterating through nested objects — actually, objects inside arrays ... inside objects ... inside arrays.

This may have been completely obvious to most people working with JavaScript or Svelte but, as a newbie, the way Svelte makes iterating through nested objects so easy came as a revelation.

Let's pretend we have an array of Real Jabronis in our code, those Jabronis carry with them an array of Lame Moves.

const realJabronis = [
        {
            name: 'Soda Popinski',
            age: 43,
            height: '6\'5"',
            lameMoves: [
                {
                    name: 'Triple Trotting Jab',
                    power: 0.5,
                    delay: 0.3
                },
                {
                    name: 'Just an Uppercut',
                    power: 0.9,
                    delay: 0.6
                }
            ]
        },
        {
            name: 'Kin Corn Karn',
            age: 35,
            height: '5\'11"',
            lameMoves: [
                {
                    name: 'Mongolian Chop',
                    power: 0.5,
                    delay: 0.4
                },
                {
                    name: 'Karate Kick',
                    power: 0.9,
                    delay: 0.6
                }
            ]
        }
    ];

Now let's pretend we're training an up-and-coming fighter and they need a list of the Lame Moves they need to train for if they want to fight these Real Jabronis. Svelte makes this stupid easy:

{#each realJabronis as realJabroni}
    <h1>{realJabroni.name}</h1>
    <h2>Lame Moves to Train For</h2>
    {#each realJabroni.lameMoves as lameMove}
        <h3>Move Name: {lameMove.name}</h3>
        <p><strong>Power: {lameMove.power}</strong></p>
        <p><strong>Delay: {lameMove.delay}</strong></p>
    {/each}
{/each}

And you basically get exactly what you need.

You can also, if you want to use components in these iterations (and you know you do,) pass each of these iteration levels into your component through props:

{#each realJabronis as realJabroni}
    <RealJabroni name={realJabroni.name} lameMoves={realJabroni.lameMoves} />
{/each}

And, of course, export let lameMoves = []; from inside RealJabronis.svelte will give you a nice array to work with.

What tips do you have for iterating through nested objects and arrays in Vanilla JS?