(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
#>
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.
(Scala + AngularJS + Lift) => { <3 }
By Doug Roper
(Scala + AngularJS + Lift) => { <3 }
- 5,679