Building a real time html5 app for mobile devices
Upcoming SlideShare
Loading in...5
×
 

Building a real time html5 app for mobile devices

on

  • 3,134 views

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 ...

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.

Statistics

Views

Total Views
3,134
Views on SlideShare
3,132
Embed Views
2

Actions

Likes
2
Downloads
5
Comments
0

2 Embeds 2

http://webcache.googleusercontent.com 1
http://172.18.10.146 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Read .. AND WRITE Java Byte CodeCompile C to Assembly, by handDream in regular expressions
  • Mobilehtml5.org

Building a real time html5 app for mobile devices Building a real time html5 app for mobile devices Presentation Transcript

  • Building a Real-Time HTML5 App for Mobile Devices Tony Abou-Assaleh Co-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!