SPA BARTOSZ LENAR THE PLAN what is spa

SPA BARTOSZ LENAR

THE PLAN what is spa? how it works? how to start building one?

RELOADING

TRADITIONAL BROWSING GET example. org/users HTML GET example. org/users/bartek HTML

SPA AGAINST RELOADING GET example. org/#/users HTML GET example. org/#/users/bartek JSON

SPA PHILOSOPHY views = htmls logic = javascripts media = images & csses gui api = browser

PACKAGE LOADING first call app package

PACKAGE WORKING GET example. org/users/bartek 200 OK … { User. Name: "Bartek", … } POST example. org/users/bartek 403 FORBIDDEN

WHY web app goes restfull control over the app much more stuff to take care about data amount reduction first-loading time easy conversion to offline heavy client-side logic and mobile!

PACKAGE

SPA PACKAGE root app model

DOES IT SOUND TOO 2005?

NAVIGATION

H#SH ROUTING <a href="#about">About</a> <a name="about"/> <a name="contact"/>

HISTORY API push. State window. onpopstate

ARCHITECTURE

MVVM HTML MVVMframework binding & notifications javascript object backen d system REST communicatio n

CLIENT SIDE MVVM (KNOCKOUT STYLE) user: { id: ko. observable(666), name: ko. observable("bartek") } <div id="user. Form"> <span data-bind="text: id"> </span> <input data-bind="value: name"/> </div>

SPA PACKAGE PARTS views and viewmodels repository dependency injection USER MENU LOGIN

MODEL FLOW

BACKEND [dbo]. [users] ( [id] [uniqueidentifier] NOT NULL, [name] [nvarchar](256) NOT NULL, [country. Id] [int] NULL ) public { public } class User Guid Id { get; set; } string Name { get; set; } int Country. Id { get; set; } Country { get; set; }

BACKEND SCHEMA [dbo]. [users] User. cs DATA REPOSITORIES SERVICES

FRONTEND public { public } class User. Model Guid? Id { get; set; } string Name { get; set; } int? Country. Id { get; set; } var User. View. Model = (function () { function User. View. Model() { this. Id = ko. observable(); this. Name = ko. observable(); this. Country. Id = ko. observable(); } return User. View. Model; })();

FRONTEND SCHEMA [dbo]. [users] DATA REPOSITORIES User. cs SERVICES User. Model. cs CONTROLER User. View. Model. js VIEWMODEL (client) User. html VIEW

VIEW <div id="user. Form"> <span data-bind="text: id"> </span> <input data-bind="value: name"/> </div> how to do a selectable item?

PAGE MODELS everything we need to handle a page logic and view server-side contains: models dictionaries & used values all additional data & user context client-side contains: events emition all actions and view logic

PAGE MODELS SCHEMA [dbo]. [users] User. cs User. Model. cs User. View. Model. js User. html User. Page. Model. cs User. Page. View. Model. js

MODEL FLOW CHAPTER 3 : PAGE MODELS public { public } class User. Page. Model User { get; set; } Country[] Countries { get; set; } bool With. Edit. Rights { get; set; } var User. Page. View. Model = (function () { function User. Page. View. Model() { this. User = new User. View. Model(); this. Countries = ko. observable. Array(); this. Save. Changes = function() {. . . } } return User. Page. View. Model; })();

SELECTABLE ITEM <div id="user. Form"> <span data-bind="text: id"> </span> <input data-bind="value: name"/> <select data-bind="options: $parent. Countries, options. Text: 'Name', options. Value: 'Id', value: Country. Id" ></select> </div>

MAPPING OBJECTS User. Model. cs making pure json ready to bind (observables) validation creates additional methods & properties reversing the whole process! SERIALIZING: json MAPPING: observables & additional stuff User. View. Model. js

FLOW GET api/users/666 example. org/users/666 { id: 666, name: "bartek" } insert + map data render html + bind User. html User. js

PRELOADING

PRELOADING bundle javascripts into modules-packs check which are available to the logged in user load scripts HTML 5 async require. js separate areas login! & structures

DICTIONARIES Countries = [ { Id: '0', { Id: '1', { Id: '2', { Id: '3', ] Name: 'Poland'}, 'England'}, 'USA'}, 'New Zealand'},

SELECTABLE ITEM <div id="user. Form"> <span data-bind="text: id"> </span> <input data-bind="value: name"/> <select data-bind="options: Values. Countries, options. Text: 'Name', options. Value: 'Id', value: Country. Id" ></select> </div>

LOCALIZATION Phrases = {} Phrases['Poland'] = 'Polska'; Phrases['England'] = 'Anglia'; Phrases['USA'] = 'USA'; Phrases['New Zealand'] = 'Nowa Zelandia';

LOCALIZATION HELPER <td> <div class="well-sm"> <span data-bind="text: Phrases. Helper. Get['Countries', Country. Id] "></span> </div> </td>

API WRAPPER spinner common settings for all calls cache content-type common reactions for all responses 400, 401, 403, etc. validation handle CSRF validation api. Put('users', user. Model). success(function() { alert(Phrases['Success']); }). fail(function() { alert(Phrases['Error']); });

OTHER STUFF interaction between sites ioc container unit tests no browser required model validation online to offline disable lazy loading inject different api wrapper?

flaticon. com freepik. com BARTOSZ LENAR SPA