# Standard Stack

###### tags: `sketchdance`

[TOC]

Goal: To have a well-known, well-documented, "simple", "lightweight", set of tools that I can use to build web applications, APIs, and other tools with. Common factors of these systems: a concept of users (therefore login, authentication, authorization, preferences), persistence (therefore database, parallel access, security, privacy, reliability, searchability)

There may be *two* stacks, but it should be relatively easy to transition from one to the other. I would prefer if the frontend-only stack is truly frontend-only and does not rely on any compilation steps (i.e., pure JavaScript), although I may relax that if there is a big enough advantage (i.e., TypeScript). Even then, unless I can easily work it into my Glitch.com flow, likely to avoid.

Part of the [Sketchdance Suite](/@dethe/rJHyDz3eS)

## Status

* Completed: Basic version of blocks using Heresy
* Currently: Rewriting Moonshine syntax
* Next: re-implement blocks using Lit
* Future: Testing Immer, Implementing localization

## Tools Still needed

* Shared Login service
* Shared userdata service (probably tied to login) See Garden for how user data is tied to, but distinct from login
* Localization
* Card library for Waterbear forms, Joker UI
* Line and socket library for Plugh
* Declarative drawing library (or use immer/heresy to create SVG?)

## Toolbox

### Types: TypeScript

I think I might finally have to bite the bullet and start using TypeScript, or at least understand what the pros and cons of it are and what types it supports.

https://www.typescriptlang.org/docs

### Web Assembly and Web Workers

These are two important web technologies that I need to learn more about ASAP. I may base the lowest level of the Moonshine VM on WASM.

* Web Assembly (WASM): https://webassembly.github.io/spec/core/intro/overview.html
* BinaryEn.js: https://kripken.github.io/slides/binaryen.js.html#/ Creating WebAssembly from JavaScript
* Using Web Workers: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
* Web Workers API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
* Service Workers API: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API for controlling file cacheing for offline use

### Live templating: Lit

Lit is what Heresy keeps comparing itself to, but where Heresy's documentation is scattered, fragmented, and in broken English, Lit's is actually comprehensible and it seems like it will do what I need. For now, it looks like a better fit.

https://lit.dev/docs/

### Functional Programming: ~~Ramda~~ Thi-ng

[Thi-ng](https://github.com/thi-ng/umbrella)

Thi-ng is a sprawling JavaScript library of functions for all sorts of things, created by the same author as toxiclibs for Processing. Tons of examples and some good articles on Medium.

### Game Framework: Phaser and/or Pixi

* Pixi: https://pixijs.com/
* Phaser: https://phaser.io/

Phaser is the more complex of the two, and is what RenJS is built on. Pixi is more about fast 2D graphics, and Phaser is (or at least was) built on it. Which to expose will depend on what types of things we expect people to make. Maybe both can be available as optional library extensions.

### Drag and Drop: Dragula

https://bevacqua.github.io/dragula/)

Goals for a drag-and-drop library are that it has to support mouse and touch interfaces, be small, and be easy to work with. So far dragula is the best I've found.

### Parsing: Peggy

https://peggyjs.org/

Sometimes you just need to parse text, and Peggy is the easiest way to do this that I've found. It is also lightweight and fast, and dare I say it, kind of fun to play with.

### Immutability: Immer

https://github.com/immerjs/immer

Immer is better supported and seems to be easier to work with than immutable.js, so I'm looking forward to test driving it.

### Consistent color: HSLuv

https://www.hsluv.org/

HSLuv corrects HSL colours to be human-friendly by making them perceptually uniform. Regular HSL colours vary widely in perceptual lightness as you traverse the hue circle, but this library corrects based on human vision to keep the relative lightness consistent.

Another alternative is to use lch() for colours, which will be supported by browsers eventually and add a wider gamut of color support beyond what HSL/RGB can address. Lea Verou has a color picker / converter for them here: https://css.land/lch/ Main difficulty for my projects would be explaining what "chroma" is, since this stuff is kind of over my head.

### Distributed text/json: ShareDB

* Distributed, collaborative text and JSON
* https://github.com/share/sharedb
* Client and server
* Works with multiple DBMS
* Part of the Derby framework, but usable standalone

UPDATE: This looks much less useful than I thought it would be. It does not support queries or projections, except on MongoDB. Each room in Garden would effectively have to be its own document and without cross-document queries much of the interface isn't really possible. Better to figure out Posgres streaming to keep everyone up to date.

## Example Projects
### Front-end (no database, no services)

* P5 Demos
* Waterbear (Block-based programming)
* Moss Piglet (Graphics Toolkit)
* Plugh (Flow-based programming)
* Joker (Card-based programming)
* Pearly (Gate simulator & virtual computer)

### Mixed (front-end only, but talks to external services like Moat)

* Shimmy (Flipbook)
* Veil (Greenscreen)
* Jitter (Stop-Motion)
* Gammaray (Special FX)
* Tardigrade (Coding UI)

### "Full-Stack" (NodeJS, Database, Synchronization, Multi-User, etc.)

* Garden
* Book City: Superheroes
* Book City: Roaring Twenties

### Backend-only

* Moat (Private file downloads)
* Xastle (Social network for projects)
* Alley (connect to local/native tools)
* Orchard (DDOM-like virtual filesystem)
* DJ (Distributed JSON)
* Soup (Distributed object store/TupleSpace)

## Retired tools

### Live Templating: Heresy

Heresy was my old contender for a lightweight tool similar to React for building HTML from JS objects

* Heresy: combines many small libraries into a framework. https://github.com/WebReflection/heresy/#readme

If Heresy works for front-end heavy tools like Waterbear and Shimmy, then it will be worth exploring how it would work for something like Garden by adding something like ShareDB for the backend.

There are re-usable components I can develop, such as embedded chat, which could span multiple projects.

*Heresy API Notes*

Passing HTML into holes in template strings: pass pre-parsed objects, not strings. HTML in strings will be escaped and visible in the output, you need to pass them through the `html` template function first, then they can be included in other `html` template functions.

passing custom data into element via .dataset="${}" *Deprecated* Use

implements `handleEvent()` method and redirects to methods, if defined so you can pass the element itself as an event listener and any methods such as `onclick()` or `onmousedown()` will be called appropriately. (Currently broken in heresy).

using the static methods `observedAttributes()` and `booleanAttributes` to return attribute names, accessors will be defined automatically.

lifecycle shortcut methods `oninit(event)`, `onconnected(event)`, `ondisconnected(event)` can be used instead of the native Custom Object "callback" methods.

I'm still figuring out hooks, but they seem important, although maybe not for my use case?

Styles can be tightly scoped and injected into the stylesheet once per component type.

Big outstanding questions: How to handle parsing multiple elements with children? I'm doing it manually with lots of throwaway DOM elements and that feels dumb.

### Functional Programming: RamdaJS

https://ramdajs.com/

There are other functional libraries, some of which may be better in some ways than Ramda, especially [Folktale](https://folktale.origamitower.com/) from Quil, and [Sanctuary](https://github.com/sanctuary-js/sanctuary). For example, see Sanctuary's critique of Ramda. For now, though, Ramda seems to be sufficient, supported, and has a wider ecosystem with common extensions such as [Ramda Adjunct](https://github.com/char0n/ramda-adjunct) and lots of documentation.