Downloaded 16 times
Uploaded byTony Abou-Assaleh
Building a real time html5 app for mobile devices
The document discusses the development of real-time HTML5 mobile applications, highlighting the advantages and challenges of using HTML5 for this purpose. It covers design tips, real-time processing techniques, and common myths associated with HTML5. Ultimately, it argues that while building HTML5 apps can be easier and cheaper than native development, there are complexities that developers must navigate.
Building a real time html5 app for mobile devices
- 1. Building a Real-TimeHTML5 App for Mobile Devices Tony Abou-Assaleh Co-founder & CTO, TitanFile taa@titanfile.com Twitter: @tony_aa Mobile P2P – November 14, 2012
- 2. About me … •PhD in … natural language processing – Not mobile • Ex-Googler .. in ads – Not mobile • Hardcore backend programmer • Past year - TitanFile: RT SPA – HTML5/JS/CSS/Async/Django/…
- 3. Agenda • Why HTML5? • Challenges • Design Tips • “Real-time” Tips • Mobile HTML5 Myths
- 4.
- 5. Why HTML5? • Cross-platform • W3C standard • Open source • Lots of libraries • Transferable skills • Cordova = native • It’s easy! Just HTML + JS + CSS + Backend
- 6. Or so wethought …
- 7. Why not HTML5? • Not cross-platform • Standard-in-progress • Open Source – yeah right! • Lots of libraries that don’t work • Cordova Native • It’s NOT just HTML + JS + CSS + Backend
- 8.
- 9. So why HTML5? •Gets you to give a talk at mobile P2P • Still easier than native • Transferable skills
- 10.
- 13. Website Web App • Single Page App • Background Data Sync • Asynchronous Processing • Responsiveness • Design
- 14. Web App Mobile App • Usage Patterns • Touch Events • Drag-and-drop • Scrolling • Pixel Ratio
- 15. Web iPad AndroidPlayBook BB10
- 16.
- 17. Design Tips • Start with design, not prototype • Images, not button • Avoid text links • No modal dialogues • Use CSS media queries • Provide hi-res images as needed
- 18.
- 19. “Real-Time” Tips -Tools • Use Font-end Framework – Backbone/Marionette/Relational • Use Back-end Framework – Django/Tornado/Celery • Use WebSocket Wrapper – Socket.io or SockJS • Use a CSS Framework – Bootstrap • Write your own!
- 20. “Real-Time” Tips -Data • Server push-events • Asynchronous Processing • Incremental Loading
- 21. “Real-Time” Tips –Front-end • Only render visible DOM • No anchor tags • No HTML5 drag-and-drop • Use native scrolling
- 22.
- 24. Myth 1: HTML5is Cross-Platform
- 25. Myth 2: HTML5is Slow • Not if … – Load data incrementally – Only render what’s visible – User global event listeners – User WebKit CSS transforms • Hardware Acceleration
- 26. Myth 3: Notas effective as Native
- 27. Summary • Developing HTML5mobile apps is … – Easier than native – Cheaper than native – Tricky – Fun!