Pablo Villalba -

1,812 views

Published on

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,812
On SlideShare
0
From Embeds
0
Number of Embeds
76
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Pablo Villalba -

  1. 1. Mobile development
  2. 2. @micho
  3. 3. I code ruby and javascriptspecializing on user experience
  4. 4. I founded Teamboxshare tasks and files with your team
  5. 5. This presentation will be onlineI will tweet the link from @micho
  6. 6. Mobile development Mobile Development with HTML5 and Client-Side Javascript: Development Patterns, Backbone, APIs.Writing cross-browser apps for multiple devices with a single code base and providing the best user experience. Optimizing resources for bandwith and better load times. Caching. Achieving local-fast apps. Leveraging native look and feel and native features.
  7. 7. Mobile development Usable and fast Mobile Development with HTML5 and Client-Side Javascript: Development Patterns, Backbone, APIs.Writing cross-browser apps for multiple devices with a single code base and providing the best user experience. Optimizing resources for bandwith and better load times. Caching. Achieving local-fast apps. Leveraging native look and feel and native features.
  8. 8. 1. Design for mobile2. Client-side patterns3. Load time performance
  9. 9. Do you remember when...The web was made of static content
  10. 10. Then pages got more complicated We processed server-side code<?php ...
  11. 11. And development changed, usingJS libraries and MVC frameworks
  12. 12. Our tools have changed, but the platform was always the PC
  13. 13. Mobile is a brave new world
  14. 14. The good Touch UI App-storesGPS, accelerometer, etc
  15. 15. The bad Limited resources Smaller displaysApps need to be adapted for touch
  16. 16. The ugly Unknown browser Unknown device resolutionDifficulty supporting native features
  17. 17. What makes for great user experience? Good Design & Speed
  18. 18. 1. Design for mobile
  19. 19. What does Good Design mean in mobile?
  20. 20. Design for fingertips
  21. 21. Design for fingertips
  22. 22. Design for smaller screens
  23. 23. Design for smaller screens
  24. 24. Navigation differs
  25. 25. Start with the essentialsand add extras if you can
  26. 26. contentmobile
  27. 27. content + navigation tablet mobile
  28. 28. content + navigation + extras tablet mobile desktop
  29. 29. (i didn’t make that up)the cool guys call it responsive design
  30. 30. prepare layout so your content can resizeuse onResize events to adapt your content
  31. 31. now for browsers
  32. 32. mobile is mostly webkit
  33. 33. modern JS and CSS
  34. 34. but HTML5 support is not universal just yet
  35. 35. modernizr.jsdetect native HTML5 support in your device easily
  36. 36. overflow: auto scrolling in touch devices is stillprety quirky if you use scrollable divs
  37. 37. dropdowns and hover in touch devices there’s no hoverrevisit your UI to make sure everything works
  38. 38. and then, there’s JS
  39. 39. jQuery and others are still fine, but....
  40. 40. if you are only targeting mobile, there are specific JS libraries zepto.js 7 Kb (vs jQuery, which is 31 Kb) targets only
  41. 41. and some specific CSS frameworks jQuery mobile Adds powerful CSS conventions to create mobile UIs
  42. 42. and one more thing! PhoneGap, Appcelerator’s Titanium These apps allow you to package your web app asa native application, so you may place it in App Stores or leverage platform specific features (like camera)
  43. 43. PhoneGap, Appcelerator’s Titanium These apps allow you to circumvent the cross-domain policy for web apps, so you canperform AJAX requests to and from any domain
  44. 44. 2. Client-side patterns
  45. 45. Web apps will work mostly fine, but let’s discuss web apps
  46. 46. When users access yoursite.com you have two options
  47. 47. a) Serve an responsive app that adapts the content to mobile UI with CSS and JS Pros: Less code to maintainCons: You are probably sending too much content
  48. 48. b) Serve a specific app for mobile Pros: Specific and optimized contentsCons: You need to maintain separate versions
  49. 49. Detecting mobile browsers You can do browser sniffing to detect the deviceYou can use special meta directives for mobile (zoom, icon) You can use JS to detect dimensions of the viewport
  50. 50. Sophisticated web apps are more data oriented There’s a new generation of client-side frameworks
  51. 51. Backbone.jsa “MVC” for the browser
  52. 52. normally you wouldadd JS for every action that’s hard to maintain
  53. 53. normally you would ask the DOM for datasince we use APIs, that seems redundant
  54. 54. you used to handle clickswith AJAX to render quickly it’s hard to structure views with AJAX
  55. 55. Backbone.js Your server sends JSON,the browser builds the page locallywith Backbone and view templates
  56. 56. Model, Collection ViewController (Router)
  57. 57. Model, Collection Holds JSON data and methods for itE.g.: Tweet (model), timeline (collection) { user: {id: 2, name: “micho”}, tweet: “hai!” }
  58. 58. Views Linked to a model or collection Creates HTML from the data andlistens for changes to re-render itself view = new Views.Tweet({ model: tweet }); $(“#content”).append(view.render().el);
  59. 59. Controllers Routes pages to render actions This way you can link to /#!/page and change the view without navigating away. Faster!http://site.com/#!/activities will render the Activities
  60. 60. Example Twitter appModel: User View: My statsModel: Tweet View: Tweet View: TimelineCollection: Timeline View: New tweet
  61. 61. Example Twitter appNew tweet My stats 5 tweets Timeline Tweet Tweet Tweet
  62. 62. Example Twitter appNew tweet My stats 6 tweets Timeline Tweet Posting a new tweet Tweet updates the collection. Tweet Tweet Views reflect the state
  63. 63. How Backbone loads data Bootstrap load the initial stateNavigating can get new data with AJAX, through your server’s API You can use Websockets and Push
  64. 64. Serving templatesBackbone uses view templates to display data. Your server needs to send these as a JS file. “@{{user_name}} said: {{tweet}”
  65. 65. Backbone is well suited for mobile Minimal feature set JS and data-centric Built over jQuery and Underscore
  66. 66. Other alternatives... Spine & Spine MobileSproutcore – more sophisticatedSencha – adds UI elements too
  67. 67. 3. Load time performance
  68. 68. speed matters
  69. 69. slow gunners die
  70. 70. Your app loads like this: HTML page CSS and images in parallel JS: <scripts> block the page load Templates, if your app uses them
  71. 71. Every ms matters!HTML Cache aggressively, minimize DOM CSS Minify, use sprites, adopt conventions JS Minify, use async loaders
  72. 72. Page load experience If you’re building JS apps, your HTML should be minimal and let the JS populate it.Add spinners and provide constant feedback to users.
  73. 73. Asset cachingServe assets with md5s of the content and no-expire cache headers application-76fbac76876.js styles-7f2e1ac10bb.css
  74. 74. HTML5‘s applicationCache You can “remember” the last HTML you saw to make the page load experience extra fast!Awesome for offline apps or faster page loading
  75. 75. That’s the intro I wish I had read I hope it was useful for you
  76. 76. We’ve been using all this to build our collaboration platform So go ahead and check it out!
  77. 77. Thanks!I’m @micho on Twitter

×