markmals

A Vision for Creating Modern Apps

Introduction

Delivering an excellent user experience and a seamless developer experience is essential for creating high-quality modern applications. Leveraging a modern, flexible tech stack that minimizes friction for developers while maximizing performance and user satisfaction is key. The vision presented here focuses on practicality, simplicity, cohesion, and efficiency across various platforms, using technologies tailored to specific platforms and use cases across for the web, Apple platforms, Android, Windows, and games.

Static Websites

Stack

markmals

// A reference type Set
private final class ReferenceSet<Element: Hashable>: Hashable, Collection {
    typealias Element = Element
    typealias Iterator = Set<Element>.Iterator
    typealias Index = Set<Element>.Index
    typealias Indices = Set<Element>.Indices
    typealias SubSequence = Set<Element>.SubSequence
    
    private var inner = Set<Element>()
    

markmals

import { createMemo, createEffect } from 'solid-js';

export async function* createEffectStream<T>(fn: () => T) {
    let promises: Promise<T>[] = [];
    let resolve: (value: T) => void;
    promises.push(
        new Promise(r => {
            resolve = r;
        }),
    );

markmals

interface Observer {
    execute(): void;
    dependencies: Set<Set<Observer>>;
}

let context: Observer[] = [];

interface Constructor<T> {
    new (...args: any[]): T;
}

markmals

import Foundation
import Observation

@Observable
final class Signal<T> {
    var value: T
    
    init(value: T) {
        self.value = value
    }

markmals

// With Observable

@Observable
class Book {
    var title: String
    var author: String
    var inStock: Bool

    init(title: String, author: String, inStock: Bool) {
        self.title = title

markmals

import { subject } from '@webstd/combine';
import type { Publisher } from '@webstd/combine';
import type { Identifiable } from '@webstd/types';
import { element, ReactiveElement, html, environment } from '@webstd/custom-elements';

import { Author } from './author.js'

class Book implements Identifiable {
    id = crypto.randomUUID(); // A unique identifier that never changes.
    title$ = subject('Sample Book Title');

markmals

import { Observable, ObservationIgnored, withObservationTracking } from '@webstd/observable';
import type { Identifiable } from '@webstd/types';
import { CustomElement, ReactiveElement, html, Environment, State } from '@webstd/custom-elements';
import { stream } from '@webstd/request';

import { Author } from './author.js'

@Observable
class Book implements Identifiable {
    @ObservationIgnored id = crypto.randomUUID(); // A unique identifier that never changes.

markmals

import SwiftSignal
import FineGrainedViews

// Macro usage:
final class CounterViewController: UIViewController {
    private let count = Signal(0)

    override func viewDidLoad() {
        super.viewDidLoad()

markmals

import { useSignal } from "@preact/signals"
import { action$, island$, json, loader$ } from "preact-server-components"
import { useEffect } from "preact/hooks"
import { db } from "./db.server"

const Counter = island$(() => {
    let count = useSignal(0)

    // TODO: Resumable hydration
    // We don't want to do this work on the server on initial load and then again on