Famo.us : A new kind of web UI for the future
40
BANGALORE, INDIA • JULY 22-25, 201 First Official jQuery Conference in Ind Famo.us : A new kind of Web UI for the future Shyam Purkayastha (@shyampurk)
-
Upload
shyamsundar-purkayastha -
Category
Internet
-
view
68 -
download
0
Transcript of Famo.us : A new kind of web UI for the future
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us : A new kind of Web UI for the future
Shyam Purkayastha (@shyampurk)
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
• User Interface• Animations• WebGL Rendering• Physics Engine
famous.org
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
• Imperative Development Approach • 60 FPS• Mixed Mode• 3D visual effects
famous.org
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
Absolute vs Relative
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
HTML• Originally conceived as a document structuring mechanism
Section 1
Section 2
Section 3
Section 4
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
HTML• Later on adopted to build user interfaces for web applications
Header
SIDE
BAR
Footer
Content 1 Content 2
Content 3 Content 4 Content 5
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
CSS• Positioning attributes introduced in CSS2 for absolute and fixed alignment.
Content
top :
left:
bottom:
right : position :
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
CSS• Further augmented with transform functions
Translate Rotate Scale
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Prologue
But we still have problems
• Expensive Reflows due to mix of different positioning strategies for the DOM
BANGALORE, INDIA • JULY 22-25, 2015First 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;
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First 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 , therebyachieving 60 frames per second
• Inheriting the scene graph design pattern used in the game engines to buildhierarchical scene elements known as nodes
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Famo.us Scene Graph
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
A Typical Famo.us Application
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Famous in ACTION !!
Famous Magic Cube
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Demo : Famous Magic Cube
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Fluid UI
(Akin to desktop UI)
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Fluid UI
Demo : Famous Postit App
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view of an aircraft construction assembly line
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Bird’s eye view of software construction process
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Typical software construction process
Reqm. Capture Design Coding Testing Release
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Typical organizational workflow block diagram
Checkout Review Shipping Payment Complete
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Let’s spice up the boring block diagram !!!
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
System Visualization
Demo : 3D System Visualization using Famous
BANGALORE, INDIA • JULY 22-25, 2015First 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
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Examples
• Digital Signage
• Internet enabled Kiosks
• Embedded Devices
• Bill Boards , Information Display Boards
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Digital Signage
(Interactive Digital Signage Installation)
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Digital Signage
Let’s build a UI for a digital signage application using Famous
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Digital Signage
Demo : Digital Signage using Famous
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Best way to create the future is to invent it-Alan Kay
BANGALORE, INDIA • JULY 22-25, 2015First Official jQuery Conference in India
Famo.us
Start Exploring !!
famous.org
slack.famous.org@befamous
![Chapter3 Containerui;'u;i\;y\ui;;i];tu]i;]t;ui;t]u;i';krhmgkui;'u;i\;y\ui;;i];tu]i;]t;ui;t]u;i';krhmgkui;'u;i\;y\ui;;i];tu]i;]t;ui;t]u;i';krhmgkui;'u;i\;y\ui;;i];tu]i;]t;ui;t]u;i';krhmgkui;'u;i\;y\ui;;i];tu]i;]t;ui;t]u;i';krhmgk](https://static.fdocuments.us/doc/165x107/577cc8211a28aba711a21e28/chapter3-containeruiuiyuiituituituikrhmgkuiuiyuiituituituikrhmgkuiuiyuiituituituikrhmgkuiuiyuiituituituikrhmgkuiuiyuiituituituikrhmgk.jpg)
