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
670
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
330
Building the GitHub workspace app
bkeepers
PRO
1
250
Contributing to Your Career
bkeepers
PRO
2
590
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
780
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
7
1.2k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
350
Tending Your Open Source Garden, v2
bkeepers
PRO
1
420
Tending Your Open Source Garden
bkeepers
PRO
2
810
The Loyal Renegade
bkeepers
PRO
3
670
Other Decks in Programming
See All in Programming
2024 コーディング研修
ckazu
2
580
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
320
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
48
15k
禅の心を手に入れよ
eltociear
2
460
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
510
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
370
Folding Cheat Sheet #4
philipschwarz
PRO
0
110
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.3k
使ってみよう Azure AI Document Intelligence
kosmosebi
2
380
TSKaigi 2024 - 新サービス Progate Path の演習で TypeScript を採用して見えた教材観点からの利点と課題
makotoshimazu
1
180
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Featured
See All Featured
Faster Mobile Websites
deanohume
300
30k
Clear Off the Table
cherdarchuk
85
310k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Web development in the modern age
philhawksworth
203
10k
For a Future-Friendly Web
brad_frost
172
9k
How to Ace a Technical Interview
jacobian
273
22k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
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