• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,802
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Intro to Single Page Applications Using JavaScript and ASP.NET Alan Hecht
  • 2. What is a Single Page Application? • The web equivalent of a desktop application • The application is written with HTML, CSS, and JavaScript • Unlike regular web sites, no page loads take place after initialization.
  • 3. Characteristics of a SPA • Launched from a single HTML page or view • The page is fairly interactive, like a desktop application • Portions of the page (sometimes very large portions) rendered client side by JavaScript
  • 4. Architectural Overview Browser - Web App HTML / CSS / JS Navigation / AJAX UI HTML / CSS / JS AJAX REST API - JSON Business Logic
  • 5. JavaScript in the Browser • Single thread handles all events, UI and nonUI • Synchronous events stop all further processing until done, which locks the UI • Asynchronous events are queued until callback function is called. Other events handled in the meantime
  • 6. Asynchronous JavaScript • Code is non-blocking. Callbacks aren’t invoked until code is done executing and the thread is waiting for events to execute. • Good analogy is the front window at the doctor’s office • Good for I/O intensive applications but not CPU intensive applications
  • 7. Async JavaScript Example
  • 8. AJAX • Asynchronous JavaScript and XML (now use JSON instead of XML) • Browser makes an asynchronous HTTP request, callback function is called upon completion
  • 9. REST •Representational State Transfer •Building your web API using HTTP instead of on top of HTTP (like SOAP)
  • 10. REST •Four HTTP verbs used: GET, PUT, POST, and DELETE •Use URL path segments instead of query parameters or payload data
  • 11. REST Example HTTP GET /users - get a list of users HTTP GET /users/1 - get info for user id 1 HTTP POST /users - create a new user HTTP DELETE /users/1 - delete user id 1 HTTP PUT /users/1 - update user id 1
  • 12. JSON • JavaScript Object Notation • Collection of key-value pairs and lists of keyvalue pairs • Has replaced XML as a data format because of simplicity
  • 13. JSON Example
  • 14. Structuring JavaScript Code • For non-trivial, interactive web apps, you’ll want to use a framework which at least has the concept of models and views along with how they get updated • A JavaScript framework architected with MVC, MVVM, MVP, or MV-Whatever helps structure the UI (will be using MVC as a ‘shorthand’ here)
  • 15. What about jQuery? • jQuery is great but alone doesn’t scale well for more complicated apps • For larger apps, you would likely wind up with data scattered about the DOM in ‘data-’ attributes and view logic tied to a particular HTML layout
  • 16. Client Side JavaScript MVC Frameworks Just pick one…
  • 17. JavaScript Framework Philosophy • Have lots of specialized frameworks that do one thing well, mix and match as needed (you’ll see this in Node.js) • But most of us are just trying to solve a business problem and don’t wish to engage in endless research • Nobody has won the client side JS MVC framework battle the way jQuery won with DOM manipulation & CSS selectors
  • 18. Scott Hanselman’s JavaScript Glossary • Great overview important and innovative client side JavaScript frameworks: http://www.hanselman.com/blog/TheBigGlossa ryOfOpenSourceJavaScriptAndWebFramewor ksWithCoolNames.aspx • Includes open source ASP.NET server side libraries that are innovative
  • 19. JS MVC Frameworks - How to Decide • At the end of 2013, the most popular as measured by Stack Overflow activity are: Backbone.js, Ember.js, Angular,js, Knockout.js, Dojo, and Ext.js • Best article I’ve seen which compares and evaluates JavaScript MVC frameworks while not making a recommendation is: http://www.funnyant.com/choosing-javascriptmvc-framework/
  • 20. TodoMVC.com • Sample Todo application written in each and every JavaScript Model/View/* framework • Gives a sense of how much structure and boilerplate code is needed to create a web app with a given framework
  • 21. TodoMVC.com
  • 22. Backbone.js •Contains the minimal set of models, collections, views, and URL functionality needed to build a web application •Good for experienced JavaScript developers
  • 23. Marionette.js • Built off of backbone.js • Reduces boilerplate code, especially in the views • Can be incorporated piecemeal
  • 24. Backbone.js & Marionette.js Examples
  • 25. Backbone.js Routing •Anything in a URL after the ‘#’ is for client side navigation representing a ‘view’. Classic example is AJAX pagination. •With a small, trivial application, a ‘switch’ statement will likely work. •For a more substantial application, something more formal which handles client side URL routes is usually needed
  • 26. Ember.js • Framework with an opinionated way of building web applications • Modeled after the Cocoa framework in iOS development and Ruby on Rails to a lesser extent • Designed for building desktop-like web applications
  • 27. Ember.js Example
  • 28. Ember.js Templates • Client-side view templating which contains expressions that can be replaced with values • Templates can reside in separate files that are loaded and compiled.
  • 29. Ember.js & Discourse • Discourse is a large, open source, forum web application which uses Ember.js • Looks like a good non-trivial example of how to use Ember.js • Server side is Ruby on Rails, but just go to the app/assets/javascripts directory and you’ll be all set.
  • 30. Angular.js • Toolset for building the framework for web applications • What HTML would look like if it were designed for building web applications • Designed with testing in mind (dependency injection and plays well with testing tools)
  • 31. Angular.js Example
  • 32. Angular.js Directives • Allow you to create custom HTML attributes, elements, or classes • The Angular compiler traverses the DOM on the client looking for pre-built or new directives.
  • 33. Angular.js Services • Functions that carry out specific tasks. Angular includes built-in services but custom ones can be created • Services added via dependency injection
  • 34. Knockout.js • Based on Model-View-ViewModel architecture just like WPF & Silverlight • Focuses on UI data binding • For apps bigger than a few pages, likely need other components like client-side routing
  • 35. Knockout.js – Example
  • 36. Ext.js • Framework for building desktop-like applications • Works better for internal applications because it’s so heavyweight • Steep learning curve • First stable release back in 2007
  • 37. Ext.js - Example
  • 38. Dojo • Toolkit for building desktop-like applications • Extensive HTML widgets • Documentation not so great • First stable release back in 2007
  • 39. What about jQuery? • Ember.js depends on jQuery • Angular.js can use jQuery or include its own slimmed down version of it • Backbone.js, Knockout.js, Ext.js work with jQuery
  • 40. Building a REST API • Best options are ASP.NET Web API or WCF REST • Could use ASP.NET MVC or even an asmx web service if on Web Forms • The API can be (and often is) used native mobile applications as well.
  • 41. ASP.NET Web API • Designed to build APIs, not web sites • Unlike ASP.NET MVC, controllers return data and not views • Content type (i.e. JSON or XML) is negotiated, not specified, via HTTP ‘Accept’ header
  • 42. ASP.NET Web API Controllers • Controllers derive from “ApiController” instead of “Controller” like they do in ASP.NET MVC • HTTP methods bound to controller methods by start of method (“Get”, “Post”, “Put”, etc.) or with an attribute ([HttpGet], [HttpPost], [HttpPut], etc.)
  • 43. ASP.NET Web API - Routing • By default, the route is “api/{controller}/{id}”, and “api” is used to avoid collisions with ASP.NET MVC routing
  • 44. ASP.NET Web API - Example
  • 45. Issues
  • 46. Back Button • Back button only works if the URL changes • Ember.js, angular.js, and backbone.js have some built in support • Can use HTML5 History API with knockout.js
  • 47. What about SEO? • Web crawlers at the end of 2013 don’t handle JavaScript • Content to the right of ‘#’ in the URL isn’t sent to the server, Google converts #! to an ‘_escaped_fragment_’ Huh?!?! • Experimental work with using Node.js to render the page on the server