Download to read offline
![HTML
CSS!
DOM
jQuery!
Prototype!
[pure Javascript]!
…
Traditional Model](https://image.slidesharecdn.com/famo-140904041838-phpapp01/75/Famo-us-introduction-7-2048.jpg)
Uploaded byAllen Wu
Famo.us introduction
Famo.us is a JavaScript framework designed for cross-device compatibility, featuring a 3D layout engine and a physics animation engine, offering 60 fps performance. It abstracts traditional DOM management through a render tree while enabling lightweight development with primarily JavaScript. Though it presents some limitations, such as being view-focused and having specific device issues, it is suitable for SPAs and applications needing advanced animations.
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Famo.us introduction
- 1. Famo.us Javascript Frameworkfor any device @allenfantasy
- 2. Famo.us is… AJavascript framework, including: • A 3D layout engine can render to DOM, Canvas, WebGL • A 3D physics animation engine
- 3. Famo.us is NOT… • Backbone, Angular, Ember, … • Node.js, Koa, … • jQuery, Prototype, Mootools, …
- 4.
- 5. Why Famo.us ? • 60 FPS on ANY device • Built-in Physics Engine • Built-in event mechanism • Lightweight (179kb minimized) • Javascript ONLY, NO CSS/HTML (if u want) • Open source & Community Build up mature, cross-device Web-App that can compete with Native App
- 6. Famo.us abstracts awayDOM management by maintaining a representation called the Render Tree
- 7. HTML CSS! DOM jQuery! Prototype! [pure Javascript]! … Traditional Model
- 8. CSS Famo.us ! Render Tree DOM HTML Famo.us Model
- 9. Render Tree •Abstraction of DOM • Context Root • Renderable Basic Unit of content • Modifier Control Renderable’s • style & position Context Renderable Modifier Renderable
- 10. Context Modifier Renderable Context Modifier Renderable Renderable
- 11. Renderable • Surface<div> • ContainerSurface <div> (Can have children) • InputSurface <input> • ImageSurface <image> • …
- 12. View • Containsa set of ‘node’s. • Represent part of the page • ‘Subtree’ in Render Tree Context Modifier Renderable View
- 13.
- 14.
- 17. Context Surface! (<div>) Modifier
- 18. Layout HeaderFooterLayout GridLayout Header Content Footer
- 19. Layout Sequential LayoutFlexibleLayout surface 1 surface 3 1 3 1 surface 2 surface 4
- 20. Famo.us in Production • Mobile WebApp + Wechat service for Business • 7 man-month. • Express + Famo.us + Ruby • 95% Javascript, NO HTML • Grunt + Bower + Mocha • Learning curve: 2-3 weeks for Javascript beginners
- 21. When to use? • SPA • when you need fancy animation • Mobile Application (esp. for web devs)
- 22. Drawbacks • ONLY‘View’ • ‘All or Nothing’ • Some specific device issues (e.g Android Keyboard)
- 23. Possibilities • Famo.us+ Angular (or other MV*) • Famo.us + PhoneGap / Cordova • Famo.us + Ruby (Sinatra / Padrino) • … • More on famo.us
- 24. ⼲⼴广告时间 • 大学城Ruby小组/ Famo.us 讨论小组 • Ruby小组订阅号 • Web实习生招聘
- 25.