Support multiple apps (island architecture)

[schultek]

Currently, there can only ever be one app which is started by a single call to runApp(). This is fine for the server, but in the browser this has a few drawbacks:

• The whole app has to be shipped to the client, including static parts without any interactivity.
• This results in a larger js file and longer time to interactivity.
• The page must be hydrated from the root up and synchronously for all parts.

Jaspr on the client should be able to handle multiple parallel applications bound to different parts of the page. It then should be possible to call runApp() multiple times with different attachment targets, e.g.:

void main() {
  runApp(Header(), attachTo: '#header');
  runApp(Sidebar(), attachTo: '#sidebar');
  runApp(Content(), attachTo: '#content');
}

This would start three different app instances (three separate component trees) bound to different parts of the app (here: header, sidebar and content areas).

---

This change would align very well the the 'Islands Architecture' pattern that became popular again with recent web development trends. Islands are interactive parts of the page, that can be loaded and hydrated separately from each other.

Goal: When supporting multiple apps, jaspr should provide the necessary tools to easily use the islands architecture pattern in a project.

---

Useful links:

https://www.patterns.dev/posts/islands-architecture/
https://jasonformat.com/islands-architecture/

[neoacevedo]

But runApp seems doesn't have the attachTo parameter, then, how to implement this architecture?

[schultek]

You need to change your import to 'package:jaspr/browser.dart' then you have the attachTo param