New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add riot.js 2.0 example #1178

Merged
merged 2 commits into from Sep 12, 2015

Conversation

Projects
None yet
6 participants
@txchen
Copy link
Contributor

txchen commented Feb 21, 2015

This is new implementaion using riotjs 2.0 https://github.com/muut/riotjs

Riotjs is like react, but its size is much smaller. V2 was released about one month ago, and now it already has more than 5400 stars. Also, muut claims that they are using riot in their production code so we can consider it's already ready for real product.

Riot has the tag concept: https://muut.com/riotjs/guide/#tag-syntax, which is like react's jsx, but more like html instead of js. Riot compiler is like jsx-transformer, since its size is also tiny, we can use it in the page and compile the tag on the fly.

This implementation is using the compiler on the page, the main html and js logic is all in todo.html.

I have manually compiled todo.html to todo.js using riot compiler, and ran jshint to ensure there is no error.

At @tipiirai who is the author of riotjs, FYI.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Feb 21, 2015

FYI, test result can be found here: https://gist.github.com/txchen/d0f85b2dd59aadb88440

This is after I changed the test library a little bit, but I cannot commit that change, so currently riotjs is exclued in alltest.js.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Mar 4, 2015

Can anyone take a look at this? I suppose todomvc is not stopping accepting new frameworks, right?:)

@addyosmani

This comment has been minimized.

Copy link
Member

addyosmani commented Mar 8, 2015

Thanks for the PR @txchen. We are still accepting new frameworks, but of course validating them on a case-by-case basis.

It may take another short while for us to get to review this PR. Our focus right now is around #1110 (lots of work across all apps for it), but don't worry. We will get to reply properly to this :)

@tipiirai

This comment has been minimized.

Copy link

tipiirai commented Mar 10, 2015

Thank you @addyosmani !

@dotnetchris

This comment has been minimized.

Copy link

dotnetchris commented Mar 12, 2015

Looking forward to this getting added, RiotJS is the most interesting thing i've ever seen in JS

@samccone

This comment has been minimized.

Copy link
Member

samccone commented Mar 12, 2015

@tipiirai are you satisfied with the technical implementation? Does it align with "best practices" as far as the library goes?

@tipiirai

This comment has been minimized.

Copy link

tipiirai commented Mar 13, 2015

@samccone you can see the flesh of the implementation on this single html file. I think it demonstrates Riot capabilities and simplicity pretty well.

Two custom tags are used with related layout and logic sitting on a same module and you can understand what the program does by reading the source code. No redundant boilerplate on your way.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Apr 23, 2015

Riotjs just released 2.0.15, with the new 'riot-tag' feature, all test mocha test cases can pass without any workaround.

I have updated the commit, please help to review and merge, thanks a lot!

@addyosmani @tipiirai

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Apr 24, 2015

rebased to latest master.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Apr 24, 2015

> npm run test -- --framework=riotjs

> todomvc-browser-tests@ test /Users/txchen/GithubCode/todomvc/browser-tests
> mocha allTests.js --no-timeouts --reporter spec --framework=riotjs



  TodoMVC - riotjs
    When page is initially opened
      ✓ should focus on the todo input field (56ms)
    No Todos
      ✓ should hide #main and #footer (211ms)
    New Todo
      ✓ should allow me to add todo items (610ms)
      ✓ should clear text input field when an item is added (247ms)
      ✓ should append new items to the bottom of the list (641ms)
      ✓ should trim text input (286ms)
      ✓ should show #main and #footer when items added (339ms)
    Mark all as completed
      ✓ should allow me to mark all items as completed (788ms)
      ✓ should allow me to clear the completion state of all items (823ms)
      ✓ complete all checkbox should update state when items are completed / cleared (894ms)
    Item
      ✓ should allow me to mark items as complete (753ms)
      ✓ should allow me to un-mark items as complete (742ms)
      ✓ should allow me to edit an item (1037ms)
      ✓ should show the remove button on hover
    Editing
      ✓ should hide other controls when editing (672ms)
      ✓ should save edits on enter (1078ms)
      ✓ should save edits on blur (1148ms)
      ✓ should trim entered text (1110ms)
      ✓ should remove the item if an empty text string was entered (953ms)
      ✓ should cancel edits on escape (1029ms)
    Counter
      ✓ should display the current number of todo items (388ms)
    Clear completed button
      ✓ should display the correct text (606ms)
      ✓ should remove completed items when clicked (823ms)
      ✓ should be hidden when there are no items that are completed (758ms)
    Routing
      ✓ should allow me to display active items (858ms)
      ✓ should respect the back button (1164ms)
      ✓ should allow me to display completed items (762ms)
      ✓ should allow me to display all items (1074ms)
      ✓ should highlight the currently applied filter (983ms)


  29 passing (1m)
@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Apr 24, 2015

@sindresorhus @samccone I see that you have merged PR recently, it would be nice if you can have a review on this.

@avimar

This comment has been minimized.

Copy link

avimar commented Jun 18, 2015

I cloned the most recent todomvc and dropped in the riotjs folder from the PR.
The tests ran fine (but the last 2 failed in speedmode).

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Jun 18, 2015

@avimar thanks for the information. I will look into the failures.
@sindresorhus @samccone If you guys have time, could you review this PR, it has been a long time.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Jun 20, 2015

Just sync and rebase, now only 1 test case is failing: "should respect the back button"

It should be test issue, since other frameworks also have same issue.

I think this PR is again ok to merge. Please help to review, thanks!

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Aug 11, 2015

Just rebase upon latest.
This PR is sent about half year ago, could someone review this, comment and merge please?

@addyosmani @samccone

@samccone

This comment has been minimized.

Copy link
Member

samccone commented Aug 17, 2015

Hey @txchen , sorry about the crazy delay on this one.

I have a more general question about riot as a framework. It seems like the difference between 1.0 and 2.0 is quite significant. Can you give us some insight into the decision to shift?

What was the migration strategy for existing users from 1.0 -> 2.0?

Just wondering. Thanks!

@tipiirai

This comment has been minimized.

Copy link

tipiirai commented Aug 17, 2015

The difference is indeed significant, no doubt about it. I guess the biggest reason for the shift was the fact that the HTML and JS were completely separate in Riot 1.0 so it couldn't deliver the pleasure what React brought us. But React had many things we didn't like so we made Riot 2.0 for our own needs. The reasoning is best explained on the 2.0 release blog entry.

2.0 is not backwards compatible, but luckily only two issues were raised on our our github repository. As a result we simply brought back 1.0 docs to our website: http://riotjs.com/guide/v1.0/ and that seemed to do it. I guess Riot 1.0 wasn't very broadly in use.

Note, the site URL is now riotjs.com so it's not so tightly coupled to Muut anymore.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Aug 23, 2015

riotjs now has a new website: riotjs.com

I have updated the information in the PR accordingly.

@samccone Hope this can be merged, thanks a lot!

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Aug 24, 2015

Also, I have updated the commits to use latest riotjs version 2.2.4.

@txchen

This comment has been minimized.

Copy link
Contributor

txchen commented Sep 3, 2015

@addyosmani @samccone another ping on this.

@samccone

This comment has been minimized.

Copy link
Member

samccone commented Sep 12, 2015

🚢 thanks again @txchen sorry been a crazy few months for me 👏

samccone added a commit that referenced this pull request Sep 12, 2015

Merge pull request #1178 from txchen/riotjs
Add riot.js 2.0 example

@samccone samccone merged commit 7be1d10 into tastejs:master Sep 12, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment