XFramework: build cross-platform responsive web apps easily

http://xframeworkjs.org/
https://github.com/epam/xframework

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
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
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!');