Single Page Apps
Upcoming SlideShare
Loading in...5
×
 

Single Page Apps

on

  • 1,809 views

A session I delivered in SDP December 2013 conference

A session I delivered in SDP December 2013 conference

Statistics

Views

Total Views
1,809
Views on SlideShare
1,184
Embed Views
625

Actions

Likes
0
Downloads
37
Comments
0

11 Embeds 625

http://dotnet.dzone.com 418
http://blogs.microsoft.co.il 130
http://feedly.com 30
http://feeds.feedburner.com 27
http://www.feedspot.com 6
http://www.dzone.com 3
https://twitter.com 3
http://reader.aol.com 3
http://translate.googleusercontent.com 2
http://www.newsblur.com 2
http://www.hanrss.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Single Page Apps Single Page Apps Presentation Transcript

    • SELA DEVELOPER PRACTICE December 15-19, 2013 Gil Fink Single Page Apps (SPAs)
    • Agenda • • • • • • The Road to Single Page Apps What is a SPA? SPA Building Blocks and Architecture AMD and RequireJS MVC using BackboneJS A Simple SPA
    • The Road to Single Page Apps Native Apps ClickOnce Thin Clients and App Stores Embedded Objects (Flash, Silverlight, Java Applets …) Websites Web Apps RIA SPA
    • Traditional Web Apps HTTP requests translated into user actions The state persisted in the server side The server translates the user action The server translates its response to HTML The browser displays the HTML response
    • Traditional Native Apps State is persisted in the client-side Compiled programming language is used The application is platform dependent An installation may be required
    • What is a Single Page App (SPA)? A web application No need for full page submit No full refresh No embedded objects Client-side routing
    • Why to Develop SPAs? Feature Web App Native App Single Page App Cross Platform V X V Client State Management X V V No Installation required V X V SPA Web App Native App
    • SPA Building Blocks Web API SPA REST AJAX JavaScript Libraries HTML5
    • HTML5 Supported by most modern browsers Include variety of new JavaScript APIs that can help to: Store data locally Save data across application shutdowns Communicate with the server in new ways Like CORS and Web Sockets Increase performance
    • AJAX Asynchronously call server endpoints Non blocking operations You can maintain state on the client and go to the server without refreshing the whole page Has opened the road for richer client-side UX
    • JavaScript Libraries/Frameworks
    • REST Stands for REpresntational State Transfer Architecture style Designed to work with HTTP Using HTTP verbs (POST, GET, PUT, DELETE) Performs Create, Read, Update and Delete operations respectively Can also use other HTTP verbs Can receive and send data in variety of formats JSON, XML, HTML, XHTML, Blob and more
    • Web API The server is used only as API Each API Function is an endpoint in the server No need for server rendering No need for server routing
    • SPA Architecture
    • Async Module Definitions (AMD) Define modules such that the module and its dependencies can be asynchronously loaded
    • RequireJS Library A module framework in the browser Can be downloaded from http://requirejs.org/ Browser friendly API Supports NodeJS as well Defines a structure for files layout Uses conventions to perform lookups for dependencies
    • RequireJS Demo
    • MVC using BackboneJS BackboneJS is a small MV* library Enforces structure in your JavaScript code Includes only 5 main objects: Models Collections Views Routers Events
    • MVC using BackboneJS – Cont. Extending one of BackboneJS main objects To have built-in BackboneJS functionality To create your own custom functionality var myModel = Backbone.Model.extend({ defaults: { myModelID: 0, myModelName: ‘’ } }); Var myCollection = Backbone.Collection.extend({ model: myModel }); var myRouter = Backbone.Router.extend({ routes: { ‘’: home }, home: function() { // create the home view } });
    • A Simple SPA Demo
    • Questions
    • Summary • SPAs are web apps built upon one page and JavaScript interactions Very suitable for mobile development • SPAs are the way to build your next web apps! •
    • Thank You