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
380
Building the GitHub workspace app
bkeepers
PRO
1
290
Contributing to Your Career
bkeepers
PRO
3
630
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
830
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.3k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
410
Tending Your Open Source Garden, v2
bkeepers
PRO
1
470
Tending Your Open Source Garden
bkeepers
PRO
2
870
The Loyal Renegade
bkeepers
PRO
3
740
Other Decks in Programming
See All in Programming
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
590
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
110
私のEbitengineの第一歩
qt_luigi
0
440
What you can do with Ruby on WebAssembly
kateinoigakukun
0
160
1人で挑むSwiftコンパイラ 〜型システム入門編〜
s_shimotori
0
340
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
760
dRuby 入門者によるあなたの身近にあるdRuby 入門
makicamel
4
350
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
4
1.6k
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
520
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
160
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Testing 201, or: Great Expectations
jmmastey
36
7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Being A Developer After 40
akosma
84
590k
Clear Off the Table
cherdarchuk
91
320k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Music & Morning Musume
bryan
46
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
KATA
mclloyd
27
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
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