Blur the Lines: Write Web Apps That Feel Native

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