Building a real time html5 app for mobile devices
-
Upload
tony-abou-assaleh -
Category
Technology
-
view
2.632 -
download
2
description
Transcript of Building a real time html5 app for mobile devices
![Page 1: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/4.jpg)
Why HTML5?
![Page 5: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/8.jpg)
So why HTML5?
![Page 9: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/10.jpg)
Challenges
![Page 11: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/11.jpg)
![Page 12: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/12.jpg)
![Page 13: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/16.jpg)
Design Tips
![Page 17: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/18.jpg)
“Real-Time” Tips
![Page 19: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/22.jpg)
Mobile HTML5 Myths
![Page 23: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/23.jpg)
![Page 24: Building a real time html5 app for mobile devices](https://reader035.fdocuments.us/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.fdocuments.us/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.fdocuments.us/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.fdocuments.us/reader035/viewer/2022062513/555e8224d8b42a41328b52b6/html5/thumbnails/27.jpg)
Summary
• Developing HTML5 mobile apps is …– Easier than native– Cheaper than native– Tricky– Fun!