From 055e0d5a70fe2b2edd6e596c261193f64054df6d Mon Sep 17 00:00:00 2001
From: William Killerud
Date: Fri, 24 May 2024 15:58:10 +0200
Subject: [PATCH 1/2] docs: the bridge, browser, and store that's WIP
As part of improving hybrid applications using Podium
---
docs/api/bridge.md | 115 +++++++++++++++++
docs/api/browser.md | 15 ++-
docs/api/store.md | 158 +++++++++++++++++++++++
docs/guides/assets.md | 9 ++
docs/guides/client-side-communication.md | 110 ++++++++++++++--
docs/guides/hybrid.md | 111 ++++++++++++++++
sidebars.js | 1 +
static/img/client-side-messaging.png | Bin 0 -> 249490 bytes
8 files changed, 501 insertions(+), 18 deletions(-)
create mode 100644 docs/api/bridge.md
create mode 100644 docs/api/store.md
create mode 100644 docs/guides/hybrid.md
create mode 100644 static/img/client-side-messaging.png
diff --git a/docs/api/bridge.md b/docs/api/bridge.md
new file mode 100644
index 0000000..228f2d9
--- /dev/null
+++ b/docs/api/bridge.md
@@ -0,0 +1,115 @@
+---
+title: "@podium/bridge"
+---
+
+This package is a bridge designed to pass [JSON-RPC 2.0](https://www.jsonrpc.org/specification) messages between a web application and a native web view.
+
+## Usage
+
+To install:
+
+```sh
+npm install @podium/bridge
+```
+
+Import the bridge in your client-side bundle:
+
+```js
+import "@podium/bridge";
+```
+
+You should probably send messages via [@podium/browser]. That said, the bridge is available on `window['@podium'].bridge`.
+
+```js
+/** @type {import("@podium/bridge").PodiumBridge} */
+const bridge = window["@podium"].bridge;
+
+// You can listen for incoming messages, which can either be RpcRequest or RpcResponse
+bridge.on("global/authentication", (message) => {
+ const request =
+ /** @type {import("@podium/bridge").RpcRequest<{ token?: string }>} */ (
+ message
+ );
+
+ if (typeof request.token === "string") {
+ // logged in
+ } else {
+ // logged out
+ }
+});
+
+// You can trigger notifications (one-way messages)
+bridge.notification({
+ method: "global/authentication",
+ params: { token: null },
+});
+
+// And you can call methods and await the response
+/** @type {import("@podium/bridge").RpcResponse<{ c: string }>} */
+const response = await bridge.call({
+ method: "document/native-feature",
+ params: { a: "foo", b: "bar" },
+});
+```
+
+## API
+
+### `bridge.on`
+
+Add a listener for incoming messages for a given method name.
+
+```js
+import "@podium/bridge";
+
+/** @type {import("@podium/bridge").PodiumBridge} */
+const bridge = window["@podium"].bridge;
+
+bridge.on("global/authentication", (message) => {
+ const request =
+ /** @type {import("@podium/bridge").RpcRequest<{ token?: string }>} */ (
+ message
+ );
+
+ if (typeof request.token === "string") {
+ // logged in
+ } else {
+ // logged out
+ }
+});
+```
+
+### `bridge.notification`
+
+Send a [notification](https://www.jsonrpc.org/specification#notification) (one-way message).
+
+```js
+import "@podium/bridge";
+
+/** @type {import("@podium/bridge").PodiumBridge} */
+const bridge = window["@podium"].bridge;
+
+bridge.notification({
+ method: "global/authentication",
+ params: { token: null },
+});
+```
+
+### `bridge.call`
+
+Send a [request](https://www.jsonrpc.org/specification#request_object) and await a [response](https://www.jsonrpc.org/specification#response_object).
+
+```js
+import "@podium/bridge";
+
+/** @type {import("@podium/bridge").PodiumBridge} */
+const bridge = window["@podium"].bridge;
+
+/** @type {import("@podium/bridge").RpcResponse<{ c: string }>} */
+const response = await bridge.call({
+ method: "document/native-feature",
+ params: { a: "foo", b: "bar" },
+});
+```
+
+[@podium/browser]: /docs/api/browser
+[@podium/store]: /docs/api/store
diff --git a/docs/api/browser.md b/docs/api/browser.md
index 21fca41..7cdddc4 100644
--- a/docs/api/browser.md
+++ b/docs/api/browser.md
@@ -4,6 +4,9 @@ title: "@podium/browser"
---
The `@podium/browser` module is a client-side library designed to simplify communication between a podlet and the layout, and between podlets.
+The module also supports applications running in a [hybrid application](/docs/guides/hybrid#client-side-communcication) when used with [@podium/bridge](/docs/api/bridge).
+
+For an API designed as reactive state, see [@podium/store](/docs/api/store).
## Installation
@@ -55,11 +58,11 @@ Publish an event for a channel and topic combination. Returns the event object p
This method takes the following arguments:
-| option | default | type | required | details |
-| ------- | ------- | -------- | -------- | ------------------------- |
-| channel | `null` | `string` | `true` | Name of the channel |
-| topic | `null` | `string` | `true` | Name of the topic |
-| payload | `null` | any | `false` | The payload for the event |
+| option | default | type | required | details |
+| ------- | ------- | -------- | -------- | ------------------------------------------------------------------------------- |
+| channel | `null` | `string` | `true` | Name of the channel. Podium reserves `system` and `view` for built-in features. |
+| topic | `null` | `string` | `true` | Name of the topic. |
+| payload | `null` | any | `false` | The payload for the event. |
Examples:
@@ -77,7 +80,7 @@ This method takes the following arguments:
| option | default | type | required | details |
| -------- | ------- | ---------- | -------- | --------------------------------------------------------- |
-| channel | `null` | `string` | `true` | Name of the channel |
+| channel | `null` | `string` | `true` | Name of the channel. |
| topic | `null` | `string` | `true` | Name of the topic |
| callback | `null` | `Function` | `true` | Callback function to be invoked. Receives an event object |
diff --git a/docs/api/store.md b/docs/api/store.md
new file mode 100644
index 0000000..65336b1
--- /dev/null
+++ b/docs/api/store.md
@@ -0,0 +1,158 @@
+---
+title: "@podium/store"
+---
+
+This is a client-side library that provides a reactive data store using [nanostores](https://github.com/stores/stores) on top of [@podium/browser](https://github.com/podium-lib/browser)'s `MessageBus`. It includes some ready-made stores and helpers for you to make reactive stores for your own events.
+
+By using reactive state backed by `MessageBus` you can seamlessly share state between different parts of a Podium application. If a podlet changes the value of shared state, all other podlets using that value can update.
+
+
+
+## Usage
+
+To install:
+
+```sh
+npm install @podium/store
+```
+
+Use an [included store](#included-stores) in your client-side application:
+
+```js
+// store/user.js
+import { $authentication } from "@podium/store";
+import { computed } from "nanostores";
+
+// You can optionally make a computed value based on the included store
+export const $loggedIn = computed($authentication, (authentication) =>
+ Boolean(authentication.token)
+);
+
+// Colocating actions with the store makes it easier to
+// see what can trigger updates.
+export function logIn(token) {
+ $authentication.set({ token });
+}
+
+export function logOut() {
+ $authentication.set({ token: null });
+}
+```
+
+Use the reactive store to do minimal updates of your UI when state changes. Nanostores supports multiple view frameworks:
+
+- [React and Preact](https://github.com/stores/stores?tab=readme-ov-file#react--preact)
+- [Lit](https://github.com/stores/stores?tab=readme-ov-file#lit)
+- [Vue](https://github.com/stores/stores?tab=readme-ov-file#vue)
+- [Vanilla JS](https://github.com/stores/stores?tab=readme-ov-file#vanilla-js)
+
+This example shows a React component:
+
+```js
+// components/user.jsx
+import { useStore } from "@nanostores/react";
+import { $loggedIn } from "../stores/user.js";
+
+export const User = () => {
+ const loggedIn = useStore($loggedIn);
+ return
{loggedIn ? "Welcome!" : "Please log in"}
;
+};
+```
+
+This is the same component in Lit:
+
+```js
+// components/user.js
+import { StoreController } from "@nanostores/lit";
+import { $loggedIn } from "../stores/user.js";
+
+class User extends LitElement {
+ loggedInController = new StoreController(this, $loggedIn);
+
+ render() {
+ return html`
`;
+ }
+}
+
+customElements.define("a-user", User);
+```
+
+### Create your own reactive state
+
+By using the [included helper](#mapchannel-topic-initialvalue) you can make your reactive state sync between the different parts of a Podium application.
+
+## API
+
+### `$authentication`
+
+Type: [`map`](https://github.com/stores/stores?tab=readme-ov-file#maps)
+
+```js
+import { $authentication } from "@podium/store";
+```
+
+### `atom(channel, topic, initialValue)`
+
+Create your own [`atom`](https://github.com/nanostores/nanostores?tab=readme-ov-file#atoms) that syncs between parts of a Podium application using the [MessageBus](https://github.com/podium-lib/browser).
+
+This method requires the following arguments:
+
+| option | type | details |
+| ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| channel | `string` | Name of the channel |
+| topic | `string` | Name of the topic |
+| payload | `object` | The initial value. Replaced if [`peek(channel, topic)`](https://github.com/podium-lib/browser?tab=readme-ov-file#peekchannel-topic) returns a value. |
+
+```js
+import { atom } from "@podium/store";
+
+const $reminders = atom("reminders", "list", []);
+```
+
+### `map(channel, topic, initialValue)`
+
+Create your own [`map`](https://github.com/nanostores/nanostores?tab=readme-ov-file#maps) that syncs between parts of a Podium application using the [MessageBus](https://github.com/podium-lib/browser).
+
+This method requires the following arguments:
+
+| option | type | details |
+| ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| channel | `string` | Name of the channel |
+| topic | `string` | Name of the topic |
+| payload | `object` | The initial value. Replaced if [`peek(channel, topic)`](https://github.com/podium-lib/browser?tab=readme-ov-file#peekchannel-topic) returns a value. |
+
+```js
+import { map } from "@podium/store";
+
+const $user = map("user", "profile", { displayName: "foobar" });
+```
+
+### `deepMap(channel, topic, initialValue)`
+
+Create your own [`deepMap`](https://github.com/nanostores/nanostores?tab=readme-ov-file#deep-maps) that syncs between parts of a Podium application using the [MessageBus](https://github.com/podium-lib/browser).
+
+This method requires the following arguments:
+
+| option | type | details |
+| ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| channel | `string` | Name of the channel |
+| topic | `string` | Name of the topic |
+| payload | `object` | The initial value. Replaced if [`peek(channel, topic)`](https://github.com/podium-lib/browser?tab=readme-ov-file#peekchannel-topic) returns a value. |
+
+```js
+import { deepMap, listenKeys } from "@podium/store";
+
+export const $profile = deepMap({
+ hobbies: [
+ {
+ name: "woodworking",
+ friends: [{ id: 123, name: "Ron Swanson" }],
+ },
+ ],
+ skills: [["Carpentry", "Sanding"], ["Varnishing"]],
+});
+
+listenKeys($profile, ["hobbies[0].friends[0].name", "skills[0][0]"]);
+```
diff --git a/docs/guides/assets.md b/docs/guides/assets.md
index 17ba3ae..7cd8166 100644
--- a/docs/guides/assets.md
+++ b/docs/guides/assets.md
@@ -124,3 +124,12 @@ Using the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_comp
With `podlet.css()` the end result is a `` tag in the HTML document's ``. If your podlet's content renders inside a shadow DOM that CSS won't be able to reach the podlet.
With a declarative shadow DOM you have to include your own `` to the CSS from inside the shadow DOM.
+
+### Islands architecture
+
+Podium works well with [islands architecture](https://jasonformat.com/islands-architecture/) where interactivity on the client is handled by small, isolated applications.
+
+Especially when building your layout:
+
+- Consider how JavaScript libraries you use handle external content (external in the sense that it is not generated by your library).
+- Be mindful of how much of the document your JavaScript library hydrates.
diff --git a/docs/guides/client-side-communication.md b/docs/guides/client-side-communication.md
index 9506293..db288e0 100644
--- a/docs/guides/client-side-communication.md
+++ b/docs/guides/client-side-communication.md
@@ -1,25 +1,111 @@
---
-title: Client-side communication in a Podium app
+title: Client-side communication
---
-Podium provides a client side library called [@podium/browser] that includes a [MessageBus](/docs/api/browser#messagebus). The message bus simplifies passing data between different podlets' client-side JavaScript.
+Podium's micro frontend architecture extends all the way to the browser. Each podlet can bring [client-side JavaScript applications](/docs/guides/assets) to add interactivity to the HTML, essentially an [islands architecture](https://jasonformat.com/islands-architecture/).
-## The use case
+Say `InputPodlet` contains an input field where a user can input a new reminder and `ListPodlet` contains a list of all reminders.
-If podlet A contains an input field where a user can input a new reminder and podlet B contains a list of all reminders.
+
-When a user inputs a new reminder in podlet A they would expect that the reminders list in podlet B is updated immediately with the new reminder.
+When a user inputs a new reminder in `InputPodlet` they would expect that the reminders list in `ListPodlet` is updated immediately with the new reminder. However, since they are two separate applications `InputPodlet` can't directly add entries to `ListPodlet`'s state.
-`MessageBus` provides a simple mechanism for a podlet to publish events or to subscribe to receive events, in the browser.
+## Podium client-side libraries
-In the example above:
+Podium offers client side libraries to help communication between different applications running in the browser:
-- Podlet B would subscribe to receive new reminder events.
-- Podlet A would publish a new reminder event.
-- Podlet B would update on receiving the new reminder event.
+- [@podium/browser](#podiumbrowser) includes a message bus and methods to publish and subscribe to messages.
+- [@podium/store](#podiumstore) offers a reactive state API backed by the message bus, letting you sync state with ease.
-## Getting Started
+The libraries are designed to make communication between podlets loosely coupled and resilient.
-See the documentation for [@podium/browser] to get started.
+### `@podium/browser`
+
+This library contains the message bus that is the backbone of client-side communication in Podium. Podlets (or the layout) publish and subscribe to messages on the bus for loosely coupled synchronization of state.
+
+:::tip
+
+[@podium/store](#podiumstore) offers an alternative API that uses this message bus under the hood. You can use whichever you prefer.
+
+:::
+
+In the example above, when `InputPodlet` accepts a new item it also publishes a message on the bus.
+
+```js
+// input-podlet.js
+import { MessageBus } from "@podium/browser";
+
+const messageBus = new MessageBus();
+
+messageBus.publish("reminders", "newReminder", {
+ title: "Buy milk",
+});
+```
+
+`ListPodlet` subscribes to the same `reminders` channel and `newReminder` topic that `InputPodlet` publishes to. When nes messages arrive, `ListPodlet` updates its internal state.
+
+```js
+// list-podlet.js
+import { MessageBus } from "@podium/browser";
+
+const messageBus = new MessageBus();
+
+const reminders = [];
+
+// ListPodlet listens for new reminders published on the message bus and updates its state
+messageBus.subscribe("reminders", "newReminder", (event) => {
+ const reminder = event.payload;
+ reminders.push(reminder);
+});
+```
+
+See [@podium/browser] for API documentation.
+
+### `@podium/store`
+
+This library adds a reactive state API using [nanostores]. It sets up publishing and subscribing for you behind the scenes, leaving you with a reactive variable you read from and write to that will stay in sync between applications.
+
+:::tip
+
+Using `@podium/store` you can trigger minimal UI updates using a [nanostores integration] for a given UI library.
+
+:::
+
+Keeping with our example, when `InputPodlet` accepts a new item updates a reactive `atom` holding the list of reminders.
+
+```js
+// input-podlet.js
+import { atom } from "@podium/store";
+
+/** @type {import("@podium/store").WritableAtom} */
+const $reminders = atom("reminders", "list", []);
+
+// Replace the existing value with a new list to trigger reactive updates
+$reminders.set([...$reminders.value, "Buy milk"]);
+```
+
+`ListPodlet` would set up the same `atom` and use either a [nanostores integration] with an existing UI library, or subscribe and handle changes manually.
+
+```js
+// list-podlet.js
+import { atom } from "@podium/store";
+
+/** @type {import("@podium/store").WritableAtom} */
+const $reminders = atom("reminders", "list", []);
+
+// Perhaps fetch stored reminders from an API,
+// or populate the state with data included in a server-side render
+$reminders.set(storedReminders);
+
+// Update the UI when the reminders list changes
+$reminders.subscribe((value) => {
+ console.log(value);
+});
+```
+
+See [@podium/store] and [nanostores] for API documentation.
[@podium/browser]: /docs/api/browser
+[@podium/store]: /docs/api/store
+[nanostores]: https://github.com/nanostores/nanostores
+[nanostores integration]: https://github.com/nanostores/nanostores?tab=readme-ov-file#integration
diff --git a/docs/guides/hybrid.md b/docs/guides/hybrid.md
new file mode 100644
index 0000000..a7ff0ad
--- /dev/null
+++ b/docs/guides/hybrid.md
@@ -0,0 +1,111 @@
+---
+title: Hybrid apps
+---
+
+Podium includes features for developers of hybrid applications, where parts of a (typically mobile) application are built using web technologies.
+
+- Specification of HTTP headers that are passed to podlets on [the context](/docs/guides/context).
+- Client-side library for sending [messages between web and native](#client-side-communcication).
+- Developer tools extension for browsers to simulate HTTP headers set by a native webview.
+
+## Initial request
+
+Layouts and podlets need to be able to adapt to requests from a hybrid web view. To support this, Podium specifies a set of HTTP headers that the web view includes in requests:
+
+### Hybrid HTTP headers
+
+| Header | Example | Description |
+| ------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------- |
+| `x-podium-app-id` | `com.yourcompany.app@1.2.3` | To identify clients in logs |
+| `x-podium-base-font-size` | `1rem` | To set base font size variable in CSS based on accessibility settings in the native host. |
+| `x-podium-device-type` | `hybrid-ios`, `hybrid-android` | To give hints to the server what should be included in the response. |
+| `Authorization` | `Bearer eyJhbGciOiJIU...` | Optional. Signifies a logged-in user. |
+
+#### Podium developer tools extension
+
+Get the extension to make it easier to set these HTTP headers when developing locally:
+
+- [Firefox](https://addons.mozilla.org/en-US/firefox/addon/podium-developer-tools/)
+- [Chromium](https://chromewebstore.google.com/detail/podium-development-extens/jdlcejoeifgnnnckhnhapbmgieajaipl) based browsers
+
+## Client-side communcication
+
+[@podium/bridge] is a module that sets up a JSON RPC bridge for communication between a native application and a web application running in a webview.
+[@podium/browser](/docs/guides/client-side-communication#podiumbrowser)'s message bus taps into this bridge to publish and subscribe to messages.
+
+You use the API from `@podium/browser` or [@podium/store](/docs/guides/client-side-communication#podiumstore),
+and messages seamlessly get sent across the bridge for you.
+
+```js
+// Include this once, preferably in your layout before loading applications,
+// and before importing `@podium/browser` and `@podium/store`.
+import "@podium/bridge";
+```
+
+See [@podium/bridge] for API documentation.
+
+### Message format
+
+When you use the bridge with `@podium/browser` and `@podium/store`, behind the scenes, `channel`, `topic` and `payload` are combined to form a valid [JSON RPC 2.0](https://www.jsonrpc.org/specification) message.
+Here's an example:
+
+```js
+import "@podium/bridge";
+import { MessageBus } from "@podium/browser";
+
+const messageBus = new MessageBus();
+
+messageBus.publish("system", "authentication", { token: null });
+```
+
+`"system"` and `"authentication"` are combined to `"system/authentication"`, and the `payload` argument is used as `params` in JSON RPC terms.
+
+```json
+{
+ "jsonrpc": "2.0",
+ "method": "system/authentication",
+ "params": { "token": null }
+}
+```
+
+The same goes for `@podium/store`:
+
+```js
+import "@podium/bridge";
+import { atom } from "@podium/store";
+
+const $auth = atom("system", "authentication", { token: null });
+```
+
+### Reserved message names
+
+Podium reserves these topics for built-in features:
+
+- `system`
+- `view`
+
+### Message contracts
+
+#### `system/authentication`
+
+Logged out:
+
+```json
+{
+ "jsonrpc": "2.0",
+ "method": "system/authentication",
+ "params": { "token": null }
+}
+```
+
+Logged in:
+
+```json
+{
+ "jsonrpc": "2.0",
+ "method": "system/authentication",
+ "params": { "token": "eyJhbGciOiJIU..." }
+}
+```
+
+[@podium/bridge]: /docs/api/bridge
diff --git a/sidebars.js b/sidebars.js
index 67ede71..1a034e5 100644
--- a/sidebars.js
+++ b/sidebars.js
@@ -39,6 +39,7 @@ const sidebars = {
{ type: "doc", id: "guides/redirects" },
{ type: "doc", id: "guides/layout-development" },
{ type: "doc", id: "guides/podlet-development" },
+ { type: "doc", id: "guides/hybrid" },
],
},
{
diff --git a/static/img/client-side-messaging.png b/static/img/client-side-messaging.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5ab21bb803073652f43c9517e4dd4b73ff702f6
GIT binary patch
literal 249490
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