Overview of the Famous JavaScript Framework

1. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us : A new kind of Web UI
for the future
Shyam Purkayastha (@shyampurk)

2. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
• User Interface
• Animations
• WebGL Rendering
• Physics Engine
famous.org

3. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
• Imperative Development Approach
• 60 FPS
• Mixed Mode
• 3D visual effects
famous.org

4. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

5. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

6. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

7. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

8. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

9. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue

10. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
HTML
• Originally conceived as a document structuring mechanism
Section 1
Section 2
Section 3
Section 4

11. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
HTML
• Later on adopted to build user interfaces for web applications
Header
S
I
D
E
B
A
R
Footer
Content 1 Content 2
Content 3 Content 4 Content 5

12. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
CSS
• Positioning attributes introduced in CSS2 for absolute and fixed alignment.
Content
top :
left:
bottom:
right :
position :

13. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
CSS
• Further augmented with transform functions
Translate Rotate Scale

14. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
But we still have problems
• Expensive Reflows due to mix of different positioning strategies for the DOM

15. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
But we still have problems
• Slow and Lousy animations compared to native apps
• Declarative approach to building apps which is counter intuitive
Declarative Imperative
background-color : blue; background-color : #00FF00;

16. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
Imperative Approach
• Telling the machine “how to do something” rather than telling it “what you want”
and letting it figure out how
• Using a programming language

17. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famo.us extends this imperative approach
• Using JavaScript to build and abstraction layer between the developer and
the browser
• Leveraging matrix3d( ) transforms and rAF to manage UI transitions and
animations which are GPU accelerated.
• Strictly adhering to a flat DOM structure to avoid expensive reflows , thereby
achieving 60 frames per second
• Inheriting the scene graph design pattern used in the game engines to build
hierarchical scene elements known as nodes

18. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famo.us Scene Graph

19. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
A Typical Famo.us Application

20. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famous in ACTION !!
Famous Magic Cube

21. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Demo : Famous Magic Cube

22. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
What can we do with Famous ?
• Flexible APIs to define User Interfaces and animations
• Leverage the ubiquity of web to create the future

23. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Future
• Fluid UI for web applications
• Creating system visualizations
• Transforming traditional electronic media with web and Famous

24. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Future
• Fluid UI for web applications
• Creating system visualizations
• Transforming traditional electronic media with web and Famous

25. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Fluid UI
(Akin to desktop UI)

26. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Fluid UI
Demo : Famous Postit App

27. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Future
• Fluid UI for web applications
• Creating system visualizations
• Transforming traditional electronic media with web and Famous

28. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view of an aircraft construction assembly line

29. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view of software construction process

30. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Typical software construction process
Reqm. Capture Design Coding Testing Release

31. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Typical organizational workflow block diagram
Checkout Review Shipping Payment Complete

32. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Let’s spice up the boring block diagram !!!

33. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Demo : 3D System Visualization using Famous

34. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Future
• Fluid UI for web applications
• Creating system visualizations
• Transforming traditional electronic media with web and Famous

35. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Examples
• Digital Signage
• Internet enabled Kiosks
• Embedded Devices
• Bill Boards , Information Display Boards

36. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
(Interactive Digital Signage Installation)

37. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
Let’s build a UI for a digital signage application
using Famous

38. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
Demo : Digital Signage using Famous

39. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Best way to create the future is to invent it
-Alan Kay

40. BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Start Exploring !!
famous.org
slack.famous.org
@befamous