A few barriers:

• Performance This is getting better But can still be tricky
• Ease of wrappingThis is getting better
• Rich InteractivityCSS falls short JavaScript traditionally sacrifices performance

keepcalm-o-matic.co.uk

• We simply can't do everything with CSS that we can do with native mobile.
• When things get complex, animations/interactions with CSS are either extremely hard or outright impossible.
• (and that's just for authoring: consider design changes, refactors, and maintenance.)
• What we hit is a "Declarative Ceiling."

                
              .element-animation{
                animation: animationFrames linear 4s;
                animation-iteration-count: 1;
                transform-origin: ;
                -webkit-animation: animationFrames linear 4s;
                -webkit-animation-iteration-count: 1;
                -webkit-transform-origin: ;
                -moz-animation: animationFrames linear 4s;
                -moz-animation-iteration-count: 1;
                -moz-transform-origin: ;
                -o-animation: animationFrames linear 4s;
                -o-animation-iteration-count: 1;
                -o-transform-origin: ;
                -ms-animation: animationFrames linear 4s;
                -ms-animation-iteration-count: 1;
                -ms-transform-origin: ;
              }

              @keyframes animationFrames{
                0% {
                  left:-299px;
                  top:-196px;
                  opacity:1;
                  transform:  rotate(-1deg) scaleX(1) scaleY(1) ;
                }
                50% {
                  left:-137px;
                  top:25px;
                  transform:  rotate(976deg) scaleX(0.77) scaleY(3.179999999999998) ;
                }
                100% {
                  left:200px;
                  top:0px;
                  opacity:1;
                  transform:  rotate(24deg) scaleX(3.52) scaleY(3.179999999999998) ;
                }
              }

              @-moz-keyframes animationFrames{
                0% {
                  left:-299px;
                  top:-196px;
                  opacity:1;
                  -moz-transform:  rotate(-1deg) scaleX(1) scaleY(1) ;
                }
                50% {
                  left:-137px;
                  top:25px;
                  -moz-transform:  rotate(976deg) scaleX(0.77) scaleY(3.179999999999998) ;
                }
                100% {
                  left:200px;
                  top:0px;
                  opacity:1;
                  -moz-transform:  rotate(24deg) scaleX(3.52) scaleY(3.179999999999998) ;
                }
              }

              @-webkit-keyframes animationFrames {
                0% {
                  left:-299px;
                  top:-196px;
                  opacity:1;
                  -webkit-transform:  rotate(-1deg) scaleX(1) scaleY(1) ;
                }
                50% {
                  left:-137px;
                  top:25px;
                  -webkit-transform:  rotate(976deg) scaleX(0.77) scaleY(3.179999999999998) ;
                }
                100% {
                  left:200px;
                  top:0px;
                  opacity:1;
                  -webkit-transform:  rotate(24deg) scaleX(3.52) scaleY(3.179999999999998) ;
                }
              }

              @-o-keyframes animationFrames {
                0% {
                  left:-299px;
                  top:-196px;
                  opacity:1;
                  -o-transform:  rotate(-1deg) scaleX(1) scaleY(1) ;
                }
                50% {
                  left:-137px;
                  top:25px;
                  -o-transform:  rotate(976deg) scaleX(0.77) scaleY(3.179999999999998) ;
                }
                100% {
                  left:200px;
                  top:0px;
                  opacity:1;
                  -o-transform:  rotate(24deg) scaleX(3.52) scaleY(3.179999999999998) ;
                }
              }

              @-ms-keyframes animationFrames {
                0% {
                  left:-299px;
                  top:-196px;
                  opacity:1;
                  -ms-transform:  rotate(-1deg) scaleX(1) scaleY(1) ;
                }
                50% {
                  left:-137px;
                  top:25px;
                  -ms-transform:  rotate(976deg) scaleX(0.77) scaleY(3.179999999999998) ;
                }
                100% {
                  left:200px;
                  top:0px;
                  opacity:1;
                  -ms-transform:  rotate(24deg) scaleX(3.52) scaleY(3.179999999999998) ;
                }
              }
                  
                

(Verbose) declarative CSS from a CSS animation generator (cssanimate.com)

What's hard?

• Complex/orchestrated animations/timelines
• Knowing when transitions are done
• Halting transitions

What's (essentially) impossible?

• Conditions, control flow
• Non-determinism, randomness
• Mathematical operations, computed physics
• Responding to non-trivial user input (e.g. touch position)
• All of these are begging for Turing-completeness (i.e. full programmatic expressiveness) that CSS simply doesn't offer.

Performance.

Especially on mobile.

Enter: Famo.us

• Famo.us's core value proposition is cross-platform, high-performance, JavaScript-driven animations.
• With the ability to achieve 60FPS animations across devices using JavaScript, we can finally knock out that final barrier to Web-World-Domination: Rich Interactivity

How can I easily use all that cool stuff in an existing app, alongside other standards that I'm already familiar with? (drum roll...)

• If you've worked with F/A before, you know there is a lot of inlining in the HTML. These attributes are managed by Angular, which is how they get translated to Famo.us.
• This feels analogous to inlining a bunch of CSS attributes.
• But these are AngularJS data-bindings that we're inlining—JavaScript expressions.
• There's no declarative "style sheet" for JavaScript, is there?

• We have to handle both different positions AND animation behaviors across responsive breakpoints.
• We get the benefits of control flow, so you can use "if" statements in your animation logic... but...
• This is something (declarative) CSS media queries handle really well. If only we could put JavaScript functions in our CSS.
• But there are no "style sheets" for JavaScript... right?

• What if we could plop a JavaScript function into our CSS?
• And use our "if"s and our "event.touch"s and our "Math.sin"s and our cool knowledge of physics?
• Could this be an ideal balance of imperative and declarative...?
• Except for that piece about it living inside the CSS. That's a little too crazy.

Working name: Sheets

• In short, it's a way to bind functions to DOM elements, via Selectors
• It's like light-weight Angular directives—you can define your own fields and the logic for handling that field for a given element
• And it's a lot like CSS in that it separates the template from its logic, using selectors as the link. Bonus: media queries!

• It has turned out to be a great solution for responsiveness and concern separation in Famo.us/Angular
• It's simple, powerful, and expressive—and completely independent from Famo.us/Angular—so I would love to see what other uses people come up with for it.
• It's young, but simple and stable.
• If anyone would like to help develop it, please swing by on github (github.com/zackbrown/sheets) or email me at zack@thomasstreet.com

• This slide deck: http://thomasstreet.com/ngeurope
• Famo.us/Angular project page: https://famo.us/angular
• Github repo: https://github.com/Famous/famous-angular
• Sheets: https://github.com/zackbrown/sheets
• Thomas Street: http://thomasstreet.com
• or email me zack@thomasstreet.com

  or follow me on twitter! @zackaboo