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
100
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
110
Blur The Lines - Native Feeling Web Apps
robtarr
0
87
Blur the Lines: How to write web apps that look native.
robtarr
0
86
Responsive JavaScript
robtarr
4
950
Development Tools and Responsive JavaScript
robtarr
1
160
JavaScript App Development
robtarr
3
390
Other Decks in Technology
See All in Technology
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
150
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
370
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
160
Trust as Infrastructure
bcantrill
1
370
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
180
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
370
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
100
Azure Well-Architected Framework入門
tomokusaba
1
350
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
AWS IoT 超入門 2025
hattori
0
270
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Featured
See All Featured
Scaling GitHub
holman
463
140k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
Being A Developer After 40
akosma
91
590k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Embracing the Ebb and Flow
colly
88
4.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Become a Pro
speakerdeck
PRO
29
5.5k
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