SlideShare a Scribd company logo
Welcome to the webinar on

Benefits of Developing
Single Page Web Applications
Using AngularJS
Presenters

Anjanikumar Shukla

Maheshkumar Kharade

General Manager
Business Development
Harbinger Systems

Tech Lead
Harbinger Systems
How Loading Time Affects Your Bottom Line
•
•
•
•

A survey revealed that Loading time is a major contributing factor to page
abandonment.
Page Load time is greater than 3 seconds, 20% of visitors will abandon the page
Walmart found that every 100ms reduction in loading time leads to an increase
in incremental revenue by as much as 1%
Mozilla saw increase in downloads of Firefox by 5 million per month, after
making their page 2.2 seconds quicker
Agenda
• Overview
– Web App Types & Patterns
– Limitations/Challenges
– Way Forward

• Single Page Applications [SPA]
–
–
–
–

Introduction
Characteristics
SPA Performance
Benefits

• SPA Architecture
• AngularJS
• Q&A
Overview
Web Applications Journey


Model 1



– Based on components and events
– complete rebuild and reload of the
page partially

◦ Direct translation of the original
model of pages and links



Model 2 / MVC

◦ Links are not directly pointing to a
concrete target page
◦ a controller decide what the next
page is depending on the
operations taken place in page
transition

MVC based on components



MVC enriched with AJAX
– partial changes in pages obtaining
new data from server without
reloading
– Page navigation is partially avoided
in case of minor state transitions
Limitations
 Page based development results into
– Repetitive (plenty of includes) and
– Inefficient (both bandwidth and computing power)

 Issues in intensive use of AJAX?
– Bookmarking
– Search Engine Optimization (SEO) & Indexing
– Services based on page visits

 More…
– State drives behavior
– An App’s appearance hopefully will change faster than its logic
Way Forward...
 Should we give up AJAX-intensive applications? NO
 Web sites based on a single Web page
– This is the time to start this transition
– We have the technology and modern browsers are qualified to achieve this
objective
– To succeed in this "new" way of web development we must be able to
accomplish all of previous requisites of any web site
Single Page Application [SPA]
Client Side
Routing

Single
Page
App
Client Side
Rendering
What is SPA?
• Single Page Application is a web app in which the majority of
interactions are handled on the client without the need to reach
a server, with a goal of providing a more fluid user experience
Characteristics
• Single page apps typically have
– “Application like” interaction
– Back/Forward Button works as expected
– More JavaScript than actual HTML
– Ability to go Offline
– Dynamic data loading from the server-side API, Works with Restful Web Services

– Fluid transitions between page states, Richer Interaction between UI Components
– Markup, CSS & JS required for the application sent with the initial request
– Page changes occur via JavaScript using Templates & DOM manipulation
– URL hashes are used to track state and provide bookmark-able links
Ex: http://www.foo.com/#/i-am-a-hash/path?cool=true&strange=maybe
SPA Core Benefit - Performance Improvement
• SPAs can improve performance in several ways:
– Load time: 1 file each of HTML, CSS, JS,

– static files not dynamic
– Less data transfer: XHR calls only send
– raw data, not HTML markup
– Load distribution: dramatically less load on your server, by distributing it to
clients
– Caching gets a lot easier and more beneficial
SPA Benefits
•

It is an application so it can do Cool Stuff!

•

Responsive, native application feel. No page flicker!

•

Faster UI, More Interactive

•

Most of the page processing happens client side, offloading server load

•

Massive tooling support, Vibrant community

•

Code reuse. REST endpoints are general purpose and can be used for multiple
applications

•

UI is just another Client

•

Perfect for supporting multiple platforms
Business Usage of SPA
• Create “App-like user experience”

• Bind to your own (or 3rd party) RESTful API
• Build Hybrid (native) HTML5 applications
• Mobile version of your web site

The SPA sweet spot is likely not on web sites,
but on content-rich cross-platform mobile apps
SPA Architecture
“The secret to building large apps is never build large
apps. Break your applications into small pieces.
Then, assemble those testable, bite-sized pieces into
your big application

”

- Justin Meyer
Author JavaScriptMVC
SPA - Building Blocks

