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
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
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
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
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
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/
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
Notes de l'éditeur
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
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
Should we give up AJAX-intensive applications?NO.There are technical solutions for all above listed requisites.
“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
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
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
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.
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.
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.
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.
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.
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.