Save 37% off PRO during our Black Friday Sale! »

Don't Fear The Hybrid!

45170771ad3f81f46a94dd4d4776b29d?s=47 Patrick Seda
October 17, 2014

Don't Fear The Hybrid!

Making Kickass Mobile Enterprise Apps

45170771ad3f81f46a94dd4d4776b29d?s=128

Patrick Seda

October 17, 2014
Tweet

Transcript

  1. ConnectJS/TiConnect – October 17, 2014 – Atlanta, GA Don’t! FEAR!

    The HYBRID!
  2. Patrick Seda @pxtrick patrickseda@gmail.com •  Lead Mobile Architect @propelics • 

    Titanium Fanboy … Appc Titan •  Creator of Mr. Edison Children’s App
  3. What! Is! HYBRID! ?!

  4. Hybrid Native App Wrapper + Web Application

  5. Hybrid Combine two things BADASS!

  6. Hybrid so BADASS NOT QUITE!

  7. Hybrid

  8. vs. Consumer! ENTERPRISE!

  9. What is Enterprise? •  A Business with multiple divisions • 

    Business strategy is based upon cohesive interaction •  Divisions are financially dependent on each other •  Core set of metrics and measures
  10. What is Enterprise? •  A Business with multiple divisions • 

    Business strategy is based upon cohesive interaction •  Divisions are financially dependent on each other •  Core set of metrics and measures
  11. Enterprise vs. Consumer “Enterprise” Apps == B2E / B2B (ish)

  12. Enterprise vs. Consumer “Consumer” Apps == B2C / B2B (ish)

  13. in Enterprise! EXPECT! What to!

  14. Reasonable Expectations •  Heightened Security •  Interact with Existing Data

    Sources •  Handle offline / poor connection, intermittent data sync •  App architecture had BETTER support future expansion •  Charts and graphs!
  15. Reasonable Expectations

  16. Reasonable Expectations

  17. CHARTING! Techniques!

  18. Charts and Graphs

  19. Charts and Graphs

  20. Charts and Graphs

  21. HELP !! Charts and Graphs We need!

  22. Charting Libraries Google Charts

  23. Charting Libraries Google Charts Common Charts : Visual Styling :

    Interactivity : Cost : NOTE : Where: Excellent Excellent Excellent FREE Must be online to use ! (developers.google.com/chart)! !
  24. Charting Libraries D3.js

  25. Charting Libraries D3.js Common Charts : Visual Styling : Interactivity

    : Cost : Where: Excellent Excellent Excellent FREE ! (d3js.org)! !
  26. Charting Libraries Highcharts

  27. Charting Libraries Highcharts Common Charts : Visual Styling : Interactivity

    : Cost : Where: Excellent Excellent Excellent Freemium … $390 - $4500 ! (highcharts.com)! !
  28. Charting Libraries gRaphael

  29. Charting Libraries gRaphael Common Charts : Visual Styling : Interactivity

    : Cost : Where: Good Limited Limited FREE ! (g.raphael.com)! !
  30. ANATOMY! Of the Hybrid!

  31. Application WebView HTML / CSS / JS JS Chart Library

    Composition
  32. HTML Composition JS Window WebView Creation Sequence: <Window>! <WebView />!

    </Window>!
  33. Interaction HTML JS App-to-Chart Communication: App Ti.App.fireEvent(…);! WebView with Events

  34. Interaction HTML App WebView Chart-to-App Communication: Ti.App.fireEvent(…);! JS with Events

  35. Interaction HTML JS WebView App-to-Chart Communication: App webView.evalJS(…);! without Events

  36. Interaction HTML App WebView Chart-to-App Communication: // NOPE! JS without

    Events
  37. Interaction // Event handler in HTML/JS.! function render(e) {…};! Ti.App.addEventListener(‘renderChart’,

    render);! (In HTML/JS) // Send data to the chart.! Ti.App.fireEvent(‘renderChart’, {…});! (In App) App-to-Chart Communication: with Events
  38. Interaction // Event handler in app.! function chartCB(e) {…};! Ti.App.addEventListener(‘chartTapped’,

    chartCB);! (In App) // Send data to the app.! Ti.App.fireEvent(‘chartTapped’, {…});! (In HTML/JS) with Events Chart-to-App Communication:
  39. Interaction // No event handler, just the method to render

    data.! function render(chartInfo) {…};! (In HTML/JS) // Send data to the chart.! var data = JSON.stringify(chartInfo);! webView.evalJS(‘render(‘ + data + ‘)’);! (In App) App-to-Chart Communication: without Events
  40. WELCOME! To the Real World!

  41. The Real World

  42. The Real World WTF! WTF!

  43. The Real World

  44. The Real World “The WebView is one of the most

    EXPENSIVE components to create in terms of resources” - Titanium docs
  45. The Real World

  46. The Real World Labels! & Views! WebView!

  47. The Real World “Including WebViews in your TableViewRows is a

    RECIPE FOR SLUGGISH performance.” - Titanium docs
  48. The Real World

  49. The Real World Section! Headers!

  50. The Real World

  51. WebView Event Quiz When is the “load” event fired? A. 

    After the WebView contents have loaded B.  After the WebView contents have rendered C.  Never
  52. WebView Event Quiz When is the “load” event fired? A. 

    After the WebView contents have loaded B.  After the WebView contents have rendered C.  Never
  53. WebView Event Quiz When do the contents start loading? A. 

    After the Window has been laid out B.  After the WebView has been laid out C.  Before the WebView has been laid out
  54. WebView Event Quiz When do the contents start loading? A. 

    After the Window has been laid out B.  After the WebView has been laid out C.  Before the WebView has been laid out * “postlayout” event
  55. WebView Event Quiz When is the WebView laid out? A. 

    Before the Window “postlayout” event B.  After the WebView “focus” event C.  Whenever the OS feels like it
  56. WebView Event Quiz When is the WebView laid out? A. 

    Before the Window “postlayout” event B.  After the WebView “focus” event C.  Whenever the OS feels like it
  57. WebView Event Quiz Order of events: 1.  “postlayout” 2.  “beforeload”

    3.  “load” (App lays out Views As-Needed)
  58. Performance Views are being laid out …

  59. Performance “postlayout” and “load” “postlayout” and “load”

  60. Performance “postlayout” and “load”

  61. Performance “postlayout” and “load” “postlayout” and “load” “postlayout” and “load”

  62. Performance WebView loads are throttled … NO big spikes! NO

    crashes!
  63. Reasonable Expectations •  Kickass Charts •  Performance •  Don’t Be

    So Lazy Enterprise Charting! ✔ ✔ ✔
  64. SUMMARY! Amazing charts!! Happy clients!! Don’t FEAR the HYBRID! Great

    performance!!