Ref: http://www.slideshare.net/SC5/building-single-page-applications-16543203
Open-source JavaScript framework
Developed in 2009
Maintained by Google
Actively developed and supported
Key Features of AngularJS
• Declarative HTML approach
• Easy Data Binding : Two way Data Binding
• Reusable Components
• MVC/MVVM Design Pattern
• Dependency Injection
• End to end Integration Testing / Unit Testing
• Routing
• Templating
HTML Compiler
• Angular's HTML compiler allows the developer to teach the browser new
HTML syntax. The compiler allows you to attach behaviour to any HTML
element or attribute and even create new HTML elements or attributes
with custom behaviour. Angular calls these behaviour extensions
directives.
• Compiler is an angular service which traverses the DOM looking for
attributes. The compilation process happens in two phases.
– Compile: traverse the DOM and collect all of the directives. The result is a linking
function.
– Link: combine the directives with a scope and produce a live view. Any changes in the
scope model are reflected in the view, and any user interactions with the view are
reflected in the scope model. This makes the scope model the single source of truth.
Library vs. Framework
• Library (Backbone and Knockout)
– passive functionality
– invoked by the application

• Framework (Ember)
– provides application architecture
– handles common requirements
– invokes application code

• AngularJS is closer to a framework
MVVM: AngularJS Way
VIEW

Data Binding
Commands
Notifications

• User Interface
• Reusable
Components
• UI Logic
• Observers & Notify
View Model

Events
User Interactions

CONTROLLER

VIEW MODEL
• Presentation Logic
• State
• Observe Mutations
• Notify View

Data Processing

• Maintain state
• Define Application
Behavior
• Maps user actions
to Model
Key Components of an Angular Application
• Dependency
Injection
• Controllers
• Models
• Services
• Directives
• Modules
• Filters

•
•
•
•
•
•
•

Factories
Scopes
Templates
Routes
Animations
Data Binding
Testing
Dependency Injection
• Deals with how code gets hold of its
dependencies
• No more “global” objects

• Classes will get the objects they need
(their dependencies) in order to
work
• The dependency is simply handed to
the component
• The injector is a service locator that
is responsible for construction and

lookup of dependencies

Ref: http://docs.angularjs.org/guide/di
2-way Data Binding
• Automatic propagation of data changes
• Model is single source of truth
• Digest cycle
• View is updated automatically when
the Model is changed
• Model is updated automatically when a
value in the View has changed
• No DOM manipulation boilerplate
needed!
Ref: http://docs.angularjs.org/guide/databinding
AngularJS – As a SPA Framework
Why use AngularJS?
• The problem - HTML is great for static pages, but has no tools for web

applications
• The solution - extend and adapt HTML vocabulary with some additional
declarations that are useful for web applications
• Addresses the root problem that HTML was not designed for dynamic
views.
• Less effort in mundane tasks allowing for better focus on what is
ACTUALLY VALUABLE - THE LOGIC
• More efficiency in development
• free from boilerplate
Why use AngularJS? (Continued..)
• Separation of concerns
– Data Binding
– Controllers
– View Model

• Extensibility
• Reusable Components
– Directives
– Filters

– Form Validation
– Server Communication
AngularJS and Testability
• Issues in JS/Client Side Testing
– developers often mix concerns
– have to wait for XHR
– create the right kind of DOM

• DI helps solve issues of object/reference mocking
• Behavior-view separation, comes pre-bundled with mocks, and takes full
advantage of dependency injection
• Also comes with end-to-end scenario runner
Real World Examples
Some of the Real World Examples
• http://www.innowhere.com/jnieasy
• http://builtwith.angularjs.org/
– http://floorplan.ons.no/#/
– http://us.playstation.com/youtube/
– http://opentaste.eu/
Q&A
Thank You!
Visit us at: www.harbinger-systems.com
Write to us at: hsplinfo@harbingergroup.com
Follow us

Blog: blog.harbinger-systems.com
Twitter: twitter.com/HarbingerSys (@HarbingerSys)
Slideshare: slideshare.net/hsplmkting
Facebook: facebook.com/harbingersys
LinkedIn: linkedin.com/company/382306

More Related Content

