En règle générale, une application full-stack est composée d'un frontend et d'un backend s'exécutant dans deux environnements différents qui sont connectés via une API web (REST, GraphQL, etc.).

Séparer le frontend et le backend est une bonne chose, mais le problème est que la création d'une API Web conduit généralement à beaucoup de dispersion du code, de duplication des connaissances, de passe-partout et de complexité accidentelle, remarque Manuel Vial, le concepteur de Layr, qui a créé ce framework pour supprimer le besoin de créer une API Web et réunir le frontend et le backend de manière à les expérimenter comme une seule entité.

Avec Layr, si le frontend et le backend sont bien sûr physiquement séparés, puisqu'ils fonctionnent dans des environnements différents, ils sont réunis logiquement.

Cela fonctionne ainsi :

1. Le backend est composé d'une ou plusieurs classes dont certains de leurs attributs et méthodes sont explicitement exposés au frontend.
2. Le frontend génère des proxies vers les classes backend et peut utiliser ces proxies comme s'il s'agissait de classes JavaScript régulières.

Layr est un framework orienté objet. Sous le capot Layr s'appuie sur un mécanisme RPC. On peut comprendre Layr comme quelque chose à la Corba, à la Java RMI ou à la .NET CWF.

Du côté frontend, Layr offre des capacités de routage et une observabilité des objets de sorte que dans la plupart des cas, il n'est pas nécessaire d'ajouter un routeur externe ou un gestionnaire d'état.

Voici un exemple de mise en oeuvre de Layr proposé par Manuel Vila. Cet exemple implémente un simple compteur. Voici tout d'abord le code côté backend :

// backend.js

import {
  Component,
  primaryIdentifier,
  attribute,
  method,
  expose
} from '@layr/component';

import {ComponentHTTPServer} from '@layr/component-http-server';

class Counter extends Component {
  // We need a primary identifier so a Counter instance
  // can be transported between the frontend and the backend
  // while keeping it's identity
  @expose({get: true, set: true}) @primaryIdentifier() id;

  // The counter value is exposed to the frontend
  @expose({get: true, set: true}) @attribute() value = 0;

  // And the "business logic" is exposed as well
  @expose({call: true}) @method() increment() {
    this.value++;
  }
}

// Lastly, we serve the Counter class through an HTTP server
const server = new ComponentHTTPServer(Counter, {port: 3210});
server.start();

Ce code instancie une classe 'Compteur' et l'expose sur le réseau.

Voici maintenant le code côté frontend :

// frontend.js

import {ComponentHTTPClient} from '@layr/component-http-client';

(async () => {
  // We create a client to connect to the backend server
  const client = new ComponentHTTPClient('http://localhost:3210');

  // We get a proxy to the Counter backend class
  const Counter = await client.getComponent();

  // Lastly, we consume the Counter
  const counter = new Counter();
  console.log(counter.value); // => 0
  await counter.increment();
  console.log(counter.value); // => 1
  await counter.increment();
  console.log(counter.value); // => 2
})();

On peut remarquer dans ce code que la méthode counter.increment() n'existe pas du côté frontend. La méthode n'existe que du côté backend.

Layr est un logiciel libre sous licence MIT disponible sur GitHub.