OmiJS: un Web Framework alternativo

Link copiato negli appunti

OmiJS è un nuovo Web Framework, scritto in Javascript, dal peso di 4kb, che unisce JSX, Web Components, Proxy, Store e Path Updating. In questo articolo analizzeremo alcune delle sue promettenti caratteristiche.

Come anticipato, la versione gzippata pesa solamente 4 kb, rendendo OmiJS un framework molto leggero che:

offre un supporto per TypeScript;
possiede unData-binding reattivo;
integra una base scritta in Shadow DOM;
è debuggabile via Omi DevTools Extension;
è conferme agli standard Web;
unisce i Web Components e JSX in un unico framework;
collabora con mobx via omi-mobx (senza richiamare this.update());
offre ai Web Components la possibilità di presentarsi come data-driven view, (UI = fn(data));
utilizza il Path Updating;
dice addio al sistema this.update utilizzando lo Store;
combina lo Shadow DOM con il Virtual DOM, utilizzandoli entrambi in maniera reale per produrre aggiornamenti nelle view in maniera accurata e veloce.

Nella pagina ufficiale del progetto possiamo trovare un'ottima documentazione, snippet e demo funzionanti che permettono di vedere le dinamiche prodotte dal framework. L'installazione può essere effettuata senza alcun building tool, in pochi minuti.

Vediamo ad esempio come produrre un template in cui viene generato un elemento "like-button", che, venendo cliccato, produrrà un evento corrispondente::

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Add Omi in One Minute</title>
</head>
<body>
  <script src="https://unpkg.com/omi"></script>
  <script>
    const { WeElement, h, render, define } = Omi
    class LikeButton extends WeElement {
      install() {
        this.data = { liked: false }
      }
      render() {
        if (this.data.liked) {
          return 'You liked this.'
        }
        return h(
          'button',
          {
            onClick: () => {
              this.data.liked = true
              this.update()
            }
          },
          'Like'
        )
      }
    }
    define('like-button', LikeButton)
    render(h('like-button'), 'body')
  </script>
</body>
</html>

In alternativa al sistema Store, con OmiJS è possibile utilizzare il sistema "omi-mobx" per produrre views (si utilizza la sintassi comprensiva delle keywords class ed extends):

import { tag, WeElement } from "omi";
import { observe } from "omi-mobx";
@observe
@tag("my-app")
class MyApp extends WeElement {
	install() {
		this.data.name = "omi";
	}
	onClick = () => {
		this.data.name = "Omi V4.0";
	};
	render(props, data) {
		return (
			<div onClick={this.onClick}>
				<h1>Welcome to {data.name}</h1>
			</div>
		);
	}
}

Da notare anche la possibilità di usare, per scopi di debugging e management della User Interface, l'applicazione dedicata chiamata Omi DevTools, che non necessita di configurazione e può essere utilizzata da subito. La versione 4.0 di OmiJS funziona correttamente nelle ultime due versioni di tutti i maggiori browser, dunque con Safari 10+, Internet Explorer 11+, Google Chrome, Mozilla Firefox ed Edge.

Via OmiJS

OmiJS: un Web Framework alternativo

Ti consigliamo anche