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
170
Check → Balance
thegrubbsian
1
220
Intro to Databases
thegrubbsian
4
240
Other Decks in Technology
See All in Technology
個人のAWSアカウントをマルチ運用してみた
miura55
2
250
競技としてのKaggle、役に立つKaggle
yu4u
7
2.5k
自らを知り外と繋がる、日経のエンジニア採用とDevRel活動/devreljp92
nishiuma
2
190
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
5
790
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
360
成長をサポートするピープルマネジメントのやり方
sioncojp
9
1.4k
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
110
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
370
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
250
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
4
1.4k
Documentação de Produtos: Artefatos essenciais na prática
rigolon
1
220
Babylon.js JAPAN活動紹介 (2024/4)
limes2018
1
130
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Making Projects Easy
brettharned
109
5.5k
Product Roadmaps are Hard
iamctodd
45
9.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Become a Pro
speakerdeck
PRO
13
4.6k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Designing with Data
zakiwarfel
96
4.8k
4 Signs Your Business is Dying
shpigford
176
21k
Designing the Hi-DPI Web
ddemaree
276
33k
Done Done
chrislema
178
15k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
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