Collection: Chapters for UIX Guide

[jonasstrehle]

We should add code examples and best practices to the UIX guide.

Transition starting from the point where "vanilla js behaviour" ends and goes over pointers, into JSX introduction and reactivity concepts.

• [ ] Introduction to pointers
• [ ] Localisation (create .dx file, import, display localised pointers in JSX)
• [ ] How to create a synced reactive list <li> with always
• [ ] ...
• [ ] UIX project setup (install, create and setup project, run, see in action)

[jonasstrehle]

@asbng

[asbng]

Proposal: Keep guide chapters intentionally universal but provide code examples for one coherent sample project throughout most of them. I'm open for ideas.

An important question here is whether we are going to get rid of the .$.-Syntax (using custom SWC extensions) before we are going to publish the guide.

Basic UIX

• [ ] 0. Advancing from HTML and JS to UIX Motivation, quick Pointers and JSX teaser.
• [ ] 1. UIX Project Setup What is a Full-Stack-Framework, install, create and setup project, run, see in action
• [ ] 2. Writing HTML with UIX Introduction to the idea of JSX (everything is a TS datatype), no pointers, just static value rendering
• [ ] 3. Reactive HTML with Pointers Wrap variables from previous example code in "$$", update value in an onclick handler
• [ ] 4. Loops and If-Else in UIX HTML. Introduce Shopping List Example, render list entries or conditionally render "There are no entries yet."
• [ ] 5. Making Code Reusable Show how Class Components work, create ListEntry component, instantiate it
• [ ] 6. Getting User Input Allow users to add items, explain how pointer data validation can be used
• [ ] 7. Storing Data Persistently eternal ??
• [ ] 8. Going Full Stack: Backends with UIX Move shopping list data variable to the backend, introduce Cross-Realm Imports, RPC
• [ ] 9. Creating Multi-Page Websites: Routing Introduce Frontend Routing, maybe Backend Routing
• ...

Proficient UIX

(Requires Basic UIX knowledge.)

• [ ] Creating and Setting Themes Creating a theme, creating themes for dark mode and light mode
• ...