(Scala + AngularJS + Lift) => { <3 }

with ponies

Agenda

  1. Lift + Ajax
  2. AngularJS + REST
  3. AngularJS + Lift Ajax 

let's Build an app

  • Real world problem.
  • Greatest question of our day.  

Which pony is best pony?


You + Me

  • Live coding (zomg)!
  • Shout "question!" at me.

Lift

#> 

Lift

(snippets)
Template:     
<p class="lift:ClassName.methodName">Replace me</p>

Snippet:         
"p *" #> "Twilight Sparkle is best pony!"

Rendered:    
<p>Twilight Sparkle is best pony!</p>
Snippets are server-side transforms of the template DOM.

Lift

(ajax)
DOM manipulation kinda sucks.
  1. Bind DOM -> Server-side functions
  2. Browser AJAX -> Server-side function
  3. Server-side function return JS



AngularJS

ANGULARJS

(over REST)



http://localhost:8080/rest/pony/best
 

REST Attacks

  • JSON vulnerability
  • Cross Site Request Forgery (XSRF)
Angular mitigations require server cooperation.
Ain't nobody got time for that.
Trixie shall have your secrets!

USE LIFT's immunities


Unpredictable urls are immune to both attacks.


What we want

Short-lived scala functions per page load
() => Pony

...bound to unpredictable server URLs
http://localhost:8080/ajax_request/F246253955771TQNMAV/

...accessible to AngularJS controllers as services.
ponyService.getBestPony().then(function(pony) {    $scope.pony = pony;})

dynamically generate modules

Write a service to generate this Javascript.
<script>
  angular.module('lift.pony')
    .factory('ponyService', function (...) {
      return {
        getBestPony: function() {...}
      };
    };
</script>

wins

  • Secure.
  • Familiar to JS (non-scala) folks.
  • Lifty.
  • Angulary.

clap if you like


Then ask me some questions.

(Scala + AngularJS + Lift) => { <3 }

By Doug Roper

(Scala + AngularJS + Lift) => { <3 }

  • 5,679