1. Scalable
Cross-platform
Web Apps
!
A long history of one solution

2. @pukhalski
!
Solution Architect @ EPAM Systems
Lecturer @ BHASD
Smashing Magazine Author

3. The beginning.

4. 2011,
Joined

5. Worked mostly with (web) apps.
!
• Architecture
• Performance issues
• UX
• Mobile

6. What’s web app?

8. Multidevice
World

10. Übermegamultidevice
World!

11. How about RWD?

12. Yeah, suuuuure…

13. Simplest
cross-platform
web app flow

14. Page #1
Module #1
Module #5
Module #2 Module #3 Module #4
Desktop

15. Tablet
Page #1
Module #1 Module #2
Module #3*
Page #
Module

16. Mobile
Page #1
Module #1*
Module #2
Page #2
Module #1*
Module #3
Page #3
Module #1*
Module #4

17. Wait, wait. Sure?

18. Research.

20. Like

21. jQuery Mobile: Flip Toggle

22. <select data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
jQuery Mobile: Flip Toggle Example

23. <select name="flip-2" id="flip-2" data-role="slider"
tabindex="-1"
class="ui-slider-switch">
<option value="off">Off</option>
<option value="on">On</option>
</select>
!
<div role="application"
class="ui-slider ui-slider-switch
ui-slider-track ui-shadow-inset ui-bar-inherit ui-corner-all">
<span class="ui-slider-label ui-slider-label-a ui-btn-active"
role="img" style="width: 0%;">On</span>
<span class="ui-slider-label ui-slider-label-b"
role="img" style="width: 100%;">Off</span>
<div class="ui-slider-inneroffset">
<a href="#"
class="ui-slider-handle ui-slider-handle-snapping ui-btn ui-shadow"
role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="off"
aria-valuetext="Off" title="Off" aria-labelledby="flip-2-label"
style="left: 0%;"></a>
</div>
</div>
jQuery Mobile: Flip Toggle Output

24. jQuery Mobile: Good Support

25. Dislike

26. Just a library.
No architecture behind.

27. Performance.

29. Like

30. Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});
!
Ext.define('MyApp.profile.Phone', {
extend: 'Ext.app.Profile',
!
views: ['Main'],
!
isActive: function() {
return Ext.os.is('Phone');
}
});
Sencha Touch: Device Profiles

31. Dislike

32. Mobile only
iOS, Android, BB, WP

33. Size matters

35. User don’t need
the whole app
from the start.

36. User don’t need
the whole app
at all.

38. Like

39. • Flexible
• Small & Simple
• Possibility to define
any architecture style

40. Dislike

41. • No architecture defined
• No UI representation

42. Concept.

43. 1. Independent customizable modules
2. Lazy loading
3. Device profiles
4. Device dependent templates
5. Easy UI elements

44. Device Profiles

45. XF.define(‘My App', function () {
!
return new XF.App({
initialize: function() { },
!
device: {
types : [
{
name : 'tablet',
range : {
max : 1024,
min : 569
},
templatePath : 'tablet/',
defaultAnimation: 'fade'
},
!

46. XF.define(‘MyApp’, function () {
!
return new XF.App({
!
device: {
types : [
{
name : 'ios',
range : {
max : 1024,
min : 320
},
supports : ['isIOS'],
templatePath : 'ios/',
defaultAnimation: 'slideleft'
},
!

47. Modules

48. Module
ViewCollection
Model Model Model

49. Module
ViewModel

50. 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
}
});
!
});

51. XF.define('componentClassName',
['collections/collectionClass',
'collections/viewClass'],
function (Collection, View) {
return XF.Component.extend({
Collection: Collection,
View: View,
initialize: function() {
// do some stuff here
}
});
});

52. Module loading

53. <div data-component="componentClass"
data-id=“componentID">
!
This text is visible while component is loading
!
</div>

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

55. Customization

56. <div data-component="componentClass" data-
id=“componentID">
!
<script>
XF.setOptionsByID('componentID', {foo: 'bar'});
</script>
!
</div>

57. Device-dependent
templates

58. <div data-component="componentClass" data-id="componentID">
<script>
XF.setOptionsByID('componentID', {foo: 'bar'});
</script>
</div>
components/componentClass.js
new ComponentClass(options);
tmpl/deviceProfile/componentClass.tmpl
tmpl/mobile/componentClass.tmpl
// is visible
rest/c

59. <div data-component="componentClass" data-id=“componentID" />
components/componentClass.js
// is visible
new ComponentClass(options);
tmpl/
deviceProfile/
componentClass.tmpl
rest/componentClass/
// loading JS if it’s needed
// rendering
<div data-component="componentClass" data-id="componentID">
<ul class="xf-list" data-role="listview">

60. !
Progressive
Enhancement?

61. !
Progressive
Enhancement?
Look ma, we still need backend

62. UI Elements

64. <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>
Write Less

65. <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>
…do nothing

66. Wrapping up.

67. Pages.

68. What if
page switching
could work together with router?

69. <div class="xf-page" data-id="home">…</div>
XF.define(function () {
return new XF.App({
router: {
routes: {
'/': 'home'
},
!
home: function() {
// ...
}
},

70. Catching
User Interactions

71. Touch Events
Pointer Events
Mouse Events
D-Pad Events*

72. Touch Events
Pointer Events
Mouse Events
D-Pad Events*
tap
swipe

73. Communication
mechanics.

74. // if component is not loaded or constructed
// events will wait until it will be
!
XF.trigger('component:componentID:eventName');
!
XF.trigger('component:componentClass:eventName');
Q of deferred

75. Proofing
the concept.

76. tablet.govoyages.com

77. Release.

78. 12000 employees,
20 years of experience,
thousands of customers.
No chance for mistake.

79. Calm down, dude!

80. 1. How to deal
with open-source?
2. Legal Issues
• What type of licence?
• Why this one?
• Intellectual property?

81. Dec, 2013

82. xframeworkjs.org

83. Sugar.

84. Generator
npm install generator-xf
yo xf
yo xf:application init

85. docs.xframeworkjs.org/

86. Future-proof.

87. XF ❤ Web Components

88. Yet another
framework!

89. Yet another
framework?

90. Software Engineer should be
technology and solution agnostic.
!
The blind passion for the solution
can ruin your growth
as a professional.

91. Learn.
Contribute.
Build.

92. Thanks.
!
@pukhalski