Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XFramework: build cross-platform responsive web...

XFramework: build cross-platform responsive web apps easily

Ilya Pukhalski

December 16, 2013
Tweet

More Decks by Ilya Pukhalski

Other Decks in Programming

Transcript

  1. — Responsive Web Design is difficult to apply for web

    apps — No truly cross-platform high-level frameworks on the market share — It's difficult to provide the necessary level of UX  for each of the platforms
  2. Assumptions — In most cases, considering the device types, all

    the changes are in layout — Logic is just customizable — User does not need everything from the start — You can cheat user // Optimistic Interfaces
  3. What if… — Make modules (components) truly independent — Load

    them lazily — Choose the necessary template based on device type — Customize logic of the component based on device type
  4. *

  5. XF

  6. Core Modules Components + library of default abstract XF Components

    UI Elements + set of predefined XF UI Elements
  7. XF Module — a part of the framework,  e.g.

    xf.touch.js, xf.view.js, xf.router.js, etc. ! All current modules are included in standard build of XF. Not all modules are required.
  8. XF Component — a building block of app (~widget), that

    can be abstracted as an independent unit and can be reused throughout the app or even any other XF app. ! Includes collection (w/ models) and view.
  9. XF UI Element — a page element without any data

    connection, e.g. button, range controller, scrollable area, list, etc. ! UI Elements have simplified markup, that is parsed by XF to make them look and feel in the proper way.
  10. — Lazy loading, registering and creation of components — Event

    bus and proxy — Getters/setters for component options — Starting the app and initialization of other xf.modules
  11. var _oldshow = $.fn.show; /** @ignore */ $.fn.show = function(speed,

    callback) { var res = _oldshow.apply(this, arguments); if ($(this).find('[data-component]').length) XF.trigger('xf:loadChildComponents', this); return res; }; — Hooks that trigger loading of components when some area become visible, e.g.:
  12. — XF.Device.isMobile // yes, cannot skip this right away... —

    XF.Device.size — XF.Device.type — XF.Device.supports: touchEvents, pointerEvents, cssAnimations — …
  13. XF.define(function () { return new XF.App({ initialize: function() { },

    ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, // near future `supports` supports : ['cssAnimations'], templatePath : 'tablet/', defaultAnimation: 'fade' }, !
  14. — Touch Events — Pointer Events — Mouse Events —

    D-Pad Events* — tap — swipeLeſt/swipeRight — swipeUp/swipeDown
  15. XF.define(function () { return new XF.App({ initialize: function() { },

    ! device: { types : [ { name : 'tablet', range : { max : 1024, min : 569 }, // near future `supports` supports : ['cssAnimations'], templatePath : 'tablet/', defaultAnimation: 'fade' }, !
  16. 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 } }); ! });
  17. Q of deferred events // if component is not loaded

    or constructed // events will wait until it will be ! XF.trigger('component:componentID:eventName'); ! XF.trigger('component:componentClass:eventName');
  18. <div data-component="componentClass" data-id="componentID"> <script> XF.setOptionsByID('componentID', {foo: 'bar'}); </script> </div> components/componentClass.js

    new ComponentClass(options); tmpl/desktop/componentClass.tmpl tmpl/mobile/componentClass.tmpl // is visible
  19. Nesting Templates <!-- DEVICE DEPENDENT STUFF --> <div class="points"> <%

    for (var i = 0; i < options.points; i++) { %> <img class="point" src="img/point.png" /> <% } %> </div> ! <!-- INCLUDING DESKTOP TEMPLATE --> <template src="desktop/componentClass.tmpl"> !
  20. Write less… <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>
  21. …do nothing <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>