Kategorien
Aktuell Allgemeines HTML Stuff

Should I use a framework or library?

At my current employer we do all kind of Web Applications. We call it Experience Technology. These customer user experiences have different needs. Sometimes we do static content deliverables like temporary marketing campaign pages, or knowledge bases that never get touched again. More often we do enterprise shopping experiences, catalogue maintenance, and other e-commerce platforms.

Asking someone of my team how to build their next customer user experience I get named: React, VUE, Svelte or at last, Angular. Normally no one tells me yet: Let’s do it native, let’s use Web Components.

Do I know why?

Maybe

Why the frameworks are so common and preferred is having some reasons:

  • They offer a community
  • Searching for an issue or supporting library for sure returns an Stackoverflow entry or an NPM library
  • There is great support by someone that has „already done this“
  • For Business: It is good to have something to sell that everyone knows

A quick poll

Doing a quick poll with our experience technologists hardens the opinion.

Showing React 58%, Angular 3%, VUE 15%, Native Web Components 7%. Other 13%

Observing the obvious

Using frameworks and libraries for everything, causes problems that could be prevented. Average weight of a page is increasing. Complexity of generated code too. Views of common frameworks and libraries are often ridiculous complicated and deep nested and adding libraries and grid systems is done with a click. Importing without seeing the direct deeper effect. On top of that, Designers create complex animations and placeholders and forget that we still have low-end devices to support and not an ideal-world fast internet. Accessibility and search, like find-ability is getting worse. When useless containers are nested and semantics are getting lost.

On top of all, GDPR compliance is bad to achieve as of often third parties are used in a way that makes it hard to know where your customers details are getting shared.

This directly leads me to the this ask: Do we at all need to use a framework or library? Can’t we use Web components?

Webcomponents.org tells a clear use case, but why does still no one considers it first place to use it as base in their projects?

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.
Web components are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behaviour.

Webcomponents.org

Would there be any advantage when using them instead of a framework? Long-term for sure. Imagine a situation where Facebook stops support for React, or Google for Angular. Sooner or later libraries might get outdated. The community for sure support it for some years, but it can stop. There is no guarantee that it works long. There are also new Libraries popping out every day.

As we started writing decoupled user experiences, using micro-services and micro-frontends, we forgot to enable us to create long lasting frontend code, that is maintainable. Instead of using native functionalities, write proper markup and getting accessible and search engine friendly.

We now create a dependency to a framework that is maybe out-dating soon. Any reason to do so?

Not really!

Frameworks and libraries should help us organizing and writing our code and deliverables, but not overtaking our thinking and tooling. It is not reasonable that we deliver whole applications to clients browsers, when the contents never or only every view months change. We should instead build more meaningful smaller applications. We even need to render server side, using JavaScript.

A quick excursion on what Web Components are

Using Web components would allow us to get back to standards, using browser supported simple tooling.

So why should you consider Web components as complement for frameworks and libraries?

  • They are already a standard!
  • They work cross browser (Can I use it?)
  • They are simple and stand-alone
  • They are already used
  • They are future proof!

The details

Web components are the wrapper name for a set of techniques that create browser rendered interfaces. They are created through custom elements, shadow DOM, HTML templates and HTML modules. The latter is yet not widely adopted by browsers.

Custom Element

Setup a JavaScript file that contains the code for your custom element.

class MyCustomElement extends HTMLElement {    
  connectedCallback() {
    this.innerHTML = `<p>Some Text</p>`;
  }
}
window.customElements.define('my-custom-element',  MyCustomElement)

You need a DOM node that can initialise it.

<my-custom-element></my-custom-element>

Shadow DOM

With your custom element you can add coloured text in the context of other text paragraphs. You can capsule your styles that only belonging to the needed node.

