<style>
.ui-content, .in-view {
background:#ddd;
font-family:courier;
}
.slides{
background:inherit;
padding-left:3rem;
color:#FFF;
}
.reveal ul {
list-style-type: none;
}
.slides h2{
color:inherit;
}
.ui-view-area code {
</style>
# What is a component?
Slides at: https://hackmd.io/@mricos/BkpDs1bpd
---
<style>
.slides {
border 2px solid green;
*/
body{
background:yellow;
}
</style>
## Summary
<div style="text-align:left;
margin-left:7rem;">
<div style="min-height:4rem;"></div>
A component is a data structure defined by system interfaces.
<div style="min-height:2rem;"></div>
A component is spec'd by design, engineering and data science teams.
</div>
---
### Components are data structures
<div style="min-height:2rem;"></div>
A component is a formal [**data structure**](https://en.wikipedia.org/wiki/Data_structure).
Data Record = Data
Data Structure = Data + Functions
It is defined by both its data and its [**interface**](https://en.wikipedia.org/wiki/Interface_(computing)).
---
## Elements of a component
<div style="min-height:4rem"></div>
```
Model stores component objects with:
component.type // Meter, App, Cli, etc
component.pomToHtml(pom) // incoming POM packet
component.domId // element to add to
component.render() // sets innerHtml or similar
```
---
#### Example data sent from server to client
<div style="min-height:4rem"></div>
```
{
id: 1710756950,
queryString: "signalMeter",
type: component.meter.signal.16bitSigned,
value: 32000
}
```
<div style="min-height:4rem"></div>
```
{
id: 1710756951,
queryString: "noiseMeter",
type: component.meter.random,
mean: 0.5,
var: .2,
}
```
---
#### PicoUiMgr
-- receives `POM` object
-- calls correct `pomToToHtml` based off type
-- renders via `pom.queryString`
---
### pomToHtml Functions
Defined at build time by the component.
Build process requires pomToHtmlfor each type
```
# Generated at build time, PicoUiMgr knows
# about all component types.
pomToHtmlFuns={
this=<current_pom>
meter.signal: (this) => `${meter.signal(pom)} bits`,
meter.noise: (this) => `${meter.noise(this.mean,this.var)}`
}
```
---
### PicoUiMgr
`handle(pom)` is called by client side event handlers (button clicks, etc) and [server sent event](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) handlers.
<div style="min-height:4rem"></div>
```
PicoUiMgr.handle(pom){
domId=pomToDomId(pom)
element=getElement(domId)
element.innerHtml=pomToHtmlFuns[pom.type](pom)
}
```
---
# pomToDom
<div style="min-height:4rem"></div>
### Upon receipt of every POM data packet:
<div style="min-height:4rem"></div>
### Extract Document Object Model (DOM) element ID from Pom
-- Simple way is to look for queryString as data
---
## pomToDom
<div style="min-height:4rem"></div>
- Using queryString takes up space and requires lookup every time.
<div style="min-height:4rem"></div>
- Better to encode DOM element ids into the POM id so DOM element can be directly referenced.
<div style="min-height:4rem"></div>
### In terms of Model, View Controller
- Encode `domId` (view) in `pomId` (model and control)
---
## Modulate domId into pomId
-- UI to Subscribe with `domId` at runtime
-- server modulates the domId into the `pomId`
-- See [Twitter Snowflake ID](https://en.wikipedia.org/wiki/Snowflake_ID) for more
---
## POM Object Summary
Pico Object Model (POM) is an object based data storage and retrieval scheme.
- id: Microsecond UNIX time stamp
- type: user defined for dispatch
- data: interpreted based off of type
---
### Three teams design a component.
- Data Scientists
- Ui Designers
- Devops engineering
---
<div style="margin-left:-10rem; font-size:smaller">
| element| Data Scientist |Ui Designer| Devops Engineer | |
| :-- | :--: | :--: | :--: | :--:
| type |No| **Yes** |No| design |
| pomToPom | **Yes** | No | Yes | <div style="font-size:.8em; line-height:.9em;"> pipeline api</div>
| pomToHtml|Yes | **Yes**| No | view api |
| parent |No |Yes |No | templates |
| children | No |Yes | No | slots |
| render/update |No | Yes | No | <div style="font-size:.8em; line-height:.9em;">view framework</div> |
</div>
---
## View
- Render means 'when' not 'what'
---
## WebComponents
Google and Mozilla are primary sources for docs:
- https://developer.mozilla.org/en-US/docs/Web/Web_Components
- https://developers.google.com/web/fundamentals/web-components/
---
### WebComponents Overview
- **Custom Elements:** APIs to define new HTML elements
- **Shadow DOM:** encapsulated DOM and styling, with composition
- **HTML Templates:** HTML fragments that are not rendered, but stored until instantiated via JavaScript
---
### WC: custom elements
JS API for creating <b>custom DOM elements</b>:
```javascript
customElements.define("custom-cli", Cli);
```
---
### Shadow DOM facts
**Shadow DOM** exists in browser be default.
Browser manipulates **Shadow DOM** elements without the **main DOM** model knowing.
**Shadow DOM** must always be connected to an existing element.
You attach **Shadow DOM** to an element using Element.attachShadow(). This element is called the **shadow host**.
---
### Shadow DOM use cases
Shadow DOM allows strong separtion between HTML and CSS name spaces. This allows for framework co-existence.
Since frameworks like React rely on the JS DOM model for virtual DOM reconciliation, one can manipulate shadow DOM elements undetected.
---
### WC: <template> and <slot>
3. **HTML templates:** The <u> **<template>** and **<slot>**</u> elements is the basis of a custom element's structure.
---
## What about React?
- **ReactDOM.render()** diffs against VirtualDOM and updates elements that have changed.
- React is view layer, not a system. Their component is only view.
- A render() funcion is assumed to be defined for the system the component is rendered in.
- A full component requires 'imperative API' e.g. play, stop, update.
---
## Introduction to SvelteKit
- SvelteKit is a modern JavaScript framework for building user interfaces.
- It's a compiler that turns your declarative components into efficient JavaScript that surgically updates the DOM.
- Views are first rendered on server and then hydrated on client progressively.
---
## Key Svelte Features
- **Client and Server rendering**: components are created at build time and augmented (hydrated) at run time.
- **Reactivity is built in**: no need for a virtual DOM.
- **Simplicity**: Easier to learn and use with a simpler setup process.
---
## Counter Component in Svelte
```svelte
<script>
let count = 0;
function increment() {
count += 1;
}
</script>
<button on:click={increment}>
Clicks: {count}
</button>
```
---
## What is HTMX?
- HTMX is a JavaScript library that allows you to access AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML.
- It's designed to enhance your HTML, enabling dynamic and asynchronous content loading with minimal JavaScript.
---
## HTMX Key Features
- **Simplicity**: Easy to integrate into existing HTML with custom `hx-` attributes.
- **Lightweight**: A small footprint compared to full-fledged JavaScript frameworks.
- **Enhances existing HTML**: Works seamlessly with your current HTML, without the need to rewrite the frontend.
---
## Interactive Button with HTMX
```html
<!-- HTMX Button Example -->
<button hx-get="/api/count"
hx-trigger="click"
hx-target="#counter">
Click me!
</button>
<div id="counter"></div>
```
---
## Explanation
- The button uses hx-get to make an AJAX request to /api/count when clicked.
- hx-trigger specifies the event that triggers the AJAX call (click in this case).
- hx-target is the element (#counter) where the response will be displayed.
- Each click updates the content in <div id="counter"></div> without a full page reload.
---
## Theory References
- [Data structure definition](https://en.wikipedia.org/wiki/Data_structure)
- [Abstract data type](https://en.wikipedia.org/wiki/Abstract_data_type)
- [Yoneda lemma](https://en.wikipedia.org/wiki/Yoneda_lemma)
---
## References
- [React Web Components](https://reactjs.org/docs/web-components.html)
- [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
- [Web Components](https://reactjs.org/docs/web-components.html)
- [React w/o JSX](https://reactjs.org/docs/react-without-jsx.html)
- [React + Custom Elements](https://css-tricks.com/3-approaches-to-integrate-react-with-custom-elements/)
{"metaMigratedAt":"2023-06-16T03:50:46.474Z","metaMigratedFrom":"YAML","breaks":true,"description":"View the slide with \"Slide Mode\".","title":"What is a component?","contributors":"[{\"id\":\"417e595b-9e5b-4032-a846-c932d133c1a7\",\"add\":14848,\"del\":6186},{\"id\":\"f73a0319-1098-4804-94b8-e3266d1689a2\",\"add\":195,\"del\":169}]"}