SPA, Web API, Serverless the change of web app architectures IT 4403 Advanced Web and Mobile Applications Jack G. Zheng Fall 2019 https://www.edocr.com/v/j23zyenr/jgzheng/Single-Page-Applications-Serverless Overview 2  This lecture notes provides a high level overview of single page applications in the context of web application architecture changes  The context: web application architectures  What is SPA  Key principles and concepts  Enabling technologies The Context 3  Rise of JavaScript/HTML5  JavaScript/HTML5 handle the user interface and interaction functionalities  Changing of web application architectures  Backend and frontend is even more loosely coupled. Rise of JavaScript 4  #1 in GitHub since 2014  https://octoverse.github.com/projects#languages  #1 in StackOverflow since 2013  https://insights.stackoverflow.com/survey/2018  Most in demand and salaries, 2015  https://gooroo.io/GoorooTHINK/Article/16300/Programming-languages--salaries-and-demand-May- 2015  http://www.techrepublic.com/article/here-are-the-3-most-in-demand-coding-languages-and-where- you-can-find-a-developer-job/  Other rankings  #1 The RedMonk Programming Language Rankings since 2015 https://redmonk.com/sogrady/2018/08/10/language-rankings-6-18/  #2 in student programmers in hackathon (#1 is HTML/CSS) http://studenthackers.devpost.com/2015.html  #2 in Developer Economics survey https://dashboard.developereconomics.com/?survey=de15#mobile  SharePoint/WordPress is moving to JavaScript  https://arc.applause.com/2015/11/24/wordpress-javascript-calypso/  https://developer.wordpress.com/calypso/  https://developer.wordpress.com/2015/11/23/the-story-behind-the-new-wordpress-com/ Change of Web App Architecture 5  Wave 1: multi-layer/tier systems  Rich (multiple) servers  Wave 2: service oriented  Further separation of server side and client side  Services are more among servers  Wave 3: growing focus on the client side and widely use of AJAX  Rich client development, SPA  More open service model; clients consume services  Wave 4: consuming services from the cloud (third parties)  BaaS and serverless; the client is not tied to its own initiating server Multi-Tier Web Architectures 6  Two tier  Three tier (web app)  Four tier web app http://msdn.microsoft.com/en-us/library/ee658109.aspx In the first wave of architecture change, there was no significant change on the client side Changes were more focused on the server side Service Oriented Architecture 7 The service layer effectively makes clients more like an independent and autonomous service consumer, and less owned by its server part – making things “loosely coupled”. Data can also be services Presentation layer can flexibly moved to the client side. Changing of C/S Interaction 8 http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/ UI and data logic move to the client Server provides service Can also be called the AJAX service model Placement of Logic 9 http://www.openajax.org/ member/wiki/images/8/89 /NexawebAjaxCharacteris tics.pdf Not all business logic is appropriate to move to the client side. Transfer of UI Logic 10  UI logic moves to the client side, which can include  Layout  User interaction  Dynamic effects  Animation  Content presentation update/refresh  These functionalities are handled by HTML5/JavaScript https://stackoverflow.com/questions/1059832/is-client-side-ui- rendering-via-javascript-a-good-idea  The server’s diminished role  The server maintains no UI state.  The server, however, does provide resources to the client. Those resources start out with the initial HTML for the web page (the shell) and may in response to client HTTP requests for data in the form of HTML fragments, JSON data, or on- demand JavaScript/CSS. AJAX + (RESTful) Services 11 http://stage.vambenepe.com/archives/1801 This can be any server from any domain Serverless 12  The term serverless application has two distinct but related meanings (https://docs.microsoft.com/en-us/azure/architecture/reference- architectures/serverless/web-app):  Backend as a service (BaaS). Backend cloud services, such as databases and storage, provide APIs that enable client applications to connect directly to these services.  Functions as a service (FaaS). In this model, a "function" is a piece of code that is deployed to the cloud and runs inside a hosting environment that completely abstracts the servers that run the code.  Both definitions have in common the idea that developers and DevOps personnel don't need to deploy, configure, or manage servers.  Serverless applications are event-driven cloud-based systems where application development rely solely on a combination of third-party services, client-side logic and cloud-hosted remote procedure calls (Functions as a Service).  Serverless architectures are application designs that incorporate third-party “Backend as a Service” (BaaS) services, and/or that include custom code run in managed, ephemeral containers on a “Functions as a Service” (FaaS) platform. By using these ideas, and related ones like single-page applications, such architectures remove much of the need for a traditional always-on server component. Serverless architectures may benefit from significantly reduced operational cost, complexity, and engineering lead time, at a cost of increased reliance on vendor dependencies and comparatively immature supporting services. https://martinfowler.com/articles/serverless.html Is it good? 13  See some discussion here  https://softwareengineering.stackexchange.com/ques tions/140036/is-it-a-good-idea-to-do-ui-100-in- javascript-and-provide-data-through-an-api What is SPA 14  A single-page application (SPA) is a web application or web site (the whole application or site) that fits on a single web page with the goal of providing a more fluid user experience similar to a desktop application.  The page does not reload at any point in the process, nor does control transfer to another page.  The application or the page involves dynamic communications with the server behind the scenes.  It’s an extreme version of rich client focused web application architecture SPA Key Principles and Concepts 15  Page/shell  View  Data/resource https://johnpapa.net/pageinspa/ Page/Shell 16  The “page” in SPA is the single web page that the server sends to the browser when the application starts. It’s the server rendered HTML that gets everything started. No more, no less.  Initial page acted as a holder for content, UI, style, and other logic.  The shell is the layout and structure of your app. The visual parts that rarely change.  The shell is generally loaded on the initial page load from the server and serves as the placeholder for all of your views. It can also be dynamically loaded progressively.  The page/shell does not reload at any point in the process, nor does control transfer to another page. https://johnpapa.net/pageinspa/ https://developers.google.com/web/fundam entals/architecture/app-shell View 17  The Views are HTML (UI) fragments that make up what the users commonly call screens or pages.  A particular “sub-page” “partial page” within the shell.  Could be the complete page, a section (div) of the page, or just certain areas all round the page.  Different views can be presented at the same time and do not interfere each other (multi-view, multi-doc interface)  Transition (navigation) between views  URL routing by simulating HTTP request https://johnpapa.net/pageinspa/ User Interactions 18  All user interactions and actions happen within the page.  All results (view changes) due to these actions are presented directly in the page.  Multiple actions/interactions are possible and should not interfere one other (multi-tasking). Data/Resources 19  SPA makes requests for resources from the server on-demand  Those resources may be JSON data, HTML fragments, JavaScript or CSS  The server provides resources/data, not pages (except for the initial page) https://johnpapa.net/pageinspa/ Applications 20  SPA is good for many applications that try to replicate desktop app experience where user interactions are more intensive  Examples  Many email apps  Google Gmail, Outlook Web  Office/editing apps  Office 365  Google Docs  http://www.zillow.com  http://cc-ng-z.azurewebsites.net SPA is not (Exactly) Single Page Website 21  Single or one page web site is a website designed in one (physical) web page  Rooted from the web design community as a UI design style.  Focus on content and the flow of content; does not focus on interactions between server and client  Definitions did have changed to accommodate trends; and more recently came across SPA  https://onepagelove.com/what-exactly-is-a-one-page-website  Typical examples  http://desrist2017.kit.edu  http://www.100yearsofnps.com  More examples: https://onepagelove.com, http://www.awwwards.com/websites/single-page/ Technical Approaches 22  AJAX – the focus of this course  WebSocket  Browser Plugin Driving Technologies 23  Key elements (this course will focus on bare- bone SPA without frameworks)  JavaScript  AJAX  Standard data transfer format especially JSON  RESTful web services (APIs)  More (a research project?)  HTML 5 (web storage, web sockets, history)  Data model/storage  Frameworks  Browser plugin Three Key Parts 24  Server side: services, APIs  A server provides data or functionalities through standard service APIs (RESTful service APIs)  Communication: AJAX  Client communicates with service providers via AJAX  AJAX provides dynamic and continuous user experience  Client side: JavaScript (jQuery)  handles communication and consumes services  controls logic (UI, data, business) and events Web API Overview 25  Web APIs are interfaces exposed based on web technologies  http://code.tutsplus.com/articles/the-increasing-importance-of-apis-in-web- development--net-22368  Server side: similar as web services, interface exposed through HTTP methods  https://en.wikipedia.org/wiki/Web_API  Major API techniques  SOAP web services  RESTful web services  JavaScript  Major data/message format  XML and XML-based: RSS/Atom (feeds)  JSON  Directory of web APIs  http://www.programmableweb.com/apis/directory  http://www.programmableweb.com/api-research RESTful Web Services 26  The RESTful Web Service is an approach for using REST as a communication technology to build SOA  In other words, services are exposed using REST style interfaces  RESTful web services = REST + Web Services  Key principles and practices  Expose directory structure-like URIs.  Use HTTP methods explicitly.  Use multiple representations (XML, JSON, or both)  Be stateless.  More  http://www.ibm.com/developerworks/webservices/library/ws-restful/  http://www.drdobbs.com/web-development/restful-web-services-a- tutorial/240169069 RESTful web services URI 27  General format  Examples  http://MyService/Persons/1  https://api.itbook.store/1.0/books/2279690981  https://api.itbook.store/1.0/search/php/3  Parameters  Parameters are used for options to serve the representation, like  http://MyService/Persons/1?format=xml&encoding=UTF8  NOT for part of the resource  http://MyService/Persons?id=1 Protocol://ServiceName/ResourceType/ResourceID JSON 28  JSON (JavaScript Object Notation) is a lightweight data-interchange format.  It is easy for humans to read and write.  It is easy for machines to parse and generate.  It is based on a subset of the JavaScript Programming Language.  JSON is built on two structures:  A collection of name/value pairs.  An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.  Detailed definition at http://www.json.org AJAX 29  AJAX (Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications.  Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous.  AJAX incorporates:  standards-based presentation using HTML and CSS;  dynamic display and interaction using the Document Object Model;  data interchange and manipulation using XML, JSON, or preformatted HTML;  asynchronous operations and communications using XMLHttpRequest;  JavaScript binding everything together. Ajax Model  With Ajax, web applications can communicate with servers in the background without a complete page loading after every request/response cycle. 30 http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html The server prepares partial pages or just data without markups. JavaScript/jQuery 31  JavaScript unified everything together  AJAX is handled by JavaScript and the browser  JSON is a native JavaScript object and can be directly parsed and read by JavaScript once it is returned from the server  UI (views) is managed by JavaScript through DOM manipulation (dynamic HTML)  Actions/events are handled by JavaScript  JavaScript consumes services  https://stateofjs.com A Simple Complete Cycle 32 Server Browser Service providers (can be same or another server) 1. Initial request 2. Initial response to load the shell 3. Load the shell 5. Ajax call for a service 6. Service response provided as JSON 4. User action to do something 7. JS parse the returned JSON and update page views (partial page update) Benefits 33  Dynamic and interactive  Loads quickly, smooth transition between views  Client based processing, highly responsive  See some discussion here  https://stackoverflow.com/questions/21862054/single -page-application-advantages-and-disadvantages Challenges and More Issues 34  Navigation, browser history  Client data model/storage  Session/state control - on the server or client?  Two-way communication (duplex)? (Web socket, push)  Data binding methods  Frameworks  Web analytics of SPA  SEO, not search friendly Good Resources 35  Core readings  JavaScript’s role: https://www.applause.com/blog/javascript-is-eating-the-world  The new Web application architectures and their impacts for enterprises  http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/  https://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-2/  Client centered web app architecture: http://www.slideshare.net/bastila/sencha-web-applications-come-of-age  An introduction to single page applications: http://www.johnpapa.net/pageinspa/ - SPA will be our focus of the course (project) throughout the semester. Get some initial conceptual understanding first. Read the comments as well.  What is Serverless Architecture? https://hackernoon.com/what-is-serverless-architecture-what-are-its-pros-and-cons-cc4b804022e9  JavaScript’s role:  https://dannorth.net/2011/12/19/the-rise-and-rise-of-javascript/comment-page-1/  https://www.itprotoday.com/web-development/explore-new-world-javascript-focused-client-side-web-development  The new Web application architectures and their impacts for enterprises  https://mobidev.biz/blog/3_types_of_web_application_architecture  http://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-1/  https://blog.octo.com/en/new-web-application-architectures-and-impacts-for-enterprises-2/  Client centered web app architecture: http://www.slideshare.net/bastila/sencha-web-applications-come-of-age  Single page app  https://johnpapa.net/spa/  http://singlepageappbook.com  http://tutorialzine.com/2015/02/single-page-app-without-a-framework/  https://en.wikipedia.org/wiki/Single-page_application  Serverless  https://www.fullstackfirebase.com/introduction/what-is-serverless  https://docs.microsoft.com/en-us/azure/architecture/reference-architectures/serverless/web-app