89 comments

[ 4.4 ms ] story [ 155 ms ] thread
Why is it called famous?
I'm guessing it's the best domain name the founders had already.
Because it always gets on the front page of Hacker News.
Famous for winning the vaporware award two years in a row, :p.
I can't see random letters and console is screaming about errors left and right. Firefox 31.
I'm getting the same issue with Firefox 38.

Most missing chars seem to be capitalized. A few specifics: F, H, B, P, X

Opening this page caused Firefox to go into a full swapfest mode, rendering the page unresponsive for several seconds.
Looks pretty good with the elinks web browser.
Hover animation is broken in Lynx, lamentable
Opera 29 Android: first two demos on the home page ok, last two demos black. Chrome 42: same thing. Firefox 38: same but much slower. Stock browser (4.4.2): everything works, a bit slow. I'm really surprised: this should be the most old browser on this tablet. Drivers integration?
On a Nexus 7 2013 and Firefox, all of the demos work but are quite slow.
Works fine for me, latest version of Firefox on Android and Windows.

(Slow on Firefox/Android, but that's to be expected)

Quite slow on Chrome...

At least they gave up trying to build an entire website with it =)

Edit: Looked at top and Chrome is using like 60% CPU when the famo.us page is loaded (and nothing else). Ouch. (2.4 core 2 duo)

Can't really see the code on the left, it's blocked by the big margins and the split with the webGL on the right. Enlargement gets rid of the margins but also makes the text in the code box bigger.
The linked website makes my browser crash… (Firefox 31.6).

I don't know what it is supposed to be but if it is a web tech, it is clearly not production ready.

The company I work for always only supports the latest 2 releases of firefox and chrome. I'm not arguing for or against this being production ready, but I don't think Firefox 31 support should determine whether something is production ready.
Firefix 31 is the current stable (ESR) version. Just look at how many people run it here in this thread.
It is also crashing for me with Firefox 38.0.1.
I can see literally no text on chrome, and some capital letters are missing on firefox. All latest versions. Even without ad blocking
I saw 4 demos, they all worked fine on Firefox and Chrome (uptodate versions). Bit heavy on the CPU, I imagine that impacts some machines' performance.
Why does this look like Three.JS code? It seems to have very similar capabilities (although Famo.us seems to have less features) and even the code seems to be familiar to me as a ThreeJS guy.

Also I'd argue that ThreeJS can make for better looking results:

https://clara.io/view/193070f2-e8af-4afc-a531-9d82338b5288

I expect there is a decent amount of back and forth. Graphics demos of different tech in an era always tend to look similar for a number of reasons (tackling similar problems, wanting to outshine a competing similar demo, culture of the time etc.)

I know MrDoob was inspired to duplicate the Famo'us periodic table demo in Three.js/CSS and in the other direction, well its goddam MrDoob, you can't work in web graphics and not be inspired by him.

Code that deals with 3D space tends to look similar. Design patterns that work in such contexts tend to be common sense.

Three.js can make far better looking results currently because it's a full-fledged, mature 3D engine. Famous isn't designed to compete with that. It's really intended to sort of merge DOM and 3D content so you can use both in a unified manner.

Also, trashing someone else's product while plugging your own in the same breath is simply poor taste.

Even though I am a contributor to ThreeJS I do not consider it my own project, it is MrDoob's project.
rl3 was referring to the link to your site.
* Also, trashing someone else's product while plugging your own in the same breath is simply poor taste. *

Tone says a bit about people at famo.us

I'm not an employee at Famous, nor have I ever worked for them in any capacity whatsoever.

In fact, I found Famous via working on a personal project that heavily utilized the Three.js CSS3DRenderer.

While I love Three (and by extension MrDoob) very much, the experience left me with a healthy appreciation of what the Famous team is going for. I've tried to do the very same thing myself (fuse DOM and WebGL), and quickly realized all of the pitfalls involved.

Has anyone actually managed to loop animations on the web without putting the CPU on fire?

