XFramework: the story so far

XFramework: the story so far

Why and how XFramework was built.

xframeworkjs.org

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

March 30, 2014
Tweet

Transcript

  1. Scalable Cross-platform Web Apps ! A long history of one

    solution
  2. @pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHSAD

    Smashing Magazine Author
  3. The beginning.

  4. 2011, Joined

  5. Worked mostly with (web) apps. ! • Architecture • Performance

    issues • UX • Mobile
  6. What’s web app?

  7. None
  8. Multidevice World

  9. None
  10. Übermegamultidevice World!

  11. How about RWD?

  12. Yeah, suuuuure…

  13. Simplest cross-platform web app flow

  14. Page #1 Module #1 Module #5 Module #2 Module #3

    Module #4 Desktop
  15. Tablet Page #1 Module #1 Module #2 Module #3* Page

    # Module
  16. Mobile Page #1 Module #1* Module #2 Page #2 Module

    #1* Module #3 Page #3 Module #1* Module #4
  17. Wait, wait. Sure?

  18. Research.

  19. None
  20. Like

  21. jQuery Mobile: Flip Toggle

  22. <select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> jQuery Mobile: Flip

    Toggle Example
  23. <select name="flip-2" id="flip-2" data-role="slider" tabindex="-1" class="ui-slider-switch"> <option value="off">Off</option> <option value="on">On</option>

    </select> ! <div role="application" class="ui-slider ui-slider-switch ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all"> <span class="ui-slider-label ui-slider-label-a ui-btn-active" role="img" style="width: 0%;">On</span> <span class="ui-slider-label ui-slider-label-b" role="img" style="width: 100%;">Off</span> <div class="ui-slider-inneroffset"> <a href="#" class="ui-slider-handle ui-slider-handle-snapping ui-btn ui-shadow" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="off" aria-valuetext="Off" title="Off" aria-labelledby="flip-2-label" style="left: 0%;"></a> </div> </div> jQuery Mobile: Flip Toggle Output
  24. jQuery Mobile: Good Support

  25. Dislike

  26. Just a library. No architecture behind.

  27. Performance.

  28. None
  29. Like

  30. Ext.application({ name: 'MyApp', profiles: ['Phone', 'Tablet'] }); ! Ext.define('MyApp.profile.Phone', {

    extend: 'Ext.app.Profile', ! views: ['Main'], ! isActive: function() { return Ext.os.is('Phone'); } }); Sencha Touch: Device Profiles
  31. Dislike

  32. Mobile only iOS, Android, BB, WP

  33. Size matters

  34. None
  35. User don’t need the whole app from the start.

  36. User don’t need the whole app at all.

  37. None
  38. Like

  39. • Flexible • Small & Simple • Possibility to define

    
 any architecture style
  40. Dislike

  41. • No architecture defined • No UI representation

  42. Concept.

  43. 1. Independent customizable modules 2. Lazy loading 3. Device profiles

    4. Device dependent templates 5. Easy UI elements
  44. Device Profiles

  45. XF.define(‘My App', function () { ! return new XF.App({ initialize:

    function() { }, ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, templatePath : 'tablet/', defaultAnimation: 'fade' }, !
  46. XF.define(‘MyApp’, function () { ! return new XF.App({ ! device:

    { types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, !
  47. Modules

  48. Module View Collection Model Model Model

  49. Module View Model

  50. XF.define('componentClassName', function () { ! return XF.Component.extend({ Collection: XF.Collection.extend({ url:

    '/rest/cities' }), // View Class === XF.View by default initialize: function() { // do some stuff here } }); ! });
  51. XF.define('componentClassName', ['collections/collectionClass', 'collections/viewClass'], function (Collection, View) { return XF.Component.extend({ Collection:

    Collection, View: View, initialize: function() { // do some stuff here } }); });
  52. Module loading

  53. <div data-component="componentClass" data-id=“componentID"> ! This text is visible while component

    is loading ! </div>
  54. <div data-component="componentClass" data-id="componentID" data-device-type="desktop"> ! This text is visible while

    component is loading ! </div>
  55. Customization

  56. <div data-component="componentClass" data- id=“componentID"> ! <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script>

    ! </div>
  57. Device-dependent templates

  58. <div data-component="componentClass" data-id="componentID"> <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script> </div> components/componentClass.js

    new ComponentClass(options); tmpl/deviceProfile/componentClass.tmpl tmpl/mobile/componentClass.tmpl // is visible rest/c
  59. <div data-component="componentClass" data-id=“componentID" /> components/componentClass.js // is visible new ComponentClass(options);

    tmpl/ deviceProfile/ componentClass.tmpl rest/componentClass/ // loading JS if it’s needed // rendering <div data-component="componentClass" data-id="componentID"> <ul class="xf-list" data-role="listview">
  60. ! Progressive Enhancement?

  61. ! Progressive Enhancement? Look ma, we still need backend

  62. UI Elements

  63. None
  64. <ul data-role="listview"> <li data-role="divider">A</li> <li> <h2>Header</h2> <p>No link</p> </li> <li><a

    href="#">Simple link</a></li> <li data-role="divider">Divider</li> <li> <h2>Header</h2> <p>Header and description</p> </li> </ul> Write Less
  65. <ul data-role="listview" data-skip-enhance="true" id="xf-8293" class="xf-listview"> <li class=" xf-li xf-li-divider">A</li> <li

    class="xf-li-static xf-li"> <div class="xf-li-wrap"> <h2 class="xf-li-header">Header</h2> <p class="xf-li-desc">No link</p> </div> </li> <li class=" xf-li"> <a href="#" class="xf-li-btn"> Simple link <div class="xf-btn-text"></div> </a> </li> <li class=" xf-li xf-li-divider">Divider</li> <li class=" xf-li"> <a href="#" class="xf-li-btn"> <div class="xf-btn-text"> <h2 class="xf-li-header">Header</h2> <p class="xf-li-desc">Header and description</p> </div> </a> </li> </ul> …do nothing
  66. Wrapping up.

  67. Pages.

  68. What if page switching could work together with router?

  69. <div class="xf-page" data-id="home">…</div> XF.define(function () { return new XF.App({ router:

    { routes: { '/': 'home' }, ! home: function() { // ... } },
  70. Catching User Interactions

  71. Touch Events Pointer Events Mouse Events D-Pad Events*

  72. Touch Events Pointer Events Mouse Events D-Pad Events* tap swipe

  73. Communication mechanics.

  74. // if component is not loaded or constructed // events

    will wait until it will be ! XF.trigger('component:componentID:eventName'); ! XF.trigger('component:componentClass:eventName'); Q of deferred
  75. Proofing the concept.

  76. tablet.govoyages.com

  77. Release.

  78. 12000 employees, 20 years of experience, thousands of customers. No

    chance for mistake.
  79. Calm down, dude!

  80. 1. How to deal
 with open-source?
 2. Legal Issues
 •

    What type of licence? • Why this one? • Intellectual property?
  81. Dec, 2013

  82. xframeworkjs.org

  83. Sugar.

  84. Generator npm install generator-xf yo xf yo xf:application init

  85. docs.xframeworkjs.org/

  86. Future-proof.

  87. XF ❤ Web Components

  88. Yet another framework!

  89. Yet another framework?

  90. Software Engineer should be technology and solution agnostic. ! The

    blind passion for the solution can ruin your growth as a professional.
  91. Learn. Contribute. Build.

  92. Thanks. ! @pukhalski