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
300
Intro to Databases
thegrubbsian
4
240
Other Decks in Technology
See All in Technology
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
人工衛星のファームウェアをRustで書く理由
koba789
8
4.8k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Grafana MCPサーバーによるAIエージェント経由でのGrafanaダッシュボード動的生成
hamadakoji
1
1.5k
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
2025年夏 コーディングエージェントを統べる者
nwiizo
0
120
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
410
サンドボックス技術でAI利活用を促進する
koh_naga
0
190
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
300
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.2k
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
200
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
380
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Adaptive Systems
keathley
43
2.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Designing for Performance
lara
610
69k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Fireside Chat
paigeccino
39
3.6k
Writing Fast Ruby
sferik
628
62k
Music & Morning Musume
bryan
46
6.8k
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