Get early feedback on the direction of react-famous

[pilwon]

I started this project extending @trusktr 's React + Famo.us integration idea posted at https://github.com/Famous/famous-react/issues/10, simply because I didn't want to wait for it forever.

I'm still experimenting with it and trying to figure out what is the best way to design propTypes of each wrapper component. Ideally we want something that is idiomatic enough for both worlds. I'm currently learning about Meteor's famous-views and Angular's famous-angular since they solved some shared design problems. (done)

I'd like to personally invite @trusktr @zoomclub @stereokai @coodoo @marcus from the discussion and Mr. @talves to this thread to get some early feedback. Any comment/suggestion/feedback would be appreciated. I'm also curious if you think there is enough value in growing this project (hopefully together) or it is probably not worth the effort beyond this prototype stage. (Update 3/11/2015: also invited @adrianhunter @bradparks @brev @giantelk @gojohnnygo @hookercookerman @jbremmer @jiyinyiyong @khoerling @nickdima @nmn @timcash and one of my heroes @petehunt)

Please share your insight :)

---

Updates

• 3/10/2015: Examples app built with react-famous is available: http://react-famous.github.io/
• 3/10/2015: Emailed Steve and Myles at Famo.us to request early access to mixed mode so this project grow. (still awaiting their response)
• 3/11/2015: Invited more hackers to this discussion.
• 3/11/2015: Published to NPM registry and created a seed project react-famous-seed

[zoomclub]

Thanks for moving famo.us in the right direction, this is just what the doctor ordered!

[trusktr]

@pilwon This is amazing. I think this is the right direction for anyone who wishes to use react with famo.us. Definitely get some demos running online when ready! I wish this was the official integration.

[pilwon]

This project has undergone lots of design iterations during the last few days, and I believe we now have fairly solid foundation to build some apps with it. This React + Famo.us integration seems like a real killer combination for rapid development of highly componentized/interactive apps.

Examples app built with react and react-famous: http://react-famous.github.io/

Check out the source code to learn how it was built. It works with React v0.13.

[talves]

@pilwon looks great. As long as it will be sustainable with the new version (MixedMode) it will be awesome! There will be plans for an end of life with the current version of Famo.us.

[zoomclub]

This is wonderful, looks and runs well, even Steve Newcomb would be proud :-)

Next, we need early access to MixedMode...

[pilwon]

@talves It is unfortunate they decided to end the current API to move onto something radically different. I thought they were just rewriting internal engine code and were planning to reuse most of API side of things. Depends on how "radical" this change might be, most of the effort put into this project so far could be thrown into garbage. 👊 We really do need early access to mixed mode...

Reference: Famous/famous#642 (comment)

[talves]

@pilwon I agree about early access 👊

[zoomclub]

Just ask Steve, he is always telling us to shoot him any questions. Being reasonable with an agenda to change our world for the better he should see the capable project here and give the order to expedite the formidable combination of Famo.us and React ASAP. Maybe there would be a hush period but work on react-famous could continue until some date that coincides with Steve's launch plan.

[pilwon]

