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. 5
+

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=dividerA/li
li
h2Header/h2
pNo link/p
/li
lia href=#Simple link/a/li
li data-role=dividerDivider/li
li
h2Header/h2
pHeader 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-dividerA/li
li class=xf-li-static xf-li
div class=xf-li-wrap
h2 class=xf-li-headerHeader/h2
p class=xf-li-descNo 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-dividerDivider/li
li class= xf-li
a href=# class=xf-li-btn
div class=xf-btn-text
h2 class=xf-li-headerHeader/h2
p class=xf-li-descHeader 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!');