Pro Yearly is on sale from $80 to $50! »

XFramework: build cross-platform responsive web apps easily

XFramework: build cross-platform responsive web apps easily

E13498af38db5a5ab97f89fdc500b5af?s=128

Ilya Pukhalski

December 16, 2013
Tweet

Transcript

  1. XFRAMEWORK Creating totally responsive cross-platform web apps

  2. @pukhalski Ilya Pukhalski, EPAM Mobile Competency Center, British Higher School

    of Art & Design
  3. The Problem

  4. — 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
  5. None
  6. The Idea

  7. Desktop( /index.html( ((Page(#1( Component(#1( Component(#2( Component(#3( Component(#4(

  8. Tablet' /index.html' ''Page'#1' Component' #1' Component'#2' Component'#3' ''Page'#2' Component' #1'

    Component'#2' Component'#4'
  9. Mobile'phone' /index.html' ''Page'#1' Component'#1' Component'#2' ''Page'#2' ''Page'#3' Component'#1' Component'#3' Component'#1'

    Component'#4'
  10. 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
  11. 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
  12. The Magic

  13. *

  14. XF

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

    UI Elements + set of predefined XF UI Elements
  16. 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.
  17. 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.
  18. 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.
  19. —Backbone.js —Underscore.js / Lo-dash.js —JQuery / Zepto Dependencies

  20. XF.CORE

  21. — 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
  22. XF.MODULES

  23. xf.jquery.hooks.js

  24. 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.:
  25. xf.zepto.support.js

  26. xf.device.js

  27. — XF.Device.isMobile // yes, cannot skip this right away... —

    XF.Device.size — XF.Device.type — XF.Device.supports: touchEvents, pointerEvents, cssAnimations — …
  28. 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' }, !
  29. xf.cache.js

  30. — Bulletproof local/session storage proxy — Caching of templates for

    faster access in the future
  31. xf.settings.js

  32. — Current app version — Cache settings — Component, data

    and templating settings
  33. xf.touch.js

  34. — Touch Events — Pointer Events — Mouse Events —

    D-Pad Events* — tap — swipeLeſt/swipeRight — swipeUp/swipeDown
  35. xf.pages.js

  36. — Page switching — Page animations handling (w/ fallbacks to

    JS) — Works together with router
  37. <div class="xf-page" data-id="home">…</div> XF.define(function () { return new XF.App({ router:

    { routes: { '/': 'home' }, ! home: function() { // ... } },
  38. xf.app.js

  39. 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' }, !
  40. xf.router.js xf.collection.js xf.model.js xf.view.js

  41. XF.COMPONENTS

  42. Structure — HTML Placeholder — Component “Class” (JS file) —

    Device type dependent template
  43. <div data-component="componentClass" data-id=“componentID"> ! This text is visible while component

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

    component is loading ! </div>
  45. 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 } }); ! });
  46. XF.define('componentClassName', ['collections/collectionClass', 'collections/viewClass'], function (Collection, View) { return XF.Component.extend({ Collection:

    Collection, View: View, initialize: function() { // do some stuff here } }); });
  47. Communication?

  48. 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');
  49. <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
  50. 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"> !
  51. XF.UI

  52. xf.ui.list.js

  53. 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>
  54. …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>
  55. xf.ui.button.js

  56. xf.ui.forms.js

  57. xf.ui.list.js

  58. xf.ui.dialog.js

  59. ...and many more

  60. LESS is more

  61. None
  62. INFRASTRUCTURE

  63. XF Development Kit

  64. Make an app in 3 lines npm install generator-xf yo

    xf yo xf:application init
  65. Creating a custom XF build yo xf:build [module1, module2, ...,

    moduleN]
  66. Updating XF and dependencies yo xf:update

  67. Creating an app boilerplate yo xf:application init [name]

  68. Building a production app version yo xf:application build

  69. Social Infrastructure

  70. Landing page

  71. Human-readable documentation

  72. GitHub

  73. Other channels @xframeworkjs

  74. FUTURE

  75. XF.Components ❤ Web Components

  76. Open-source the idea, not the code Port of XF idea

    to another frameworks
  77. — xframeworkjs.org — docs.xframeworkjs.org — @xframeworkjs

  78. XF.UI.dialog.show('Thanks!');