0

I’ve been playing around with web components for a week or so and am trying to wrap everything up into something reusable.

I’m struggling to create an inheritance hierarchy using modules. The idea is/was to have

App extends HTMLElement
    Screen extends App
        Page extends Screen
            NestedElements extend Screen

Each module loads sub modules but it does not work how I was expecting.
Every file has to include the class I’m extending i.e

/* Intro page component */

import Screen from '../screen.js';
export default class Intro extends Screen

And every extend is creating a new instance of Screen, seems like a waste but I don’t know where the imports are scoped.

Just want to ask if I am going about this in the correct way, and possibly get some pointer on what to improve.

Here is an example of what I have so far.

http://pwaprojects.co.uk/lofi/

Thanks

ianmac
  • 39
  • 5
  • Please explain the thoughts behind your inheritance hierarchy. Are you familiar with OOP/OOD? What do *NestedElements* and *App* have in common? – connexo Aug 12 '20 at 23:15
  • Am somewhat familiar with OOP in PHP but the scope for imported js modules seems odd. The NestedElement inherits the HTMLElement and needs access to the app scripts. The thinking is App contains all the useful scripts loaders, event system and extends the HTMLElement. App loads the screen module which in turn creates the custom tag for the page and loads it's module. The page the loads fragments think of them as reusable UI element. – ianmac Aug 13 '20 at 00:44
  • You need to think in "B **is an** A"-terms when creating your classes. If B *is not* an A, then you're misusing inheritance to propagate functionality if you declare `B extends A`. Consider mixins instead. So **is** `Page` an `App`? It seems like what you are designing is the anti-pattern of *negative inheritance*. – connexo Aug 13 '20 at 01:09
  • Or in other terms, in your hierarchy, does `App` only offer functionality that is needed and used by all sub-classes extending it? Ask the same question for any class in your hierarchy tree, and their subclasses. If the answer at any point is "nO", you're doing OOP wrong. Educate yourself on OOD. https://en.wikipedia.org/wiki/Object-oriented_design https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming) – connexo Aug 13 '20 at 01:18
  • Sorry I haven’t explained this very well, yes every B is an A, App extends HTMLElement every class is a web component which inherits HTMLElement (need to define a web component) and common functionality from App. Thanks for the mixius and OOD link. – ianmac Aug 13 '20 at 06:36
  • Looked at your code. IMHO your focus is wrong. It is a lot of oldskool ES5 style coding. My advice: stick it all in one file, focus on learning ES2020. After that optimize your classes. Only when used in a team doing (very) regular updates do you need separate files for classes. And yes, if you extend, you need to import the reference, it basically only is a pointer. – Danny '365CSI' Engelman Aug 13 '20 at 07:06
  • Danny thanks for take the time to look at the code I really appreciate. Been using jquery for years and am trying to catch up. Just checked out the ES2020 and ES6 there is a ton of things I'm am doing that are handled natively now - looks like I can ditch a load of utils as fetch and import will handle a good chuck of that. – ianmac Aug 13 '20 at 08:33
  • And instead of ``fetch`` see ``async/await``. You can ditch the polyfills for ``matches`` and ``closest``. Learn array ``.map`` to replace ``forEach\push``. Use [``removeEventListener``](https://stackoverflow.com/questions/54921027/remove-event-listener-that-has-been-added-using-bindthis/54945857#54945857). Remove all ``self=this``. That will take you some hours, but your code will half in size.. at least. – Danny '365CSI' Engelman Aug 13 '20 at 09:35
  • Note. the bind stuff you do to create ``this.$`` is great for a lazy programmer and looks great minified; but it actually hurts the GZip download size (and thats the only size that counts). GZip (or Brotli) compresses repeating patterns; so the more repeating patterns (like ``document.querySelector``) you have the better. If you wrap that into a ``this.$`` **helper** function the GZip size (no repeating patterns anymore) (approx.) increases with the size of your helper function. – Danny '365CSI' Engelman Aug 13 '20 at 09:41

0 Answers0