2. A) server-side generator, “forms” like (aspx, Jsp/Jsf)
B) server-side templating (Haml, Mustache, Smarty)
C) server-side MVC frameworks
D) jQuery
E) Another Javascript framework
A= ?? B = ?? C = ?? D = ?? E = ??
What are you using to build web applications?
5. What is a SPA?
●
Single Page Application
●
Client side (with server-side help)
●
Rich, responsive, fast
●
Desktop-like experience
●
“Like the big ones” (Twitter, FB, Gmail)
6. SPA technically
●
HTML5 + JS
●
Service
●
More likely:
– An MVC/MVVM client framework
– Lightweight REST/Json service(s)
●
Even Json non-relational DBs!
8. AngularJS vs. jQuery
●
Don't design your page, and then change it with
DOM manipulations
●
The view is the "official record"
●
→ Data binding
– The “Angular” way
9. <!DOCTYPE html>
<html data-ng-app="myapp">
<head>
<title>Foo Car rental</title>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="scripts/myapp.js"></script>
<body>
...
Name: <input type=”text” ng-model=”name” /> {{ name }}
1: Directives and data-binding
31. 4: Custom directives
app.directive('ngContent', function ($parse) {
return {
restrict: 'A',
require: '?ngModel',
link: function (scope, element, attrs) {
if (attrs.ngModel && element.text()) {
$parse(attrs.ngModel).assign(scope, element.text());
}
scope.$watch(attrs.ngModel, function(value) {
element.text(value);
});
}
};
});
Where?
require: '^parentDirective' will give you access to the parentDirective
^ -- Look for the controller on parent elements, not just on the local scope
? -- Don't raise an error if the controller isn't found
36. ...but... in the real world?
●
#1: Javascript vs. “Security through obscurity”
(F12 - but it is actually good because...)
●
#2: you have to design a SPA keeping #1 in
mind
●
#3: SPA are almost never “single page”
●
#4: HTTPS and/or OAuth!
37. In the real world...
●
You almost always “blur” the lines
– Server-side generation AND client-side rendering
– Multiple pages for multiple roles
– Use your server!