Developing for Multiple Platforms

1,928 views

Published on

This presentation will investigate how to take advantage of Web technologies (including HTML5, CSS3, and JavaScript) to build a cross-platform mobile app. The presentation will cover important steps towards optimizing a Web app for a mobile device as well as using PhoneGap to expose core device features, like the accelerometer or the camera, to an app.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,928
On SlideShare
0
From Embeds
0
Number of Embeds
254
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Introduction – about me.Developer at FloatLots of experience in web developmentDegree from BradleyFollow: @mediaboundsLove coding!My beautiful fiancé
  • The mobile landscape as it currently stands.Review market share of different OSes.Big players—you can assume your user is on one of these devices.
  • “Native” language of each OS – “native” meaning the language that the SDK is written inLow percentage of reusable code – almost nil. (although you can use the same logic)Expensive to build for multiple platforms – not a great option to just build for one
  • Introduce PhoneGapBuild your apps in HTML/CSS/JavaScript and wrap it in PhoneGap/PhoneGap exposes core features of the device as well as a plugin structure to communicate with the native code.
  • Supports 6 different platformsBada is still under development—although I believe that it is available for use.Windows Mobile 7 is under development.
  • Common workflow for Web developers.Take comfort in knowing that all 6 of the platforms I just mentioned run on some version of WebKit.Windows Mobile 7 runs at some Frankenstein combination of IE7/IE8
  • Less code means less bugs.
  • Less time means less money
  • Every platform running on same code base.
  • Web will always be relevantNew devices will have a browserBlackBerry is notorious for burning their developers with differences in the SDK…now for PlayBook you have to develop in Flash/Adobe AIR.
  • Apple has set the bar on this one – when I touch the screen, something should happen immediately.
  • WebKit providestouchstart/touchend events.
  • It has less memory and less processing power
  • This is not a “rule”; simply some guidance…some things to look out for.
  • Especially true forPhoneGap apps—you’ll have to weigh the pros and cons for a mobile website.In addition to reducing the cost of a reflow, we need to reduce the number of times a reflow occurs.
  • CSS transitions/animations work directly on the paint layer
  • PhoneGap exposes some common features of the device to your mobile web app—gives you a leg up on a simple web page.
  • Developing for Multiple Platforms

    1. 1. Developing for Multiple Platforms<br />Using Web standards to efficiently target multiple devices<br />
    2. 2. Dan Pfeiffer<br />Developer at Float Mobile Learning<br />@mediabounds<br />
    3. 3. The Mobile Landscape<br />StatCounter; Mar-May 2011<br />comScore; Mar 2011<br />
    4. 4. The Mobile Landscape<br />
    5. 5. PhoneGap<br />
    6. 6. PhoneGap – Supported Platforms<br />Android<br />Bada*<br />BlackBerry WebWorks (5.0 & 6.0)<br />iOS<br />Symbian<br />webOS<br />
    7. 7. Write once—debug everywhere.<br />
    8. 8. High percentage of code reuse<br />
    9. 9. High percentage of code reuse<br />Faster development time<br />
    10. 10. High percentage of code reuse<br />Faster development time<br />Cheaper development<br />
    11. 11. High percentage of code reuse<br />Faster development time<br />Cheaper development<br />Easier to update<br />
    12. 12. Forward compatibility<br />
    13. 13. Limited by device’s browser engine<br />
    14. 14. A Basic App<br />Demo<br />
    15. 15. Performance<br />
    16. 16. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />
    17. 17. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />There is a 400ms delay between user interaction and the `click` event.<br />
    18. 18. Performance & Perception<br />User expects immediate feedback to his/her interaction.<br />There is a 400ms delay between user interaction and the `click` event.<br />Use touch events.<br />
    19. 19. Performance & Perception<br />Demo<br />
    20. 20. Less Powerful<br />Mobile devices are less lenient of inefficient code.<br />
    21. 21. Less Powerful<br />Mobile devices are less lenient of inefficient code.<br />Inefficient code/processes manifest themselves in the user interface.<br />
    22. 22. Reflow<br />
    23. 23. Reflow<br />The cost of reflow is a major performance issue.<br />
    24. 24. Reflow<br />The cost of reflow is a major performance issue.<br />Simple way to reduce the cost of a reflow is to remove extraneous tags.<br />
    25. 25. Watch for Extraneous Tags<br /><ul><br /> <li><a href="#view1">View 1</a></li><br /> <li><a href="#view2">View 2</a></li><br /> <li><a href="#view3">View 3</a></li><br /> <li><a href="#view4">View 4</a></li><br /></ul><br />
    26. 26. Watch for Extraneous Tags<br /><ul><br /> <li><a href="#view1">View 1</a></li><br /> <li><a href="#view2">View 2</a></li><br /> <li><a href="#view3">View 3</a></li><br /> <li><a href="#view4">View 4</a></li><br /></ul><br /><a href="#image"><br /><imgsrc="/some/image.jpg"><br /></a><br />
    27. 27. Reflow<br />Semantics takes a backseat to efficient HTML to reduce the cost of reflow.<br />
    28. 28. JavaScript-based animation<br />
    29. 29. JavaScript-based animation<br />For every frame!<br />
    30. 30. CSS Transition/Animation<br />
    31. 31. CSS Animation<br />Demo<br />@-webkit-keyframesroll{<br />from{<br />-webkit-transform: translate3d(0px,0,0);<br />}<br />to{<br />-webkit-transform: translate3d(200px,0,0) rotate(180deg);<br />}<br />}<br />
    32. 32. PhoneGap API<br />
    33. 33. PhoneGap API<br />navigator.camera.getPicture( <br />cameraSuccess, <br />cameraError, <br />[ cameraOptions ] <br />);<br />
    34. 34. PhoneGap API<br />Demo<br />
    35. 35. PhoneGap API<br />
    36. 36. PhoneGap Plugins<br />
    37. 37. Debugging<br />Check your syntax<br />JS Lint<br />JS Hint<br />
    38. 38. Debugging – Web Inspector<br />DOM<br />CSS<br />JavaScript Console<br />
    39. 39. Debugging - WEINRE<br />Demo<br /><script src="http://localhost:8081/target/target-script-min.js#anonymous" type="text/javascript"></script><br />
    40. 40. Conclusion<br />
    41. 41. Questions?<br />www.floatlearning.com @mediaboundsdpfeiffer@floatlearning.com<br />
    42. 42. Resources<br />http://floatlearning.com/blog/<br />http://phonegap.com/start/<br />http://microjs.com/<br />http://docs.phonegap.com/<br />

    ×