It was my task recently to optimize some animations (done with Web Animations polyfill) and even though all the profilers showed that CPU is doing almost nothing (GPU animated all the stuff) Chrome was using ~25% of CPU all the time which resulted in a noisy fan after a minute or two.

I feel like I’m missing something here, I believe there must be a way to do it…

You want to use GPU-based skinning or similar techniques for best performance.

Also are you limiting your framerate (not framework, sorry) to something reasonable?

Also I recommend not creating too many objects to be GC'ed.

What do you mean by limiting my framework?

Yeah, true, I don’t create any objects in that animation actually. I just do opacity animations (from 0 to 1 and vice versa) and some transforms sometimes (which are supposed to be 'cheap' according to some resources on the internet).

Framerate, sorry. Just make sure it isn't updating constantly. Can you share an example btw?
(comment deleted)
Same here on Firefox 31 on Windows 8.1. 25% used on my dual-core i5 with HT. This just sucks.

Years ago I added a 'snow' animation JS libary to a custom website which let little snow flakes drop during winter time. All just for fun. It turned out to be fun only for a few days until I got the first complaints about users not being able to use their computers anymore and mobile devices being barely able to scroll anything.

I also believe that there must be a better way for simple animations.

The site used 100% of my old Core 2 Duo's CPU on Iceweasel / Jessie; brought the machine to its knees. LOL js.
> until I got the first complaints about users not being able to use their computers anymore

They got snow in their browser, and they still complained. People are so ungrateful.

Seriously though, this animation sounds fun and neat.

Here's how I've achieved that cheesy 90s spinning effect in the past:

    @keyframes spin {
      0% { transform: scaleX(1); }
      50% { transform: scaleX(-1); }
      100% { transform: scaleX(1); }
    }
    .spin {
      animation: spin ease-in-out 6s infinite;
    }
All done on the GPU as far as I can tell...

The only satisfactory way to do web animation I've found is to do it 100% in css by toggling classes. As soon as the JS interpreter gets involved in any way, things go south.

Right, but the point is even GPU-optimized animations in the browser seem to tax the CPU. It's something I've experienced as well.
Even when they're controlled/computed/whatever purely through css as above? Maybe I've just been lucky in my limited experience with looping them infinitely like this.
Could you render the animation, and play it back as a gif?
That's the traditional way to do it afaik, just tile a gif over the whole viewport.
Hmm, how does Famo.us stack up to GreenSpck's GSAP? I've been tinkering with GSAP for the past week and have been pleasantly suprised with its capabilities, but I don't know if its the more performant of the animation libraries.
It's interesting how JS was created for animations, yet is typically failing even at that.
This would be perfect for a chart / graph library.
Are there any examples of products that use the famous framework in production? The lack of case study examples on their website worries me a little.
They regularly spotlight apps on their mailing list[1].

For example:

- World Cup App Spotlight[2]

- InkaBinka[3] (Only the mobile apps?)

[1]: http://us5.campaign-archive2.com/home/?u=4656ba2b0a364690c85...

[2]: http://wc.complex.com/

[3]: http://inkabinka.com/

Those two examples are really poor, the usability is terrible in both cases, and the effects are not impressive enough to be worth giving up core features like zoom and copy / paste.
Yeah, agreed. I looked at the football one and it reminded me of low quality Flash work circa 2006... until I had to close the tab because I was worried my MacBook Pro was going to melt my glass desk.
I like their new branding and docs. It looks really easy to get up and running, but the basic "hello world" isn't working for me..

npm install -g famous-cli && famous init my-first-project && cd my-first-project && famous project deploy

..and nothing happens. Did I miss something obvious?

Also, I'm curious: are there any big companies using famo.us? Are there any non-trivial famo.us applications that we can look at?

* "famous init my-first-project" starts a new project

* "famous project deploy" deploys your application to hub. It gives you a snippet that can be used in order to embed your widget on a website.

* "famous dev" starts the development server.

Deploying your widget requires an account, did you register via `famous register`?

That being said it should have given you an error message if that's the issue. I can't seem to be able to reproduce this.

Can you file an issue on https://github.com/Famous/famous-cli or post the platform + node/ io.js version you're on here?

