7. Process of Rendering-Technologies
Today Future
?
?...
● Before
Framework Comparison matters
→ Richness & stability of Frameworks
● Now
Technique & Architecture matters
→ Surpass limitations
● Future
Webtechnologies get more important, HTML-5, ECMA-Script 7
→ Optimized & Fast Development
12. UI Session-State on Server
View-State
Definitions
Client Server
Browser
Clicked On Button
Return HTML & pass
JavaScript to be executed
Expensive
- Resources
Less Control over
User-Experience
22. Lazy Template Rendering
<div ng-template=”pizzaTemplate”>
<h2 ng-model=”{{i18n.header}}></h2>
<ul>
<li ng-repeat=”pizza in pizzas”>
</ul>
</div>
● h2 and li render deferred
● Render when data are available, independent
● Render when data changed: Databinding
25. ng-cloak & ng-hide
● ng-cloak
Disables lazy-rendering for all children
nodes
● ng-hide
Replacing of initial HTML
with deferred template-rendered
● No Flicking
26. Display Initial HTML
→ Performance Boost
Load
HTML
Load
Assets
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Apply Binding
● Load assets after HTML is loaded
● Will not freeze UI
27. How to combine Initial HTML with
deferred template Rendering ?
● Share Model Information
● Share HTML within template
● SEO ( Disabled JS support)
28. Mixture of Client-Server Code
<h1>{{pizza.title}}</h1>
#{for pizza:pizzas}
<li ng-repeat={{pizza}}>
#{pizza.name}
<li>
#{for:end}
● Hard to understand
● No separation
30. Share model Information:
Save in variable
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-
var model = #{pizzas.toJson()}
● Works with all frameworks
● Simple
● Need to touch logic code
31. Share model Information:
Separate Service call
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-
app.get(‘pizzas’), function(request, response){
$scope.pizzas = response;
}
● Clear separation of Data
● No server-side code in client-code
● Additional service call
● Blocking UI
32. Share model Information:
Separate Service call
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-
<div ng-init=’#{pizzas.toJSObject()}’>
{{pizza.header}}
</div>
● No need to touch logic
● Executed before Angular.js Bootstrap
● Minimum Server-Templating needed
● Needs Angular assets to be loaded
● Angular.js specific
35. Reuse of HTML
within template at Initial State
Situation
Template Engine not rendered, yet
<div>{{pizza.price}}</div>
36. Reuse of HTML
within template at Initial State
Situation
Template Engine not rendered, yet
<e:div>{{pizza.price}}</e:div>
37. Reuse of HTML
within template at Initial State
Situation
Template Engine not rendered, yet
<div ng-model={{pizza.price}}></div>
● Reuse of html within
the template for initial state
41. Considerations
● Knownledge in team
○ Java or Web-Developers?
● Context of Webapplication
○ Webpage behind Login?
■ Prefetch & Initialize
○ Only used in company or
■ Performance & browser support
can be ignored
○ Public
● Save Money
○ Do not do overegineering
43. Client-Server-Hybrid:
Render JS on Server
Client
Rendering
Engine
WebServer
Initial Request
HTML-String
Identical Client Code
RegisterBindings
● Independant of template engine
● No extra development effort
● Could be Dependant on Browser Node.js
50. Adoption
Ways
● By Server-centric
● By Client-centric
● By complete Client-Server Separation
● By sharing same Client-Server Template API
→ How about i18n-texts ?
● By sharing logic between Client-Server
(Validation, DataTransferObjects...)
→ Angular.js as an example
51. Server or Client rendering ?
ClientServer
Different
Syntax forces
separation
JavaScript, XML:
Reuse of code:
Validation,
DataTransferObjects
Caching
Less Money
For Slow
Devices
Slow Network
Separation
...
Different
Syntax forces
separation
SEO
Initial Load
is x5 faster
Natural
Programming for
Applications:
Controller&View on
the Client machine
Full control
over Client
Rich User
Experience
Use of Data-
Services
(JSON, XML)
56. Software Quality/Features
● Data binding
● Standard supports
● Internationalization
● SEO
● Long term
● Reduce duplication
● Less Development Time
Goals for the View-Part
57. Want to hide/wrap/ignore
the Web?
Code Generation
Too Abstract Layering
Easy extendable
vs.
Easy combination
of Frameworks
Easy Customizeable
Performance
Optimization?
Angular.js Primary
Nice
Entry
Points
58. Bad: Different model concepts
Load
HTML
Load
Assets
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Apply Binding
<script src=”#{locale}.js>
● 3 Different ways to save i18n
Server-Side
templating
static asset.js I18n: within JSON data
72. Templating 2nd
● http://docs.angularjs.org/api/ng.directive:script
● https://github.com/ericclemmons/grunt-angular-templates
● https://github.com/karlgoldstein/grunt-html2js
● https://github.com/wmluke/grunt-inline-angular-templates (shameless plug)
http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm
● Angular magically does template rendering of the view
○ Optimization
○ Huge potential of optimization on the client side
○ Optimization of server side rendering is an illusion.
● Async, ng-cloak
● ng-bind vs. {{}}
● class usage disturbs designers
● make the DOM your friend
“80% DOM, 20% logic” ( Misko Hevery)
● Load all in one shot vs load all lazy loaded
● lazy loading in the background (jquery Mobile)