Modern Web: Single Page Applications Martin Kruliš by Martin Kruliš (v1.1) 24. 5. 2017

Single Page Applications Three-tire Applications Web Server Client HTTP/WebSocket Business Logic Business logic is being shifted to client side. HTML Database by Martin Kruliš (v1.1) 24. 5. 2017

Single Page Applications The application logic runs in the browser Provides more desktop-like user experience HTTP requests are handled asynchronously (and covertly) Traditional browsing is typically discouraged Handled internally by changing DOM dynamically Thin server architecture Data storage, security verifications, … Disadvantages Application boot - loading and initialization time Less stable execution environment (many browser types) by Martin Kruliš (v1.1) 24. 5. 2017

Thin Server Thick Client and Thin Server HTTP is no longer used (only) in traditional sense RPC-like concept is used over HTTP or WebSockets Server performs only those operations that cannot or should not be transferred to client Data management (retrieval, modifications, …) Data are transferred in JSON or in native format (images) Authentication and authorization Trusted computing base cannot be extended to the client Supportive tasks Providing modules, styles, … Pre-rendering fragments of HTML (performance opt.) by Martin Kruliš (v1.1) 24. 5. 2017

REST API Representational State Transfer (REST) Resources are identified by URIs /gallery – all galleries /gallery/2017 – one gallery /gallery/2017/kitten1 – one photograph Operations are performed by HTTP requests Request method determines the operation CRUD Concept Create, Read, Update, Delete Correspond to POST, GET, PUT, DELETE HTTP methods Most basic data storage operations Applications that conform to REST constraints, are typically called “RESTful”. by Martin Kruliš (v1.1) 24. 5. 2017

Single Page Applications SPA vs. Desktop Applications Similar UI concepts Event driven programming Environment and security It is much simpler to hack code of a web application than regular (compiled) desktop application Server communication A defining attribute of web applications Another source(s) of runtime errors Server side errors, communication errors, timeouts, … Asynchronous request may interfere with UI events by Martin Kruliš (v1.1) 24. 5. 2017

SPA Design Issues HTML Inadequacy Mixing Mutation and Asynchronicity HTML was not meant to be used in dynamic pages HTML is sent by server and also modified via DOM Difficult to track state of the UI DOM typically cannot hold the entire state of the application (e.g., pending AJAX transfers) The root problem of SPA applications Mixing Mutation and Asynchronicity State (and UI) needs to change Change is initiated by asynchronous actions User events, network events, timers, … by Martin Kruliš (v1.1) 24. 5. 2017

SPA Design Issues Events and User Actions Components User events are entangled with DOM structure User actions are abstract (not tied to DOM) Event may trigger an action which is not DOM-related Mechanism for global action processing Components A smart way how to divide code Components need to communicate/cooperate Components may compete for resources Local storage, workers, … by Martin Kruliš (v1.1) 24. 5. 2017

Frontend Development Issues Browser Compatibility Many browser vendors and versions Javascript (Ecmascript) evolves rapidly Script extensions/modifications exists TypeScript, JSX, … Polyfill Fills in new features (new objects, functions, APIs, …) into older version of ES Transpillers Compilers from newer ES or other language into ES5 Can be executed dynamically, or the project has to be compiled before deployment Check out https://babeljs.io/ by Martin Kruliš (v1.1) 24. 5. 2017

Separation of Concerns Separate State and Presentation State is stored in a separate object (structure) DOM is updated when state is changed Data bindings (DOM – state) (partial) DOM re-rendering DOM events may trigger state changes Bidirectional data binding Events emit actions State mutability issue Mutable state monitored by observers Immutable state (new state must be constructed) by Martin Kruliš (v1.1) 24. 5. 2017

MVC Pattern Model-View-Controller at Client Side Controller View Model Process user actions and handles business logic Controller Keeps client-side data and manages their sync. with server side (if necessary) View Model Renders data (Javascript structures, JSON, XML, …) into HTML fragments by Martin Kruliš (v1.1) 24. 5. 2017