PPTX
API Testing for everyone.pptx
Pricilla Bilavendran
 
PPT
Asp.net
Dinesh kumar
 
PPTX
React-JS.pptx
AnmolPandita7
 
PPTX
Introduction to Bdd and cucumber
Nibu Baby
 
PPTX
Typescript in 30mins
Udaya Kumar
 
PDF
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
PPTX
Geb with spock
Monika Gurram
 
PPTX
Automation Testing by Selenium Web Driver
Cuelogic Technologies Pvt. Ltd.
 
API Testing for everyone.pptx
Pricilla Bilavendran
 
Asp.net
Dinesh kumar
 
React-JS.pptx
AnmolPandita7
 
Introduction to Bdd and cucumber
Nibu Baby
 
Typescript in 30mins
Udaya Kumar
 
Angular Directives | Angular 2 Custom Directives | Angular Tutorial | Angular...
Edureka!
 
Geb with spock
Monika Gurram
 
Automation Testing by Selenium Web Driver
Cuelogic Technologies Pvt. Ltd.
 

What's hot (20)

PPTX
Test Automation Framework with BDD and Cucumber
Rhoynar Software Consulting
 
PDF
Postman Webinar: “Continuous Testing with Postman”
Postman
 
PDF
How to Automate API Testing
Bruno Pedro
 
PPT
Behavior Driven Development Pros and Cons
Iosif Itkin
 
PPTX
The Benefits of Using React JS for Web Development!
Baharika Sopori
 
PPTX
Cross browser testing with browser stack
Denys Poloka
 
PPTX
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
PDF
Introduction To Single Page Application
KMS Technology
 
PPTX
BDD presentation
temebele
 
PDF
FRONT-END WEB DEVELOPMENT WITH REACTJS
Tran Phong Phu
 
PDF
Create an architecture for web test automation
Elias Nogueira
 
PPTX
RxSwift
Kristaps Grinbergs
 
PPTX
Api testing
Keshav Kashyap
 
PPTX
Why TypeScript?
FITC
 
PDF
Testing with Spring: An Introduction
Sam Brannen
 
PDF
Selenium with Cucumber
Knoldus Inc.
 
PPTX
Its time to React.js
Ritesh Mehrotra
 
PDF
BDD & Cucumber
Vladimir Arutin
 
PPT
Asp.net basic
Neelesh Shukla
 
Test Automation Framework with BDD and Cucumber
Rhoynar Software Consulting
 
Postman Webinar: “Continuous Testing with Postman”
Postman
 
How to Automate API Testing
Bruno Pedro
 
Behavior Driven Development Pros and Cons
Iosif Itkin
 
The Benefits of Using React JS for Web Development!
Baharika Sopori
 
Cross browser testing with browser stack
Denys Poloka
 
learn what React JS is & why we should use React JS .
paradisetechsoftsolutions
 
Introduction To Single Page Application
KMS Technology
 
BDD presentation
temebele
 
FRONT-END WEB DEVELOPMENT WITH REACTJS
Tran Phong Phu
 
Create an architecture for web test automation
Elias Nogueira
 
Api testing
Keshav Kashyap
 
Why TypeScript?
FITC
 
Testing with Spring: An Introduction
Sam Brannen
 
Selenium with Cucumber
Knoldus Inc.
 
Its time to React.js
Ritesh Mehrotra
 
BDD & Cucumber
Vladimir Arutin
 
Asp.net basic
Neelesh Shukla
 
Ad

Similar to Benefits of developing single page web applications using angular js (20)

DOCX
Single Page Application
Prasad Narasimhan
 
PDF
End to-End SPA Development Using ASP.NET and AngularJS
Gil Fink
 
PPTX
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
PPTX
Single Page Angular Application Presentation
Knoldus Inc.
 
PPTX
Single Page Angular Application Presentation
Knoldus Inc.
 
PPTX
Angular js introduction
Praveen Gubbala
 
PPTX
Angular jS Introduction by Google
ASG
 
PPTX
Benefits of developing a Single Page Web Applications using AngularJS
KNOWARTH - Software Development Company
 
PPTX
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
PPTX
AngularJS 1.x - your first application (problems and solutions)
Igor Talevski
 
