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

What's hot (20)

Angular modules in depth
Angular modules in depthAngular modules in depth
Angular modules in depth
Christoffer Noring
 
Introduction To Single Page Application
Introduction To Single Page ApplicationIntroduction To Single Page Application
Introduction To Single Page Application
KMS Technology
 
Angular - Chapter 3 - Components
Angular - Chapter 3 - ComponentsAngular - Chapter 3 - Components
Angular - Chapter 3 - Components
WebStackAcademy
 
Google Chrome DevTools features overview
Google Chrome DevTools features overviewGoogle Chrome DevTools features overview
Google Chrome DevTools features overview
Oleksii Prohonnyi
 
Angular
AngularAngular
Angular
Lilia Sfaxi
 
Angular 8
Angular 8 Angular 8
Angular 8
Sunil OS
 
React JS part 1
React JS part 1React JS part 1
React JS part 1
Diluka Wittahachchige
 
Presentation1.pptx
Presentation1.pptxPresentation1.pptx
Presentation1.pptx
PradeepDyavannanavar
 
A quick introduction to Strapi CMS
A quick introduction to Strapi CMSA quick introduction to Strapi CMS
A quick introduction to Strapi CMS
Ashokkumar T A
 
Angular introduction students
Angular introduction studentsAngular introduction students
Angular introduction students
Christian John Felix
 
AngularJS
AngularJS AngularJS
AngularJS
NexThoughts Technologies
 
Java 8 features
Java 8 featuresJava 8 features
Java 8 features
NexThoughts Technologies
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Arnold Asllani
 
Angularjs PPT
Angularjs PPTAngularjs PPT
Angularjs PPT
Amit Baghel
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Sharing Data Between Angular Components
Sharing Data Between Angular ComponentsSharing Data Between Angular Components
Sharing Data Between Angular Components
Squash Apps Pvt Ltd
 
Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0Introducing ASP.NET Core 2.0
Introducing ASP.NET Core 2.0
Steven Smith
 
Angular 16 – the rise of Signals
Angular 16 – the rise of SignalsAngular 16 – the rise of Signals
Angular 16 – the rise of Signals
Coding Academy
 
Angular
AngularAngular
Angular
sridhiya
 
Angular Introduction By Surekha Gadkari
Angular Introduction By Surekha GadkariAngular Introduction By Surekha Gadkari
Angular Introduction By Surekha Gadkari
Surekha Gadkari
 

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

JavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JSJavaScript MVC Frameworks: Backbone, Ember and Angular JS
JavaScript MVC Frameworks: Backbone, Ember and Angular JS
Harbinger Systems - HRTech Builder of Choice
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234
horiadobrin
 
Angularjs basic part01
Angularjs basic part01Angularjs basic part01
Angularjs basic part01
Mohd Abdul Baquee
 
Top 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web DevelopmentTop 10 Javascript Frameworks For Easy Web Development
Top 10 Javascript Frameworks For Easy Web Development
Technostacks Infotech Pvt. Ltd.
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script framework
Nishant Kumar
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
Single page App
Single page AppSingle page App
Single page App
Gaurav Gawande
 
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with ReactThe Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
New Relic
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
Marc Cyr
 
React js
React jsReact js
React js
Nikhil Karkra
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
Single Page Angular Application Presentation
Single Page Angular Application PresentationSingle Page Angular Application Presentation
Single Page Angular Application Presentation
Knoldus Inc.
 
Single Page Angular Application Presentation
Single Page Angular Application PresentationSingle Page Angular Application Presentation
Single Page Angular Application Presentation
Knoldus Inc.
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...
Katy Slemon
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo Systemz
Training Institute
 
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
IbadUddin4
 
Client Side Performance In Web Applications
Client Side Performance In Web ApplicationsClient Side Performance In Web Applications
Client Side Performance In Web Applications
vladungureanu
 
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
What Is Angular 2 | Angular 2 Tutorial For Beginners | Angular Training | Edu...
Edureka!
 
Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234Spring Web Presentation 123143242341234234
Spring Web Presentation 123143242341234234
horiadobrin
 
Comparative analysis of java script framework
Comparative analysis of java script frameworkComparative analysis of java script framework
Comparative analysis of java script framework
Nishant Kumar
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
The Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with ReactThe Delight and Difficulties of Universal Java Script with React
The Delight and Difficulties of Universal Java Script with React
New Relic
 
AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)AngularJS in Production (CTO Forum)
AngularJS in Production (CTO Forum)
Alex Ross
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
Marc Cyr
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
Single Page Angular Application Presentation
Single Page Angular Application PresentationSingle Page Angular Application Presentation
Single Page Angular Application Presentation
Knoldus Inc.
 
Single Page Angular Application Presentation
Single Page Angular Application PresentationSingle Page Angular Application Presentation
Single Page Angular Application Presentation
Knoldus Inc.
 
Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...Web application architecture guide how it works types, components, best pract...
Web application architecture guide how it works types, components, best pract...
Katy Slemon
 
Angular webinar - Credo Systemz
Angular webinar - Credo SystemzAngular webinar - Credo Systemz
Angular webinar - Credo Systemz
Training Institute
 
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
intro to react| React: dynamic UIs, component-based, virtual DOM, JSX, effici...
IbadUddin4
 
Client Side Performance In Web Applications
Client Side Performance In Web ApplicationsClient Side Performance In Web Applications
Client Side Performance In Web Applications
vladungureanu
 
Ad

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

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

Recently uploaded (20)

Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
The case for on-premises AI
The case for on-premises AIThe case for on-premises AI
The case for on-premises AI
Principled Technologies
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025Azure vs AWS  Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and ImplementationAI Agents in Logistics and Supply Chain Applications Benefits and Implementation
AI Agents in Logistics and Supply Chain Applications Benefits and Implementation
Christine Shepherd
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software DeveloperJeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : IntroductionJira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)Trends Report: Artificial Intelligence (AI)
Trends Report: Artificial Intelligence (AI)
Brian Ahier
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Trends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary MeekerTrends Artificial Intelligence - Mary Meeker
Trends Artificial Intelligence - Mary Meeker
Clive Dickens
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025Developing Schemas with FME and Excel - Peak of Data & AI 2025
Developing Schemas with FME and Excel - Peak of Data & AI 2025
Safe Software
 
TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025TimeSeries Machine Learning - PyData London 2025
TimeSeries Machine Learning - PyData London 2025
Suyash Joshi
 
If You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FMEIf You Use Databricks, You Definitely Need FME
If You Use Databricks, You Definitely Need FME
Safe Software
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 

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.