@@ -0,0 +1,69 @@
1++++
2+title = "Urbit Interface Framework"
3+date = "2022-08-24"
4+
5+[taxonomies]
6+grant_type = [ "Proposal" ]
7+grant_category = [ "Other" ]
8+
9+[extra]
10+image = ""
11+description = "Develop frameowrk for alternative urbit web browser interface"
12+reward = "5 stars"
13+mentor = "~nocsyx-lassul"
14+assignee = "~nortex-ramnyd"
15+grant_id = "P0100"
16+completed = false
17+canceled = false
18++++
19+
20+# Rationale
21+
22+I'm proposing to write code for what could become an alternative urbit web browser interface alongside Landscape, Escape, Holium and maybe others I've yet to see.
23+This interface basically functions like website builder [Wix](https://www.wix.com/) but puts more emphasis on
24+1. Enabling creation of custom components as easy as using pre-fabricated ones - Wix has an option to create custom components with javascript but it's limited and impractical.
25+2. Implementing collaborative composing as an integral feature rather than an "add-on".
26+The interface would be composed together from components in similar way Wix does. The components are draggable around the screen and it will be possible to align a component into a grid with automatic alignment. In practice this enables composing (live) "dashboards" for reasoning about various data.
27+The interface will be accessed from browser and mobile browser. Future work includes a native iOS app and a desktop Electron app. Though it's the same codebase for web browser interface, the mobile browser interface components will be auto-aligned for mobile screen. iOS app will have support for native notifications and widgets.
28+The components will be written in Sail, an Urbit markup language. A trivial example of a component could be `;smiley` which renders on the screen as `:-)`.
29+The `;smiley` definition might look something like `;span: ":-)"`. It must be in valid HTML namespace, but can be written in Sail syntax or alternatively, defined in pure HTML itself.
30+If you try to add this `;smiley` component to your screen but it doesn't exist on your urbit yet, a prompt appears telling to either define this component or download component with this name from other urbit. By default, downloads happen from your parent star but can be configured to download from other indexers as well.
31+Alternatively, if you know that this `;smiley` component exists on some particular urbit, you can also download directly by just appending the name of urbit, e.g. if ~nortex-ramnyd has this component, you could `;smiley~nortex-ramnyd` and after that, this component is available on your ship as well (so next time you want to use this component, you can just `;smiley` without asking it from ~nortex-ramnyd).
32+For this project, I will implement an additional CSS abstraction layer into Sail. This makes styling components a little bit easier. So instead of `;smiley(style "color:blue")`, it would be `;smiley(color "blue")`. Or to make custom fonts easier `;p(font "custom-font"): Hello` or `;p(font "https://url-of/custom-font.woff2"): Hello`. To bypass CORS restrictions, I'll host a CORS relay (or can be configured to use a different host).
33+"Pages" of composed components are linked together like web pages and can be either pages composed by only you (only available on your urbit), e.g. your "home screen"/"dashboard", or group pages - pages that are composed together by group members.
34+Both types can have specified view and edit permissions.
35+The first time when the interface is installed (an Electron app), the "welcome" screen appears and this is also the "home screen" that appears when later reopening the application. The welcome screen walks through the functionality of the interface and subsequently prepares the user to start composing their home screen.
36+Some code I have already written, the repository is stored on github: https://github.com/h5gq3/wix.com
37+# Milestones and Compenstation
38+## Milestone 1: finish core features and polish UI
39+### 2 stars
40+The first milestone is to get the current functionality polished and usable with minimal bugs. It should be clear to the user how to edit and add blocks as well as how to switch back to rendering. The user should be able to install the freeform editor as an app and see the basic demo where state is only seen through the app itself.
41+- Implement basic fixed freeform positioning
42+- Implement component resizing logic
43+- Implement page routing
44+- Add some UI for showing editing vs rendered state
45+- Add UI helpers for rendering editor
46+- Add docket file and editor html + js so that it can be rendered as an app for ease of showing off
47+## Milestone 2: usability and component enhancements
48+### 1 star
49+In this milestone we're mostly just improving the usability of the editor and adding nice-to-have features like being able to make and use components.
50+- Implement component creation logic using React 18
51+- Download components from other ships
52+- Install and use React components straight from markup
53+- CSS abstraction
54+- Some "convenience" functions library in style of jQuery
55+## Milestone 3: collaborative editing
56+### 1 star
57+In this milestone we implement push and pull hooks similar to how groups works to allow for syncing of state between multiple editors and implement custom permissioning logic.
58+## Milestone 5: proof of concept custom component/app - DeepSpace meditation app
59+### 1 star
60+In this milestone we create an application on top of the interface builder. The design considerations for this application are as follows:
61+
62+# Future Work
63+Future work involves expanding the functionality and writing custom components, aka "apps".
64+Potential expansions:
65+- Dragging various media onto the page and automatically storing it in your data store (possibly IPFS or S3)
66+- Sail and udon improvement - try improving syntax for more ergonomic use
67+- "Convenience" functions library expansion
68+- Codemirror integrations like indentation, syntax highlighting, and json previewing
69+- Component discovery from other ships