Blur the Lines: Write Web Apps That Feel Native

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

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
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?
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