SlideShare a Scribd company logo
1 of 42
Download to read offline
“
               “
It’s time to think
MOBILE FIRST
our Story
a Real Story
Rails mobile view + jQuery Mobile
Enough to raise money
2012 - Designer full-time
Demo
Architecture
CLIENT PART


                                  Website                                                                              Mobile Apps
                                  http://hockey-community.com



                                                                                                                               Phonegap
                                                                                                                                (HTML5)


                                                                                                                           h
                                                                                                                        Aut
                                                                                                                      +o
                                                                                                              hJson
                                                                                                     pt   wit
                                                                                                  Cry
                                                                                            API
                                                                                                                                             Github

                                                                                                                                          Code Versioning
BACK OFFICE




                                                                            Cloud Hosting

              Code Versioning                                                                                                    Performance Monitoring


                         Github                                  1 Heroku App                                                      New Relic
                                                                          Ruby on Rails



              Database                                          Storage                                                                        Emailing




                Amazon RDS                                          Amazon S3                                             Sendgrid
Github
4 repositories
MVC
“The Rails Style”
Framework?
Fight iOS release cycles
Explore the code
Aug 2012 - Porting to Android
          2 weeks
Chromium error -6
Changing the href listeners
                                   Every time we change the page

// -- Set android params -- // 
function setAndroidParams(href)
{
"     if (href) {
"     "     var n = href.indexOf('?');
"     "     window.localStorage.setItem("android-href", href);
"     "     href = href.substring(0, n != -1 ? n : href.length);
"     "     return href;
 " }
}

// -- Android anchor listener -- //
function refresh_android_listener(page_div, event){

"   "    $(page_div).on(event, 'a', function() {
"   "    "   var href = $(this).attr('href');
"   "    "   if (href && href != "#" && href.search("tel") == -1){
"   "    "   "     change_page(href);
"   "    "   "     return false;
"   "    "   } 
"   "    });
}
Accessing URL parameters
                         statuses_show.html?status_id=104381



function getParamValue(param,url) {
    // Android only
    url = window.localStorage.getItem("android-href");
" // Common to iOS and Android
" var u = (url == undefined || (url != undefined && url.indexOf("?") == -1)) ?
document.location.href : url;
    var reg = new RegExp('(?|&|^)'+param+'=(.*?)(&|$)');
" matches = u.match(reg);
    return (matches != undefined && matches.length > 1) ?
decodeURIComponent(matches[2]).replace(/+/g,' ') : null;
}
Same function names
                                 on iOS and Android




function triggerActionSheet(param,url) {
    // Android only
}




function triggerActionSheet(param,url) {
    // iOS Only
}
Native Scrolling & height fixing
                                on iOS and Android




#events_content	
  {
	
   margin-­‐top:42px;
	
   height:420px;
	
   overflow-­‐y:	
  scroll;
	
   -­‐webkit-­‐overflow-­‐scrolling:	
  touch;
	
   /*-­‐webkit-­‐transform:	
  translateZ(0px);*/
}
Android 2.3
Doesn’t work
var	
  container	
  =	
  document.querySelector('#box');
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');
Fix:




Works
//	
  Legacy	
  JS
	
      var	
  legacyHasClass	
  =	
  function	
  (el,	
  cl)	
  {
	
      	
  	
  	
  	
  	
  	
  	
  	
  var	
  regex	
  =	
  new	
  RegExp('(?:s|^)'	
  +	
  cl	
  +	
  '(?:s|$)');
	
      	
  	
  	
  	
  	
  	
  	
  	
  return	
  !!el.className.match(regex);
	
      	
  	
  	
  	
  },
	
      	
  	
  	
  	
  legacyAddClass	
  =	
  function	
  (el,	
  cl)	
  {
	
      	
  	
  	
  	
  	
  	
  	
  	
  el.className	
  +=	
  '	
  '	
  +	
  cl;
	
      	
  	
  	
  	
  },
	
      	
  	
  	
  	
  legacyRemoveClass	
  =	
  function	
  (el,	
  cl)	
  {
	
      	
  	
  	
  	
  	
  	
  	
  	
  var	
  regex	
  =	
  new	
  RegExp('(?:s|^)'	
  +	
  cl	
  +	
  '(?:s|$)');
	
      	
  	
  	
  	
  	
  	
  	
  	
  el.className	
  =	
  el.className.replace(regex,	
  '	
  ');
	
      	
  	
  	
  	
  },
	
      	
  	
  	
  	
  legacyToggleClass	
  =	
  function	
  (el,	
  cl)	
  {
	
      	
  	
  	
  	
  	
  	
  	
  	
  hasClass(el,	
  cl)	
  ?	
  removeClass(el,	
  cl)	
  :	
  addClass(el,	
  cl);
	
      	
  	
  	
  	
  };
Android DatePicker   Galaxy S3
Questions?
5 Design tips
1. Break the rules
1. Break the rules
2. Acknowledge User Interactions
2. Acknowledge User Interactions
3. Give your app personality
3. Give your app personality
3. Give your app personality
4. Call To Action & Distractions
4. Call To Action & Distractions
and last Don’t forget the basics
        Consistency, Simplicity, etc
Questions?
Looking Forward
Have fun!

More Related Content

What's hot

Extending Flink State Serialization for Better Performance and Smaller Checkp...
Extending Flink State Serialization for Better Performance and Smaller Checkp...Extending Flink State Serialization for Better Performance and Smaller Checkp...
Extending Flink State Serialization for Better Performance and Smaller Checkp...Flink Forward
 
Building a p2 update site using Buckminster
Building a p2 update site using BuckminsterBuilding a p2 update site using Buckminster
Building a p2 update site using Buckminsterguest5e2b6b
 
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeDeclarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeRamon Ribeiro Rabello
 
InterConnect: Java, Node.js and Swift - Which, Why and When
InterConnect: Java, Node.js and Swift - Which, Why and WhenInterConnect: Java, Node.js and Swift - Which, Why and When
InterConnect: Java, Node.js and Swift - Which, Why and WhenChris Bailey
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Loiane Groner
 
Try Jetpack Compose
Try Jetpack ComposeTry Jetpack Compose
Try Jetpack ComposeLutasLin
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Tugdual Grall
 

What's hot (8)

Extending Flink State Serialization for Better Performance and Smaller Checkp...
Extending Flink State Serialization for Better Performance and Smaller Checkp...Extending Flink State Serialization for Better Performance and Smaller Checkp...
Extending Flink State Serialization for Better Performance and Smaller Checkp...
 
Building a p2 update site using Buckminster
Building a p2 update site using BuckminsterBuilding a p2 update site using Buckminster
Building a p2 update site using Buckminster
 
Declarative UIs with Jetpack Compose
Declarative UIs with Jetpack ComposeDeclarative UIs with Jetpack Compose
Declarative UIs with Jetpack Compose
 
InterConnect: Java, Node.js and Swift - Which, Why and When
InterConnect: Java, Node.js and Swift - Which, Why and WhenInterConnect: Java, Node.js and Swift - Which, Why and When
InterConnect: Java, Node.js and Swift - Which, Why and When
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
 
Try Jetpack Compose
Try Jetpack ComposeTry Jetpack Compose
Try Jetpack Compose
 
Oop in java script
Oop in java scriptOop in java script
Oop in java script
 
Scripting Oracle Develop 2007
Scripting Oracle Develop 2007Scripting Oracle Develop 2007
Scripting Oracle Develop 2007
 

Similar to HC - The Mobile Adventure with Phonegap

Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyonddion
 
PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事longfei.dong
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009Christopher Judd
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionJames Pearce
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)Tech in Asia ID
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and howRiza Fahmi
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsJames Pearce
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshopJames Pearce
 
Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Guillaume Laforge
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsJames Pearce
 
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...Raj Lal
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersTodd Anglin
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegapyangdj
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaveryangdj
 
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...Amazon Web Services
 
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify Amazon Web Services
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 

Similar to HC - The Mobile Adventure with Phonegap (20)

Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyond
 
PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事
 
IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009IPhone Web Development With Grails from CodeMash 2009
IPhone Web Development With Grails from CodeMash 2009
 
A Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 RevolutionA Snapshot of the Mobile HTML5 Revolution
A Snapshot of the Mobile HTML5 Revolution
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)"Progressive Web Apps" by Riza Fahmi	(Hacktiv8)
"Progressive Web Apps" by Riza Fahmi (Hacktiv8)
 
Progressive Web Apps. What, why and how
Progressive Web Apps. What, why and howProgressive Web Apps. What, why and how
Progressive Web Apps. What, why and how
 
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web AppsBuilding Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
 
Google Gears
Google GearsGoogle Gears
Google Gears
 
Bd conf sencha touch workshop
Bd conf sencha touch workshopBd conf sencha touch workshop
Bd conf sencha touch workshop
 
Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007Grails Introduction - IJTC 2007
Grails Introduction - IJTC 2007
 
Building Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web AppsBuilding Cloud-Based Cross-Platform Mobile Web Apps
Building Cloud-Based Cross-Platform Mobile Web Apps
 
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...
Hybrid Application Development for Maemo N900 Device using Qt Webkit - Discov...
 
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET DevelopersAccelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...
Optimizing Lambda@Edge for Performance and Cost Efficiency (CTD405-R2) - AWS ...
 
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify
Take Mobile and Web Apps to the Next Level with AWS AppSync and AWS Amplify
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 

HC - The Mobile Adventure with Phonegap

  • 1. “ It’s time to think MOBILE FIRST
  • 4. Rails mobile view + jQuery Mobile
  • 5.
  • 6.
  • 7.
  • 8.
  • 10. 2012 - Designer full-time
  • 11.
  • 12. Demo
  • 14. CLIENT PART Website Mobile Apps http://hockey-community.com Phonegap (HTML5) h Aut +o hJson pt wit Cry API Github Code Versioning BACK OFFICE Cloud Hosting Code Versioning Performance Monitoring Github 1 Heroku App New Relic Ruby on Rails Database Storage Emailing Amazon RDS Amazon S3 Sendgrid
  • 20. Aug 2012 - Porting to Android 2 weeks
  • 22. Changing the href listeners Every time we change the page // -- Set android params -- //  function setAndroidParams(href) { " if (href) { " " var n = href.indexOf('?'); " " window.localStorage.setItem("android-href", href); " " href = href.substring(0, n != -1 ? n : href.length); " " return href;  " } } // -- Android anchor listener -- // function refresh_android_listener(page_div, event){ " " $(page_div).on(event, 'a', function() { " " " var href = $(this).attr('href'); " " " if (href && href != "#" && href.search("tel") == -1){ " " " " change_page(href); " " " " return false; " " " }  " " }); }
  • 23. Accessing URL parameters statuses_show.html?status_id=104381 function getParamValue(param,url) { // Android only url = window.localStorage.getItem("android-href"); " // Common to iOS and Android " var u = (url == undefined || (url != undefined && url.indexOf("?") == -1)) ? document.location.href : url; var reg = new RegExp('(?|&|^)'+param+'=(.*?)(&|$)'); " matches = u.match(reg); return (matches != undefined && matches.length > 1) ? decodeURIComponent(matches[2]).replace(/+/g,' ') : null; }
  • 24. Same function names on iOS and Android function triggerActionSheet(param,url) { // Android only } function triggerActionSheet(param,url) { // iOS Only }
  • 25. Native Scrolling & height fixing on iOS and Android #events_content  {   margin-­‐top:42px;   height:420px;   overflow-­‐y:  scroll;   -­‐webkit-­‐overflow-­‐scrolling:  touch;   /*-­‐webkit-­‐transform:  translateZ(0px);*/ }
  • 26. Android 2.3 Doesn’t work var  container  =  document.querySelector('#box'); container.classList.add('wrap'); container.classList.remove('wrap'); container.classList.toggle('wrap'); Fix: Works //  Legacy  JS   var  legacyHasClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp('(?:s|^)'  +  cl  +  '(?:s|$)');                  return  !!el.className.match(regex);          },          legacyAddClass  =  function  (el,  cl)  {                  el.className  +=  '  '  +  cl;          },          legacyRemoveClass  =  function  (el,  cl)  {                  var  regex  =  new  RegExp('(?:s|^)'  +  cl  +  '(?:s|$)');                  el.className  =  el.className.replace(regex,  '  ');          },          legacyToggleClass  =  function  (el,  cl)  {                  hasClass(el,  cl)  ?  removeClass(el,  cl)  :  addClass(el,  cl);          };
  • 27. Android DatePicker Galaxy S3
  • 30. 1. Break the rules
  • 31. 1. Break the rules
  • 32. 2. Acknowledge User Interactions
  • 33. 2. Acknowledge User Interactions
  • 34. 3. Give your app personality
  • 35. 3. Give your app personality
  • 36. 3. Give your app personality
  • 37. 4. Call To Action & Distractions
  • 38. 4. Call To Action & Distractions
  • 39. and last Don’t forget the basics Consistency, Simplicity, etc