A full-scale app example

[fskreuz]

Because todo lists are too mainstream and are really very contrived examples. Need something that goes beyond 2-3 components and have a lot of data flowing through its veins. Suggestions are:

• Email client interface (architecture exercise)
• Hacker news front end (multi-component exercise)
• Live Twitter feed (data streaming exercise)

[dagnelies]

That sounds like fair examples. I could do that I guess. For the Email client interface, do you intended fake data or a mock server?

[fskreuz]

Yup, just fake data. Just wanted to demonstrate the creation of a sidebar component, a messages list component, a button bar, and a simple compose popup/modal/view, and that they can talk to each other and you can move messages around (inbox and trash). Basically something that's a step up from a 3-component todo list.

[PaulMaly]

I’m still working on fully isomorphic (and even server-side only) Ractive’s RealWorld example app: https://github.com/gothinkster/realworld/issues/162

I’ve not so much free time, but seems it’ll be completed soon and I’ll share it.

[dagnelies]

What about a straightforward CRUD example? ...or is that too simple? Perhaps with nested lists. I think this would cover the most fundamental use case.

[fskreuz]

In general, I'm open to anything that's not a todo list, counter, timer or stepper. 😁

[dagnelies]

Same here. And there is already a TODO reference implementation anyway AFAIK

[PaulMaly]

@dagnelies

Hm, for me RealWorld project almost is "straightforward CRUD example". You can check author's example here: https://demo.realworld.io/#/

As you can see It's also just a simple CRUD and I think it's already cover the most fundamental use cases.

[dagnelies]

As said in gitter, I started with something slightly different: a repository of short self-contained minimalist examples.

Here is the first one:

https://dagnelies.github.io/ractive-examples/user-list.html

...including a basic editor to tinker with the code.

[fskreuz]

@dagnelies By the way, Ractive has https://ractive.js.org/playground . It's the same thing that powers the "Ractive Playground" tab found to the right of the docs site. The demos are exportable as URLs (Gear icon -> URL) and embeddable on the docs site (see Get Started section demos).

This way, you can focus on the demos instead of the editor. 😁

We're also aiming to build a per-file REPL (like Rollup/Svelte) once we get to it. That way, SFC-style demos are easy to present.

[dagnelies]

Here we go with a few more examples:

https://dagnelies.github.io/ractive-examples/movies_1.html https://dagnelies.github.io/ractive-examples/movies_2.html https://dagnelies.github.io/ractive-examples/movies_3.html https://dagnelies.github.io/ractive-examples/movies_4.html

...beyond that, the examples would become too complex to have an educational value. The last one is already a bit too packed for my taste. But it's nice, just to see what can be done.

[fskreuz]

@dagnelies Repurposed the integrations page into a ginormous resources page. Your demos are now on it 🎉

• https://ractive.js.org/resources/
• https://github.com/ractivejs/ractivejs.github.io/blob/dev/docs/resources.md

[fskreuz]

Leaving this issue open for more submissions.