Do we have a showcase for projects made with riot.js? #58

Closed
jtremback opened this Issue Dec 19, 2013 · 23 comments

Projects

None yet

9 participants

@jtremback

Just finished this as a riot starter project: http://sfdevlabs.github.io/yolocharts/#simple_line

I found riot very nice to work with, although it took me several tries to get the structure down, as the todo app is not much guidance. Would have been helpful for me to see someone else's project to learn how to do it. Maybe we can start collecting these?

@tipiirai
Member

Awesome! I'll definitely add this to the showcase list once there are more implementations out there. Bear in mind that Riot is still beta and official v1.0 is not out yet.

@jtremback

I wasn't so much trying to show off my own work as I was trying to find
resources for learning how to organize a riot project. Since the library is
so minimal, examples are everything. Do you know of other projects I can
look at?
On Jan 11, 2014 3:41 AM, "Tero Piirainen" notifications@github.com wrote:

Awesome! I'll definitely add this to the showcase list once there are more
implementations out there. Bear in mind that Riot is still beta and
official v1.0 is not out yet.


Reply to this email directly or view it on GitHubhttps://github.com/moot/riotjs/issues/58#issuecomment-32093756
.

@tipiirai
Member

I released new docs yesterday: https://moot.it/riotjs

Enjoy :)

@aujo
aujo commented Feb 24, 2014

This weekend I had a go at making something with Riot.js. I took the admin demo as a starting point and modified it into something different. The structure is however largely the same. As a newbie in javascript I found the code difficult to read, but the main idea behind Riot.js is really simple to work with. The result is here on GitHub, https://github.com/aujo/oskate2014, and a live version can be found here: http://oskate2014.raspberryadventures.in.
Today I discovered the version of ToDoMVC 3den is making with Riot.js (https://github.com/3den/todomvc/tree/gh-pages/labs/architecture-examples/riotjs). The way model, presenter and view are working together in his program seems easier to understand than the way it is done in de admin demo. So next I'll take his code as a starting point for further experiments. Riot.js is fun!

@tpaz
tpaz commented Feb 24, 2014

I am working on some small education app using Riot.js. currently
accessible only with email registration:
http://kidscop.org/kidsmath/
(backend is Django). I will remove that registration later but you can
access the JS files directly under the /static/js/ URI (model.js,
presenter.js, parent_presenter.js, app.js, kids_math.js. the HTMLs you'll
figure out :) either register or wait till I remove it).

The more samples people add the better, I believe.
I've really connected with the claims in riot.js blog. especially the
learning curve. Ember.ks was ~1m and knockout.js ~1-2 weeks pain for me
before I got to handle it.
Riot took an hour!

On Mon, Feb 24, 2014 at 5:52 PM, aujo notifications@github.com wrote:

This weekend I had a go at making something with Riot.js. I took the admin
demo as a starting point and modified it into something different. The
structure is however largely the same. As a newbie in javascript I found
the code difficult to read, but the main idea behind Riot.js is really
simple to work with. The result is here on GitHub,
https://github.com/aujo/oskate2014, and a live version can be found here:
http://oskate2014.raspberryadventures.in.
Today I discovered the version of ToDoMVC 3den is making with Riot.js (
https://github.com/3den/todomvc/tree/gh-pages/labs/architecture-examples/riotjs).
The way model, presenter and view are working together in his program seems
easier to understand than the way it is done in de admin demo. So next I'll
take his code as a starting point for further experiments. Riot.js is fun!

Reply to this email directly or view it on GitHubhttps://github.com/moot/riotjs/issues/58#issuecomment-35900009
.

Rgrds
Tomer

@jtremback

Yea, IMO, the admin interface has a few too many 'cool js tricks'

On Mon, Feb 24, 2014 at 11:11 AM, Tomer Paz notifications@github.comwrote:

I am working on some small education app using Riot.js. currently
accessible only with email registration:
http://kidscop.org/kidsmath/
(backend is Django). I will remove that registration later but you can
access the JS files directly under the /static/js/ URI (model.js,
presenter.js, parent_presenter.js, app.js, kids_math.js. the HTMLs you'll
figure out :) either register or wait till I remove it).

The more samples people add the better, I believe.
I've really connected with the claims in riot.js blog. especially the
learning curve. Ember.ks was ~1m and knockout.js ~1-2 weeks pain for me
before I got to handle it.
Riot took an hour!

On Mon, Feb 24, 2014 at 5:52 PM, aujo notifications@github.com wrote:

