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
310
Intro to Databases
thegrubbsian
4
240
Other Decks in Technology
See All in Technology
いまさら聞けない ABテスト入門
skmr2348
1
200
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
150
OpenAI gpt-oss ファインチューニング入門
kmotohas
2
970
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
Where will it converge?
ibknadedeji
0
180
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
許しとアジャイル
jnuank
1
120
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
180
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Scaling GitHub
holman
463
140k
Music & Morning Musume
bryan
46
6.8k
A Tale of Four Properties
chriscoyier
160
23k
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