It's ok, you can create kick ass web
-
Upload
chris-love -
Category
Technology
-
view
4.031 -
download
1
description
Transcript of It's ok, you can create kick ass web
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