Are you tired of getting verbally beat up about developing web and HTML5 apps? It's OK you can fight back. Despite what you read in the media HTML5 web applications can be extremely powerful and engaging. The key to building the next generation web apps is shedding classic development techniques and architectures in favor of new HTML5 based features. Advances with AJAX, CSS and a wealth of new APIs available to web developers mean the web sites of old need to be replaced with modern web apps. In this talk I will review how developers can easily change their applications to be more functional in a mobile, touch first world and provide an engaging user experience. We will examine various HTML5 APIs to see how they provide key advantages to the modern web developer. I will also demonstrate how various techniques can vastly improve app performance, such as localStorage and Single Page Web Apps. Finally I will examine several common mistakes made by developers in the world of touch, mobile first and how they can easily be overcome. Leveraging these techniques should put you on an even playing field or ahead of the native app competition.

1. It's OK, You Can
Create Kick-Ass Web
Apps
CHRIS LOVE
@CHRISLOVE
PROFESSIONALASPNET.COM

2. Slide Deck & Source Code
Slide Deck – http://slideshare.com/docluv
Source Code – http://GitHub.com/docluv

3. What’s Wrong With The Web?
Clinging to Yesterday’s
Architecture

4. Not Embracing Customer Trends

5. Not Embracing Customer Trends

6. 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

7. 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.

8. Not Developing Mobile/Touch First
http://bit.ly/aD1dr3

9. Also Consider the Cloud
Application Clients are Almost Always Connected
The Cloud Enables Optimized Data Interaction
Enterprise Can Virtualize Authentication

10. Not Architecting For Use Context
http://bit.ly/aD1dr3

11. 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

12. 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

13. HTML5
Forms
Geolocation
WebStorage
Offline

14. HTML5 Form Improvements
Input Types AutoFocus
◦Number, PlaceHolder
Phone, Email,
◦Date, Color, … AutoCorrect
Validation More
Required

15. Geo-Location
Retrieve User’s Location
getCurrentPosition
watchPosition
clearWatch
PositionOptions
◦ enableHighAccuracy
◦ Timeout
◦ maximumAge

16. Web Storage
Allows You to Keep Data Locally in a Hash
Table
◦ localStorage
◦ sessionStorage
Approximately 5MB
Replace Cookies
Great For Caching

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

18. CSS3
Shapes
Transforms
Transitions
Animations
Gradients

19. JavaScript Engines Vastly Improved

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

21. AJAX/JavaScript
Single Page Application
◦Brings HTML5, CSS3 & AJAX Together
◦Provides Rich User Experience
◦Improves Performance
◦Relies on Application API (REST, Web API)

22. Single Page Apps
Home
Categories Post
Events Bio Contact

23. Single Page Apps
Category
Home

24. 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

25. Offline
First Time No Manifest Update Manifest Updated
Checking Checking Bio
Download No Update Download
Progress Progress
Cached Cached

26. Offline
CACHE 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