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
670
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
320
Building the GitHub workspace app
bkeepers
PRO
1
240
Contributing to Your Career
bkeepers
PRO
2
590
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
770
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.2k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
350
Tending Your Open Source Garden, v2
bkeepers
PRO
1
420
Tending Your Open Source Garden
bkeepers
PRO
2
810
The Loyal Renegade
bkeepers
PRO
3
660
Other Decks in Programming
See All in Programming
Polars入門
daikikatsuragawa
1
170
禅の心を手に入れよ
eltociear
1
290
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
300
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
460
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
Elm Form Validation
bkuhlmann
0
510
Try creating your own orderedmap
kazamori
1
180
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.5k
Deep Dive into React Stream/Serialize
mugi_uno
3
650
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
180
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
14
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Producing Creativity
orderedlist
PRO
338
39k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Atom: Resistance is Futile
akmur
260
25k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
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