Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Har...
How Loading Time Affects Your Bottom Line
•
•
•
•

A survey revealed that Loading time is a major contributing factor to p...
Agenda
• Overview
– Web App Types & Patterns
– Limitations/Challenges
– Way Forward

• Single Page Applications [SPA]
–
–
...
Overview
Web Applications Journey


Model 1



– Based on components and events
– complete rebuild and reload of the
page partial...
Limitations
 Page based development results into
– Repetitive (plenty of includes) and
– Inefficient (both bandwidth and ...
Way Forward...
 Should we give up AJAX-intensive applications? NO
 Web sites based on a single Web page
– This is the ti...
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 withou...
Characteristics
• Single page apps typically have
– “Application like” interaction
– Back/Forward Button works as expected...
SPA Core Benefit - Performance Improvement
• SPAs can improve performance in several ways:
– Load time: 1 file each of HTM...
SPA Benefits
•

It is an application so it can do Cool Stuff!

•

Responsive, native application feel. No page flicker!

•...
Business Usage of SPA
• Create “App-like user experience”

• Bind to your own (or 3rd party) RESTful API
• Build Hybrid (n...
SPA Architecture
“The secret to building large apps is never build large
apps. Break your applications into small pieces.
Then, assemble th...
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
• M...
HTML Compiler
• Angular's HTML compiler allows the developer to teach the browser new
HTML syntax. The compiler allows you...
Library vs. Framework
• Library (Backbone and Knockout)
– passive functionality
– invoked by the application

• Framework ...
MVVM: AngularJS Way
VIEW

Data Binding
Commands
Notifications

• User Interface
• Reusable
Components
• UI Logic
• Observe...
Key Components of an Angular Application
• Dependency
Injection
• Controllers
• Models
• Services
• Directives
• Modules
•...
Dependency Injection
• Deals with how code gets hold of its
dependencies
• No more “global” objects

• Classes will get th...
2-way Data Binding
• Automatic propagation of data changes
• Model is single source of truth
• Digest cycle
• View is upda...
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 -...
Why use AngularJS? (Continued..)
• Separation of concerns
– Data Binding
– Controllers
– View Model

• Extensibility
• Reu...
AngularJS and Testability
• Issues in JS/Client Side Testing
– developers often mix concerns
– have to wait for XHR
– crea...
Real World Examples
Some of the Real World Examples
• http://www.innowhere.com/jnieasy
• http://builtwith.angularjs.org/
– http://floorplan.on...
Q&A
Thank You!
Visit us at: www.harbinger-systems.com
Write to us at: hsplinfo@harbingergroup.com
Follow us

Blog: blog.harbin...
Upcoming SlideShare
Loading in …5
×

Benefits of developing single page web applications using angular js

45,323 views

Published on

How many times have you experienced the agonizing wait as you navigate through a web application? Looking expectantly at the screen, and waiting for the page to load? Frustrating, isn’t it?

Using Single Page web application (SPA) technique can give your web application as seamless an experience as a desktop application. So, what is SPA? And how does it enhance the viewer experience?

The webinar will take you through a step-by-step introduction to SPA, its building blocks, the design techniques and advantages of SPA. It will also discuss the distinct advantages of using AngularJS for Single Page Applications and feature an application demo.

Key Takeaways:

Single Page Web Applications [SPA] , Present and Future
- Introduction
- Why SPA, advantages
- SPA- Multiplatform perspective
- Future of SPA
Architectural considerations for developing SPA
- Building blocks of SPA
- Main Challenges in Web Application Development
Why choose AngularJS for SPA
- Walkthrough of Key AngularJS features
- Advantages of AngularJS in SPA development
Application Demo
Who will benefit from this webinar?

ISVs who want to make their web applications more fluid and engaging for their users
Businesses who don’t want to lose customers because of a slow website
- B2C portals
- Online Retailers
- Travel & Hospitality
- Online shopping portals
- Healthcare portals
Educational & training institutions

Published in: Technology, Education

Benefits of developing single page web applications using angular js

  1. 1. Welcome to the webinar on Benefits of Developing Single Page Web Applications Using AngularJS
  2. 2. Presenters Anjanikumar Shukla Maheshkumar Kharade General Manager Business Development Harbinger Systems Tech Lead Harbinger Systems
  3. 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. 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
  5. 5. Overview
  6. 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. 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. 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
  9. 9. Single Page Application [SPA]
  10. 10. Client Side Routing Single Page App Client Side Rendering
  11. 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. 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. 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. 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. 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
  16. 16. SPA Architecture
  17. 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. 18. SPA - Building Blocks Ref: http://www.slideshare.net/SC5/building-single-page-applications-16543203
  19. 19. Open-source JavaScript framework Developed in 2009 Maintained by Google Actively developed and supported
  20. 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. 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. 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. 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. 24. Key Components of an Angular Application • Dependency Injection • Controllers • Models • Services • Directives • Modules • Filters • • • • • • • Factories Scopes Templates Routes Animations Data Binding Testing
  25. 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. 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. 27. AngularJS – As a SPA Framework
  28. 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. 29. Why use AngularJS? (Continued..) • Separation of concerns – Data Binding – Controllers – View Model • Extensibility • Reusable Components – Directives – Filters – Form Validation – Server Communication
  30. 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
  31. 31. Real World Examples
  32. 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. 33. Q&A
  34. 34. 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

×