Slide 1
Slide 1 text
XFRAMEWORK
Creating totally responsive cross-platform web apps
Slide 2
Slide 2 text
@pukhalski
Ilya Pukhalski,
EPAM Mobile Competency Center,
British Higher School of Art & Design
Slide 3
Slide 3 text
The Problem
Slide 4
Slide 4 text
— 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
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
The Idea
Slide 7
Slide 7 text
Desktop(
/index.html(
((Page(#1(
Component(#1( Component(#2(
Component(#3(
Component(#4(
Slide 8
Slide 8 text
Tablet'
/index.html'
''Page'#1'
Component'
#1'
Component'#2'
Component'#3'
''Page'#2'
Component'
#1'
Component'#2'
Component'#4'
Slide 9
Slide 9 text
Mobile'phone'
/index.html'
''Page'#1'
Component'#1'
Component'#2'
''Page'#2' ''Page'#3'
Component'#1'
Component'#3'
Component'#1'
Component'#4'
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
The Magic
Slide 13
Slide 13 text
*
Slide 14
Slide 14 text
XF
Slide 15
Slide 15 text
Core Modules
Components
+ library of default abstract XF Components
UI Elements
+ set of predefined XF UI Elements
Slide 16
Slide 16 text
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.
Slide 17
Slide 17 text
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.
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
—Backbone.js
—Underscore.js / Lo-dash.js
—JQuery / Zepto
Dependencies
Slide 20
Slide 20 text
XF.CORE
Slide 21
Slide 21 text
— 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
Slide 22
Slide 22 text
XF.MODULES
Slide 23
Slide 23 text
xf.jquery.hooks.js
Slide 24
Slide 24 text
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.:
Slide 25
Slide 25 text
xf.zepto.support.js
Slide 26
Slide 26 text
xf.device.js
Slide 27
Slide 27 text
— XF.Device.isMobile // yes, cannot skip this right away...
— XF.Device.size
— XF.Device.type
— XF.Device.supports: touchEvents, pointerEvents, cssAnimations
— …
Slide 28
Slide 28 text
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'
},
!
Slide 29
Slide 29 text
xf.cache.js
Slide 30
Slide 30 text
— Bulletproof local/session storage proxy
— Caching of templates for faster access in the future
Slide 31
Slide 31 text
xf.settings.js
Slide 32
Slide 32 text
— Current app version
— Cache settings
— Component, data and templating settings
Slide 33
Slide 33 text
xf.touch.js
Slide 34
Slide 34 text
— Touch Events
— Pointer Events
— Mouse Events
— D-Pad Events*
— tap
— swipeLeſt/swipeRight
— swipeUp/swipeDown
Slide 35
Slide 35 text
xf.pages.js
Slide 36
Slide 36 text
— Page switching
— Page animations handling (w/ fallbacks to JS)
— Works together with router
Slide 37
Slide 37 text
…
XF.define(function () {
return new XF.App({
router: {
routes: {
'/': 'home'
},
!
home: function() {
// ...
}
},
Slide 38
Slide 38 text
xf.app.js
Slide 39
Slide 39 text
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'
},
!
Slide 40
Slide 40 text
xf.router.js
xf.collection.js
xf.model.js
xf.view.js
Slide 41
Slide 41 text
XF.COMPONENTS
Slide 42
Slide 42 text
Structure
— HTML Placeholder
— Component “Class” (JS file)
— Device type dependent template
Slide 43
Slide 43 text
!
This text is visible while component is loading
!
Slide 44
Slide 44 text
!
This text is visible while component is loading
!
Slide 45
Slide 45 text
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
}
});
!
});
Slide 46
Slide 46 text
XF.define('componentClassName',
['collections/collectionClass',
'collections/viewClass'],
function (Collection, View) {
return XF.Component.extend({
Collection: Collection,
View: View,
initialize: function() {
// do some stuff here
}
});
});
Slide 47
Slide 47 text
Communication?
Slide 48
Slide 48 text
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');
Slide 49
Slide 49 text
XF.setOptionsByID('componentID', {foo: 'bar'});
components/componentClass.js
new ComponentClass(options);
tmpl/desktop/componentClass.tmpl
tmpl/mobile/componentClass.tmpl
// is visible
Slide 50
Slide 50 text
Nesting Templates
<% for (var i = 0; i < options.points; i++) { %>
<% } %>
!
!
<% } %>
Slide 51
Slide 51 text
XF.UI
Slide 52
Slide 52 text
xf.ui.list.js
Slide 53
Slide 53 text
Write less…
- A
-
Header
No link
- Simple link
- Divider
-
Header
Header and description
Slide 54
Slide 54 text
…do nothing
- A
-
Header
No link
- Simple link
- Divider
-
Header
Header and description
Slide 55
Slide 55 text
xf.ui.button.js
Slide 56
Slide 56 text
xf.ui.forms.js
Slide 57
Slide 57 text
xf.ui.list.js
Slide 58
Slide 58 text
xf.ui.dialog.js
Slide 59
Slide 59 text
...and many more
Slide 60
Slide 60 text
LESS is more
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
INFRASTRUCTURE
Slide 63
Slide 63 text
XF Development Kit
Slide 64
Slide 64 text
Make an app in 3 lines
npm install generator-xf
yo xf
yo xf:application init
Slide 65
Slide 65 text
Creating a custom XF build
yo xf:build [module1, module2, ..., moduleN]
Slide 66
Slide 66 text
Updating XF and dependencies
yo xf:update
Slide 67
Slide 67 text
Creating an app boilerplate
yo xf:application init [name]
Slide 68
Slide 68 text
Building a production app version
yo xf:application build
Slide 69
Slide 69 text
Social Infrastructure
Slide 70
Slide 70 text
Landing page
Slide 71
Slide 71 text
Human-readable documentation
Slide 72
Slide 72 text
GitHub
Slide 73
Slide 73 text
Other channels
@xframeworkjs
Slide 74
Slide 74 text
FUTURE
Slide 75
Slide 75 text
XF.Components ❤ Web Components
Slide 76
Slide 76 text
Open-source the idea, not the code
Port of XF idea to another frameworks
Slide 77
Slide 77 text
— xframeworkjs.org
— docs.xframeworkjs.org
— @xframeworkjs
Slide 78
Slide 78 text
XF.UI.dialog.show('Thanks!');