PDF
Angular webinar - Credo Systemz
Training Institute
 
PPTX
Anjular js
Naga Dinesh
 
PPTX
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
Bojan Veljanovski
 
PPTX
CC 2015 Single Page Applications for the ASPNET Developer
Allen Conway
 
PPTX
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
PPTX
Intro to AngularJS
Sparkhound Inc.
 
PPTX
Single page applications
Prafful Garg
 
PDF
AngularJS in Production (CTO Forum)
Alex Ross
 
PPTX
The Growing Popularity of AngularJS
Whiz Solutions
 
PDF
Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf
ahmadfaisal744721
 
Single Page Application
Prasad Narasimhan
 
End to-End SPA Development Using ASP.NET and AngularJS
Gil Fink
 
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Single Page Angular Application Presentation
Knoldus Inc.
 
Single Page Angular Application Presentation
Knoldus Inc.
 
Angular js introduction
Praveen Gubbala
 
Angular jS Introduction by Google
ASG
 
Benefits of developing a Single Page Web Applications using AngularJS
KNOWARTH - Software Development Company
 
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
AngularJS 1.x - your first application (problems and solutions)
Igor Talevski
 
Angular webinar - Credo Systemz
Training Institute
 
Anjular js
Naga Dinesh
 
AngularJS + NancyFx + MongoDB = The best trio for ultimate SPA by Bojan Velja...
Bojan Veljanovski
 
CC 2015 Single Page Applications for the ASPNET Developer
Allen Conway
 
Angular js 1.3 basic tutorial
Al-Mutaz Bellah Salahat
 
Intro to AngularJS
Sparkhound Inc.
 
Single page applications
Prafful Garg
 
AngularJS in Production (CTO Forum)
Alex Ross
 
The Growing Popularity of AngularJS
Whiz Solutions
 
Introduction+to+AngularJS+with+logo+from+digital+ocean.pdf
ahmadfaisal744721
 
Ad

More from Harbinger Systems - HRTech Builder of Choice (20)

PPTX
Using People Analytics for a Sustainable Remote Workforce
Harbinger Systems - HRTech Builder of Choice
 
PDF
5 Trends That Will Drive the Transformation of EdTech in 2021
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Rapidly Transforming Organizational Content into Learning Experiences
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Scalable HR Integrations for Better Data Analytics: Challenges & Solutions
Harbinger Systems - HRTech Builder of Choice
 
PPTX
5 Key Items HR Should Consider Before Buying HR Technologies
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Best Practices to Build Marketplace-Ready Integrations
Harbinger Systems - HRTech Builder of Choice
 
PPTX
HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Harbinger Systems - HRTech Builder of Choice
 
PPTX
How to Gain Key Insights from Data Distributed Across Multiple HR Systems
Harbinger Systems - HRTech Builder of Choice
 
PPTX
HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Integrating System of Records and Collaboration Tools
Harbinger Systems - HRTech Builder of Choice
 
PPTX
How to Power Your HR Apps With AI And Make It Explainable
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Chatbot for Continuous Performance Management
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Leveraging mobile capabilities in your HR application
Harbinger Systems - HRTech Builder of Choice
 
PDF
Automate HR applications using AI and ML
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Engage for Success: Improve Workforce Engagement with Open Communication and ...
Harbinger Systems - HRTech Builder of Choice
 
PPTX
Building next gen hr solutions with people analytics-final
Harbinger Systems - HRTech Builder of Choice
 
PPTX
A Cloud-based Collaborative Learning and Coaching Platform
Harbinger Systems - HRTech Builder of Choice
 
PDF
Extending LRSs and the xAPI for Event-driven Blended and Adaptive Learning
Harbinger Systems - HRTech Builder of Choice
 
Using People Analytics for a Sustainable Remote Workforce
Harbinger Systems - HRTech Builder of Choice
 
5 Trends That Will Drive the Transformation of EdTech in 2021
Harbinger Systems - HRTech Builder of Choice
 
Rapidly Transforming Organizational Content into Learning Experiences
Harbinger Systems - HRTech Builder of Choice
 
Scalable HR Integrations for Better Data Analytics: Challenges & Solutions
Harbinger Systems - HRTech Builder of Choice
 