Thanks.

(For disclosure I am an employee of famous)

oooo... my first chance to add something to Hacker news :D So... the deploy will produce a snippet that is missing the close div </div> it give you something like this: <script src="https://assets-te.famo.us/embed/embed.js"></script> <div class="famous-container" data-famous-container-identifier="97fb05b1-7884-43b6-8bd1-c8a3c3084a6d">

add this: </div>

Does this mean I'll get accepted to YC ? (cue Eddie Murphy laugh)

From a development efficiency perspective, Famous is not as good as Angular or React. From a rendering perspective, it's not as good as three.js. It's not yet a leading tool. Jack of all trades, master of none. Maybe it will make more sense when VR platforms become mainstream.
How much time have you spent with the new release?
What was released today was a rewrite of the Famous core engine, so you can't really compare it to Angular or React. Three.js is a far better comparison, though the two have different specialties since Famous isn't trying to be pure WebGL.

The Famous team is working on a framework that will interface with their core engine, making things far cleaner at the application level while facilitating less painful integration. Comparing that to various client-side frameworks will definitely make sense.

To expand on this, Famous's Node class [0] is rather like a DOM node, except far more powerful. You could imagine a React component that renders a tree of virtual Nodes, diffs that with an existing tree, and transitions properties accordingly. But that will be built on Famous, just like react-canvas [1] needed the canvas API to exist. Baby steps.

[0] http://famous.org/docs/core/Node.html

[1] https://github.com/Flipboard/react-canvas

I think that pulling the core out into a separate engine is definitely the right direction and it will be interesting to see what framework they come up with. It definitely needs a clean slate - The Famous/Angular stuff looked promising but it came across as a bit bulky.
I tried to build a website with the "old" famo.us, but it was slow going, once you'd got past the initial setup. You're on your own for widgets!

Also, "famous" or "famo.us" is a BAD name. Sorry, but you can't google for help or tutorials. Google for "famous websites" or "famous tutorials", see what you get. :-/

slow going.

Famous Engine is a complete rewrite.

0.3 was doing a lot of unnecessary matrix multiplications on a frame by frame basis. It also produced a lot of garbage, resulting into a frame drop every time the GC ran.

Famous Engine produces basically no garbage at all. It has an event based system for updating transforms.

I apologize for your bad experience with "old" famous, but please keep in mind that we started from scratch.

(For disclosure I am an employee of famous)

That's interesting, but none of the complaints the poster you're responding to brought up had to do with matrix multiplication or garbage collection.
I did some work with 'old' famo.us, and boy was it slow going. Then again, at the time I was relatively new to javascipt, so understanding scope, callbacks and such was hard at the time.

Now its popping up again. Time to take it for another run. The problem in the past was a small/inactive/detached community imo, if there was an active community behind it, it would be amazing.

Also, the famo.us devs seem to expect a lot of community stuff to be happening in or around their offices, which is unfair to us overseas guys who can't go to a famo.us demo day in their office.

You'll get better results searching for "famo tutorials".

Maybe they should change the name to Famo Engine.

The bit that I find most impressive is the mixed mode demo ... http://famous.org/learn/MixedMode/index.html ... Putting an iFrame on a 3D model and still being about to use the page that's loaded is cool. The problem with that is that there are so few use cases where you'd actually want to do that.
For fun I checked out the mixed-mode demo and navigated in the inner browser to the mixed-mode demo, then within that inner-browser I navigated to mixed-mode demo again. It kinda stutters as it first loads, but otherwise seems to work great. Really interesting! Screenshot: http://i.imgur.com/ipyxFE6.png
I am sure that iPhone users are not your target audience, but the site is almost unusable because of the large header and menu bar at the top of the screen.
I am sure that iPhone users are not your target audience, but the site is almost unusable because of the large header and menu bar at the top of the screen.
I can't seem to get started with this. Their seed repo does not allow me to clone it with the git command. And when using the init functionality as displayed on the front page there is no way to actually setup the damn webserver.

Unfortunately, I am very displeased by the first experience. Chances are that this is also my last experince.