It's OK, You Can Create Kick-Ass Web AppsCHRIS LOVE

@CHRISLOVE

PROFESSIONALASPNET.COM

Slide Deck & Source Code

Slide Deck – http://slideshare.com/docluv

Source Code – http://GitHub.com/docluv

What’s Wrong With The Web?

Clinging to Yesterday’s Architecture

Not Embracing Customer Trends

Not Embracing Customer Trends

Not Developing Mobile/Touch First

“designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.”

Luke Wroblewski

Not Developing Mobile/Touch First

Legacy UI will not work anymore. Users now expect to touch their data, not click an application. Applications should encourage direct, personal interaction with data to end users in a more intimate way than previously imagined. The abstraction needed in the past that was the personal computer can now be considered almost transparent and no longer an awkward barrier between a consumer and their information.

Not Developing Mobile/Touch First

http://bit.ly/aD1dr3

Also Consider the CloudApplication Clients are Almost Always ConnectedThe Cloud Enables Optimized Data InteractionEnterprise Can Virtualize Authentication

Not Architecting For Use Context

http://bit.ly/aD1dr3

Not Leveraging Modern Web Technologies

“Facebook uses an XML-based abstract component framework to encapsulate the details of presentation layer rendering. They shared an example of a button, which they suggested would be written as this in their markup”

http://bit.ly/UGREM7

“Our biggest shock: much of the application was still raw HTML pages.”

http://bit.ly/XaKht5

The World Is An API – Use JSON Build Data APIs Retrieve JSON – its more efficient Leverage Client-Side Templates to Build Markup as needed Leverage Client-Side Storage

HTML5

Forms Geolocation WebStorage Offline

HTML5 Form Improvements Input Types◦Number, Phone, Email,

◦Date, Color, … Validation Required

AutoFocus PlaceHolder AutoCorrect More

Geo-Location Retrieve User’s Location getCurrentPosition watchPosition clearWatch PositionOptions

◦ enableHighAccuracy◦ Timeout◦ maximumAge

Web Storage Allows You to Keep Data Locally in a Hash Table◦ localStorage◦ sessionStorage

Approximately 5MB Replace Cookies Great For Caching

Web Storage - IndexDB A Client-Side Document Database Similar to MongoDB, RavenDB, CouchDB, etc. Typically 50 MB Client-Side Storage Good for Offline Applications

CSS3 Shapes Transforms Transitions Animations Gradients

JavaScript Engines Vastly Improved

New APIs◦ File Access◦ Page Visibility◦ Web Sockets◦ Full Screen◦ Web Workers◦ Many Others

AJAX/JavaScript Single Page Application

◦Brings HTML5, CSS3 & AJAX Together◦Provides Rich User Experience◦Improves Performance◦Relies on Application API (REST, Web API)

Single Page Apps

Home

Categories Post

Events ContactBio

Single Page Apps

HomeCategory

Offline Allows The App To Run When Disconnected

◦ Application Manifest◦ Provides Event Model

Do Not Confuse With Browser Cache Only Updates Files When Manifest Changes

Offline

Checking

Download

Checking

Progress

Bio

Cached

No Update Download

Progress

Cached

First Time No Manifest Update Manifest Updated

OfflineCACHE MANIFEST# version 0.0.0.1# urls go Here

Js/myapp.js

NETWORK:http:example.com/api

FALLBACK:http:example.com/img /img/offline.png