famo.us

View Github Repository Open presentation in a new window

thaiat

See all presentation from thaiat

famo.us

2 1

keynote-famous

Keynote for famo.us meetup

On Github thaiat / keynote-famous

famo.us

Famo.us is a free, open source JavaScript framework that helps you create smooth, complex UIs for any screen

Presented by Avi  Haiat - thaiat@yoobic.com

Notes:

Who am I ?

Who am I ?

Vizelia bought by Schneider Electric in 2011

Yoobic

  • Yoobic is a "Mobile productivity App"
  • Yoobic simplifies short term logistic processes and transform logistic costs into a stream of revenues
  • Yoobic is leveraging crowdsourced workforce and harnessing geolocation technology

More platforms, more problems

Do we really need to code for multiple platforms ?

“The biggest mistake we've made as a company is betting on HTML5 over native.”

Mark Zuckerberg - 2012

It's not 2012 anymore

Mobile devices and HTML5 stacks have rapidly evolved

Demo night

Where is famo.us stack ?

What is famo.us ?

  • Open source web rendering engine
  • Lets you build high-performance, cross-platform animations, imperatively
  • Alternative to native mobile apps.
  • 100% Javascript
Notes:

How does famo.us work ?

The render tree

Scene graph

Notes:
  • Instead of keeping track of content with the DOM, famo.us keeps track of its own representation of its render tree, using a data structure called a scene graph
  • Scene graphs are commonly used in 3D platforms like OpenGL or DirectX, but are not common in the traditional web world.

How does famo.us work ?

Surface, Modifier, Transitionable

transitionables

How does famo.us work ? (cont.)

  • famo.us makes use of CSS3’s Matrix3D transforms, which gives it its GPU-accelerated performance
  • requestAnimationFrame (60 FPS)
  • Agnostic output layer (DOM, WebGL, ...native?!)
Notes:

So what the famous-angular integration look like ?

  • Maintain famo.us’s rendering performance
  • Support angular’s data-binding
  • Support using existing angular components (incl. third-party)
  • Support using existing famo.us components (incl. third-party)
Notes:

The result

  • This famo.us code:
  • var myView = new View();
var mySurface = new Surface();
mySurface.setContent("
    I'm a surface
    "); myView.add(mySurface);
  • looks like this in famo.us/angular:
  • I'm {{data.bound}}
    
  
                    
    • 
                    
Notice how easy it is to databind!
                        


Awesome work Zack Brown & David Graunke @thomastreet!
                        

                
  • Since angular's scope hierarchy maps to famo.us's render tree hierarchy, this lets us write library directives that create famo.us's render tree components
    • 
                        
  • This has turned out to be an excellent use of angular's directives to extend the vocabulary of HTML
    • 
                        
  • famo.us/angular directives are essentially an HTML DSL for famo.us
    • 

                        
  • It makes it extremely easy to integrate famo.us with any existing HTML or Angular apps.
    • 
                        
  • It allows you to use Angular's data-binding within famo.us components.
    • 
                        
  • It encourages a clean architectural separation of concerns (view layer.)
    • 
                        
  • It allows you to use custom directives (pre-existing, third-party, or new ones) inside of your famo.us apps
    • 
                        
  • And of course you get the rest of the benefits of angular, like testability, organization, and streamlined data management.
    • 

                    
How do I get started ?

                

                    

                        

                

            
This is boooring... Show me the code

            
Live coding

                
Let's play with the baby and see how easy it is to build a flickr like mobile app

                
We are going to build famous-flickr

                
Let's wrap it up

                
  • Scaffold template app with yo mcfly
    • 
                    
  • Scaffold service photos
    • 
                    
  • Scaffold view controller home
    • 
                    
  • Use famo.us angular for rendering the home view
    • fa-scroll-view
      • 
                        
    • fa-grid-layout
      • 
                    
    • 
                    
That's it !!!

                

                    

                        

                    

                        
and one more thing...