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
79
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
90
Blur the Lines: Write Web Apps That Feel Native
robtarr
1
95
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
Building Dashboards as a Hobby
egmc
0
370
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
4
890
コードファーストの考え方。 Amplify Gen2から学ぶAWS次世代のWeb開発体験
yoshiitaka
2
370
One engineer company with Ruby on Rails
rstankov
2
440
web-application-security
matsuihidetoshi
1
190
2023年度にEMとして頑張ったこと
ikefukurou777
0
100
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
600
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
270
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Musicを例に~
otanet
0
310
EM完全に理解した と思ったけど、 やっぱり何も分からなかった話 / EM Night Fukuoka #1
hirutas
0
280
How to Lead? Testimonial of a Lead Android Engineer
oleur
1
110
.NET Profiler in 2024.
kkamegawa
2
1.7k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Building an army of robots
kneath
300
41k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Being A Developer After 40
akosma
66
580k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Embracing the Ebb and Flow
colly
80
4.2k
Visualization
eitanlees
137
14k
Infographics Made Easy
chrislema
238
18k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Statistics for Hackers
jakevdp
790
220k
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]