5 Key Items HR Should Consider Before Buying HR Technologies
Harbinger Systems - HRTech Builder of Choice
 
Best Practices to Build Marketplace-Ready Integrations
Harbinger Systems - HRTech Builder of Choice
 
HRTech Integration Masterclass Session 4 How to Expand Your Recruitment Datab...
Harbinger Systems - HRTech Builder of Choice
 
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Harbinger Systems - HRTech Builder of Choice
 
How to Gain Key Insights from Data Distributed Across Multiple HR Systems
Harbinger Systems - HRTech Builder of Choice
 
HRTech Integration Master Class Session 1 -Delivering Seamless Learning Exper...
Harbinger Systems - HRTech Builder of Choice
 
Recalibrating Product Strategy - Addressing Demand Shifts in Existing Markets
Harbinger Systems - HRTech Builder of Choice
 
Integrating System of Records and Collaboration Tools
Harbinger Systems - HRTech Builder of Choice
 
How to Power Your HR Apps With AI And Make It Explainable
Harbinger Systems - HRTech Builder of Choice
 
Chatbot for Continuous Performance Management
Harbinger Systems - HRTech Builder of Choice
 
Leveraging mobile capabilities in your HR application
Harbinger Systems - HRTech Builder of Choice
 
Automate HR applications using AI and ML
Harbinger Systems - HRTech Builder of Choice
 
Engage for Success: Improve Workforce Engagement with Open Communication and ...
Harbinger Systems - HRTech Builder of Choice
 
Building next gen hr solutions with people analytics-final
Harbinger Systems - HRTech Builder of Choice
 
A Cloud-based Collaborative Learning and Coaching Platform
Harbinger Systems - HRTech Builder of Choice
 
Extending LRSs and the xAPI for Event-driven Blended and Adaptive Learning
Harbinger Systems - HRTech Builder of Choice
 

Recently uploaded (20)

PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
PDF
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
PDF
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
PDF
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Software Development Methodologies in 2025
KodekX
 
PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PDF
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
PPT
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
PPTX
Smart Infrastructure and Automation through IoT Sensors
Rejig Digital
 
PPTX
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Doc9.....................................
SofiaCollazos
 
PDF
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
BLW VOCATIONAL TRAINING SUMMER INTERNSHIP REPORT
codernjn73
 
AI Unleashed - Shaping the Future -Starting Today - AIOUG Yatra 2025 - For Co...
Sandesh Rao
 
Event Presentation Google Cloud Next Extended 2025
minhtrietgect
 
Chapter 2 Digital Image Fundamentals.pdf
Getnet Tigabie Askale -(GM)
 
Software Development Methodologies in 2025
KodekX
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Cloud-Migration-Best-Practices-A-Practical-Guide-to-AWS-Azure-and-Google-Clou...
Artjoker Software Development Company
 
L2 Rules of Netiquette in Empowerment technology
Archibal2
 
Smart Infrastructure and Automation through IoT Sensors
Rejig Digital
 
How to Build a Scalable Micro-Investing Platform in 2025 - A Founder’s Guide ...
Third Rock Techkno
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Doc9.....................................
SofiaCollazos
 
Advances in Ultra High Voltage (UHV) Transmission and Distribution Systems.pdf
Nabajyoti Banik
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 

