-
Notifications
You must be signed in to change notification settings - Fork 66
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
POC: react-samsara #9
Comments
btw. i used |
react components + samsara events, animations and physics = awesome ui lib |
woooaah!!! this looks great from the demo source code. I wasn't able to build it successfully yet. I got weird errors with node v4, and they disappeared when I switched to v0.10. I'll take a closer look tomorrow. Let me know how I can help from the API side! |
Got the demo running. Looks very clean! I tried to update it to use
I'll be taking a closer look at your integration code. Looks like you've gone pretty deep into the Samsara codebase - where there's little to no documentation to help! - impressive. |
The whole process of reconciliation is described here. Also setting an re-setting the properties of a react-elements after initialization must be supported like The next steps could be: Also when adding a node after first render they do not show up directly. Maybe its possible to get the demo-source-code running a CodePen somehow?! |
Removing a
In general, I would rather React's reconciliation process be applied within a Samsara The approach I originally had in mind for integrating with React and other libraries was to export |
@dmvaldman what's the latest on integration with React? Could really be huge for the React community, especially if we could get it to work with React Native in place of its |
I'd like to investigate this more. Because of your comment, I decided to play around. For simple examples, there's not much you need to do at all. I started from React's HelloWorld app from their installation page and modified it to render into a Samsara
And here's what it looks like: Pretty simple! And it can be a lot simpler! Ultimately things will be a little more complicated when you have nested React components that need to be injected into multiple Ultimately I'd like to see this kind of integration come from the Samsara community. Though sadly, there's not much of a community yet :-( So either I'll have to start this off, or some brave reader of this GitHub issue will get inspired! |
@dmvaldman my first thoughts--and this may be a bit naive--is: what if we could mimic the css styles samsara needs on react-generated elements, and then drive the styles from samara-style code? If you check out the
vs.
And of course the second example isn't animated, but here's how that would look (and perhaps it serves as better inspiration):
So that's the the cutting edge of React [Native] animations. Also it's important to note, that most animations besides rotate don't need an interpolation, which converts to a degrees string. But that said, obviously you can do all sorts of interesting things if you want to use one value to interpolate on and drive different values for different elements, e.g. if you interpolate on scrolling/swiping, you can hook different animations into different "windows" of the changing value, and of course multiply/add to the value for each individual element etc. This obviously is the common grounds with Samsara and its ability to combine streams. Where Animated leaves off and Samsara takes over is the coordination of large numbers of elements in relation to one another, composition via https://facebook.github.io/react-native/docs/animated.html So from a marketing perspective if usage of the API felt similar, it would be a great thing. My guess is achieving full usage of the Samsara API might be difficult, but we may be able to achieve parity across a large number of use cases. So I guess the main thing is first creating the samsara style elements, and then building the bridge. ...DISCLOSURE: I've never used Samsara, but I just right now read the entire docs and played around in the various codepens...(LOVE, IT! I'M SUPER EXCITED) Here's how I imagine using
Nodes are nested in the reverse direction of the rendering pipeline of samsara proper. Or at least you add the surface before the nodes. Otherwise, the way the driving animations--what samsara calls 'Transitionables'--are passed into nodes as properties just as is currently done with
And obviously this is just a tree structure that needs to be decoded into Samsara-speak. So that's where the work must be done, and what must happen is different than standard react component composition. Generally you nest children components and the way you communicate between the two is passing down props. And it's important to note you're passing props to some component imported from another file or library, you're NOT passing props between elements directly nested on the same page, which is exactly what we'd need to coordinate to make this API work for Samsara. For exampe the MouseInput deltas need to be passed to SamsaraSurface and so on. And then the context parent component needs to scoop it all up. Here's likely how we would do that in React:
So So in conclusion we have:
Now the real question: rendering performance?? I think in the beginning we just assume what's being animated is "presentation" with content that doesn't change during animations. If Samsara can respond to updates to content/props with standard speeds (a few ms), all would be well and it's up to the developer to time updates to props/state in between animations. In a V2, Samsara exposes an API that developers can use to change the content. So developers would use FINAL THOUGHT: Though I have no idea of the Samsara implementation details, from where I'm looking at the API surface level--and based on what RN has already done with the |
I'm not so clear on all the details but if you are interested in getting a proof of concept up, I'm happy to answer any questions you have on the Samsara side of things! |
My first question (perhaps request) is an option to disable appending elements to the dom, as React will handle that instead. A relate question is: are all the elements within the context always appended to the dom throughout the duration of the scene? Because if they are only appended once, that makes things a lot easier. We just trick samsara into thinking that it's working with elements it appended to the DOM, when really it's using elements React appended to the DOM. Perhaps that's not the way Samsara works, but maybe it's a way samsara can work and be used for a subset of possibilities. The main idea is this: to the viewer, it doesn't matter whether the elements are removed from the DOM or just have opacity set to 0 (or the like). If you are removing elements, I assume it's for performance reasons, and perhaps that could be an initial limitation of If we can make this happen, it's just about parsing the jsx tree structure of the samsara config, passing the parsed result to samsara, and generating react/html elements with the correct classNames and style properties for samsara to be able to think it created them. Then all I would need from you is the flag/option to turn off Samsara appending/removing to/from the DOM and a parameter available for me to pass the parent node of the context that i generated in React (plus some documentation on the rules for generating that flat set of child DOM nodes). |
This can certainly be done. Everything a I should make |
Refactored |
JSPM + SystemJS React starter kit: https://github.com/rnprojekt/jspm-beta-sketch-test |
Since react 0.14+ it is possible to create custom renders more easily.
I created a POC impl for samsara.js https://github.com/mj-networks/react-samsara-poc. There is also a demo https://github.com/mj-networks/react-samsara-demo1.
The text was updated successfully, but these errors were encountered: