Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Blur the Lines: Write Web Apps That Feel Native

Blur the Lines: Write Web Apps That Feel Native

Slides from my presentation with @ethanbmuller and @mutewinter at SXSW 2014.

135d480b7bf92956adcf5abd04821376?s=128

Rob Tarr

March 09, 2014
Tweet

Transcript

  1. Rob Tarr - @robtarr Jeremy Mack - @mutewinter Ethan Muller

    - @ethanmuller Blur the Lines: Write Web Apps That Feel Native
  2. Blur the Lines: Write web apps that look native What

    are we talking about?
  3. Building Native Web Apps

  4. Blur the Lines: Write web apps that look native Who’s

    Your Audience?
  5. There are some advantages to a native app

  6. A few native app cons ‣ Limited to certain devices

    - iOS vs. Android ‣ Approval processes ‣ Delay in pushing out updates ‣ Some users don’t upgrade ‣ iOS no Nitro JavaScript engine
  7. A few web app cons ‣ Limited access to APIs

    ‣ Publicity ‣ Harder to monetize
  8. Building Native Web Apps

  9. Blur the Lines: Write web apps that look native Typography

  10. Safari Web Content Guide Apple’s Guide to Configuring Web Applications

    bit.ly/1cMoCDB
  11. iOS7 & Apple System Fonts

  12. iOS7 & Apple System Fonts -apple-system-body -apple-system-caption1 -apple-system-caption2 -apple-system-footnote -apple-system-headline

    -apple-system-short-body -apple-system-short-caption1 -apple-system-short-footnote -apple-system-short-headline -apple-system-short-subheadline bit.ly/1oDSoiS font: {
  13. iOS7 & Apple System Fonts <div style="font:-apple-system-headline"> <div style="font-size:2em">This is

    the headline…</div> </div>
  14. Fallbacks for Apple System Fonts font-family: -apple-system-font, HelveticaNeue, Helvetica, sans-serif;

    font-size: 17px; http://codepen.io/robtarr/pen/fsvIa
  15. Safari Chrome

  16. Safari Chrome <meta name="apple-mobile-web-app- capable" content="yes">

  17. Safari Chrome <meta name="apple-mobile-web-app-status- bar-style" content=“black-translucent">

  18. Safari Chrome navigator.standalone

  19. Blur the Lines: Write web apps that look native Icons

  20. Home Screen Icons

  21. Home Screen Icons <link rel="apple-touch-icon" href="icon.png"> <link rel="apple-touch-icon" sizes="144x144" href="/icon-144x144.png">

    bit.ly/1hnz18G
  22. Home Screen Icons <link rel=“shortcut icon" sizes="144x144" href="icon.png"> <link rel=“shortcut

    icon" sizes="196x196" href="/icon-144x144.png"> bit.ly/1ltRVzL
  23. Home Screen Icons <meta name="msapplication-TileColor" content="#73c5d3"> <meta name="msapplication-TileImage" content="icon.png"> bit.ly/1lISkP3

  24. Blur the Lines: Write web apps that look native Animations

  25. We aren’t good at animation yet.

  26. Be intentional about your animations.

  27. Nothin’

  28. Yikes.

  29. Animated

  30. Meh.

  31. Timing Functions matthewlein.com/ceaser/

  32. linear Really weird and unnatural-looking

  33. ease-in-out Much nicer feeling (default in CSS)

  34. easeOutExpo “The IKEA cabinet”

  35. Timing Functions easings.net

  36. Expo Ease Out

  37. Mmkay. Getting There.

  38. Nav Content Top of the page

  39. Nav Content Top of the page

  40. None
  41. Nav Content Top of the page

  42. Nav Content Top of the page

  43. Tasty Parallaxy Feeling

  44. Awwww yiss.

  45. Now let’s get technical.

  46. CSS transitions vs. CSS animations vs. JS animations CSS Transitions

    & CSS Animations & JS based animations
  47. CSS Transitions

  48. CSS Animations

  49. CSS transitions vs. CSS animations vs. JS animations JS Animation

    Options
  50. jQuery Animate

  51. Transit http://ricostacruz.com/jquery.transit/

  52. CSS animations are better than CSS animations, right?

  53. Nah. Not necessarily. http://tinyurl.com/cssisntbetter

  54. GreenSock http://www.greensock.com/

  55. Famo.us http://famo.us/

  56. CSS transitions vs. CSS animations vs. JS animations Rules of

    thumb
  57. Need to animate an active state on a button?

  58. Need to animate an active state on a button? CSS

    transitions
  59. Need to animate an off-canvas menu or dropdown?

  60. Need to animate an off-canvas menu or dropdown? Transit

  61. Need to do a timeline-style animation?

  62. Need to do a timeline-style animation? GreenSock

  63. Need crazy, take-over- your-whole-interface animations?

  64. None
  65. CHALLENGE @sxblurthelines We’ll be tweeting codepen links from Fork the

    pen, complete the mission, tweet your fork to @sxblurthelines
  66. CHALLENGE You’ll need a codepen.io account. ! If you don’t

    have one, go ahead and get one now.
  67. CHALLENGE Replace jQuery’s animate with Transit’s transition (Transit is included

    in this pen) Tweet your finished pen to @sxblurthelines
  68. Blur the Lines: Write web apps that look native Behavior

  69. fastclick ...mobile browsers will wait approximately 300ms from the time

    that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap. ! https://github.com/ftlabs/fastclick
  70. fastclick playthreeve.com

  71. fastclick

  72. fastclick

  73. fastclick

  74. fastclick

  75. CHALLENGE Add fastclick to some buttons (fastclick library included) Tweet

    your finished pen to @sxblurthelines
  76. dragging

  77. dragging eightmedia.github.io/hammer.js/

  78. Linking to Native Apps href=“tel:19374010915” href=“facetime:19374010915” ! href=“http://maps.apple.com? q=123+Webster+St.,+Dayton,+OH +45402”

    bit.ly/1j2MswD
  79. keyboards bit.ly/1fbFkOl

  80. CHALLENGE Add proper input type to forms (no library needed)

    Tweet your finished pen to @sxblurthelines
  81. Blur the Lines: Write web apps that look native Performance

  82. Performance bit.ly/1mu9bTz Simple explanation: ! The Nitro Javascript engine compiles

    your code into native ARM code
  83. Performance bit.ly/1mu9bTz Apps saved to the iOS home screen don’t

    get the benefits of the Nitro JavaScript engine. BUSTED
  84. Offline Apps Application Cache bit.ly/1bHGKAh bit.ly/1hs9ifb Service Workers mzl.la/1fkPWWa github.com/slightlyoff/ServiceWorker

    github.com/phuu/ServiceWorker-Polyfill
  85. Performance Write really good code.

  86. Blur the Lines: Write web apps that look native New

    APIs
  87. Battery JavaScript APIs http://www.smartjava.org/examples/webapi-battery/

  88. Camera JavaScript APIs <input type=“file”> bit.ly/1o3Lu3w

  89. CHALLENGE Display a user-uploaded image inline (No library needed) Tweet

    your finished pen to @sxblurthelines
  90. JavaScript APIs shinydemos.com/warholiser/

  91. Accelerometer JavaScript APIs isthisanearthquake.com

  92. CHALLENGE Add “shake to clear” to a form (shake.js library

    included) Tweet your finished pen to @sxblurthelines
  93. Geolocation JavaScript APIs

  94. CHALLENGE Use Geolocation to get the user’s address (no library

    needed) Tweet your finished pen to @sxblurthelines
  95. Blur the Lines: Write web apps that look native 3rd

    Party APIs
  96. What is an API?

  97. Application Pudding Interface

  98. Less code is better code

  99. They’ve already got a JavaScript API

  100. Blur the Lines: Write web apps that look native Good

    Ones
  101. Data ‣ Firebase ‣ Parse ‣ Dropbox Datastore

  102. Payments ‣ Stripe ‣ Recurly ‣ Square ‣ Gumroad

  103. File Storage ‣ Ink Filepicker ‣ Dropbox

  104. Email ‣ Mandrill ‣ Sendgrid ‣ Postmark ‣ Mailgun

  105. No Server ‣ Zapier ‣ Parse Cloud Functions ‣ UserApp

  106. Blur the Lines: Write web apps that look native Frameworks

  107. Ember

  108. That’s it

  109. Angular

  110. React

  111. Backbone

  112. Building Native Web Apps

  113. THANKS! @robtarr @mutewinter @ethanmuller