Super Fast Mobile Development

With only two weeks to build an iOS app and no prior knowledge of mobile development, here's how we built MapBox's MeatText.

Transcript

1. Building MeatText Super fast mobile development with Cordova + Backbone.js Garrett Miller @heyitsgarrett
2. @heyitsgarrett
4. DOODLE OR DIE
6. Let’s build MeatText!
7. +
8. (who also have iPhones) Find My Friends
10. Google:
11. • Easy • Quick • Fun So let’s make sharing a location...
12. • Easy • Quick • Fun (and do it in two weeks) SXSW! So let’s make sharing a location...
14. Create the Instagram of Maps
18. Implementation >
19. Apache Cordova •HTML/CSS + JavaScript •Renders in WebView •Supplement with plug-ins
20. meattext-ios - CordovaLib - MeatText - MeatText.xcodeproj - README.md - cordova - www
21. meattext-ios - CordovaLib - MeatText - MeatText.xcodeproj - README.md - cordova - www - cordova-2.4.0.js - index.html - loading.gif
22. meattext-ios - CordovaLib - MeatText - MeatText.xcodeproj - README.md - cordova - www - cordova-2.4.0.js - index.html - loading.gif
23. index.html
24. index.html
25. TROJAN HORSE
27. LIVE DEMO
28. Main viewport
29. •Stop tying data to the DOM •Turns your data into a Model •Listens for attribute changes, updates the Model
30. When the model changes, the view updates
31. When the model changes, the view updates PERFECT FOR MOBILE!
32. http://tiny.cc/bt7yuw
35. . . .
37. Model attributes
38. “coffee”
39. Events
40. Events
41. Attribute Changes
42. GOTCHAS
43. position: absolute/fixed is your friend
44. Main viewport
45. Animating CSS Transform = Jumpy
46. Animating CSS Transform = Jumpy X translate3D
47. translate3D
48. this is not always this
51. model.set(...) var model = this.model;
52. max file size in WebView <= 5 megapixels
53. width * height ≤ 5 * 1024 * 1024
54. width * height ≤ 5 * 1024 * 1024 width * height ≤ 3 * 1024 * 1024 on devices with less than 256 RAM:
56. elastic scrolling
57. -webkit-overflow-scrolling: touch;
58. 300ms tap delay
59. ghost clicks
60. fastclick/onpress plugins fix the delay and ghost clicks
63. @heyitsgarrett
64. meattext.com