Hi guys, I am nobody here. But I am curious why you guys don’t use the existing Famous or SamsaraJS and start develop mobile/web framework on top of it? Because this community seems to go no where and the world is needing a good html+js framework. Or how about if we start developing components on top of Famous-Vue? 
@irwansyah They say good things take time. 
Definitely follow Samsara, and keep an eye out here for updates.
Believe me, I’ve been working on my prototype as much as possible and I’ve made a bunch of progress these past couple of weeks. I’ll have online demos soon…
@gadicc @Steveblue Any progress on your ends?
I’ve been using a version of Boxer in a project with much success. There is a lot of competition out there and possibly all the solutions I’ve seen (with the exception of Samsara.js) have a trajectory that is not about UI Components per se, but motion animation for existing DOM architecture. I think whatever solution we come up with needs to be extremely lightweight, and can hook into anything. Boxer is lightweight and portable so I am alright with it being POC at the moment. I’m very busy with other projects. I found it extremely easy to integrate Boxer nodes with Angular 2 and Angular 1 and have them update, I’m sure its easy with other frameworks as well, however my solution (Object.observe) is no longer on a standards track sadly but another Observable pattern shouldn’t be too hard to implement. I may actually release Boxer into the world with another update soon since I’ve been testing it in other projects, but it will be extremely lightweight and no frills, just make Matrix3D transforms accessible to JavaScript Engineers, and that’s it.
1 Like
@Steveblue Cool!
Are there any that haven’t been listed here in the forums yet?
That’s what I think too! I have a solution for it via Custom Elements and the is attribute (from the Web Components track). I’ll post an update with an example soon-ish, but first I’m ironing out some performance things). The basic idea is that we can scene-graph-ify any existing elements in some given markup and begin to animate those without having to create a separate DOM tree (like we had to with Famous).
This remains a priority for me but regrettably I’m out of time - for now, at least. Our current strategy (at work) is to build our app with zero animation (due to time constraints) and then retrofit it with something later. At that stage I’d probably like to continue with my own POC as it’s been an immensely beneficial learning process for me, and then properly evaluate SamsaraJS and the other POCs to decide on the best path moving forward and where I can make the biggest impact.
1 Like
I stubbornly stuck with the new famous engine and created a ui framework ontop of it that I get good performance out of on mobile and is also compatible with all browsers.
Using a forked engine with fixes and a framework layer I built on top of it.
Still a work in progress but I’m satisfied that it is to production spec.
Here’s something in progress using it: http://test.miltonmarkets.com/
Some stuff to see in action:
Form components: Accounts -> Live (click on the step one area sorry for the japanese lol)
Lightbox: Platform (click on a screenshot link)
Basically rebuilt a lot of polymer type components using the famous engine.
Don’t have time to adapt it to wide usage at the moment but am open to discussing or helping someone do the same.
1 Like
@gadicc Can’t wait for you to be back!
Interestingly, I’m working on a concept in motor-html to do just this. Suppose we have some static regular HTML markup with no animation, just some content:
<div>
<div class="sidebar">...</div>
<div class="content">
<h1>some title</h1>
<p>some paragraph</p>
</div>
<div class="footer">...</div>
</div>
Motor-html will make it easy to put the engine into play on existing markup with the is="" attribute:
<div is="motor-scene">
<div is="motor-node" class="sidebar" rotation="[20,20,20]">...</div>
<div is="motor-node" class="content" position="[20,20,20]">
<h1>some title</h1>
<p>some paragraph</p>
</div>
<div is="motor-node" class="footer" align="[0.5,0.5,0.5]">...</div>
</div>
I chose some random rotation, position, and align, but you get the idea (@Steveblue this is what I was mentioning above). After adding the engine, we can use the imperative API by getting the element (with the well-known jQuery, for example):
$(document).ready(function() {
var node = $('.sidebar')[0].node
requestAnimationFrame(function loop() {
node.rotation++
requestAnimationFrame(loop)
})
})
Or, with raf-timeout in place, people don’t even have to know about rAF:
$(document).ready(function() {
var node = $('.sidebar')[0].node
setInterval(function() {
node.rotation++
}, 16)
})
Motor will be smart enough to know that if node.rotation++ is called multiple times in the same animation frame that it will only update the rendering to the final value instead of multiple times.
I don’t have any demos online yet, but I’m re-writing my own site (trusktr.io) with it, so that’ll be the first demo soon.
@jokismo I like your concepts; the scroll bar, light box, and other animations are sweeeeeet!
I’ve been trying to be as productive as I can on my free time – I have a growing list of issues. 
If you have ZenHub for GitHub, then (I think) you can see the kanban boards that I’m using to organize tasks.
Still waiting. 
Hi All,
After working on my Famous-Vue it got me thinking that today there are a lot of Angular’s style framework out there for instance like Angular Material, Onsen UI, etc that already provides their own user interface widgets/components. One drawback of Famous’s style framework is that we have to develop our own UI components which is not productive. If we have an idea to develop an app we have to create the UI components first then after that we start working on our app, that is not rapid/agile. So my conclusion was, the most useful type of animation framework today is the one which we can pass the DOM element and then we can start animating it, something like Popmotion.io and its kind.
Irwan
Hi @irwansyah, this is what my motor-html prototype is good for. Suppose I really like an Angular-Material raised button widget,
<md-button class="md-raised">Button</md-button>
and I would like to put this button in a 3D scene:
<motor-scene>
<motor-node id="button-node" size="100, 100, 0" align="0.5, 0.5, 0.5" mountPoint="0.5, 0.5, 0.5" rotation="0, 0, 0" >
<md-button class="md-raised">Button</md-button>
</motor-node>
</motor-scene>
then animate it with a rotation:
import Motor from 'infamous/motor/Motor'
let buttonNode = document.querySelector('#button-node').node
let rotation = 0
Motor.addRenderTask(function() {
buttonNode.rotation = [0, rotation++, 0]
})
That’s all there is to it, now we have a rotating Angular-Material raised button. Now imagine using ng-repeat to repeat nodes in the 3D scene. We can also do similarly with widgets from other libraries like Onsen, Ionic, getmdl.io, Bootstrap, etc.
After the engine reaches a certain point, it’d be really nice to make a default set of (3D) widgets though.
however my solution (Object.observe) is no longer on a standards track sadly
Have you looked into using RxJS Observables as an alternative? I’m not sure how they’re implemented, so it might not be viable, but there are a few other frameworks that rely heavily on them.
Hi @trusktr! Very nice and thanks for that! I will take a look motor let me see if there is anything that I can help
1 Like
Thanks @irwansyah! Initial API is almost ready, just have to finish those tasks and make some tests. Then, I’d like to focus on making some nice demos.
A little late, but yeah I’m sad Object.observe is gone too. It is better than every solution that exists today, in basically every way.
I did however implement my own observe tool, but the downside of it is that it relies on getters/setters so in some rare cases it could conflict with an Object’s functionality, but in most cases it won’t.
I’m using observe in the latest things I just merged into master, which makes the definition of props (mapped to HTML attributes) a lot cleaner, thanks to (my forked version of) SkateJS. The lib is now using element-behaviors which gives the elements an “entity-component system” (but in this case called “element-behavior system” so as not to confuse with the many forms of “components” in the web world today), and I’m using the observe implementation there so that behaviors can observe property changes on the elements they belong to.