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