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
The Native/Mobile Web
Search
thegrubbsian
August 14, 2013
Technology
0
150
The Native/Mobile Web
thegrubbsian
August 14, 2013
Tweet
Share
More Decks by thegrubbsian
See All by thegrubbsian
Elixir, Zero to Web
thegrubbsian
4
190
Check → Balance
thegrubbsian
1
290
Intro to Databases
thegrubbsian
4
240
Other Decks in Technology
See All in Technology
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
2.7k
Ask! NIKKEI RAG検索技術の深層
hotchpotch
13
2.8k
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
2
390
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Producing Creativity
orderedlist
PRO
343
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Navigating Team Friction
lara
183
15k
Building Adaptive Systems
keathley
40
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Fireside Chat
paigeccino
34
3.2k
Transcript
think ◦ design ◦ develop ◦ mentor Beyond the basics
with PhoneGap JC Grubbs, CEO DevMynd @thegrubbsian github.com/thegrubbsian The Native/Mobile Web
How many of you have used PhoneGap? How many of
you have PhoneGap apps in production? think ◦ design ◦ develop ◦ mentor Survey
Agenda Brief introduction to PhoneGap think ◦ design ◦ develop
◦ mentor Construction best practices Architectural approach Performance tips & tricks Q&A
PhoneGap? think ◦ design ◦ develop ◦ mentor
What is PhoneGap? A set of native wrappers think ◦
design ◦ develop ◦ mentor Bridge code for exposing native APIs Your code, basically a web app Lightweight tooling
Anatomy think ◦ design ◦ develop ◦ mentor App Code
iOS Android Windows Cordova & Plugin JS Cordova & Plugin JS Cordova & Plugin JS Plugin Plugin Plugin Plugin Plugin Plugin
Architecture think ◦ design ◦ develop ◦ mentor
Our Stack think ◦ design ◦ develop ◦ mentor OR
sass ejs jasmine rake pipeline moment gui tools other libs
GUI Frameworks think ◦ design ◦ develop ◦ mentor jQuery
Mobile iUI Ratchet Sencha Topcoat jQuery Mobile Fries ...or none
Architecture think ◦ design ◦ develop ◦ mentor Application Module
Backbone.Offline Backbone.Sync View Handler Window Views Collections Models Events Templates
Server API Standard JSON/REST think ◦ design ◦ develop ◦
mentor Pass user context information as headers
Online/Offline Make use of localStorage think ◦ design ◦ develop
◦ mentor Use the available SQLite DB Listen to PhoneGap connectivity events
think ◦ design ◦ develop ◦ mentor {code} github.com/thegrubbsian/triage_mobile
Assets Coffee/SASS pre-processors think ◦ design ◦ develop ◦ mentor
Concatenate JS & CSS jshint and csslint
Templates Write in individual files think ◦ design ◦ develop
◦ mentor Pre-compile template functions for performance
Build Use rake-‐pipeline to run all the asset steps think
◦ design ◦ develop ◦ mentor Use listen to observe file changes and re-compile
think ◦ design ◦ develop ◦ mentor {code} github.com/thegrubbsian/triage_web
Browser Runnable Mouse vs. touch events think ◦ design ◦
develop ◦ mentor Deal with CORS or serve app from the server Use feature detection for PhoneGap specific APIs
Debugging Desktop browser think ◦ design ◦ develop ◦ mentor
Safari inspector + iOS simulator Chrome remote debugger + Android device debug.phonegap.com
Deployment Don’t wait to test on a device think ◦
design ◦ develop ◦ mentor Use TestFlight for team testing PhoneGap Build
Testing Jasmine now packaged with PhoneGap 3.0 think ◦ design
◦ develop ◦ mentor Make use of capybara/ cucumber or selenium
Performance think ◦ design ◦ develop ◦ mentor
DOM & Views Avoid redraws think ◦ design ◦ develop
◦ mentor Keep markup shallow Remove non-visible views Kill view old view objects, watch for memory leaks
Rendering Make light use of shadows and gradients think ◦
design ◦ develop ◦ mentor Use CSS sprites or better yet an icon font Use hardware accelerated transitions where possible
Interactions Mouse events are generally composite touch events think ◦
design ◦ develop ◦ mentor Cache selectors
Plugins If necessary write plugins to gain native performance for
expensive operations think ◦ design ◦ develop ◦ mentor
Plugins If necessary write plugins to gain native performance for
expensive operations think ◦ design ◦ develop ◦ mentor The plugin API changed significantly in 3.0
Web Workers In some situations web workers can be helpful
think ◦ design ◦ develop ◦ mentor Be careful though of OS versions that do not support them
Bonus Tips think ◦ design ◦ develop ◦ mentor
Odds & Ends Use -‐webkit-‐overflow-‐ scroll to better deal with
scrolling and fixed elements think ◦ design ◦ develop ◦ mentor Use media queries to deal with rotation and tablet vs. phone
Odds & Ends Disable the iOS “Bounce” for a more
native feel think ◦ design ◦ develop ◦ mentor Pass user’s timezone to server for better time translation
Questions think ◦ design ◦ develop ◦ mentor