PhoneGap
Upcoming SlideShare
Loading in...5
×
 

PhoneGap

on

  • 881 views

11-22-2013

11-22-2013

Statistics

Views

Total Views
881
Views on SlideShare
881
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

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
  • This application is a very popular resource on campus and off campus. There was a concern that the 13 year old Flash content would not last much longer and would be lost. In addition we saw the possibility of monetizing the application to cover further development. http://www.uiowa.edu/~acadtech/phonetics/http://www.youtube.com/watch?v=16b2M-YwgKs
  • PhoneGap believes in a Web Application without the need for an App Store. Until that happens they provide a way to make Native Apps with Web Tech.http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
  • PhoneGap believes in a Web Application without the need for an App Store. Until that happens they provide a way to make Native Apps with Web Tech.http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
  • Attempting to mimic Native Apps presents challenges to web technologies.
  • // The PhoneGapdeviceready event fires once PhoneGap has fully loaded. After the device has fired, you can safely make calls to phoneGap function.//Backbone.history serves as a global router (per frame) to handle hashchange events http://backbonejs.org/
  • "http://community.phonegap.com/nitobi/topics/app_dies_on_startup_connection_to_the_server_was_unsuccessful"
  • http://labs.ft.com/articles/
  • https://github.com/ftlabs/fastclick
  • http://cubiq.org/iscroll-4
  • PhoneGap believes in a Web Application without the need for an App Store. Until that happens they provide a way to make Native Apps with Web Tech.http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
  • when a dimension change has occurred you cannot be sure that the reflow thread will complete before you refresh the iscroll object. If you use a setTimeout you ensure that it will execute in the correct event queue order . force the refresh to occur on the nextJavascript Performance resources:http://javascript.info/tutorial/events-and-timing-depth#javascript-is-single-threadedhttp://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)http://developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices"http://dev.opera.com/articles/view/efficient-javascript/"
  • when a dimension change has occurred you cannot be sure that the reflow thread will complete before you refresh the iscroll object. If you use a setTimeout you ensure that it will execute in the correct event queue order . force the refresh to occur on the nextJavascript Performance resources:http://javascript.info/tutorial/events-and-timing-depth#javascript-is-single-threadedhttp://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)http://developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices"http://dev.opera.com/articles/view/efficient-javascript/"

PhoneGap PhoneGap Presentation Transcript

  • Sounds of Speech(Phonetics) Conversion of Flash to HTML/CSS/JavaScript.
  • Purpose of PhoneGap The ultimate purpose of PhoneGap is to cease to exist.
  • Simple Lessons Learned • • • • Single Page App Lost Start UP Touch Performance Scrolling
  • 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)
  • BackBone Routing in PhoneGap document.addEventListener("deviceready", fun ction(){ Backbone.history.start(); }, false);
  • 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
  • Lots of Frameworks used • • • • • • • • PhoneGap.js API Jquery.js Underscore.js Backbone.js FastClick.js Createjs.js TopCoat.css …other polyfills
  • Lost index.html start up fix <!doctype html> <html> <head> <title></title> <script> window.location='main.html'; </script> <body> </body> </html>
  • Slow Touch response Problem: mobile browsers will wait approximately 300ms for double tap checking. Solutions: FastClick.js
  • FastClick $(function() { FastClick.attach(document.body); }); <a class="needsclick">Ignored by FastClick</a>
  • Scrolling Problem: Subpage scrolling with momentum was not native to many mobile browsers. Solutions: use combination of -webkit touch and a JavaScript library.
  • Basic Scrolling fix For Android 4 and above and iOS #wrapper{ -webkit-overflow-scrolling:touch } <div id="wrapper"> <ul> <li></li> ... ... </ul> </div>
  • 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>
  • What happens if the dimensions change… Refresh();
  • 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/
  • 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(); }