51 lines
1.2 KiB
Markdown
51 lines
1.2 KiB
Markdown
|
# Writing Tilde Friends applications7
|
||
|
|
|
||
|
|
TODO
|
||
|
|
|
||
|
|
## Creating your environment
|
||
|
|
|
||
|
|
1. Open an existing application (ie: `identity`);
|
||
|
|
2. Open the editing panel;
|
||
|
|
3. Save the app under a new name (ie `/~YOUR_USERNAME/my-app/`);
|
||
|
|
4. Go back to the main menu and open your new app;
|
||
|
|
5. You can now edit your app, save it and see changes in the real time.
|
||
|
|
|
||
|
|
## Project structure
|
||
|
|
|
||
|
|
An application has a `app.js` file that gets run when a user enters the app.
|
||
|
|
This file contains a function (typically called `main()`) that's considered the entry point.
|
||
|
|
|
||
|
|
Paste this in `app.js`:
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
async function main() {
|
||
|
|
let ids = await ssb.getIdentities();
|
||
|
|
await app.setDocument(`
|
||
|
|
<body style="font-family: sans-serif; color: white">
|
||
|
|
<h1>Hello world!</h1>
|
||
|
|
</body>
|
||
|
|
</body>`);
|
||
|
|
}
|
||
|
|
|
||
|
|
main();
|
||
|
|
```
|
||
|
|
|
||
|
|
Save the app, and you should now be seeing `Hello world!` on the screen.
|
||
|
|
|
||
|
|
|
||
|
|
## Components
|
||
|
|
|
||
|
|
Once your app grows to a certain size, you'll want to introduce components.
|
||
|
|
In Tilde Friends, the de facto standard is [Lit](TODO).
|
||
|
|
Althogh you an use any framework you want, you're encouraged to use Lit as you can reuse
|
||
|
|
|
||
|
|
First, add lit-all-min.js into your project.
|
||
|
|
|
||
|
|
TODO
|
||
|
|
|
||
|
|
<!-- mention shadow dom -->
|
||
|
|
|
||
|
|
TODO: tfrpc
|
||
|
|
|
||
|
|
TODO: sharing apps
|