Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us : A new kind of Web UI
for the futur...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
• User Interface
• Animations
• WebG...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
• Imperative Development Approach
• ...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
HTML
• Originally conceived as a do...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
HTML
• Later on adopted to build us...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
CSS
• Positioning attributes introd...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
CSS
• Further augmented with transf...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
But we still have problems
• Expens...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
But we still have problems
• Slow a...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Prologue
Imperative Approach
• Telling the m...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famo.us extends this imperative appr...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famo.us Scene Graph
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
A Typical Famo.us Application
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Famous in ACTION !!
Famous Magic Cube
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Demo : Famous Magic Cube
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
What can we do with Famous ?
• Flexi...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Futur...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Futur...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Fluid UI
(Akin to desktop UI)
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Fluid UI
Demo : Famous Postit App
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Futur...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Typical softwar...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Typical organiz...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Let’s spice up ...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
System Visualization
Demo : 3D Syste...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Practical Applications for the Futur...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Examples
• Digital Signage
• Interne...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
(Interactive Digital...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
Let’s build a UI for...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Digital Signage
Demo : Digital Signa...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Best way to create the future is to ...
BANGALORE, INDIA • JULY 22-25, 2015
First Official jQuery Conference in India
Famo.us
Start Exploring !!
famous.org
slack....
Upcoming SlideShare
Loading in …5
×

Famo.us : A new kind of web UI for the future

472 views

Published on

Overview of the Famous JavaScript Framework

Published in: Internet
  • Be the first to comment

Famo.us : A new kind of web UI for the future

  1. 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. 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. 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. 4. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  5. 5. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  6. 6. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  7. 7. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  8. 8. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  9. 9. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue
  10. 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. 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. 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. 13. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Prologue CSS • Further augmented with transform functions Translate Rotate Scale
  14. 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. 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. 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. 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. 18. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Famo.us Scene Graph
  19. 19. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us A Typical Famo.us Application
  20. 20. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Famous in ACTION !! Famous Magic Cube
  21. 21. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Demo : Famous Magic Cube
  22. 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. 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. 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. 25. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Fluid UI (Akin to desktop UI)
  26. 26. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Fluid UI Demo : Famous Postit App
  27. 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. 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. 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. 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. 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. 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. 33. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us System Visualization Demo : 3D System Visualization using Famous
  34. 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. 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. 36. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Digital Signage (Interactive Digital Signage Installation)
  37. 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. 38. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Digital Signage Demo : Digital Signage using Famous
  39. 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. 40. BANGALORE, INDIA • JULY 22-25, 2015 First Official jQuery Conference in India Famo.us Start Exploring !! famous.org slack.famous.org @befamous

×