Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Lessons Learned in Mobile Web App Development

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

Lessons Learned in Mobile Web App Development

Avatar for Brandon Keepers

Brandon Keepers PRO

May 23, 2011

More Decks by Brandon Keepers

See All by Brandon Keepers
Automating Software Development
Avatar for Brandon Keepers bkeepers
PRO
3
610
Building the GitHub workspace app
Avatar for Brandon Keepers bkeepers
PRO
1
500
Contributing to Your Career
Avatar for Brandon Keepers bkeepers
PRO
4
850
A Maturity Model for Embracing Open Source Software
Avatar for Brandon Keepers bkeepers
PRO
3
1k
Open Source Principles for Internal Engineering Teams
Avatar for Brandon Keepers bkeepers
PRO
8
1.5k
Carbon, Automobiles, Bebop & Fashion
Avatar for Brandon Keepers bkeepers
PRO
1
690
Tending Your Open Source Garden, v2
Avatar for Brandon Keepers bkeepers
PRO
1
750
Tending Your Open Source Garden
Avatar for Brandon Keepers bkeepers
PRO
2
1.1k
The Loyal Renegade
Avatar for Brandon Keepers bkeepers
PRO
3
1.1k

Other Decks in Programming

See All in Programming
Apple Intelligence を用いた個人情報誤送信防止、及びユーザーリクエスト体験の改善について
Avatar for Yuki Kuwashima yukiny
0
270
setup-vp GitLab対応の裏側
Avatar for Naoki Haba naokihaba
0
140
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
1.5k
AI が書く Go コードの品質を劇的に向上させる Linter: “declscope”
Avatar for mpyw mpyw
0
460
Go × SIMDで高速化するベクトル検索 ~ルーフラインモデルでSIMDが効く境界を探れ！ ~
Avatar for po3rin po3rin
1
5.7k
JAWS-UG 東京支部が始める、JAWS-UG支部コラボ / JAWS-UG lunchtime LT Collaboration
Avatar for y-ohgi y0hgi
0
170
GitHubハンズオン講座 — 実務レベルのチーム開発のフローを身につけよう
Avatar for junhat6 junhat6
0
110
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
3.1k
wkhtmltopdfの次どうするか問題2026
Avatar for Shinichi Maeshima willnet
2
1.8k
JRuby: Past, Present, and Future
Avatar for headius headius
0
220
KiroのSpecで「五目並べ」を作ってみる
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
330
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
32
14k

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
699
190k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
750
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.2k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
520

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