Benefits of developing single page web applications using angular js

  • 1. Welcome to the webinar on Benefits of Developing Single Page Web Applications Using AngularJS
  • 2. Presenters Anjanikumar Shukla Maheshkumar Kharade General Manager Business Development Harbinger Systems Tech Lead Harbinger Systems
  • 3. How Loading Time Affects Your Bottom Line • • • • A survey revealed that Loading time is a major contributing factor to page abandonment. Page Load time is greater than 3 seconds, 20% of visitors will abandon the page Walmart found that every 100ms reduction in loading time leads to an increase in incremental revenue by as much as 1% Mozilla saw increase in downloads of Firefox by 5 million per month, after making their page 2.2 seconds quicker
  • 4. Agenda • Overview – Web App Types & Patterns – Limitations/Challenges – Way Forward • Single Page Applications [SPA] – – – – Introduction Characteristics SPA Performance Benefits • SPA Architecture • AngularJS • Q&A
  • 6. Web Applications Journey  Model 1  – Based on components and events – complete rebuild and reload of the page partially ◦ Direct translation of the original model of pages and links  Model 2 / MVC ◦ Links are not directly pointing to a concrete target page ◦ a controller decide what the next page is depending on the operations taken place in page transition MVC based on components  MVC enriched with AJAX – partial changes in pages obtaining new data from server without reloading – Page navigation is partially avoided in case of minor state transitions
  • 7. Limitations  Page based development results into – Repetitive (plenty of includes) and – Inefficient (both bandwidth and computing power)  Issues in intensive use of AJAX? – Bookmarking – Search Engine Optimization (SEO) & Indexing – Services based on page visits  More… – State drives behavior – An App’s appearance hopefully will change faster than its logic
  • 8. Way Forward...  Should we give up AJAX-intensive applications? NO  Web sites based on a single Web page – This is the time to start this transition – We have the technology and modern browsers are qualified to achieve this objective – To succeed in this "new" way of web development we must be able to accomplish all of previous requisites of any web site
  • 11. What is SPA? • Single Page Application is a web app in which the majority of interactions are handled on the client without the need to reach a server, with a goal of providing a more fluid user experience
  • 12. Characteristics • Single page apps typically have – “Application like” interaction – Back/Forward Button works as expected – More JavaScript than actual HTML – Ability to go Offline – Dynamic data loading from the server-side API, Works with Restful Web Services – Fluid transitions between page states, Richer Interaction between UI Components – Markup, CSS & JS required for the application sent with the initial request – Page changes occur via JavaScript using Templates & DOM manipulation – URL hashes are used to track state and provide bookmark-able links Ex: http://www.foo.com/#/i-am-a-hash/path?cool=true&strange=maybe
  • 13. SPA Core Benefit - Performance Improvement • SPAs can improve performance in several ways: – Load time: 1 file each of HTML, CSS, JS, – static files not dynamic – Less data transfer: XHR calls only send – raw data, not HTML markup – Load distribution: dramatically less load on your server, by distributing it to clients – Caching gets a lot easier and more beneficial
  • 14. SPA Benefits • It is an application so it can do Cool Stuff! • Responsive, native application feel. No page flicker! • Faster UI, More Interactive • Most of the page processing happens client side, offloading server load • Massive tooling support, Vibrant community • Code reuse. REST endpoints are general purpose and can be used for multiple applications • UI is just another Client • Perfect for supporting multiple platforms
  • 15. Business Usage of SPA • Create “App-like user experience” • Bind to your own (or 3rd party) RESTful API • Build Hybrid (native) HTML5 applications • Mobile version of your web site The SPA sweet spot is likely not on web sites, but on content-rich cross-platform mobile apps
  • 17. “The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application ” - Justin Meyer Author JavaScriptMVC
  • 18. SPA - Building Blocks Ref: http://www.slideshare.net/SC5/building-single-page-applications-16543203
  • 19. Open-source JavaScript framework Developed in 2009 Maintained by Google Actively developed and supported
  • 20. Key Features of AngularJS • Declarative HTML approach • Easy Data Binding : Two way Data Binding • Reusable Components • MVC/MVVM Design Pattern • Dependency Injection • End to end Integration Testing / Unit Testing • Routing • Templating
  • 21. HTML Compiler • Angular's HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behaviour to any HTML element or attribute and even create new HTML elements or attributes with custom behaviour. Angular calls these behaviour extensions directives. • Compiler is an angular service which traverses the DOM looking for attributes. The compilation process happens in two phases. – Compile: traverse the DOM and collect all of the directives. The result is a linking function. – Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.
  • 22. Library vs. Framework • Library (Backbone and Knockout) – passive functionality – invoked by the application • Framework (Ember) – provides application architecture – handles common requirements – invokes application code • AngularJS is closer to a framework
  • 23. MVVM: AngularJS Way VIEW Data Binding Commands Notifications • User Interface • Reusable Components • UI Logic • Observers & Notify View Model Events User Interactions CONTROLLER VIEW MODEL • Presentation Logic • State • Observe Mutations • Notify View Data Processing • Maintain state • Define Application Behavior • Maps user actions to Model
  • 24. Key Components of an Angular Application • Dependency Injection • Controllers • Models • Services • Directives • Modules • Filters • • • • • • • Factories Scopes Templates Routes Animations Data Binding Testing
  • 25. Dependency Injection • Deals with how code gets hold of its dependencies • No more “global” objects • Classes will get the objects they need (their dependencies) in order to work • The dependency is simply handed to the component • The injector is a service locator that is responsible for construction and lookup of dependencies Ref: http://docs.angularjs.org/guide/di
  • 26. 2-way Data Binding • Automatic propagation of data changes • Model is single source of truth • Digest cycle • View is updated automatically when the Model is changed • Model is updated automatically when a value in the View has changed • No DOM manipulation boilerplate needed! Ref: http://docs.angularjs.org/guide/databinding
  • 27. AngularJS – As a SPA Framework
  • 28. Why use AngularJS? • The problem - HTML is great for static pages, but has no tools for web applications • The solution - extend and adapt HTML vocabulary with some additional declarations that are useful for web applications • Addresses the root problem that HTML was not designed for dynamic views. • Less effort in mundane tasks allowing for better focus on what is ACTUALLY VALUABLE - THE LOGIC • More efficiency in development • free from boilerplate
  • 29. Why use AngularJS? (Continued..) • Separation of concerns – Data Binding – Controllers – View Model • Extensibility • Reusable Components – Directives – Filters – Form Validation – Server Communication
  • 30. AngularJS and Testability • Issues in JS/Client Side Testing – developers often mix concerns – have to wait for XHR – create the right kind of DOM • DI helps solve issues of object/reference mocking • Behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection • Also comes with end-to-end scenario runner
  • 32. Some of the Real World Examples • http://www.innowhere.com/jnieasy • http://builtwith.angularjs.org/ – http://floorplan.ons.no/#/ – http://us.playstation.com/youtube/ – http://opentaste.eu/
  • 33. Q&A
  • 34. Thank You! Visit us at: www.harbinger-systems.com Write to us at: [email protected] Follow us Blog: blog.harbinger-systems.com Twitter: twitter.com/HarbingerSys (@HarbingerSys) Slideshare: slideshare.net/hsplmkting Facebook: facebook.com/harbingersys LinkedIn: linkedin.com/company/382306