Data for business logic MVVM Pattern Model-View-Viewmodel Simplifies data presentation especially in SPA View Model Data bindings The ViewModel is sometimes called Binder. Furthermore, the data bindings are typically handled by declarative programming rather than imperative. View Model ViewModel Presentation logic Data for presentation Data for business logic by Martin Kruliš (v1.1) 24. 5. 2017

AngularJS AngularJS Library Open source SPA framework, propelled by Google Adopts MVC and MVVM patterns Logic in controllers is coded imperatively Data bindings are declarative (embedded in HTML) $scope object – a context for most operations Variables from scope can be bound to page fragments Two-way data binding Updates are performed iteratively (digest cycle) Angular 2 recently released Complete rewrite, many changes Microsoft TypeScript – typed version of Javascript Quite nice and simple tutorial for Angular is at W3 Schools http://www.w3schools.com/angular/ by Martin Kruliš (v1.1) 24. 5. 2017

AngularJS MVVM and Data Binding Declarative, embedded in HTML Typically as new attributes and CSS classes <input type="text" ng-model="caption"> Using a special syntax directly in text content <p>User Name: {{ fistName }} {{ lastName }}</p> The Viewmodel is the $scope context The bindings are bidirectional Automatically propagated in both ways $scope.caption <-> input.value (from above) $scope.firstName -> rendered to the text placeholder The controller works only with the $scope object by Martin Kruliš (v1.1) 24. 5. 2017

AngularJS Directives Controllers Many embedded directives for the visual control ng-bind, ng-model ng-if, ng-switch, ng-repeat, ng-show, ng-hide Defining custom directives Controllers Perform $scope initialization Declare functions (actions), which can be triggered by event-handlers (e.g., ng-click) Example 1 by Martin Kruliš (v1.1) 24. 5. 2017

Angular 2 and 4 Angular 2 Angular 4 (version 3 skipped) Same idea (MVVC and data bindings) Rewritten in TypeScript ES6 + Types + Annotations Does not use one scope Decomposition in components instead of using templates and controllers Dependency injection Angular 4 (version 3 skipped) Improvement of Anular 2 by Martin Kruliš (v1.1) 24. 5. 2017

MVC Scalability MVC and Feature Scalability The model-view bindings may become troublesome in complex scenarios Model View Model View Action Controller Model View Model View Model View by Martin Kruliš (v1.1) 24. 5. 2017

Flux Flux Framework Dispatcher process one action at a time Action is propagated to all stores before the views are changed (prevents cycling) If a view needs to update something, it generates new action Action Dispatcher Store View Action by Martin Kruliš (v1.1) 24. 5. 2017

Redux Redux Framework Informal successor of Flux All data are in one store (one object) No dispatcher, actions are process by reductor(s) Reductor is a pure function (state, action) => state State should be never modified Action Reductor(s) Store View Action Example 2 by Martin Kruliš (v1.1) 24. 5. 2017

React React.js UI Library Open source, propelled by Facebook and Instagram Often used with Redux Key features Separation of concepts (individual UI components) One-way data flow Child component cannot modify its parent Actions are propagated up through callback Virtual DOM Aggregate changes, so fewer modifications to real DOM are required when a component re-renders itself JSX – Javascript language extension Example 3 is slightly larger and will be posted to GitHub soon. Example 3 by Martin Kruliš (v1.1) 24. 5. 2017

React Native Mobile Applications with Web Technologies Javascript and React applied for mobile apps Great code reusability Compiled to be a native mobile app Using special markup instead of HTML Can be combined with platform-specific code render() { return ( <ScrollView> <Image source={{uri:'http://...'}} /> <Text>Some text</Text> </ScrollView> ); } by Martin Kruliš (v1.1) 24. 5. 2017

Follow-up Education Tutorials Lectures at MFF Check out Angular, React, Redux tutorials Check out Laravel or Symfony framework Lectures at MFF NSWI168 Practical seminar of modern web and mobile applications NSWI145 – Web services NDBI038 - Searching the web NDBI034 - Multimedia retrieval NPGR012 - Interactive 3D web graphics by Martin Kruliš (v1.1) 24. 5. 2017

Discussion by Martin Kruliš (v1.1) 24. 5. 2017