XFramework: the story so far

Why and how XFramework was built.

xframeworkjs.org

Transcript

1. Scalable Cross-platform Web Apps ! A long history of one solution
2. @pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHSAD 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 View Collection Model Model Model
49. Module View Model
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