Editor's Notes

  • #7: Different application development approaches have been happening:Model 1: direct translation of the original model of pages and links, where pages are dynamically generated.Model 2 o MVC: which separates the representation of information from the user's interaction with itThe model consists of application data, business rules, logic, and functions. A view is any output representation of data The controller mediates input, converting it to commands for the model or viewMVC based on components (Model 3?): Is the sophisticated version of Model 2 simulating how desktop applications work. based on components and events, so any user action implies the complete rebuild and reload of the page partially changing some part according with the action performedMVC enriched with Ajax: In recent years the AJAX technique has been introducedThis technique with the help of JavaScript allows partial changes in pages obtaining new data from server without reloadingPage navigation is partially avoided in case of minor state transitions performed by AJAX and JavaScript
  • #8: BookmarkingAs AJAX can partially change the page the URL is the same, the end user cannot save as bookmark a concrete view (state) of the pageSearch Engine Optimization (SEO)Any web site needs to be fully indexed by search engines like Google SearchCurrent crawlers see the Web as Web 1.0, that is, JavaScript code is fully ignored, thereby any partial change performed via AJAX loaded from server is not executed then not indexed by crawlers traversing the web siteServices based on page visitsFor instance advertisement services like Google AdSense and page visit monitoring such as Google Analytics, in both cases the number of page loads is importantTherefore any partial change done by AJAX does not count as a new visit.Occasional need of pop-pup windowsMore..State drives behavior. You’re coupling the logic of your app to how it’s presented on the screenThey have different reasons to changeDOM => appearanceApp => logicAn App’s appearance hopefully will change faster than its logic
  • #9: Should we give up AJAX-intensive applications?NO.There are technical solutions for all above listed requisites.
  • #16: “App-like user experience”Touch navigationInstant response to your clicksFluid transitions between pagesCached & pre-fetched contentBinding to your own (or 3rd party) RESTful APIEase of populating modelsReplacement for Flash or Java in your web pagese.g. FlipBoard, LinkedIn iPadHybrid (native) HTML5 applicationse.g. FlipBoard, LinkedIn iPadApache Cordova, Embedded WebViews, Tizen, Windows 8Mobile version of your web sitem.veikkaus.fi, plus.hbl.fi, app.ft.com
  • #19: XMLHTTPRequestHTML and all the assets are loaded in first requestAdditional data is fetched over In addition to normal server stack, you need to have API endpoints in the same level as presentation layerIf you want to go real-time, WebSockets (socket.io) can help youWhen it gets slow, cluster the backend behind a caching reverse proxy like Varnish
  • #24: ControllersContains the code behind the viewTry to keep lightweightControllers do not need to directly manipulate the viewcontain only the business logic needed for a single view
  • #25: DirectiveDirectives are a way to teach HTML new tricksUse them when you have to make DOM manipulationsEver wanted to create your own tag or attribute - this is how you do it!Takes you one step closer to creating domain-specific markupDirectives should not change a model or controller’s logicAll they handle is creating the page’s content and structure of elementsAngularJS provides over 50form – element directiveng-repeat – attribute directive (it’s amazing!)FiltersReusable operation using which you can modify the content that is shown on the pageExamples: uppercase a value, filter search results, etc.TemplatesAn Angular template is the declarative specification that, along with information from the model and controller, becomes the rendered view that a user sees in the browser. It is the static DOM, containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The Angular elements and attributes direct angular to add behavior and transform the template DOM into the dynamic view DOM.
  • #26: Dependency InjectionDependency Injection (DI) is a software design pattern that deals with how code gets hold of its dependencies.DI in a nutshellThere are only three ways an object or a function can get a hold of its dependencies:The dependency can be created, typically using the new operator.The dependency can be looked up by referring to a global variable.The dependency can be passed in to where it is needed.The first two options of creating or looking up dependencies are not optimal because they hard code the dependency. This makes it difficult, if not impossible, to modify the dependencies. This is especially problematic in tests, where it is often desirable to provide mock dependencies for test isolation.The third option is the most viable, since it removes the responsibility of locating the dependency from the component. The dependency is simply handed to the component.To manage the responsibility of dependency creation, each Angular application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies.This means that any component which does not fit your needs can easily be replaced.
  • #27: Most other templating systems consume a static string template and combine it with data, resulting in a new string. The resulting text is then innerHTMLed into an element.This means that any changes to the data need to be re-merged with the template and then innerHTMLed into the DOM. Some of the issues with this approach are:reading user input and merging it with dataclobbering user input by overwriting itmanaging the whole update processlack of behavior expressivenessAngular is different. The Angular compiler consumes the DOM, not string templates. The result is a linking function, which when combined with a scope model results in a live view. The view and scope model bindings are transparent. The developer does not need to make any special calls to update the view. And because innerHTML is not used, you won't accidentally clobber user input. Furthermore, Angular directives can contain not just text bindings, but behavioral constructs as well.The Angular approach produces a stable DOM. The DOM element instance bound to a model item instance does not change for the lifetime of the binding. This means that the code can get hold of the elements and register event handlers and know that the reference will not be destroyed by template data merge.
  • #29: Other frameworks deal with HTML’s shortcomings by either abstracting away HTML, CSS, and/or JavaScript or by providing an imperative way for manipulating the DOM. Neither of these address the root problem that HTML was not designed for dynamic views.efficiency - AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.Unlike other frameworks, there is no need to inherit from proprietary types; to wrap the model in accessors methods. Just plain old JavaScript here. This makes your code easy to test, maintain, reuse, and again free from boilerplate.
  • #30: Data BindingData-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.ControllerControllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.DirectivesDirectives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.ExtensibilityAngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.Reusable ComponentsWe use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately.FiltersThere are a ton of top notch filters provided by AngularJS, date, currency and json (for debugging)  are on the top of the list.  However it’s so easy to create your own, you really should.  Filters are really useful, easy to test and are a great resource to share across projects.
  • #31: TestableAngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.