Enterprise javascriptsession3

1,081 views

Published on

  • Be the first to comment

Enterprise javascriptsession3

  1. 1. Enterprise JavaScript Session 3 - History and the RestWednesday, November 7, 12
  2. 2. Hi, I’m TroyWednesday, November 7, 12
  3. 3. Hi, I’m Troy • Developing software Since 1979 • Initially Game Software in Assembly (6502 and x86) • Currently JavaScript, C#, Java, Objective-C • rockncoder@gmail.comWednesday, November 7, 12
  4. 4. jssaturday.com Nov. 10th, Long Beach Convention Center Discount code: RiaConsultingLLC Save $65!!!Wednesday, November 7, 12
  5. 5. Today’s AgendaWednesday, November 7, 12
  6. 6. Today’s Agenda • Somethings We MissedWednesday, November 7, 12
  7. 7. Today’s Agenda • Somethings We Missed • The History ObjectWednesday, November 7, 12
  8. 8. Today’s Agenda • Somethings We Missed • The History Object • jQuery MobileWednesday, November 7, 12
  9. 9. Today’s Agenda • Somethings We Missed • The History Object • jQuery Mobile • Backbone.jsWednesday, November 7, 12
  10. 10. Somethings We Missed • Typeof • Functions • ExceptionsWednesday, November 7, 12
  11. 11. typeof • The typeof operator detects the type of an object • It evaluates to a string which represents the object’s type • Unfortunately it is brokenWednesday, November 7, 12
  12. 12. typeof var msg = “hello there”; var bob = typeof msg; console.log(“msg is of type” + bob); /* prints - msg is of type string */Wednesday, November 7, 12
  13. 13. Type typeof Object “object” Array “object” Function “function” String “string” Number “number” Boolean “boolean” null “object” undefined “undefined”Wednesday, November 7, 12
  14. 14. typeof demoWednesday, November 7, 12
  15. 15. Function Properties • The “this” parameter • The arguments parameter • call & apply methods • length propertyWednesday, November 7, 12
  16. 16. The “this” parameter • Functions receive two hidden parameters • The first hidden parameter is this • It holds the context of the object which called the function • When called from global space, this points to the window object • Can modify the calling object via thisWednesday, November 7, 12
  17. 17. The arguments parameter • The second hidden parameter is arguments • It contains a list of all the parameter passed to the function • arguments is array-like, values in it can be index, but no other array methodsWednesday, November 7, 12
  18. 18. arguments demoWednesday, November 7, 12
  19. 19. call & apply methods • The call & apply methods both allow you to pass the this object to a function • The difference is in how you pass parameters to the function • call: parameters sent individually • apply: parameters sent in an arrayWednesday, November 7, 12
  20. 20. call & apply methods demoWednesday, November 7, 12
  21. 21. The length property • The length property holds the number parameters the function was declared withWednesday, November 7, 12
  22. 22. length property demoWednesday, November 7, 12
  23. 23. Hands-on ExerciseWednesday, November 7, 12
  24. 24. Hands-on Exercise • Use arguments to create a function, calcSum, which returns the sum of an unknown number of numbers passed to itWednesday, November 7, 12
  25. 25. Hands-on Exercise • Use arguments to create a function, calcSum, which returns the sum of an unknown number of numbers passed to it • The following should all work: calcSum(1,2,3); calcSum(4,5,6,7,8); calcSum(100,200,450,74);Wednesday, November 7, 12
  26. 26. Hands-on Exercise, pt. 2Wednesday, November 7, 12
  27. 27. Hands-on Exercise, pt. 2 • Make the calcSum function more robust by filtering non-numbers out of the summing functionWednesday, November 7, 12
  28. 28. Hands-on Exercise, pt. 2 • Make the calcSum function more robust by filtering non-numbers out of the summing function • The following should all work: calcSum(1,2, true,3); calcSum(4,5,”bob”,6,7,8); calcSum(100,200,calcSum,450,74);Wednesday, November 7, 12
  29. 29. Exceptions • Like other languages JavaScript has exceptions • The exceptions can also be thrown using the throw statement: if(typeof a !== ‘number’ || typeof b !== ‘number’){ throw { name: ‘TypeError’, message: ‘add needs numbers‘ }; }Wednesday, November 7, 12
  30. 30. Exceptions function calcBob () { try { /* operation which might generate an exception */ } catch(e) { /* handle exception */ } }Wednesday, November 7, 12
  31. 31. The History ObjectWednesday, November 7, 12
  32. 32. The History Problem • Modern JavaScript web apps have three problems with regards to history: • They aren’t navigate-able by web crawlers • They don’t have bookmark-able URLs • They don’t behave correctlyWednesday, November 7, 12
  33. 33. history problem demoWednesday, November 7, 12
  34. 34. The History Object • The History Object is part of the window object • The API is very small, three methods and one property • methods: back(), forward(), go() • Properties: lengthWednesday, November 7, 12
  35. 35. The History Object • The History object can only move forward or backwards to places the user has already been • Not able to add items to history • Not very usefulWednesday, November 7, 12
  36. 36. HTML5 History • pushState() • replaceState() • popstate event • history.stateWednesday, November 7, 12
  37. 37. pushState() • pushState(state, title, URL); • state - a JS object associated with the new history entry • title - currently ignored by browser • URL - the new history entry’s URLWednesday, November 7, 12
  38. 38. replaceState() • replaceState(state, title, URL); • Behaves exactly like pushState except it modifies the current history entry instead of creating a new oneWednesday, November 7, 12
  39. 39. popstate event • A popstate event is fired by the browser every time the active history entry changesWednesday, November 7, 12
  40. 40. history.state • var currentState = history.state; • Allows you to read the current state of the history objectWednesday, November 7, 12
  41. 41. History polyfills • HTML5 pushState is supported on most modern browsers • Older browsers will need to use a polyfill like History.jsWednesday, November 7, 12
  42. 42. history object demoWednesday, November 7, 12
  43. 43. https://github.com/ balupton/history.js/wiki/ Intelligent-State-HandlingWednesday, November 7, 12
  44. 44. jQuery MobileWednesday, November 7, 12
  45. 45. Quick Intro to jQuery Mobile A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily theme-able design.Wednesday, November 7, 12
  46. 46. Demo #1Wednesday, November 7, 12
  47. 47. Page Structure • Header • Footer • Content AreaWednesday, November 7, 12
  48. 48. Header • Page Title • Left Button • Right ButtonWednesday, November 7, 12
  49. 49. Footer • Title • ButtonsWednesday, November 7, 12
  50. 50. Content Area This is where your stuff goes.Wednesday, November 7, 12
  51. 51. How It Works • Dynamic DOM Manipulation • HTML5 Pseudo-Attributes • There is no free lunchWednesday, November 7, 12
  52. 52. Dynamic DOM Manipulation demoWednesday, November 7, 12
  53. 53. HTML5 Pseudo- Attributes • JQM Uses Pseudo-Attributes (data-) • Standard Browser Behavior - Ignore Unknown Attributes • Allows for Some Functionality on low-end browsersWednesday, November 7, 12
  54. 54. Form Elements (aka widgets) • buttons • sliders • radio buttons • checkboxes • select menus • etc.Wednesday, November 7, 12
  55. 55. Lists • Basic Lists • Nested Lists • List Dividers • Split Lists • etc.Wednesday, November 7, 12
  56. 56. Multi-Page Apps • basic setup • transitions • passing data between pagesWednesday, November 7, 12
  57. 57. EventsWednesday, November 7, 12
  58. 58. Touch • tap • taphold • swipe • swipeleft • swiperightWednesday, November 7, 12
  59. 59. Page • Page Load • Page Change • Page Transitions • Page Initialization • Page Remove • LayoutWednesday, November 7, 12
  60. 60. Page Load • pagebeforeload • pageload • pageloadfailedWednesday, November 7, 12
  61. 61. Page Change • pagebeforechange • pagechange • pagechangefailedWednesday, November 7, 12
  62. 62. Page Transition • pagebeforeshow • pageshow • pagebeforehide • pagehideWednesday, November 7, 12
  63. 63. Page Create • pagebeforecreate • pagecreate • pageinitWednesday, November 7, 12
  64. 64. Miscellaneous • pageremove • updatelayout • orientationchangeWednesday, November 7, 12
  65. 65. page events demoWednesday, November 7, 12
  66. 66. PerformanceTips • Watch the size of the DOM • Selectors • Narrow Them • Cache Them • Reference the active PageWednesday, November 7, 12
  67. 67. Hands-on ExerciseWednesday, November 7, 12
  68. 68. Hands-on Exercise • Using jsFiddle.net, create a simply jQuery Mobile pageWednesday, November 7, 12
  69. 69. Hands-on Exercise • Using jsFiddle.net, create a simply jQuery Mobile page • It should have a header, a footer, and at least on form element on the pageWednesday, November 7, 12
  70. 70. Backbone.jsWednesday, November 7, 12
  71. 71. Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. Requires Underscore and jQuery.Wednesday, November 7, 12
  72. 72. Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. Wednesday, November 7, 12
  73. 73. Backbone.js • Handles the data on client • Models • Views • CollectionsWednesday, November 7, 12
  74. 74. ModelsWednesday, November 7, 12
  75. 75. ViewsWednesday, November 7, 12
  76. 76. CollectionsWednesday, November 7, 12
  77. 77. Summary • Typeof • Functions • Exceptions • The History Object • jQuery Mobile • Backbone.jsWednesday, November 7, 12

×