![Agenda • Overview – Web App Types & Patterns – Limitations/Challenges – Way Forward • Single Page Applications [SPA] – – – – Introduction Characteristics SPA Performance Benefits • SPA Architecture • AngularJS • Q&A](https://image.slidesharecdn.com/benefitsofdevelopingsinglepagewebapplicationsusingangularjs-131114012906-phpapp01/75/Benefits-of-developing-single-page-web-applications-using-angular-js-4-2048.jpg)
![Single Page Application [SPA]](https://image.slidesharecdn.com/benefitsofdevelopingsinglepagewebapplicationsusingangularjs-131114012906-phpapp01/75/Benefits-of-developing-single-page-web-applications-using-angular-js-9-2048.jpg)
Uploaded byHarbinger Systems - HRTech Builder of Choice
Benefits of developing single page web applications using angular js
The webinar discusses the advantages of developing single-page web applications (SPAs) using AngularJS, emphasizing the importance of load time and user experience. It covers key characteristics of SPAs, their architectural benefits, and how AngularJS facilitates application development through features like two-way data binding and dependency injection. The session concludes with real-world examples and insights into improving web application performance and user interaction.
In this document
Powered by AI
Introduction to the webinar focusing on the benefits of Single Page Applications using AngularJS.
Discusses how loading time affects user behavior and revenue, citing surveys and examples from Walmart and Mozilla.
Overview of web application types, patterns, and the evolution from traditional pages to modern MVC models.
Addresses limitations of page-based development and advocates for transitioning to Single Page Applications.
Defines Single Page Applications, emphasizing client-side rendering and interaction efficiency.
Key traits of SPAs including dynamic data loading, offline capabilities, and user interface interactions.
Highlights performance improvements, reduced server load, and better user experience advantages of SPAs.
Discusses how SPAs can be used to create app-like experiences and their viability in mobile app development.
Overview of SPA architecture and AngularJS features, including data binding and MVC patterns.
Explains dependency injection and two-way data binding as core features of AngularJS for efficient coding.
Reasons to use AngularJS for SPAs, emphasizing its capability to enhance HTML for dynamic views.
Challenges of client-side testing with AngularJS, along with examples of successful applications developed.
Concludes the presentation with a Q&A session and provides contact details for further engagement.
Benefits of developing single page web applications using angular js
- 1. Welcome to thewebinar on Benefits of Developing Single Page Web Applications Using AngularJS
- 2. Presenters Anjanikumar Shukla Maheshkumar Kharade GeneralManager Business Development Harbinger Systems Tech Lead Harbinger Systems
- 3. How Loading TimeAffects 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 – WebApp Types & Patterns – Limitations/Challenges – Way Forward • Single Page Applications [SPA] – – – – Introduction Characteristics SPA Performance Benefits • SPA Architecture • AngularJS • Q&A
- 5.
- 6. Web Applications Journey Model1 – 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 baseddevelopment 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... Shouldwe 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.
- 10.
- 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 pageapps 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 isan 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 ofSPA • 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.
- 17. “The secret tobuilding 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 - BuildingBlocks Ref: http://www.slideshare.net/SC5/building-single-page-applications-16543203
- 19. Open-source JavaScript framework Developedin 2009 Maintained by Google Actively developed and supported
- 20. Key Features ofAngularJS • 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'sHTML 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 DataBinding 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 ofan Angular Application • Dependency Injection • Controllers • Models • Services • Directives • Modules • Filters • • • • • • • Factories Scopes Templates Routes Animations Data Binding Testing
- 25. Dependency Injection • Dealswith 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 – Asa 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
- 31.
- 32. Some of theReal World Examples • http://www.innowhere.com/jnieasy • http://builtwith.angularjs.org/ – http://floorplan.ons.no/#/ – http://us.playstation.com/youtube/ – http://opentaste.eu/
- 33.
- 34. Thank You! Visit usat: 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
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.