@Steveblue just to clarify, I’m talking about webview’s which are not the same as mobile browsers. For devs who are working on hybrid apps with Phonegap/Cordova there is crosswalk that provides modern web technologies even on older versions of Android.
@Steveblue
Famous mixed mode engine doesn’t run on IE9, but it is functional in IE10. We should see how they worked that out, We need to shift away from an “it can’t be done” knee-jerk reaction to a “how can we make this as successful as possible” approach.
@peace I think you are mistaken. My reaction is not knee jerk, read what @trusktr had explained above for a thorough technical explanation. The Mixed Mode Engine does not truly support 3D transformations in IE 10 and does not leverage the GPU. Famous 0.3.5 did not support it either. If you think it can be done, then I would suggest submitting a pull request with the possible fixes needed to run this prototype in IE10.
Another note, on January 12, 2016 Microsoft will no longer be pushing security updates and giving technical support to any browser below IE11. Even though a percentage of users are still running IE 9 and IE 10 why is it that we are beholden to supporting these browsers when Microsoft doesn’t?
1 Like
I think this conversation has been derailed. I had hoped to get valuable feedback on the state of the API and performance for the Boxer Engine. Can we please stick to this topic?
1 Like
Traditional DOM is already a 2D-based API. What advantage would we get from a 2D-only transform fallback? Are those hardware accelerated? If not, then they must be comparable to using top and left. We can already set everything to position:absolute then move things around in 2D:
el.style.top = 10
el.style.left = 20
which is almost the same as
node.setPosition(20, 10)
Is the extra API for that necessary? The benefit is that it’ll set you up for when/if the environment gets upgraded, and the stuff will be ready to work with acceleration and 3D.
Another thing is that the design of our lib involves Web Workers, which are supported in IE10+. We’re still thinking on how to implement that well, let alone how to fallback to a non-worker environment. It’s totally possible, but requires an extra layer of code (and ore room for error and more maintenance work) to make it happen.
The fallbacks can be done, but we need more minds and input on how to do it from more community members. Definitely get involved, share ideas on how we might fallback. I think it’ll be easier to address those concerns once we’ve moved onto the single-project after we merge the basic ideas of what we want.
We value your opinion. Please do open new threads regarding the topics you’d love to see addressed. 
Updated the repo with a new examples folder. Here you will find proof of concepts starting with a simple header, aside, content, footer layout. Fixed a bunch of issues pertaining to how Elements were getting transformed too, still a work in progress. Clone or fork the repo and visit /examples/app.html. Next I’m going to work on the Event system, expect it to be a lot like famo.us 0.3.5 with objects like GenericSync. Then, I’ll circle back and make a version w/o Web Worker to test performance.
1 Like
Refactored the examples found at http://devmagnet.net/boxer/demo Fixed a lot of issues too I found with Transitionables, still need to work in GenericSync but am thinking now of switching back to testing non Worker approach. Take a look at the url above for some new examples, including the main index which now acts like a directory for the examples folder. I may be biased, but I am preferring this API over Famous because I can directly effect DOMElement with Javascript. For instance, in the Simple App Layout example, I bind an EventListener to the aside and main content divs that start a Transitionable.
1 Like
@dmvaldman While I haven’t tested a non web worker approach yet, I found a bottleneck in the DOMComponent. Setting a position property on DOMElements will cause unnecessary repainting while Matrix3D transform is animating, so avoiding this is a good practice. I also forced the DOMComponent to draw Matrix3D by upping the z translation to 1 by default for all transforms. I’m going to work in an API for setting flex box properties to make layouts simpler. The examples are now operating between 50-60fps in Chrome. I still plan to set up a test to determine performance of non-worker approach.
1 Like
@Steveblue – you’re right and I apologize for derailing this thread. All I’ll say about this is “Don’t shoot the messenger.” It’s not me you’re arguing against but the decision makers with business interests.
Well, there’s this too: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers
The audience of decision makers with business interests is probably one whose members have money, and I bet people with money are likely not to have IE 8 or 9.
Added a new example featuring a 3D carousel. Adjusted the api so you can set transforms manually if you want. http://devmagnet.net/boxer/demo/
1 Like
seems you’re using CSS animation properties, specifically transition. Is the idea to leverage this? Or to update transform styles from JavaScript a la famo.us
Only one of the examples is using transition, the carousel. I thought maybe the API could allow for developers to take more control and keep styling in CSS where it probably belongs. Also, I want to replicate this example purely animated with JavaScript and see if there is any clear benefit. Right now the API is not doing exactly what I expect, so trying to move this example into JS will help fix some issues but also now developers have an API where they can set transform manually, keep a lot of styling in CSS which they may prefer. @dmvaldman also, in this example the Engine is still updating transform styles (which was necessarily to control the carousel), just not animating them.
I think this might be nice for when a tween curve will be used (as opposed to something like physics). In the case of curves, I can imagine that the engine could automatically use the CSS transitions. The question is, can we synchronize this with WebGL when we (eventually) do mixed mode?
I think @joe the question is when developers just want to rely on CSS do we really need to think about synchronizing with GL. There should be an API that allows both GL and DOM to be positioned in same space, no doubt, but possibly this Engine would be adopted by more developers if it can coexist with CSS.
Updated the examples again. In this release, I refactored the way Matrix 3D Transforms are handled in the DOMComponent and fixed how rotations were calculated. Apparently matrix3d takes radians, not degrees. There is a new instance of the 3d carousel, this time the animations are handled purely through ticks on the Engine and positioning is handled with Matrix3D transforms. http://devmagnet.net/boxer/demo/
Now that a lot of quirks have been fixed with the API, moving onto non Worker version.
1 Like
@dmvaldman @trusktr @talves Non-Worker approach wins hands down. You can see the comparison of the 180 Rotating Nodes at http://infamous.github.io/boxer/ . I’m wondering if this is just because messaging has latency and can’t keep up with 60 fps? Maybe my implementation is wrong and just non performant, but I just think that maybe Workers are not meant to message back and forth this quickly at this scale.
The latest examples all using requestAnimationFrame directly on the Window are in the usual spot. http://devmagnet.net/boxer/demo/
1 Like
BTW examples are broken in Safari browser at http://infamous.github.io/boxer/ but work at http://devmagnet.net/boxer/demo/ b/c of my implementation to try to support both Scene and Worker. Apparently you cannot access constructor of a Worker in Safari.