It's ok, you can create kick ass web

5,762 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,762
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

It's ok, you can create kick ass web

  1. 1. Its OK, You CanCreate Kick-Ass WebAppsCHRIS LOVE@CHRISLOVEPROFESSIONALASPNET.COM
  2. 2. Slide Deck & Source CodeSlide Deck – http://slideshare.com/docluvSource Code – http://GitHub.com/docluv
  3. 3. What’s Wrong With The Web?Clinging to Yesterday’sArchitecture
  4. 4. Not Embracing Customer Trends
  5. 5. Not Embracing Customer Trends
  6. 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. 7. Not Developing Mobile/Touch FirstLegacy UI will not work anymore. Users now expect to touch theirdata, not click an application. Applications should encourage direct,personal interaction with data to end users in a more intimate waythan previously imagined. The abstraction needed in the past thatwas the personal computer can now be considered almosttransparent and no longer an awkward barrier between a consumerand their information.
  8. 8. Not Developing Mobile/Touch First http://bit.ly/aD1dr3
  9. 9. Also Consider the CloudApplication Clients are Almost Always ConnectedThe Cloud Enables Optimized Data InteractionEnterprise Can Virtualize Authentication
  10. 10. Not Architecting For Use Context http://bit.ly/aD1dr3
  11. 11. Not Leveraging Modern WebTechnologies“Facebook uses an XML-based abstract component framework to encapsulate the details ofpresentation layer rendering. They shared an example of a button, which they suggested wouldbe 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. 12. The World Is An API – Use JSONBuild Data APIsRetrieve JSON – its more efficientLeverage Client-Side Templates to Build Markup as neededLeverage Client-Side Storage
  13. 13. HTML5FormsGeolocationWebStorageOffline
  14. 14. HTML5 Form ImprovementsInput Types AutoFocus ◦Number, PlaceHolder Phone, Email, ◦Date, Color, … AutoCorrectValidation MoreRequired
  15. 15. Geo-LocationRetrieve User’s LocationgetCurrentPositionwatchPositionclearWatchPositionOptions◦ enableHighAccuracy◦ Timeout◦ maximumAge
  16. 16. Web StorageAllows You to Keep Data Locally in a HashTable◦ localStorage◦ sessionStorageApproximately 5MBReplace CookiesGreat For Caching
  17. 17. Web Storage - IndexDBA Client-Side Document DatabaseSimilar to MongoDB, RavenDB, CouchDB, etc.Typically 50 MB Client-Side StorageGood for Offline Applications
  18. 18. CSS3ShapesTransformsTransitionsAnimationsGradients
  19. 19. JavaScript Engines Vastly Improved
  20. 20. New APIs◦ File Access◦ Page Visibility◦ Web Sockets◦ Full Screen◦ Web Workers◦ Many Others
  21. 21. AJAX/JavaScriptSingle Page Application◦Brings HTML5, CSS3 & AJAX Together◦Provides Rich User Experience◦Improves Performance◦Relies on Application API (REST, Web API)
  22. 22. Single Page Apps Home Categories Post Events Bio Contact
  23. 23. Single Page Apps Category Home
  24. 24. OfflineAllows The App To Run When Disconnected◦ Application Manifest◦ Provides Event ModelDo Not Confuse With Browser CacheOnly Updates Files When Manifest Changes
  25. 25. Offline First Time No Manifest Update Manifest Updated Checking Checking Bio Download No Update Download Progress Progress Cached Cached
  26. 26. OfflineCACHE MANIFEST# version 0.0.0.1# urls go HereJs/myapp.jsNETWORK:http:example.com/apiFALLBACK:http:example.com/img /img/offline.png

×