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
720
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
490
Building the GitHub workspace app
bkeepers
PRO
1
370
Contributing to Your Career
bkeepers
PRO
4
730
A Maturity Model for Embracing Open Source Software
bkeepers
PRO
3
920
Open Source Principles for Internal Engineering Teams
bkeepers
PRO
8
1.4k
Carbon, Automobiles, Bebop & Fashion
bkeepers
PRO
1
540
Tending Your Open Source Garden, v2
bkeepers
PRO
1
610
Tending Your Open Source Garden
bkeepers
PRO
2
980
The Loyal Renegade
bkeepers
PRO
3
900
Other Decks in Programming
See All in Programming
Team operations that are not burdened by SRE
kazatohiei
1
260
5つのアンチパターンから学ぶLT設計
narihara
1
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
C++20 射影変換
faithandbrave
0
540
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
500
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
930
WindowInsetsだってテストしたい
ryunen344
1
200
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
220
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Unsuck your backbone
ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Facilitating Awesome Meetings
lara
54
6.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Six Lessons from altMBA
skipperchong
28
3.9k
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