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
370
Building the GitHub workspace app
bkeepers
PRO
1
270
Contributing to Your Career
bkeepers
PRO
3
610
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
810
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.2k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
380
Tending Your Open Source Garden, v2
bkeepers
PRO
1
450
Tending Your Open Source Garden
bkeepers
PRO
2
850
The Loyal Renegade
bkeepers
PRO
3
720
Other Decks in Programming
See All in Programming
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Trial
cairolibrary720
1
130
CSC307 Lecture 08
javiergs
PRO
0
330
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
Product Management LT会_クアンド新家
shinshin
0
210
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
Xcode 16のPreviewModifierと@Previewableを活用した効率的なプレビュー方法の考察
ojun9
2
160
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
4
590
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Designing with Data
zakiwarfel
96
5k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Unsuck your backbone
ammeep
666
57k
A Modern Web Designer's Workflow
chriscoyier
689
190k
4 Signs Your Business is Dying
shpigford
178
21k
Ruby is Unlike a Banana
tanoku
96
10k
Building Adaptive Systems
keathley
34
2k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
325
21k
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