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
710
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
450
Building the GitHub workspace app
bkeepers
PRO
1
340
Contributing to Your Career
bkeepers
PRO
3
690
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
900
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.3k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
500
Tending Your Open Source Garden, v2
bkeepers
PRO
1
560
Tending Your Open Source Garden
bkeepers
PRO
2
950
The Loyal Renegade
bkeepers
PRO
3
840
Other Decks in Programming
See All in Programming
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
290
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
240
バイセルでの AI を用いた開発の取り組み ~ Devin, Cursor の活用事例・知見共有 ~
umaidashi
0
140
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.2k
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
350
Learning Kotlin with detekt
inouehi
1
240
DenoでOpenTelemetryに入門する
yotahada3
1
110
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
170
はじめての Go * WASM * OCR
sgash708
1
150
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
910
変化の激しい時代における、こだわりのないエンジニアの強さ
satoshi256kbyte
1
980
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
5
610
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Being A Developer After 40
akosma
89
590k
Adopting Sorbet at Scale
ufuk
75
9.3k
BBQ
matthewcrist
87
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Six Lessons from altMBA
skipperchong
27
3.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
Statistics for Hackers
jakevdp
797
220k
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