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
Lessons Learned in Mobile Web App Development
Search
Brandon Keepers
PRO
May 23, 2011
Programming
16
680
Lessons Learned in Mobile Web App Development
Brandon Keepers
PRO
May 23, 2011
Tweet
Share
More Decks by Brandon Keepers
See All by Brandon Keepers
Automating Software Development
bkeepers
PRO
2
400
Building the GitHub workspace app
bkeepers
PRO
1
300
Contributing to Your Career
bkeepers
PRO
3
650
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
850
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.3k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
430
Tending Your Open Source Garden, v2
bkeepers
PRO
1
490
Tending Your Open Source Garden
bkeepers
PRO
2
880
The Loyal Renegade
bkeepers
PRO
3
760
Other Decks in Programming
See All in Programming
Jakarta EE as Seen Trough the Lens of the ASF
ivargrimstad
0
860
Quarto Clean Theme
nicetak
0
220
sqlcを利用してsqlに型付けを
kamiyam
0
250
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.2k
CSC509 Lecture 07
javiergs
PRO
0
140
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
400
Golang と Erlang
taiyow
7
1.8k
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
今日で分かる!カスタムコップの作り方
krpk1900
2
270
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
400
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
540
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
Featured
See All Featured
Bash Introduction
62gerente
608
210k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
GraphQLとの向き合い方2022年版
quramy
43
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Designing the Hi-DPI Web
ddemaree
280
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Designing for Performance
lara
604
68k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Building Applications with DynamoDB
mza
90
6k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Transcript
Ordered List Brandon Keepers Grand Rapids Web Development Group May
23, 2011 Lessons Learned in Mobile Web App Development
?
~6 months
The App
The App Static HTML
The App Static HTML CSS
The App Static HTML CSS JSON API
The App Static HTML CSS JSON API JavaScript
The App Static HTML CSS JSON API JavaScript JavaScript
The App Static HTML CSS JSON API JavaScript JavaScript JavaScript
CSS challenges
-webkit-* iOS Android Blackberry Palm Symbian
position: fixed;
Header Footer Scrollable Content
ader oter llable ntent
header { position:fixed; top:0; right:0; left:0; height:56px; } .content {
margin:56px 0 48px 0; } footer { position:fixed; bottom:0; right:0; left:0; height:56px; } fixed ader oter llable ntent
header { position:fixed; top:0; right:0; left:0; height:56px; } .content {
margin:56px 0 48px 0; } footer { position:fixed; bottom:0; right:0; left:0; height:56px; } fixed doesn’t w ork ader oter llable ntent
header { position: absolute; top:0; right:0; left:0; height:56px; } .content
{ position: absolute; top:56px; bottom: 48px; right:0; left:0; overflow: auto; } footer { position: absolute; bottom:0; right:0; left:0; height:56px; } absolute ader oter llable ntent
header { position: absolute; top:0; right:0; left:0; height:56px; } .content
{ position: absolute; top:56px; bottom: 48px; right:0; left:0; overflow: auto; } footer { position: absolute; bottom:0; right:0; left:0; height:56px; } absolute doesn’t w ork ader oter llable ntent
None
iScroll
START FINISH DEMO
START FINISH DEMO
CSS3 Effects
CSS3 Effects -webkit-box-shadow
CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…)
CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…) -webkit-transform
None
Acceleration Hardware
START FINISH DEMO
START FINISH DEMO
Solution No CSS3 fanciness No animation on Android
JavaScript challenges
Debugging is hard
None
None
None
Execution Priority iOS prioritizes UI Android prioritizes JavaScript
Organization Code
Controllers Views Views Models ?
$ find public/javascripts/ -type f | wc -l 70 $
du -sh public/javascripts/ 916K public/javascripts/
Concated & Minified 161K
Lessons Learned
Lessons Learned mobile devices are slow-ish
Lessons Learned mobile devices are slow-ish the browser can but
the device can’t
Lessons Learned mobile devices are slow-ish the browser can but
the device can’t lack of consistency across Android devices
Resources http://www.html5rocks.com/tutorials/speed/html5/ http://bit.ly/grwebdev-mobile
Ordered List Thank you!
[email protected]
@bkeepers Brandon Keepers Grand Rapids
Web Development Group May 23, 2011