Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lessons Learned in Mobile Web App Development

Avatar for Brandon Keepers Brandon Keepers
PRO
May 23, 2011
Programming
16
720

Lessons Learned in Mobile Web App Development

Avatar for Brandon Keepers

Brandon Keepers
PRO

May 23, 2011
Tweet

More Decks by Brandon Keepers

See All by Brandon Keepers
Automating Software Development
Avatar for Brandon Keepers bkeepers
PRO
3
470
Building the GitHub workspace app
Avatar for Brandon Keepers bkeepers
PRO
1
360
Contributing to Your Career
Avatar for Brandon Keepers bkeepers
PRO
4
710
A Maturity Model for Embracing Open Source Software
Avatar for Brandon Keepers bkeepers
PRO
3
910
Open Source Principles for Internal Engineering Teams
Avatar for Brandon Keepers bkeepers
PRO
8
1.3k
Carbon, Automobiles, Bebop & Fashion
Avatar for Brandon Keepers bkeepers
PRO
1
520
Tending Your Open Source Garden, v2
Avatar for Brandon Keepers bkeepers
PRO
1
580
Tending Your Open Source Garden
Avatar for Brandon Keepers bkeepers
PRO
2
960
The Loyal Renegade
Avatar for Brandon Keepers bkeepers
PRO
3
860

Other Decks in Programming

See All in Programming
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
110
2ヶ月で生産性2倍、お買い物アプリ「カウシェ」4チーム同時改善の取り組み
Avatar for ike ike002jp
1
110
Designing Your Organization's Test Pyramid ( #scrumniigata )
Avatar for teyamagu teyamagu
PRO
1
100
M5UnitUnified 最新動向 2025/05
Avatar for GOB gob
0
120
個人開発の学生アプリが企業譲渡されるまで
Avatar for akidon0000 akidon0000
2
1.2k
「理解」を重視したAI活用開発
Avatar for FastDOCTOR fast_doctor
0
270
Ruby's Line Breaks
Avatar for yui-knk yui_knk
4
2.8k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
Avatar for ALGO ARTIS algoartis
0
160
Vibe Coding の話をしよう
Avatar for schroneko schroneko
13
3.7k
AI時代の開発者評価について
Avatar for Ayuusu ayumuu
0
230
The Implementations of Advanced LR Parser Algorithm
Avatar for Junichi Kobayashi junk0612
2
1.3k
インプロセスQAにおいて大事にしていること / In-process QA Meetup
Avatar for MEDLEY, INC. medley
0
140

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
45
9.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
Code Review Best Practice
Avatar for Trisha Gee trishagee
67
18k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
10k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
30
2.3k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
71
4.7k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k

Transcript

  1. Ordered List Brandon Keepers Grand Rapids Web Development Group May

    23, 2011 Lessons Learned in Mobile Web App Development

  2. ?

  3. ~6 months

  4. The App

  5. The App Static HTML

  6. The App Static HTML CSS

  7. The App Static HTML CSS JSON API

  8. The App Static HTML CSS JSON API JavaScript

  9. The App Static HTML CSS JSON API JavaScript JavaScript

  10. The App Static HTML CSS JSON API JavaScript JavaScript JavaScript

  11. CSS challenges

  12. -webkit-* iOS Android Blackberry Palm Symbian

  13. position: fixed;

  14. Header Footer Scrollable Content

  15. ader oter llable ntent

  16. 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

  17. 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

  18. 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

  19. 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
  20. None

  21. iScroll

  22. START FINISH DEMO

  23. START FINISH DEMO

  24. CSS3 Effects

  25. CSS3 Effects -webkit-box-shadow

  26. CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…)

  27. CSS3 Effects -webkit-box-shadow background: -webkit-gradient(…) -webkit-transform

  28. None

  29. Acceleration Hardware

  30. START FINISH DEMO

  31. START FINISH DEMO

  32. Solution No CSS3 fanciness No animation on Android

  33. JavaScript challenges

  34. Debugging is hard

  35. None
  36. None
  37. None

  38. Execution Priority iOS prioritizes UI Android prioritizes JavaScript

  39. Organization Code

  40. Controllers Views Views Models ?

  41. $ find public/javascripts/ -type f | wc -l 70 $

    du -sh public/javascripts/ 916K public/javascripts/

  42. Concated & Minified 161K

  43. Lessons Learned

  44. Lessons Learned mobile devices are slow-ish

  45. Lessons Learned mobile devices are slow-ish the browser can but

    the device can’t

  46. Lessons Learned mobile devices are slow-ish the browser can but

    the device can’t lack of consistency across Android devices

  47. Resources http://www.html5rocks.com/tutorials/speed/html5/ http://bit.ly/grwebdev-mobile

  48. Ordered List Thank you! [email protected] @bkeepers Brandon Keepers Grand Rapids

    Web Development Group May 23, 2011