-
Notifications
You must be signed in to change notification settings - Fork 920
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
Announcing React-RETINA (<canvas> for React v15 & also Preact compatible, and supports variable sized ListView) #160
Comments
@xphung is this meant to be a production ready alternative to |
Hi fredguest, My target & testing for it has been Chrome and OS X WKWebKit only, and it makes no attempt whatsoever to support quirky older browsers, and there are no production-ready guarantees. On browsers that do support React-RETINA, my testing to date indicates it is higher performance than React-Canvas, as React-RETINA intentionally leaves out some costly features like arbitrary Z-indexes and text metrics. For example, to support arbitrary z-indices, React-Canvas creates an array, reverses it, and sorts it ... it does this repeatedly for every single layer (including all child layers in the sub-tree) for all non-cached Canvas redraws. There may be hundreds of child-layers (eg. every single text and image component has it's own layer). My approach instead has been to traverse the layer tree in 'vDOM' order, and fix the z-depth to child > parent & nth child > nth-1 child. Given 'vDOM' order is arbitrary and x/y/width/height of any layer can be set to overlap as much or as little as any other layer, there is very little additional flexibility to be gained by the arbitary z-index approach of React-Canvas. The other example is it's support for Preact, which at approx ~10KB is a higher performance and faster loading alternative to React v15.... I hope these examples shows why I believe there is a place for a tighter, lightweight approach than that taken in React-Canvas + React. |
It sounds very interesting, I'd like to try it out but it's a bit messy to import at the moment. Are you planning to publish it to https://www.npmjs.com/ so people can simply |
My priority at this stage is getting v1.1 out, before publishing it more widely |
Currently, v1.0 is available as a "traditional" <script src='...'> library, located at "js/react-retina.js". This file is a browser-ready build of the React-RETINA code which can be incorporated into scripts the old fashioned way (via the Retina global variable, which provides access to the various components of the library, ie: Retina.View, Retina.Text, Retina.Image, Retina.Surface, Retina.Gallery, etc). You will also find convenient built files for the dependencies at js/react.js, js/react-dom.js and js/redux.js .... have a look at the demo.html to see how these are all put together via <script> tags. |
Ok cool sounds good. Looking forward to trying it out! |
Interested in using it, but haven't seen any updates since initial commit or an npm package (which is kinda of a must). Are we gonna see more development? |
Hi Kungfoolabs, an NPM package isn't my priority right now. I'm working on v1.1 release first, which will feature major improvements to the Gallery component (essentially breaking it down into a series of separate components). NPM packaging will be considered after v1.1 has been done. |
@xphung Thanks. |
@xphung any estimate release date on v1.1? I would also be interested in an npm package. |
Hi turnerniles, v1.1 will be about improving the Gallery component (restructuring it into a collection of several smaller components), and is a few mths away. |
@xphung Are you still working in it? |
@xphung Impressed and intrigued by the concept of React-RETINA as well as react-canvas. Do you know of any sites using this lib in production yet? |
This library is an alternative Canvas implementation for React v15 (which react-canvas has not yet been updated to use). It is also compatible with Preact.
https://github.com/xphung/react-retina
Features:
useBackingStore
property to make the View the cache a repaint. Simply assign a new ID whenever an invalidation and repaint into Backing Store is required ... no need for a special Javascript calls or API to invalidate cache data!The text was updated successfully, but these errors were encountered: