0
Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
@snookca“increíble”
What I won’t betalking about.
Q3 Smartphone     Smartphone             Featurephone                               43%    57%          Q3 2011 Source: Ni...
Q3 OS Market  iOS   Android      BlackBerry          Windows   Other                  7% 4%                               ...
US Mobile Browser           iOS          Android             Opera            BlackBerry               Other              ...
Brazil Mobile    iOS           Opera             Nokia            Android             BlackBerry               Other      ...
What are people                        iPhone                iPad                Android                        RIM       ...
75% developing for iOS and Android
Mobile Safari
Mobile SafariLocal Storage
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimations
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocation
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for searc...
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for searc...
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for searc...
Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for searc...
http://snk.ms/1o
Why Web over
Why Web overdon’t need access to device APIs
Why Web overdon’t need access to device APIs most apps don’t
Why Web overdon’t need access to device APIs most apps don’tneed quick iteration without app store approvalprocess
Codehttp://www.flickr.com/photos/bike/4299152140/
Detecting withinif(window.navigator.standalone) {    // run code in “app” mode} else {    // run code in mobile safari mode}
Home Screen Icon<link rel="apple-touch-icon" href="images/icon.png"><link rel="apple-touch-icon" sizes="72x72"href="touch-...
Start-up Image<link rel="apple-touch-startup-image" href="/startup.png">
Start-up ImageNo apparent support for horizontal imageWhen loading in landscape, the status barcreates a gap to one edge o...
Going “Full screen”<meta name="apple-mobile-web-app-capable"content="yes">
Status Bar<meta name="apple-mobile-web-app-status-bar-style" content="black">defaultblack-translucent
Viewport<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=590"><meta name="viewport"...
You don’t need a  framework!
HTML PrototypesHTMLElement.prototype.__defineSetter__("ontap",function(func){ });document.getElementById(keypad).ontap =fun...
HTML PrototypesHTMLElement.prototype.switchClass =function(fromClass, toClass){  if(this.className == fromClass) {       t...
querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all
BUT I WANTfunction $(selector){    return document.querySelectorAll(selector);}$(#myelement p);
Looping[3,2,1].forEach(function(itm, idx){     console.log(itm, idx); // 3,0 | 2,1 | 1,2})
Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));
Geolocationif (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(success, error);} else {  error(not su...
Use CSS for UI#units div:nth-child(2) { -webkit-transform:rotate(45deg); }#units div:nth-child(3) { -webkit-transform:rota...
Use Transitions-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;el.style.webkitTransform = ...
Webkit Animations@-webkit-keyframes {    0% { background-position-y: 0; }    100% { background-position-y: -100%; }}body {...
Touch vs ClickUsing touch events can make the app feel fasterthan click events.You can customize tap hightlight colour
Touch vs Click-webkit-tap-highlight-color:rgba(200,0,0,0.4);
Input Features<input autocorrect="on"> <!-- or “off” --><input placeholder="Example Text"><input type="email"><input type=...
Lockingwindow.addEventListener(orientationchange, function(){ if(window.orientation == -90) {   document.getElementById(or...
Locking.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px;}.orientright #shell {...
Locking
PerformanceUse CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to...
Hardware2D and 3D transforms may be hardwareaccelerateduse translateX/Y instead of top/leftuse rotateX(0) to push items wi...
Testing
TestingiOS Simulator is fast but not entirely accurate
TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurate
TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing mul...
TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing mul...
TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing mul...
TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing mul...
Framewhttp://www.flickr.com/photos/nocallerid_man/3638360458/
Mobile WebjQTouchXUI.jsjQuery MobileDojo MobileSencha Touch
jQTouchTargetted for iOSMakes web app feel like native app with controlsand list viewshttp://jqtouch.com/
XUI.JSx$(#btn).click( function (e) {     x$(#msg).html(¡Hola!);})
XUI.JSclean, familiar, chaining syntax.super tiny 10.4kb footprint (4.2kb gzipped).targeted builds for webkit, ie mobile, ...
Dojo MobileDesigned for iPhone, AndroidIncludes touch and gesture supportSupport for native-style widgetsCan create webkit...
jQuery MobileDesigned for iPhone, Android, webOS plus bada, Meego, Windows Mobile and moreIncludes touch and gesture suppo...
Sencha TouchDesigned for iPhone and AndroidIncludes enhanced touch eventsAllows for rapid developmenthttp://www.sencha.com...
Examplhttp://www.flickr.com/photos/mollymazilu/5827249387/
Could be a WebCalculators (e.g. CalcBot)TwitterProductivity Apps (e.g. Things.app)Recipe Databases (e.g. Epicurious)Weathe...
Could be a WebWords With Friends/ScrabbleAngry Birds http://chrome.angrybirds.com/CanabaltBejeweledRamp Champ
37Signals: Chalk
37Signals: Chalk
http://chalk.37signals.com/
Shkrubbel
https://github.com/kitt/shkrubbel
The Two Hour AppFrameworks allow for rapid developmentUsed jQTouchUsed localStorage
http://pushups.snook.ca/
ConvertBot
http://snook.ca/testing/convertbot/
Going
Why Native overAccess to native hardware and other applicationsCamera, Address Book, FilesystemStreamlined Revenue Process
Meet in the middleMany apps take advantage of native WebView toload application components from remote server allows for i...
PhoneGap andTitanium Mobile targets iPhone and AndroidPhoneGap targets iPhone, Android, Palm,Symbian and Blackberry.http:/...
Have fun! /http://www.flickr.com/photos/sbluerock/364123380/
@snookcahttp://snook.ca
Jonathan snook - fake-it
Jonathan snook - fake-it
Jonathan snook - fake-it
Jonathan snook - fake-it
Jonathan snook - fake-it
Upcoming SlideShare
Loading in...5
×

Jonathan snook - fake-it

3,314

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,314
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Jonathan snook - fake-it"

    1. 1. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
    2. 2. Fake It ‘tiYou Makecreating mobile apps thfeel like native apps
    3. 3. @snookca“increíble”
    4. 4. What I won’t betalking about.
    5. 5. Q3 Smartphone Smartphone Featurephone 43% 57% Q3 2011 Source: Nielsen
    6. 6. Q3 OS Market iOS Android BlackBerry Windows Other 7% 4% 28% 18% 43% Source: Nielsen
    7. 7. US Mobile Browser iOS Android Opera BlackBerry Other 5% 26% 39% 2% 28% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html
    8. 8. Brazil Mobile iOS Opera Nokia Android BlackBerry Other 3% 34% 25% 1% 29% 8% Q3 2011 Mobile Browser Stats http://www.quirksmode.org/blog/archives/2011/10/q3_2011_mobile_1.html
    9. 9. What are people iPhone iPad Android RIM Other 14% 30% 12% 23% 21% State of the Apps Industry 2010 and 2009 Surveys; DIGIDAY, Stifel Nicolaus, Millenial Media
    10. 10. 75% developing for iOS and Android
    11. 11. Mobile Safari
    12. 12. Mobile SafariLocal Storage
    13. 13. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimations
    14. 14. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocation
    15. 15. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.
    16. 16. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware acceleration
    17. 17. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware accelerationSVG
    18. 18. Mobile SafariLocal StorageCSS3 features like transforms, transitions andanimationsGeolocationHTML5 forms support for search, number andemail field types.Access to some hardware accelerationSVG older versions of Android don’t support it
    19. 19. http://snk.ms/1o
    20. 20. Why Web over
    21. 21. Why Web overdon’t need access to device APIs
    22. 22. Why Web overdon’t need access to device APIs most apps don’t
    23. 23. Why Web overdon’t need access to device APIs most apps don’tneed quick iteration without app store approvalprocess
    24. 24. Codehttp://www.flickr.com/photos/bike/4299152140/
    25. 25. Detecting withinif(window.navigator.standalone) { // run code in “app” mode} else { // run code in mobile safari mode}
    26. 26. Home Screen Icon<link rel="apple-touch-icon" href="images/icon.png"><link rel="apple-touch-icon" sizes="72x72"href="touch-icon-ipad.png"><link rel="apple-touch-icon" sizes="114x114"href="touch-icon-iphone4.png">rel="apple-touch-icon-precomposed"
    27. 27. Start-up Image<link rel="apple-touch-startup-image" href="/startup.png">
    28. 28. Start-up ImageNo apparent support for horizontal imageWhen loading in landscape, the status barcreates a gap to one edge of the loading screen.
    29. 29. Going “Full screen”<meta name="apple-mobile-web-app-capable"content="yes">
    30. 30. Status Bar<meta name="apple-mobile-web-app-status-bar-style" content="black">defaultblack-translucent
    31. 31. Viewport<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=590"><meta name="viewport" content="initial-scale=1.0"><meta name="viewport" content="initial-scale=2.3, user-scalable=no">
    32. 32. You don’t need a framework!
    33. 33. HTML PrototypesHTMLElement.prototype.__defineSetter__("ontap",function(func){ });document.getElementById(keypad).ontap =function(){ alert(just the keypad);};
    34. 34. HTML PrototypesHTMLElement.prototype.switchClass =function(fromClass, toClass){ if(this.className == fromClass) { this.className = toClass; } else { this.className = fromClass; } }document.getElementById(spinner-shell).switchClass(collapsed, expanded);
    35. 35. querySelector(All)document.querySelector(.active); // one eldocument.querySelectorAll(.active); // all
    36. 36. BUT I WANTfunction $(selector){ return document.querySelectorAll(selector);}$(#myelement p);
    37. 37. Looping[3,2,1].forEach(function(itm, idx){ console.log(itm, idx); // 3,0 | 2,1 | 1,2})
    38. 38. Local StorageJSON.parse(localStorage.getItem(pdata));localStorage.setItem(pdata, JSON.stringify(items));
    39. 39. Geolocationif (navigator.geolocation) { navigator.geolocation.getCurrentPosition(success, error);} else {  error(not supported);}function success(pos) { console.log( pos.coords.longitude, pos.coords.latitude );}
    40. 40. Use CSS for UI#units div:nth-child(2) { -webkit-transform:rotate(45deg); }#units div:nth-child(3) { -webkit-transform:rotate(90deg); }#units div:nth-child(4) { -webkit-transform:rotate(135deg); }#units div:nth-child(5) { -webkit-transform:rotate(180deg); }#units div:nth-child(6) { -webkit-transform:rotate(225deg); }#units div:nth-child(7) { -webkit-transform:rotate(270deg); }#units div:nth-child(8) { -webkit-transform:rotate(315deg); }
    41. 41. Use Transitions-webkit-transition-property: -webkit-transform;-webkit-transition-duration: .5s;el.style.webkitTransform = rotate(+pos+deg);
    42. 42. Webkit Animations@-webkit-keyframes { 0% { background-position-y: 0; } 100% { background-position-y: -100%; }}body { background-image:url("canvas-crumpled.jpeg"); -webkit-animation: bg 3s linear infinite;}
    43. 43. Touch vs ClickUsing touch events can make the app feel fasterthan click events.You can customize tap hightlight colour
    44. 44. Touch vs Click-webkit-tap-highlight-color:rgba(200,0,0,0.4);
    45. 45. Input Features<input autocorrect="on"> <!-- or “off” --><input placeholder="Example Text"><input type="email"><input type="url"><input type="number"><input type="search">
    46. 46. Lockingwindow.addEventListener(orientationchange, function(){ if(window.orientation == -90) { document.getElementById(orient).className = orientright; } if(window.orientation == 90) { document.getElementById(orient).className = orientleft; } if(window.orientation == 0) { document.getElementById(orient).className = ; }}, true);
    47. 47. Locking.orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px;}.orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px;}
    48. 48. Locking
    49. 49. PerformanceUse CSS instead of JavaScript for Animations use CSS Transitions use CSS Animations use 2D and 3D transforms to force hardware acceleration
    50. 50. Hardware2D and 3D transforms may be hardwareaccelerateduse translateX/Y instead of top/leftuse rotateX(0) to push items with heavy CSS touse hardware acceleration (it’s like IE’s zoom:1 to force hasLayout)
    51. 51. Testing
    52. 52. TestingiOS Simulator is fast but not entirely accurate
    53. 53. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurate
    54. 54. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versions
    55. 55. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on device
    56. 56. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device.
    57. 57. TestingiOS Simulator is fast but not entirely accurateAndroid emulator is slow but accurateEmulators handy for testing multiple OS versionsBest to test on deviceFor multi-touch testing, must do on the device. pinch/zoom, rotate possible in iOS simulator
    58. 58. Framewhttp://www.flickr.com/photos/nocallerid_man/3638360458/
    59. 59. Mobile WebjQTouchXUI.jsjQuery MobileDojo MobileSencha Touch
    60. 60. jQTouchTargetted for iOSMakes web app feel like native app with controlsand list viewshttp://jqtouch.com/
    61. 61. XUI.JSx$(#btn).click( function (e) { x$(#msg).html(¡Hola!);})
    62. 62. XUI.JSclean, familiar, chaining syntax.super tiny 10.4kb footprint (4.2kb gzipped).targeted builds for webkit, ie mobile, andblackberry
    63. 63. Dojo MobileDesigned for iPhone, AndroidIncludes touch and gesture supportSupport for native-style widgetsCan create webkit-only buildshttp://dojotoolkit.org/features/mobile
    64. 64. jQuery MobileDesigned for iPhone, Android, webOS plus bada, Meego, Windows Mobile and moreIncludes touch and gesture supporthttp://jquerymobile.com/
    65. 65. Sencha TouchDesigned for iPhone and AndroidIncludes enhanced touch eventsAllows for rapid developmenthttp://www.sencha.com/products/touch/
    66. 66. Examplhttp://www.flickr.com/photos/mollymazilu/5827249387/
    67. 67. Could be a WebCalculators (e.g. CalcBot)TwitterProductivity Apps (e.g. Things.app)Recipe Databases (e.g. Epicurious)Weather AppsUI Sketcher
    68. 68. Could be a WebWords With Friends/ScrabbleAngry Birds http://chrome.angrybirds.com/CanabaltBejeweledRamp Champ
    69. 69. 37Signals: Chalk
    70. 70. 37Signals: Chalk
    71. 71. http://chalk.37signals.com/
    72. 72. Shkrubbel
    73. 73. https://github.com/kitt/shkrubbel
    74. 74. The Two Hour AppFrameworks allow for rapid developmentUsed jQTouchUsed localStorage
    75. 75. http://pushups.snook.ca/
    76. 76. ConvertBot
    77. 77. http://snook.ca/testing/convertbot/
    78. 78. Going
    79. 79. Why Native overAccess to native hardware and other applicationsCamera, Address Book, FilesystemStreamlined Revenue Process
    80. 80. Meet in the middleMany apps take advantage of native WebView toload application components from remote server allows for iteration of some app components without requiring complete approval process from app store
    81. 81. PhoneGap andTitanium Mobile targets iPhone and AndroidPhoneGap targets iPhone, Android, Palm,Symbian and Blackberry.http://www.appcelerator.com/http://www.phonegap.com/
    82. 82. Have fun! /http://www.flickr.com/photos/sbluerock/364123380/
    83. 83. @snookcahttp://snook.ca
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×