Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

PhoneGap

1,218 views

Published on

11-22-2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

PhoneGap

  1. 1. Sounds of Speech(Phonetics) Conversion of Flash to HTML/CSS/JavaScript.
  2. 2. Purpose of PhoneGap The ultimate purpose of PhoneGap is to cease to exist.
  3. 3. Simple Lessons Learned • • • • Single Page App Lost Start UP Touch Performance Scrolling
  4. 4. Single Page App MVVM,MVC,MV* Problem: Spaghetti code Solution: Pick a framework (BackBone.js/underscore, Knockout.js, E mber.js, Require.js or Angular.js)
  5. 5. BackBone Routing in PhoneGap document.addEventListener("deviceready", fun ction(){ Backbone.history.start(); }, false);
  6. 6. Single Page HTML App can get large Problem: Templating and a lot of JavaScript slows start up on slow emulators (Android!!!) or slow devices Solutions: Small initial index.html with window.location change
  7. 7. Lots of Frameworks used • • • • • • • • PhoneGap.js API Jquery.js Underscore.js Backbone.js FastClick.js Createjs.js TopCoat.css …other polyfills
  8. 8. Lost index.html start up fix <!doctype html> <html> <head> <title></title> <script> window.location='main.html'; </script> <body> </body> </html>
  9. 9. Slow Touch response Problem: mobile browsers will wait approximately 300ms for double tap checking. Solutions: FastClick.js
  10. 10. FastClick $(function() { FastClick.attach(document.body); }); <a class="needsclick">Ignored by FastClick</a>
  11. 11. Scrolling Problem: Subpage scrolling with momentum was not native to many mobile browsers. Solutions: use combination of -webkit touch and a JavaScript library.
  12. 12. Basic Scrolling fix For Android 4 and above and iOS #wrapper{ -webkit-overflow-scrolling:touch } <div id="wrapper"> <ul> <li></li> ... ... </ul> </div>
  13. 13. Basic Scrolling fix Android 2.2/2.3 <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('DOMContentLoa ded', loaded, false); </script>
  14. 14. What happens if the dimensions change… Refresh();
  15. 15. Event loop queue & iScroll.refresh(); function changeDOM() { // Here modify the DOM in any way, eg: by adding LIs to the scroller UL // use the setTimeOut to wait until the reflow is done and execute refresh on the next tick setTimeout(function () { // magic JavaScript scrolling happens here myScroll.refresh(); }, 0); }; http://blog.carbonfive.com/2013/10/27/the-javascript-event-loopexplained/
  16. 16. iScroll refresh solution 2 var tileListLength = tileListItems.length*5.5; $('#tile-list').css('width', tileListLength +'rem'); // underscore loads the html $("#tile-list").html( this.medialisthtml({tileItems}) ); //no need to wait for reflow completion because it’s set through css synchronously. if(iscrollSetting == true){ // magic JavaScript scrolling happens here mytile.refresh(); }

×