Building a real time html5 app for mobile devices
-
Upload
tony-abou-assaleh -
Category
Technology
-
view
2.633 -
download
2
description
Transcript of Building a real time html5 app for mobile devices
Building a Real-Time HTML5 App for Mobile Devices
Tony Abou-AssalehCo-founder & CTO, TitanFile
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!