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
700
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
440
Building the GitHub workspace app
bkeepers
PRO
1
330
Contributing to Your Career
bkeepers
PRO
3
680
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
890
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.3k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
490
Tending Your Open Source Garden, v2
bkeepers
PRO
1
550
Tending Your Open Source Garden
bkeepers
PRO
2
940
The Loyal Renegade
bkeepers
PRO
3
820
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
SRE、開発、QAが協業して挑んだリリースプロセス改革@SRE Kaigi 2025
nealle
3
4.1k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
sappoRo.R #12 初心者セッション
kosugitti
0
230
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Spring gRPC について / About Spring gRPC
mackey0225
0
220
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
Grafana Cloudとソラカメ
devoc
0
140
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
BBQ
matthewcrist
86
9.5k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Done Done
chrislema
182
16k
Navigating Team Friction
lara
183
15k
Six Lessons from altMBA
skipperchong
27
3.6k
Visualization
eitanlees
146
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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