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 - Native Feeling Web Apps
Search
Rob Tarr
February 25, 2014
Technology
0
86
Blur The Lines - Native Feeling Web Apps
Some tips for writing web apps that feel like part of the native ecosystem
Rob Tarr
February 25, 2014
Tweet
Share
More Decks by Rob Tarr
See All by Rob Tarr
Frontend_Testing.pdf
robtarr
0
110
Blur the Lines: Write Web Apps That Feel Native
robtarr
1
100
Blur the Lines: How to write web apps that look native.
robtarr
0
84
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
ClaudeCodeにキレない技術
gtnao
1
860
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
800
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会(#AI道場)
you
PRO
0
1.3k
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
110
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
三視点LLMによる複数観点レビュー
mhlyc
0
230
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Building Applications with DynamoDB
mza
95
6.5k
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Music & Morning Musume
bryan
46
6.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
It's Worth the Effort
3n
185
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
Rob Tarr 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?
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
Building Native Web Apps http://bit.ly/1oDzPLW How to create a web
app that looks like a iOS7 native app
Building Native Web Apps ‣ Style ‣ Behavior ‣ Compatibility
http://bit.ly/1oDzPLW
Blur the Lines: Write web apps that look native Typography
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>
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 Web Content Guide Configuring Web Applications bit.ly/1cMoCDB
Blur the Lines: Write web apps that look native Images
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">
! <meta name="msapplication-TileColor" content="#73c5d3"> <meta name="msapplication-TileImage" content="icon.png"> bit.ly/1hnz18G
SVGs ‣ Inline ‣ Backgrounds ‣ Data URIs ‣ Animations
SVG Animations
Blur the Lines: Write web apps that look native Animations
Animations
Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html
Navigation Animations www.thepetedesign.com/demos/jquery_wheelmenu_demo.html
Animations easings.net
Navigation Animations www.snowbird.com
Animations forecast.io
Animations forecast.io
Matching ‣ http://jeremyckahn.github.io/stylie/ ‣ http://matthewlein.com/ceaser/ ‣ http://easings.net/
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
dragging
dragging http://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”
http://bit.ly/1j2MswD
keyboards http://bit.ly/1fJluWA
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
Performance Application Cache bit.ly/1bHGKAh bit.ly/1hs9ifb Service Workers mzl.la/1fkPWWa bit.ly/1edzjjz
Performance Write really good code.
Blur the Lines: Write web apps that look native New
APIs
Geolocation JavaScript APIs
Battery JavaScript APIs http://www.smartjava.org/examples/webapi-battery/
Camera JavaScript APIs <input type=“file”> bit.ly/1o3Lu3w
JavaScript APIs shinydemos.com/warholiser/
Accelerometer JavaScript APIs isthisanearthquake.com
JavaScript APIs https://developers.inkfilepicker.com/docs/web/
In-App Purchases http://bit.ly/1fEcJgA
In-App Purchases http://bit.ly/1fEcJgA
In-App Purchases http://bit.ly/1fEcJgA
Building Native Web Apps
THANKS! @robtarr
[email protected]