building a real time html5 app for mobile devices
DESCRIPTION
The HTML5 standard turned out to be not so standard when it comes to cross-platform implementations - from handling touch events, to CSS transitions, to WebSockets, to performance. This presentation will share some of the lessons we learned the hard way developing the TitanFile mobile app using HTML5/JavaScript/CSS3.TRANSCRIPT
![Page 1: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/1.jpg)
Building a Real-Time HTML5 App for Mobile Devices
Tony Abou-AssalehCo-founder & CTO, TitanFile
Twitter: @tony_aa
Mobile P2P – November 14, 2012
![Page 2: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/2.jpg)
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/…
![Page 3: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/3.jpg)
Agenda
• Why HTML5?• Challenges• Design Tips• “Real-time” Tips• Mobile HTML5 Myths
![Page 4: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/4.jpg)
Why HTML5?
![Page 5: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/5.jpg)
Why HTML5?
• Cross-platform• W3C standard• Open source• Lots of libraries• Transferable skills• Cordova = native• It’s easy! Just HTML + JS + CSS + Backend
![Page 6: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/6.jpg)
Or so we thought …
![Page 7: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/7.jpg)
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
![Page 8: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/8.jpg)
So why HTML5?
![Page 9: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/9.jpg)
So why HTML5?
• Gets you to give a talk at mobile P2P• Still easier than native• Transferable skills
![Page 10: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/10.jpg)
Challenges
![Page 11: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/11.jpg)
![Page 12: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/12.jpg)
![Page 13: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/13.jpg)
Website Web App
• Single Page App• Background Data Sync• Asynchronous Processing• Responsiveness• Design
![Page 14: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/14.jpg)
Web App Mobile App
• Usage Patterns• Touch Events• Drag-and-drop• Scrolling• Pixel Ratio
![Page 15: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/15.jpg)
Web iPad Android PlayBook BB10
![Page 16: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/16.jpg)
Design Tips
![Page 17: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/17.jpg)
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
![Page 18: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/18.jpg)
“Real-Time” Tips
![Page 19: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/19.jpg)
“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!
![Page 20: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/20.jpg)
“Real-Time” Tips - Data
• Server push-events• Asynchronous Processing• Incremental Loading
![Page 21: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/21.jpg)
“Real-Time” Tips – Front-end
• Only render visible DOM• No anchor tags• No HTML5 drag-and-drop• Use native scrolling
![Page 22: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/22.jpg)
Mobile HTML5 Myths
![Page 23: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/23.jpg)
![Page 24: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/24.jpg)
Myth 1: HTML5 is Cross-Platform
![Page 25: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/25.jpg)
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
![Page 26: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/26.jpg)
Myth 3: Not as effective as Native
![Page 27: Building a real time html5 app for mobile devices](https://reader035.vdocuments.net/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/27.jpg)
Summary
• Developing HTML5 mobile apps is …– Easier than native– Cheaper than native– Tricky– Fun!