This weekend I had a go at making something with Riot.js. I took the
admin
demo as a starting point and modified it into something different. The
structure is however largely the same. As a newbie in javascript I found
the code difficult to read, but the main idea behind Riot.js is really
simple to work with. The result is here on GitHub,
https://github.com/aujo/oskate2014, and a live version can be found
here:
http://oskate2014.raspberryadventures.in.
Today I discovered the version of ToDoMVC 3den is making with Riot.js (

https://github.com/3den/todomvc/tree/gh-pages/labs/architecture-examples/riotjs
).
The way model, presenter and view are working together in his program
seems
easier to understand than the way it is done in de admin demo. So next
I'll
take his code as a starting point for further experiments. Riot.js is
fun!

Reply to this email directly or view it on GitHub<
https://github.com/moot/riotjs/issues/58#issuecomment-35900009>
.

Rgrds
Tomer

Reply to this email directly or view it on GitHubhttps://github.com/moot/riotjs/issues/58#issuecomment-35923047
.

@tipiirai
Member

Great to hear you are enjoying Riot!

I'm sorry if you find the Admin hard to follow. Really it wasn't my intention to use any cool tricks or anything - just my way of coding. I'm glad 3den's TodoMVC is easier to follow. Good job there 3den - Thanks!

@rsbondi
Contributor
rsbondi commented Jan 24, 2015

I don't know how useful this may be. This is my first day experimenting with the library so code review welcome.

http://plnkr.co/edit/UZ2BfP?p=preview

This is the todo but with multiple lists and clearing completed items.

@tipiirai
Member

I added this to the end of README.

Thank you!

@jtremback

IMO, vue.js stands out as one of the best examples of documentation for a frontend framework. Particularly the 'Examples' section: http://vuejs.org/examples/

@tipiirai
Member

Agreed. Looks good indeed. Much work has been put to vue docs and demos. Hopefully we are soon there wit Riot too.

@jtremback

The examples section in particular is awesome because of the embedded
jsfiddles. This is really not much harder than linking to an examples
folder on github, but makes a huge difference to the developer experience,
IMO.

On Sun, Jan 25, 2015 at 5:40 AM, Tero Piirainen notifications@github.com
wrote:

Agreed. Looks good indeed. Much work has been put to vue docs and demos.
Hopefully we are soon there wit Riot too.


Reply to this email directly or view it on GitHub
#58 (comment).

@aurri
Contributor
aurri commented Jan 25, 2015

Yea, we really need that soon! Having live examples I can easily tinker with beats the best docs for me.

@rsbondi
Contributor
rsbondi commented Jan 25, 2015

This library rocks, usable and re-usable, I just had to do another

http://plnkr.co/edit/NmcxgZ?p=preview

multi-selector

@tipiirai tipiirai added a commit that referenced this issue Jan 26, 2015
@tipiirai tipiirai Multi- selector demo, #58 5e1a2fa
@tipiirai
Member

Thanks! Added a link to to readme file.

@guilhermeaiolfi

About the multiple todos examples... is that the right way to include and remove items in riot.js? Because I don't think so. The idea of data binding is to deal with your model and your view will be automatically update. That's not how it's been done in that example. So, I don't think it should be in the README. It'll give new users the wrong idea.

@rsbondi
Contributor
rsbondi commented Jan 26, 2015

Oh but the root property was too tempting. I had asked for a code review when I submitted the example so any guidance would be great. I am not sure how bind/mount the added item.

@rsbondi
Contributor
rsbondi commented Jan 27, 2015

OK, I figured it out and updated at the same address. http://plnkr.co/edit/UZ2BfP?p=preview

edit: well not quite, almost

@guilhermeaiolfi

It's much better now. The parent.update() shouldn't be mandatory tho. I don't know why you had to hack there but: http://plnkr.co/edit/TvSDoynMWfMEl8gZucYy?p=preview seems to work.

@tipiirai could you tell us why setting the this.todos in the mount event didn't work?

@rsbondi
Contributor
rsbondi commented Jan 27, 2015

@guilhermeaiolfi @tipiirai

setting

this.todos = opts.todos;

renders fine but they are frozen, maybe a bug? I wrestled with this for a while. Additional todos work fine.

@kennytrytek-wf

@jtremback said:
I wasn't so much trying to show off my own work as I was trying to find
resources for learning how to organize a riot project. Since the library is
so minimal, examples are everything. Do you know of other projects I can
look at?

This is just a base page with two links that go nowhere, but I think my project structure is solid:
https://github.com/kennytrytek/genesis

You can fork and experiment if you want just ask. I don't have routing in place yet, but I hope to add that soon so I can see how to expand with more content (and make the only potentially useful link in the site actually work).

@tipiirai
Member

If anyone has something to show, please add a link to the bottom of the readme file and then make a pull request. Clearly the easiest way for everyone.

Closing this issue. Thanks everyone!

@tipiirai tipiirai closed this Feb 10, 2015
@amenadiel
Contributor

My pr #1400 fails because travis couldn't launch iOS and Safari.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment