SlideShare a Scribd company logo
1 of 76
Download to read offline
Warp-Beam-speed
at initial load
Speeding up your JavaScript application
DavidAmend
● JavaScript & Java Frontend
Developer &Architect
● @Dab-Bank: Angular.js, BPMN, OSGi
David.Amend@it-amend.de
That’s me
Client- Server-
VS
http://openmymind.net/2012/5/30/Client-Side-vs-Server-Side-Rendering/
Better User-Experience?
View-Rendering
Topics
1. History of Web-Rendering Techniques
2. The Application Workflow
3. Decision to the best architecture
Process of Rendering-Technologies
Static
HTML
CGI
Scripts
Web-specific
19951989 C,Shell,CGI-Scripts,
Phyton VB-Scripts, Perl ASP, PHP, Ruby,
ColdFusion
Process of Rendering-Technologies
Web-plugins
Web-Frameworks
Server-Driven
~20101998
Applet/Flash,
ActiveX, XAML
Ruby on Rails, .
Net, Wicket, GWT
Node.js based
“JS Everywhere”
Express, Derby, Meteor, OPA, ...
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
“MVC”-Code
Architectures
Server or Client rendering ?
Client-Centric
Business-
Logic
Client Server
Render-
Engine
DB
Request
Response
Shared Definition
http://onehungrymind.com/angularjs-dynamic-templates/
Business-
Logic
Client Server
Render-
Engine
Shared-
Definition
DB
DefinesDefines
I18n, View-Templates
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
Flow of Page-Initialization
Load
HTML
Load
Assets
Framework
Init/Bootstrap
Phase
AJAX-calls
Template
Rendering
Replace
HTML
1. 2. 3. 4.
Worst Case Flow
Load
HTML
Load
Assets
Framework
Init/Bootstrap
Phase
AJAX-calls
Template
Rendering
Loading Screen
Replace
HTML
User sees page
in one shot
1. 2. 3. 4.
Worst Case Flow
Load
HTML
Load
Assets
Framework
Init/Bootstrap
Phase
AJAX-calls
Template
Rendering
Loading Screen
Replace
HTML
1. 2. 3. 4.Possible
Flicking
a)
b)
Hack the intialization process
● Minify
● Cache
● Load assets asynchronously
● Load content asynchronously
● Reducing Requests
Faster file loading
Async Loading, splitting files
HTML
Asset
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Async(e.g. module loader)
Apply Binding
JS
Templ
ate
HTML
Asset
Asset
Client-Only, Single file,
Load
HTML
Load
Assets
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Concat & precomile to single file
Apply Binding
Combination of ng-init & UIRouter
Grunt.js build:
● Precompile
https://github.com/ericclemmons/grunt-angular-templates
https://github.com/karma-runner/karma-ng-html2js-preprocessor
https://github.com/karlgoldstein/grunt-html2js
● Concat files
Reducing Requests
or
Load Asynchronously
Faster file loading
Situation
Public Private
Slow-Js-Rendering
Non-Blocking
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
Less Requests & Non Blocking UI
<html>
<head>
<script>/* Inline Angular.js asset*/</script>
<script>/* Inline async asset loader*/</script>
$script([ 'js/app.js'], function() {
angular.bootstrap(document, ['myApp']); });
</head>
<body>
<div ng-view></div>
</body>
</html>
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
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
How to combine Initial HTML with
deferred template Rendering ?
● Share Model Information
● Share HTML within template
● SEO ( Disabled JS support)
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
Complete Separation
index.vm, Server side:
<h1>#{pizza.title}</h1>
...
index.html, Client Side:
<h1>{{pizza.title}}</h1>
…
● Separation
● Duplication
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
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
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
Render Client-Template
before init-phase
Load
HTML
Load
Assets
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Apply Binding
Usage of ng-init
Share init HTML within template
Reuse of HTML
within template at Initial State
Situation
Template Engine not rendered, yet
<div>{{pizza.price}}</div>
Reuse of HTML
within template at Initial State
Situation
Template Engine not rendered, yet
<e:div>{{pizza.price}}</e:div>
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
Client or
Server-Side
Rendering
revised
Client-Only
Server
Client
Data-Service
JSON, XML
Client-Server-Hybrid
http://nerds.airbnb.com/slides-and-video-from-spike-brehms-tech-
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
Client-Server-Hybrid:
Same Template Framework
Client WebServer
Template Files
Initial Request
HTML
● e.g. Mustache
Google Closure, Dual,...
● Share template files between Client & Server
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
Lessons learned
● Twitter
http://engineering.twitter.com/2012/05/improving-performance-on-twittercom.html
http://www.youtube.com/watch?v=sGpHDHAIpYE
● Yahoo
https://github.com/davglass/nodejs-yui3
● Angular.js 2.0: Announced
http://angularjs.org/
●
● Google, Closure Tools
● Google Apps Script
Hybrid:Executed page in JavaScript Environment
Are in experimental state:
● GWT
● Headless browsers: PhantomJS
● Services: BromBone
● Ruby solutions
● Rendr (Backbone & Handelbars)
http://de.slideshare.net/spikebrehm
● Google Scripts
● Meteor
● Mojito
http://de.slideshare.net/spikebrehm
http://sebgoo.blogspot.de/2013/05/angularjs-and-seo-pre-render-content-on.html
https://speakerdeck.com/seanami/bridging-the-client-side-server-side-divide
Any Questions ?
Additonal Slides
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
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)
● Authentication-Information Request
● i18n Request
Client Only
“Server is Overkill”, Tim Oxley
http://www.youtube.com/watch?v=BgXjJ3aDwtc
“Goodbye Server, Welcome Client”, Sandro Sonntag
http://es.slideshare.net/sandrosonntag/goodby-server-hello-client
Performance Templating
Depending on App
● Profiling Toolshttps://docs.google.com/presentation/d/1ZZfy5zKx8cYSMGoi2QzM3viI6RUEWbV6S98yTfF5i0o/edit?pli=1#slide=id.gb280e77b_099
● Batarang, check yourself
● Bind-Once
https://github.com/Pasvaz/bindonce
● Use Value by Reference
http://orangevolt.blogspot.de/2013/08/superspeed-your-angularjs-apps.html?utm_source=ng-newsletter&utm_campaign=d2ddad458c-
AngularJS_Newsletter_9_3_139_3_2013&utm_medium=email&utm_term=0_fa61364f13-d2ddad458c-86956513
Acceptance Criteria
● Peformance
● Component model
Goals for the View-Part
Software Quality/Features
● Data binding
● Standard supports
● Internationalization
● SEO
● Long term
● Reduce duplication
● Less Development Time
Goals for the View-Part
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
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
Techniques & Webtechnologies
Angular.js possibilities
<div ng-init=”pizzaModel”>
<h2 ng-cloak ng-bind=”{{pizza.header}} ></h2>
<img src=”loading.gif” ng-hide=”true”></img>
<ul ng-hide=”{{doneLoading}}”>
<li ng-repeat=”pizza in pizzas”>
</ul>
</div>
Combination of View-Rendering
DeclarativeImperative
Logic ViewLogic
Object-
Oriented
XML,XSLTHard to merge
Component-Frameworks
Sencha, Dojo,
jQueryUI
Composition
Fits to
HTML/DOM
Always Code-Generation
ViewLogic
Types Of View-
Definition
Drag & Drop / Generation
Drag-&Drop-
Designer
Wavemaker, Oracle Forms...
UI Session-State on Server, Client-
Renderer
http://onehungrymind.com/angularjs-dynamic-
View-State
Definitions
Client Server
Render-
Engine
Clicked On Button
Trigger Rendering of Window
e.g. GWT(Vaadin),
Metawidget,...
Expensive
- Resources
Imperative vs. Declarative
if(condition){
$(‘#pizzaHeader’).hide()
}else{
$(‘#pizzaHeader’).show();
}
vs.
<div ng-hide=”condition”>content</div>
Performance: Flow of Rendering
Load
HTML
Load
Assets
Framework
Bootstrap
Deferred
Ajax &
RenderTemplate
Rendering
Apply Binding
Angular.js
does Lazy
Loading
Template
Rendering
Template
Rendering
Template
Rendering
Types of View Definition
Declarative
Simple String-
Replacement
Bi-Directional
Databindingvs.
e.g. JSP, PHP,
Ruby, ASP
Dojo, Angular,
JSF
Initial state is
smooth
Do not fight the
DOMExpensive !!!
Server-Side:
Expensive
Load All In One Shot/Request
vs.
Lazy/Async Modularized
Loading
e.g. jQuery Mobile
http://ify.io/lazy-loading-in-angularjs/
Declarative
Full Conditions,
Loop, Logic
Support
Logic-Free Templates
vs.
Less as possible
e.g. Handlebars
Read-Logic only
Templating
http://stackoverflow.com/questions/13103050/angularjs-client-side-data-binding-and-server-side-templating
http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/
● http://ziade.org/2013/02/13/fun-with-angularjs-amp-cornice/
● http://blog.thousandeyes.com/improving-end-user-experience-with-angularjs/
● 2.0v (server-side-prerendering, modularized,
compile)
●
● Maintaining?
● Speed?-Initial Load ? Flicker?
● Needed? - SEO, Work without JS?
●
●
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)
User Experience matters
http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.
Links
Lazy Code Loading
http://ify.io/lazy-loading-in-angularjs/
Angular.js Performance improvement
http://orangevolt.blogspot.de/2013/08/superspeed-your-angularjs-apps.html?utm_source=ng-
newsletter&utm_campaign=d2ddad458c-
AngularJS_Newsletter_9_3_139_3_2013&utm_medium=email&utm_term=0_fa61364f13-d2ddad458c-86956513

More Related Content

What's hot

Blazor - An Introduction
Blazor - An IntroductionBlazor - An Introduction
Blazor - An IntroductionJamieTaylor112
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?Balajihope
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + Reactjustvamp
 
Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?TechMagic
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online TrainingLearntek1
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Ontico
 
React native: building native iOS apps with javascript
React native: building native iOS apps with javascriptReact native: building native iOS apps with javascript
React native: building native iOS apps with javascriptPolidea
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop Ahmed rebai
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPTGo4Guru
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about ReactBinh Quan Duc
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIMarcin Grzywaczewski
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React TogetherSebastian Pederiva
 

What's hot (20)

Angular 2 vs React
Angular 2 vs ReactAngular 2 vs React
Angular 2 vs React
 
Blazor - An Introduction
Blazor - An IntroductionBlazor - An Introduction
Blazor - An Introduction
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
AngularJS + React
AngularJS + ReactAngularJS + React
AngularJS + React
 
Booting up with polymer
Booting up with polymerBooting up with polymer
Booting up with polymer
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?Angular 2 vs React. What to chose in 2017?
Angular 2 vs React. What to chose in 2017?
 
React js Online Training
React js Online TrainingReact js Online Training
React js Online Training
 
React Native
React NativeReact Native
React Native
 
Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)Understanding Page Load / Ziling Zhao (Google)
Understanding Page Load / Ziling Zhao (Google)
 
React native: building native iOS apps with javascript
React native: building native iOS apps with javascriptReact native: building native iOS apps with javascript
React native: building native iOS apps with javascript
 
React Vs AnagularJS
React Vs AnagularJSReact Vs AnagularJS
React Vs AnagularJS
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
 
JAVA SCRIPT
JAVA SCRIPTJAVA SCRIPT
JAVA SCRIPT
 
001. Introduction about React
001. Introduction about React001. Introduction about React
001. Introduction about React
 
React js Demo Explanation
React js Demo ExplanationReact js Demo Explanation
React js Demo Explanation
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Angular 4
Angular 4Angular 4
Angular 4
 
Combining Angular and React Together
Combining Angular and React TogetherCombining Angular and React Together
Combining Angular and React Together
 

Similar to Client vs Server Templating: Speed up initial load for SPA with Angular as an example

How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeRadosław Scheibinger
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendVlad Fedosov
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JSFestUA
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Karambir Singh Nain
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it worksIlya Grigorik
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkAlive Kuo
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraLINAGORA
 
Shining a light on performance (js meetup)
Shining a light on performance (js meetup)Shining a light on performance (js meetup)
Shining a light on performance (js meetup)Yoav Niran
 
Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifynuppla
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorDan Taylor
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerSuresh Patidar
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankDavid Amend
 
You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)Igalia
 
DPC2007 Zend Framework (Gaylord Aulke)
DPC2007 Zend Framework (Gaylord Aulke)DPC2007 Zend Framework (Gaylord Aulke)
DPC2007 Zend Framework (Gaylord Aulke)dpc
 
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersMaking sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersLewiz
 
Optimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsOptimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsJuan Picado
 

Similar to Client vs Server Templating: Speed up initial load for SPA with Angular as an example (20)

How NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscapeHow NOT to get lost in the current JavaScript landscape
How NOT to get lost in the current JavaScript landscape
 
Dust.js
Dust.jsDust.js
Dust.js
 
JSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontendJSFest 2019: Technology agnostic microservices at SPA frontend
JSFest 2019: Technology agnostic microservices at SPA frontend
 
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
JS Fest 2019/Autumn. Влад Федосов. Technology agnostic microservices at SPA f...
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
Pagespeed what, why, and how it works
Pagespeed   what, why, and how it worksPagespeed   what, why, and how it works
Pagespeed what, why, and how it works
 
JavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web frameworkJavascriptMVC: Another choice of web framework
JavascriptMVC: Another choice of web framework
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
 
Beginners Node.js
Beginners Node.jsBeginners Node.js
Beginners Node.js
 
Shining a light on performance (js meetup)
Shining a light on performance (js meetup)Shining a light on performance (js meetup)
Shining a light on performance (js meetup)
 
Pre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlifyPre rendering media sites with nuxt.js & netlify
Pre rendering media sites with nuxt.js & netlify
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
Angularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bankAngularjs practical project experiences with javascript development in a bank
Angularjs practical project experiences with javascript development in a bank
 
You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)
 
DPC2007 Zend Framework (Gaylord Aulke)
DPC2007 Zend Framework (Gaylord Aulke)DPC2007 Zend Framework (Gaylord Aulke)
DPC2007 Zend Framework (Gaylord Aulke)
 
Making sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developersMaking sense of the front-end, for PHP developers
Making sense of the front-end, for PHP developers
 
Optimizing a React application for Core Web Vitals
Optimizing a React application for Core Web VitalsOptimizing a React application for Core Web Vitals
Optimizing a React application for Core Web Vitals
 
Webdevelopment
WebdevelopmentWebdevelopment
Webdevelopment
 

More from David Amend

Componentization css angular
Componentization css angularComponentization css angular
Componentization css angularDavid Amend
 
Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1David Amend
 
Performance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomasPerformance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomasDavid Amend
 
Story about module management with angular.js
Story about module management with angular.jsStory about module management with angular.js
Story about module management with angular.jsDavid Amend
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsDavid Amend
 
Reasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptReasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptDavid Amend
 
Thin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentationThin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentationDavid Amend
 
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...David Amend
 
Grunt Advanced Vol 2, Plugins Text I/O with fun
Grunt Advanced Vol 2, Plugins Text I/O with funGrunt Advanced Vol 2, Plugins Text I/O with fun
Grunt Advanced Vol 2, Plugins Text I/O with funDavid Amend
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasDavid Amend
 
Gwt widget frameworks_presentation
Gwt widget frameworks_presentationGwt widget frameworks_presentation
Gwt widget frameworks_presentationDavid Amend
 

More from David Amend (11)

Componentization css angular
Componentization css angularComponentization css angular
Componentization css angular
 
Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1Angular 2 : learn TypeScript already with Angular 1
Angular 2 : learn TypeScript already with Angular 1
 
Performance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomasPerformance monitoring measurement angualrjs single page apps with phantomas
Performance monitoring measurement angualrjs single page apps with phantomas
 
Story about module management with angular.js
Story about module management with angular.jsStory about module management with angular.js
Story about module management with angular.js
 
Multi modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.jsMulti modularized project setup with gulp, typescript and angular.js
Multi modularized project setup with gulp, typescript and angular.js
 
Reasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScriptReasons to migrate to modern web development with JavaScript
Reasons to migrate to modern web development with JavaScript
 
Thin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentationThin Server Architecture SPA, 5 years old presentation
Thin Server Architecture SPA, 5 years old presentation
 
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
Javascript & Angular .js for the enterprise, lessons learned, typescript scal...
 
Grunt Advanced Vol 2, Plugins Text I/O with fun
Grunt Advanced Vol 2, Plugins Text I/O with funGrunt Advanced Vol 2, Plugins Text I/O with fun
Grunt Advanced Vol 2, Plugins Text I/O with fun
 
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with PhantomasGrunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
Grunt js for the Enterprise Vol.1: Frontend Performance with Phantomas
 
Gwt widget frameworks_presentation
Gwt widget frameworks_presentationGwt widget frameworks_presentation
Gwt widget frameworks_presentation
 

Recently uploaded

Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️Delhi Call girls
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsJhone kinadey
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsAndolasoft Inc
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfkalichargn70th171
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Modelsaagamshah0812
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfjoe51371421
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...OnePlan Solutions
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️anilsa9823
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfkalichargn70th171
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerThousandEyes
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendArshad QA
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionSolGuruz
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...panagenda
 
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfActive Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfCionsystems
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy
 

Recently uploaded (20)

Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
why an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdfwhy an Opensea Clone Script might be your perfect match.pdf
why an Opensea Clone Script might be your perfect match.pdf
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdfLearn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
Learn the Fundamentals of XCUITest Framework_ A Beginner's Guide.pdf
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
Test Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and BackendTest Automation Strategy for Frontend and Backend
Test Automation Strategy for Frontend and Backend
 
Diamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with PrecisionDiamond Application Development Crafting Solutions with Precision
Diamond Application Development Crafting Solutions with Precision
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
Active Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdfActive Directory Penetration Testing, cionsystems.com.pdf
Active Directory Penetration Testing, cionsystems.com.pdf
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 

Client vs Server Templating: Speed up initial load for SPA with Angular as an example