Embed Size (px)
Citation preview
11 | CONFIDENTIAL
117 N. Market St. Suite 300 • Wilmington, DE 19801 • 302.778.1300 • trellist.com • [email protected] • © 2011 Trellist, Inc.
Date June 21, 2014
PRESENTING THE SPA WITH RESPONSIVE
DESIGN, HTML5, JS/JQUERY, CSS3
Philly Code Camp
Presented By: Jennifer Kenderdine
@j_kdine
22 | CONFIDENTIAL
Agenda
I. What is an SPA?
II. Why build an SPA?
III. How do I start?
IV. Demo
V. Questions
33 | CONFIDENTIAL
What is an SPA?Quick Facts
• SPA stands for Single Page Application (AKA SPI – Single Page Interface)
• Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.
• A shift to the UI and application logic from web servers to the client.
– Traditional lifecycle
– SPA lifecycle
Initial Request
HTML
Form Post
HTML
Page Refresh
Initial Request
HTML
AJAX
JSON
44 | CONFIDENTIAL
• If developed properly,
device agnostic
• Better User Experience
• Less post back to the
server, reducing round
tripping and optimizing
the performance
Why Build an SPA?
55 | CONFIDENTIAL
• Visual Studio Development
– Visual Studio 2013 has a number of templates available in the
Visual Studio Gallery
• HotTowel
• Durandal
• Northwind
– ASP.Net SPA Overview
• Training
– Pluralsight
• Single Page Apps Jump Start, John Papa
• Single Page Apps with HTML5, Web API, Knockout and JQuery, John
Papa (more advanced)
How to get StartedTemplates and training
66 | CONFIDENTIAL
• DEMO – Visual Studio Templates
• Basic SPA Template
• HotTowel
• Durandal
• Northwinds
Create the SPA
– Creating from Scratch• Basic Framework
– Empty Web App (Web Forms,MVC, Web API)
– Choose not to publish to Azure
– Add packages:» EntityFramework / EntityFramework SQL Compact
» Optimization
» Modernizr (helps with browser compatibility)
» Durandal Starter Kit (great for SPA framework)
• Other Plugins / Extensions– JQuery.fullcalendar
– Moment.js
77 | CONFIDENTIAL
117 N. Market St. Suite 300 • Wilmington, DE 19801 • Phone: 302.778.1300 • trellist.com • [email protected] • © 2011 Trellist, Inc.
