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

with ponies

Agenda

Lift + Ajax
AngularJS + REST
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

(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.

Bind DOM -> Server-side functions
Browser AJAX -> Server-side function
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.