Building a Real-Time HTML5 App for Mobile Devices

Tony Abou-AssalehCo-founder & CTO, TitanFile

taa@titanfile.com

Twitter: @tony_aa

Mobile P2P – November 14, 2012

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/…

Agenda

• Why HTML5?• Challenges• Design Tips• “Real-time” Tips• Mobile HTML5 Myths

Why HTML5?

Why HTML5?

• Cross-platform• W3C standard• Open source• Lots of libraries• Transferable skills• Cordova = native• It’s easy! Just HTML + JS + CSS + Backend

Or so we thought …

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

So why HTML5?

So why HTML5?

• Gets you to give a talk at mobile P2P• Still easier than native• Transferable skills

Challenges

Website Web App

• Single Page App• Background Data Sync• Asynchronous Processing• Responsiveness• Design

Web App Mobile App

• Usage Patterns• Touch Events• Drag-and-drop• Scrolling• Pixel Ratio

Web iPad Android PlayBook BB10

Design Tips

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

“Real-Time” Tips

“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!

“Real-Time” Tips - Data

• Server push-events• Asynchronous Processing• Incremental Loading

“Real-Time” Tips – Front-end

• Only render visible DOM• No anchor tags• No HTML5 drag-and-drop• Use native scrolling

Mobile HTML5 Myths

Myth 1: HTML5 is Cross-Platform

Myth 2: HTML5 is Slow

• Not if …– Load data incrementally– Only render what’s visible– User global event listeners– User WebKit CSS transforms

• Hardware Acceleration

Myth 3: Not as effective as Native

Summary

• Developing HTML5 mobile apps is …– Easier than native– Cheaper than native– Tricky– Fun!