1 Spa m1 Spa and Code Camper Overview Slides

7/27/2019 1 Spa m1 Spa and Code Camper Overview Slides

1/23

Single Page Apps with HTML5,ASP.NET Web API, Knockout and jQuery

John Papa

Twitter: @john_papa
http://twitter.com/john_papahttp://twitter.com/john_papa


2/23

Contact

@john_papa www.johnpapa.net


3/23

Related Pluralsight Courses

Building HTML5 and JavaScript Apps with MVVM and Knockout John Papa

Introduction to the ASP.NET Web API

Jon Flanders

Entity Framework 4.1 Code First

Julie Lerman

A Better CSS: LESS and SASS

Shawn Wildermuth

Using HTML5 and CSS3

Michael Palermo HTML5 Fundamentals

Craig Shoemaker

jQuery Fundamentals

Dan Wahlin


4/23

Contributions

IDEABLADE@wardbell

TELLURIAN INTERACTIVEwww.tellurian.se

www.ideablade.com

@hfjallemark


5/23

Special Thanks To


6/23

The Code Camper Application

John Papa


7/23

Agenda

Single Page Apps Introducing the Code Camper App

Code Camper Technologies

Solution Structure

Key Resources


8/23

Agenda



Solution Structure

Key Resources


9/23

User Experience

Mobility Available

Reliable Responsive


10/23

Why a Single Page App (SPA) ?

As rich and responsive as a desktop app but

built with HTML5, CSS and JavaScript


11/23

Whats a SPA?

Wikipedia

http://jpapa.me/wikispa

Web app that fits on a single web page

providing a fluid UX by loading all necessary

code with a single page load


12/23

You May be a SPA if

progressively downloads features as required

fully (or mostly) loaded in the initial page load

persisting important state on the client

maintain navigation, history, deep linking

fits on a single web page


13/23

SPA Similarities to RIA Plug-In Apps

Async services

Client-side application & business logic

Long-lived client-side state

2-way data binding (MVVM)

Tombstoning / dropped connections

Similar problems and solutions


14/23

DEMO

Code Camper


15/23

Agenda



Solution Structure

Key Resources


16/23

SPA Architecture - High Level

ViewsHTML/CSS

ApplicationJavaScript

Data AccessJavaScript

Web UI

HTML/CSS/JS

Data ServicesJSON/XML

Server Client

NavigationJavaScript


17/23

Server Technologies

Database

Unit of Work Pattern

Entity Framework

Repository Pattern

Web APIP

OCOModels

ASP.NET Web API

EF Code First

Web Optimization

JSON.NET

Ninject IoC

SQL CE

NuGet

JSON and AJAX


18/23

HTML5

HTML5 Boilerplate

Modernizr

CSS

LESS

Media Queries

Responsive Design

HTML and CSS


19/23

Revealing ModulePattern

AMD

PrototypesMVVM

JavaScript Patterns


20/23

Key Code Camper Libraries

require.js

Sammy.js

amplify.js

knockout.js

jQuery

underscore.js

toastr.js

DOM / AJAX

Data Binding / MVVM

Data Push/Pull,

Client Storage,

Messaging

Nav / History

Dependency Resolution

JavaScript Helpers

UI Alerts

qunitTesting

moment.js

Commanding

Change Tracking

jquery.mockjson

jquery.activity

Templating

Validation


21/23

Agenda



Solution Structure

Key Resources


22/23

Summary

Single Page App (SPA)

Mobility Available

Reliable Responsive


23/23

Summary

Single Page App (SPA)

Mobility Available

Reliable Responsive

Documents

1 Spa m1 Spa and Code Camper Overview Slides