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
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
0
630
事業開発におけるDify活用事例
kentarofujii
4
1.2k
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
160
OCIjp_Oracle AI World_Recap
shinpy
1
150
CoRL 2025 Survey
harukiabe
1
240
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
350
ソースを読むプロセスの例
sat
PRO
15
9.6k
「REALITY」3Dアバターシステムの7年分の拡張の歴史について
gree_tech
PRO
0
110
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
1
160
ソフトウェアエンジニアの生成AI活用と、これから
lycorptech_jp
PRO
0
780
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
510
AI時代、“平均値”ではいられない
uhyo
4
920
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Thoughts on Productivity
jonyablonski
70
4.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Mobile First: as difficult as doing things right
swwweet
225
10k
Site-Speed That Sticks
csswizardry
13
920
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Agile that works and the tools we love
rasmusluckow
331
21k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building Applications with DynamoDB
mza
96
6.7k
Rails Girls Zürich Keynote
gr2m
95
14k
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