Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Blur the Lines: Write Web Apps That Feel Native
Search
Rob Tarr
March 09, 2014
Technology
1
95
Blur the Lines: Write Web Apps That Feel Native
Slides from my presentation with @ethanbmuller and @mutewinter at SXSW 2014.
Rob Tarr
March 09, 2014
Tweet
Share
More Decks by Rob Tarr
See All by Rob Tarr
Frontend_Testing.pdf
robtarr
0
90
Blur The Lines - Native Feeling Web Apps
robtarr
0
79
Blur the Lines: How to write web apps that look native.
robtarr
0
78
Responsive JavaScript
robtarr
4
940
Development Tools and Responsive JavaScript
robtarr
1
150
JavaScript App Development
robtarr
3
390
Other Decks in Technology
See All in Technology
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
620
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
410
生産性向上チームの紹介
cybozuinsideout
PRO
1
930
【基本】データベース設計
oracle4engineer
PRO
2
200
.NET Profiler in 2024.
kkamegawa
2
1.7k
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
260
M5stackで使用できるpHセンサの開発
shinrinakamura
0
200
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
Cypress or Playwright?
rainerhahnekamp
0
170
Microsoft for Startups Founders Hub_20240429 update
daikikanemitsu
1
2.4k
ルーターでプレゼンする
puhitaku
1
3.3k
障害対応をちょっとずつよくしていくための 演習の作りかた
heleeen
1
1.7k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Side Projects
sachag
451
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Building Applications with DynamoDB
mza
88
5.6k
Into the Great Unknown - MozCon
thekraken
14
1k
Clear Off the Table
cherdarchuk
85
310k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
GraphQLとの向き合い方2022年版
quramy
33
12k
BBQ
matthewcrist
80
8.8k
YesSQL, Process and Tooling at Scale
rocio
165
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
20
1.6k
Transcript
Rob Tarr - @robtarr Jeremy Mack - @mutewinter Ethan Muller
- @ethanmuller Blur the Lines: Write Web Apps That Feel Native
Blur the Lines: Write web apps that look native What
are we talking about?
Building Native Web Apps
Blur the Lines: Write web apps that look native Who’s
Your Audience?
There are some advantages to a native app
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
A few web app cons ‣ Limited access to APIs
‣ Publicity ‣ Harder to monetize
Building Native Web Apps
Blur the Lines: Write web apps that look native Typography
Safari Web Content Guide Apple’s Guide to Configuring Web Applications
bit.ly/1cMoCDB
iOS7 & Apple System Fonts
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: {
iOS7 & Apple System Fonts <div style="font:-apple-system-headline"> <div style="font-size:2em">This is
the headline…</div> </div>
Fallbacks for Apple System Fonts font-family: -apple-system-font, HelveticaNeue, Helvetica, sans-serif;
font-size: 17px; http://codepen.io/robtarr/pen/fsvIa
Safari Chrome
Safari Chrome <meta name="apple-mobile-web-app- capable" content="yes">
Safari Chrome <meta name="apple-mobile-web-app-status- bar-style" content=“black-translucent">
Safari Chrome navigator.standalone
Blur the Lines: Write web apps that look native Icons
Home Screen Icons
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
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
Home Screen Icons <meta name="msapplication-TileColor" content="#73c5d3"> <meta name="msapplication-TileImage" content="icon.png"> bit.ly/1lISkP3
Blur the Lines: Write web apps that look native Animations
We aren’t good at animation yet.
Be intentional about your animations.
Nothin’
Yikes.
Animated
Meh.
Timing Functions matthewlein.com/ceaser/
linear Really weird and unnatural-looking
ease-in-out Much nicer feeling (default in CSS)
easeOutExpo “The IKEA cabinet”
Timing Functions easings.net
Expo Ease Out
Mmkay. Getting There.
Nav Content Top of the page
Nav Content Top of the page
None
Nav Content Top of the page
Nav Content Top of the page
Tasty Parallaxy Feeling
Awwww yiss.
Now let’s get technical.
CSS transitions vs. CSS animations vs. JS animations CSS Transitions
& CSS Animations & JS based animations
CSS Transitions
CSS Animations
CSS transitions vs. CSS animations vs. JS animations JS Animation
Options
jQuery Animate
Transit http://ricostacruz.com/jquery.transit/
CSS animations are better than CSS animations, right?
Nah. Not necessarily. http://tinyurl.com/cssisntbetter
GreenSock http://www.greensock.com/
Famo.us http://famo.us/
CSS transitions vs. CSS animations vs. JS animations Rules of
thumb
Need to animate an active state on a button?
Need to animate an active state on a button? CSS
transitions
Need to animate an off-canvas menu or dropdown?
Need to animate an off-canvas menu or dropdown? Transit
Need to do a timeline-style animation?
Need to do a timeline-style animation? GreenSock
Need crazy, take-over- your-whole-interface animations?
None
CHALLENGE @sxblurthelines We’ll be tweeting codepen links from Fork the
pen, complete the mission, tweet your fork to @sxblurthelines
CHALLENGE You’ll need a codepen.io account. ! If you don’t
have one, go ahead and get one now.
CHALLENGE Replace jQuery’s animate with Transit’s transition (Transit is included
in this pen) Tweet your finished pen to @sxblurthelines
Blur the Lines: Write web apps that look native Behavior
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
fastclick playthreeve.com
fastclick
fastclick
fastclick
fastclick
CHALLENGE Add fastclick to some buttons (fastclick library included) Tweet
your finished pen to @sxblurthelines
dragging
dragging eightmedia.github.io/hammer.js/
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
keyboards bit.ly/1fbFkOl
CHALLENGE Add proper input type to forms (no library needed)
Tweet your finished pen to @sxblurthelines
Blur the Lines: Write web apps that look native Performance
Performance bit.ly/1mu9bTz Simple explanation: ! The Nitro Javascript engine compiles
your code into native ARM code
Performance bit.ly/1mu9bTz Apps saved to the iOS home screen don’t
get the benefits of the Nitro JavaScript engine. BUSTED
Offline Apps Application Cache bit.ly/1bHGKAh bit.ly/1hs9ifb Service Workers mzl.la/1fkPWWa github.com/slightlyoff/ServiceWorker
github.com/phuu/ServiceWorker-Polyfill
Performance Write really good code.
Blur the Lines: Write web apps that look native New
APIs
Battery JavaScript APIs http://www.smartjava.org/examples/webapi-battery/
Camera JavaScript APIs <input type=“file”> bit.ly/1o3Lu3w
CHALLENGE Display a user-uploaded image inline (No library needed) Tweet
your finished pen to @sxblurthelines
JavaScript APIs shinydemos.com/warholiser/
Accelerometer JavaScript APIs isthisanearthquake.com
CHALLENGE Add “shake to clear” to a form (shake.js library
included) Tweet your finished pen to @sxblurthelines
Geolocation JavaScript APIs
CHALLENGE Use Geolocation to get the user’s address (no library
needed) Tweet your finished pen to @sxblurthelines
Blur the Lines: Write web apps that look native 3rd
Party APIs
What is an API?
Application Pudding Interface
Less code is better code
They’ve already got a JavaScript API
Blur the Lines: Write web apps that look native Good
Ones
Data ‣ Firebase ‣ Parse ‣ Dropbox Datastore
Payments ‣ Stripe ‣ Recurly ‣ Square ‣ Gumroad
File Storage ‣ Ink Filepicker ‣ Dropbox
Email ‣ Mandrill ‣ Sendgrid ‣ Postmark ‣ Mailgun
No Server ‣ Zapier ‣ Parse Cloud Functions ‣ UserApp
Blur the Lines: Write web apps that look native Frameworks
Ember
That’s it
Angular
React
Backbone
Building Native Web Apps
THANKS! @robtarr @mutewinter @ethanmuller