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
サイバーエージェント流クラウドコスト削減施策「みんなで金塊堀太郎」
kurochan
4
2k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
250
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
200
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
310
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
170
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
140
このままAIが発展するだけでAGI達成可能な理由
frievea
0
110
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
170
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Docker and Python
trallard
46
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Documentation Writing (for coders)
carmenintech
75
5.1k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Building Adaptive Systems
keathley
44
2.8k
Bash Introduction
62gerente
615
210k
Statistics for Hackers
jakevdp
799
220k
Code Review Best Practice
trishagee
72
19k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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