@zoomclub Yeah let's do that. Do you happen to know what's the best way to reach him? (it's steve@)

[trusktr]

Great job @pilwon ! It's looking very nice!

[pilwon]

Inviting more people to this thread: @adrianhunter @bradparks @brev @giantelk @gojohnnygo @hookercookerman @jbremmer @jiyinyiyong @khoerling @nickdima @nmn @timcash @RedCloudDC and one of my heroes @petehunt

react-famous hasn't been published to NPM, but you can start playing with it by running and modifying the examples app. (update: now published)

Does the approach this project takes for React + Famo.us integration make sense to you? Is the design intuitive enough? Please share your thoughts so we can steer it to the right direction.

[tiye]

@pilwon Thanks.

Noticed that react-devtools is not working on the demos. Is that a bug?

[pilwon]

@jiyinyiyong Created issue #8 for this question.

[nmn]

I've been looking through the code and examples. Great work.
Though with the whole famous API changing, and the existence of React-Canvas and React-Native, I believe there is a completely different route that this combination should take.

I have no idea what the new famous API will look like. But I do know that the current famo.us API looks terrible in comparison to React-Native (with FlexBox API)

So I think any React+Famo.us combination should definitely adopt the React-CSS flex-box based layout.
Also, reading the reply from Myles on the issue mentioned above, I think famo.us is on the right path as well.

[trusktr]

Famo.us can't be compared to React Native; Famo.us doesn't aim to compile to native. React Native apps won't look identical to React Web apps, it's simply a reuse of programming patterns on the native side, while the rendering is abstracted. React Famous here is an example of a rendering abstraction that happens to be made for the web.

The two are complimentary. You can use React Native to take advantage of "native" rendering and React Famous for better rendering on the web than traditional React (traditional HTML). No matter which rendering abstraction you choose, you still need to ultimately be familiar with how each renderer works if you want to actually control your pixels.

Big picture: React Native might be great for native apps, but you still need to decide on React Web (traditional HTML) vs React Famous if you plan on releasing a web app.

Keep in mind that Famo.us will have a new feature soon to cache rendering calculations so it won't have to compute transformations for the entire render tree on each tick. That, along with Mixed Mode, is going to make Famo.us significantly better at rendering than it already is compared to traditional HTML, as far as the web is concerned.

[nmn]

@trusktr I was not comparing famo.us to React-Native at all. I agree with everything you just said. I guess React-Canvas is a better example for what I'm trying to express.

React-ART, React-Canvas and now React-Native have all shown us how React can work with non-DOM environments and still provide an extremely familiar API.

I think React-Famous should be worked on with the same goal. I think famo.us as an API is too unfamiliar to web developers, and the layout story is completely confusing.

I think making a new DOM renderer for awesome animation performance (famo.us based or not) is a great idea. But it should try to bring more familiarity to developers rather than relying entirely on the famo.us way of doing things.

In short, I was trying to say, it's more important to stay true to React, than it is to stay true to famo.us. React has a much better API and we should embrace that.

[trusktr]

@nmn

React-ART, React-Canvas and now React-Native have all shown us how React can work with non-DOM environments and still provide an extremely familiar API.

I think React-Famous should be worked on with the same goal

It's more important to stay true to React, than it is to stay true to famo.us.

Can you provide examples of what the API would be like? It seems like what you're asking for is a new layout engine that is similar to flexbox/css so people can start nesting things (unfortunately) in the same way traditional HTML is, but rendered with Famo.us. That's not out of the realm of possibility, but this current react-famous API that @pilwon is making needs to exist before that can even happen. For example, once @pilwon's library is ready, it would then be possible to extend it using a cassowary constraint layout engine to calculate layouts that would be rendered utilmately with famo.us, but controlled through react.

If you can define what an "extremely familiar API" would be, that'd help a lot more.

[nmn]

@trusktr I was talking more in a high-level way. I guess there are two ways to think about it:

1. start with React and a simple new DOM renderer and a completely familiar API, and slowly make it more powerful
2. Start with something powerful, and slowly improve the API.

Both are valid approaches. was leaning to 1.

As for a good API for this, I'm working on something already. Will update here, when I have something.

[zoomclub]

Interestingly I'm just reviewing a new book (soon to be published) on react and d3.js. If we're looking at defining a general API that is suitable for rendering to different targets like d3, famous, canvas, etc that is indeed very important. A general API that is state configured and in turn renders content data via firebase, etc is a beautiful strata to have.

[trusktr]

@nmn

I'm working on something already. Will update here, when I have something.

Using Famo.us? Perhaps let us know so that maybe you and @pilwon can collaborate together instead of competing separately.

@zoomclub @nmn

general API that is suitable for rendering to different targets like d3, famous, canvas, etc that is indeed very important

Yeah, that would be nice, but is sort of unrelated to this current react-famous project. This library just needs to get off the ground first, and then after that there can be debate on what APIs to extend it with in order to provide a unified API across renders (i.e. what layout engine to use).

Me personally, I like thinking in Famo.us render trees. It's very "native" in concept, and is common in "native" gaming engines.

[nmn]

@trusktr No, I'm not using famo.us for what I'm working on. Rather I'm trying to just take some lessons from Famo.us (flat-DOM, transforms) and bring it to React.

What I'm working on would certainly be much less powerful than React-famous. It will not have physics based surfaces at all. Also, it is just going to be a proof-of-concept at best. I haven't made my way through React source yet, so I don't know enough to create a proper integration with React.

[pilwon]

Those of us who are already familiar with Famo.us API should find it straight-forward and natural to use the current react-famous project. However, React users without prior experience with Famo.us may find it awkward and possibly unpleasant, even for doing simple things. So I agree there's a need to fill this gap in some ways as mentioned above.

The latest version of react-famous has just been published to NPM registry, and a seed project was also created to build an app quickly with it: react-famous-seed ✌️ You can copy and paste any example app (App.jsx component) from Examples App to the seed project to test them out.