const shadowRoot = document.getElementById('fetched').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>
p {
  border: 1px solid red;
  padding: 5px;
}
</style>
<p id="paragraph">Paragraph using <slot></slot></p>`;

Create some HTML to connect your code with it.

<span id="fetched">Slot</span>
<p id="paragraph">Normal Text</p>

Virtual DOM like shown below will be generated.

<body>
  <span id="fetched">    
    <#shadow-root>
      <style>
      p {
        border: 1px solid red;
        padding: 5px;
      }
      </style>
      <p id="paragraph">Paragraph using Slot</p>
    </#shadow-root>
  </span>
  <p id="paragraph">Normal Text</p>
</body>

Use HTML Templates

Stay DRY. Use HTML templates. Look at the the above example. If you want to render more paragraphs, you can repeat your <p> or just use a <template>. It is obvious what is wet and what is dry.

You can use them together with custom elements and shadow root, or alone.

<template id="template">
  <p></p>
</template>
<section id="paragraphs"></section>

How to render a HTML template.

const paragraphs = document.getElementById('template');
const text = [
  { node: 'Text 1' },
  { node: 'Text 2' },
  { node: 'Text 3' }
];
text.forEach(text => {
  const domNode = document.importNode(paragraphs.content, true);
  domNode.querySelector('p').innerHTML = text.node;
  document.getElementById('paragraphs').appendChild(domNode);
});

Did I missed HTML Modules?

Nope. But they are currently considered. So let’s see.

What else to consider

Take also into account that all is maintained in a component library. Handled in a DSM provided by InVision, Figma, or Design Kits like Sketch. We need to ensure to reuse our code and Styles. Design Tokens help here. Amazon has Style Dictionary, but there are others. And ideally, have a direct connect to your repository. (More would be subject of a full own post)

But my client has IE11 as standard browser!

Ask them why! Seriously!

If they still insist, and maybe even have a dated soon to be replaced Edge: there are Polyfills available, they render the components as HTML for you.

Any other input?

More and more Frameworks and libraries arise that help generating your applications with Web components. They offer build in test ability, design libraries, pattern libraries and more. There are well established ones like Polymer or Stencil. You can find more on the web component page list. So if you do not want to do it manually. Use provided tools. 

What to do

There is no golden hammer that makes all your problems a nail. But you should consider re-usability, need of the current implementation, and how long it will exists. Then it can help you making a decision.

Static rendering for interims campaign pages, knowledge bases, and so on can improve SEO, size, and customer experience. Full blown SPA with a checkout or profile management, and a healthy mixture for catalogue can do their part on this.

But the base of all should be a Web component. Just do it.

Resources mentioned and used

Fun fact

Yes, you can also make Web components complicated.

Kategorien
Allgemeines

Sag hallo zur Bangle.js!

Mannomann, endlich wieder eine JavaScript unterstützende Smartwatch. Noch dazu zu einem unschlagbaren Preis. Ich habe gleich das kleinste Paket unterstützt. Mal sehen ob sie im Frühjahr geliefert wird. Nachdem ich die Pebble geliebt habe, und ich immer noch eine Pebble 2 trage, bin ich echt enthusiastisch!

Schaut euch die Bangle.js an!

Kategorien
Allgemeines

Powerwatch 2 verzögert sich

Spannend war es schon immer Produkte zu unterstützen indem man in die Entwicklung investiert. Dass viele dies als Bestellung eines Produktes verstehen, macht es schwer die richtigen Kommentare aus der Masse der „wann liefert ihr endlich“ Kommentare zu filtern.

Klar würde ich mich freuen, wenn die Macher bei Indiegogo im Juli geliefert hätten. Aber hey, jetzt wird es halt ein Weihnachtsgeschenk. :-)

Wer hat noch die Smartwatch powered by you. Matrix Powerwatch 2 gebackt und wartet?

Kategorien
Allgemeines

Schloss Hogwarts™ 71043 done

Was ein Spaß. Bisher habe ich immer nur Lego Technics gebaut. Als jetzt das Hogwarts Schloss von Lego angekündigt wurde, musste ich zuschlagen. Hat wirklich viel Freude bereitet. Den letzten Beutel mit der Nummer 37 haben wir uns eine Woche aufbewahrt. Sonst wären wir an einem Wochenende fertig gewesen. ;o)

Kategorien
Allgemeines

Privatsphäre und auch noch Geld dafür?

Interessant, der Brave Browser macht etwas was die Anderen nicht tun. Er blockt Werbung einfach immer. Man kann sie frei schalten, oder auch einfach nur „saubere“ Werbung zulassen. Die Idee ist so einfach wie genial. Wo es etwas komplizierter wird ist, wenn man dann selbst Geld verdienen möchte, oder vielleicht den besuchten Seiten etwas von den BAT abgeben möchte. Man braucht ein Wallet bei einer Bank, mit der man den BAT auslösen oder befüllen kann. Das alleine gestaltet sich schon durch die Sicherheitsprozesse sehr aufwändig.

Für das Mobiltelefon gibt es die Lösung noch gar nicht. Aber dort hat man mit dem Browser auch den meisten Gewinn, da die Bandbreite vernichtende Werbung halt weg ist.

In Zukunft wird der BAT auf Devicen, Services und Dinestleistungen bereit stehen. D.h. damit wird so ziemlich alles möglich. Das gemietete Auto kennt dein Lieblingsrestaurant, dein Telefon weiß, wenn du gerade n einem Laden ein Schnäppchen bekommen kannst und die Echos werden dir nie mehr etwas unpassendes vorschlagen.

Schöne neue Welt? Ja, klar, aber nur wenn es mit dem BAT klappt ,)

PS: Der link oben ist ein Link der meinem BAT ein paar € gut schreibt, wenn ihr den Brave Browser installiert und längere Zeit nutzt und damit kann ich dann andere Publisher unterstützen.

Kategorien
Allgemeines

Brave Browser

Ich als Verfechter des Firefox werde langsam aber sicher schwach. Wenn man sich ein wenig mit Blockchain und der Privatheit dieser auseinandergesetzt hat, dann kann man den Brave Browser nur toll finden. Der Basic Attention Token sorgt dafür dass der Nutzer sich sicher sein kann nicht persönlich erkannt zu werden, aber dennoch sammelt man über die Nutzungszeit Attention, so dass die Werbung immer zugeschnittener wird. Man kann z.B. Webseiten unterstützen, oder auch einfach nur ohne Werbung browsen. Man kann sogar damit BAT verdienen, wenn man sich auf bestimmten Seiten Werbung anzeigen lässt. Alles noch in den Kinderschuhen. Aber irgendwie so einfach, dass selbst ich jetzt dabei bin.

Der Link oben ist ein Unterstützerlink. Ihr müsst nicht unterstützen, man kann auch einfach nur den Browser installieren und ohne zu unterstützen benutzen.

Kategorien
E-Mails Gedanken

Bezahlte Artikel bei Polente.net

Liebe Artikeldrücker, gerne dürft ihr hier einen Artikel unterbringen. Ihr müsst dazu nur 35000€ überweisen und bekommt dafür die Domain polente.net plus den gesamten Weblog überschrieben.
Wenn das Angebot nichts für euch ist, schreibt mich einfach nicht mehr an. OK? Eure E-Mails sind seit 17 Jahren nicht besser geworden. Aus Gründen.

Kategorien
Fundstücke

Fritz!Box Smart Home mit Alexa steuern

Es gibt einen Alexa Skills der es echt in sich hat. Mit dem inoffiziellen AVM Alexa Skill kann man jetzt seine AVM Smart Home Geräte über die Alexa Echos steuern. Herrlich. Wieso schafft das AVM alleine nicht, was ein Hobby Bastler an ein paar Wochenenden macht?

Durch den Zugriff über den auf Smart Home beschränkten Nutzer und die Brücke über die Cloud erscheint mir das auch annehmbar sicher.
Link zum Service unten. Den Skills auf der Amazon Alexa Skills Seite mit „AVM FRITZ!Box Integration (inoffiziell)“ suchen.

Update: der Bastler hat aufgegeben und es gibt einen neuen Skill. Der Alte funktioniert aber noch eine Weile. Habe den neuen verlinkt.

Kategorien
Allgemeines

42055 – Lego Schaufelradbagger – done

Ich wartete seit Jahren auf einen Schaufelradbagger. Er war da und ich schlug zu. Knapp 4000 Teile und knapp 15 Stunden später bin ich fertig. Das Modell ist unglaublich groß, bewegt sich super realistisch und macht wahnsinnig Spaß. Die Größe ist aber irgendwie grenzwertig. Ich glaube alles mehr würde ich mir nicht mehr kaufen. Die Bänder bewegen sich alle. Die Schaufel, die Ketten und der Drehkranz werden über den mitglieferten großen Motor angetrieben. Insgesamt sind es 8 Schritte mit weit über 30 Beuteln. Mit über 550 Seiten ist die Bauanleitung eher ein Buch. Bilder des Aufbaus nach dem Umbruch.

Kategorien
Allgemeines

42042 – Lego Seilbagger – done

Ich muss es zugeben, der Seilbagger steht schon seit Weihnachten fertig gebaut rum. Ich hatte es nur noch nicht geschafft die Bilder hoch zu laden.

Ich hatte sogar mal die Schritte dokumentiert.

An sich ein tolles Modell. Natürlich hat es Spielwert, aber da man nicht wirklich Lasten heben kann, ist es eher zum Angucken da, wie so viele andere. Fertig war ich an zwei Abenden in ca. 4 Stunden. Technisch ausgereift und alles passt. Es gibt auch keine hakeligen Stellen. Jetzt heißt es warten auf den „Bucket Wheel Excavator“ – Schaufelradbagger (42055).

Kategorien
Allgemeines

42043 – Mercedes Arocs – done

Der neue Mercedes-Benz Arocs 3245 ist das größte Auto welches ich je gebaut habe. Automatische Teleskopstützen, pneumatische Gelenke des Baggerarms und Schaufel, elektrisch Drehender Turm, Kippmulde mit Motor und kippbares Fahrerhaus. Wirklich alles durchdacht.

Mercedes Arocs 3245 - Lego Technic 42043 - Ansicht nach Tüte 1 und 2
Schritt/Tüte 1 und 2

Ich fand beim Bau ein paar Fehler in dem Anleitungsbuch. U.a. wurde einmal ein Schlauch falsch beschrieben und ein anderes Mal wurde ein Bild einer Steckverbindung falsch wieder gegeben. Insgesamt aber topp!

Lego Technic 42042 Mercedes-Benz Arocs
Mercedes-Benz Actros

Drei volle Abende habe ich dran gesessen und meine Tochter hatte auch viel Spaß