I was invited to give a talk at Jfokus, a Swedish conference for Java developers. Since I don't do any Java development myself (I burned out on it as a kid :), I proposed a topic that I thought would be relevant to Java developers doing frontend web development: client-side storage using HTML5 technologies. I find myself using client-side storage (localStorage, specifically) in almost everything I do — browser extensions, mashups, mobile apps, websites — and I realized that it's not something that a lot of people talk about.
So I prepared a talk about the different HTML5 technologies for client-side storage (localStorage, IndexedDB, and the File API), and then focused in on localStorage with real-world examples of ways to use it to improve your apps. I'd never actually used IndexedDB or the File API before this talk, so I spent a day researching those and had fun learning the APIs. Once they're more ready for primetime, I will probably migrate some of my usage over to them. I also took the opportunity to research the performance concerns around localStorage, and now feel better prepared to measure the performance of my lscache library. It was a fun talk to prepare and give, and hopefully it gets a few developers experimenting more with client-side storage and spreading the good word.
You can go through the slides online — they're interactive, so you can actually tinker with the code and run it inside the slides. You can also click "show notes" to see roughly what I said. There was also a video recorded, and I'll link to that once it's available. If you want to learn even more, you can look through the links that I collected while putting together the slides.
cookies:
IndexedDB:
Specs & support:
Articles/examples:
- HTML5 Rocks: Chrome Quota Management API
- HTML5 Rocks: Storage Talk: IndexedDB
- Comparing IndexedDB and Web Database
- Migrating from WebSQL to IndexedDB
- Performance Comparison: WebSQL vs. IndexedDB
Libraries:
File API:
Specs & Support:
Articles/examples:
- HTML5 Rocks: XHR Tricks: Saving Images
- HTML5 Rocks: Exploring the File System API
- MDN: Using files from web apps
- jsFiddle: Loading & Storing images
- jsFiddle: Reading & Writing images
Libraries:
localStorage:
Specs & Support:
Articles/examples:
- Dive into HTML5: localStorage
- Opera: Intro to WebStorage
- Smashing Magazine: localStorage & how to use it
- 34 Ways: Wrapping things nicely with localStorage
- CSS Tricks: localStorage examples
- Adding localStorage to jQueryMobile
- Store images in localStorage for faster page loads
- ESRI localStorage Map Tiles example
- Considerations for caching resources in localStorage
- jQuery image cache plugin
- Case Study: Bing & Google
Performance Tests:
Tools:
Libraries:
- lscache, jQuery lscache
- Lawnchair
- lccache
- Savify
- autoStorage
- jQuery offline
- store.js
- YQL local cache
- GWT Mobile: Storage API
- HTML5 Polyfills
- inject
- LESS: Browser.js
And finally, a link on all of them:
Client-side Storage Comparison
No comments:
Post a Comment