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
740
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
3
510
Building the GitHub workspace app
bkeepers
PRO
1
390
Contributing to Your Career
bkeepers
PRO
4
770
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
950
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
8
1.4k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
570
Tending Your Open Source Garden, v2
bkeepers
PRO
1
640
Tending Your Open Source Garden
bkeepers
PRO
2
1k
The Loyal Renegade
bkeepers
PRO
3
940
Other Decks in Programming
See All in Programming
品質ワークショップをやってみた
nealle
0
640
CSC305 Lecture 10
javiergs
PRO
0
270
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.6k
CSC509 Lecture 08
javiergs
PRO
0
260
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
三者三様 宣言的UI
kkagurazaka
0
250
Cursorハンズオン実践!
eltociear
2
1.2k
オンデバイスAIとXcode
ryodeveloper
0
180
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
460
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.9k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How to Ace a Technical Interview
jacobian
280
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Speed Design
sergeychernyshev
32
1.2k
Designing for Performance
lara
610
69k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Statistics for Hackers
jakevdp
799
220k
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
76
A Tale of Four Properties
chriscoyier
161
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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