CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
0 likes2,336 views
This document discusses the development of a cross-platform web application framework called XFramework (XF). It outlines some of the challenges of building scalable apps for multiple devices. It proposes an architecture based on independent, lazily-loaded modules with device-specific templates. The framework aims to provide reusable UI elements and handle device profiles, events and communication between modules. The concept was proven with a prototype website and the framework was released as open-source in December 2013 with documentation and a code generator. The conclusion encourages learning, contributing and building solutions rather than blindly following any single technology.
![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](https://image.slidesharecdn.com/pukhalski-xf-the-story-so-far-140330130237-phpapp01/85/CodeFest-2014-30-320.jpg)
![XF.define(‘MyApp’, function () {
!
return new XF.App({
!
device: {
types : [
{
name : 'ios',
range : {
max : 1024,
min : 320
},
supports : ['isIOS'],
templatePath : 'ios/',
defaultAnimation: 'slideleft'
},
!](https://image.slidesharecdn.com/pukhalski-xf-the-story-so-far-140330130237-phpapp01/85/CodeFest-2014-46-320.jpg)
![XF.define('componentClassName',
['collections/collectionClass',
'collections/viewClass'],
function (Collection, View) {
return XF.Component.extend({
Collection: Collection,
View: View,
initialize: function() {
// do some stuff here
}
});
});](https://image.slidesharecdn.com/pukhalski-xf-the-story-so-far-140330130237-phpapp01/85/CodeFest-2014-51-320.jpg)
CodeFest 2014. Пухальский И. — Отзывчивые кроссплатформенные веб-приложения
- 1. Scalable Cross-platform Web Apps ! A long history of one solution
- 2. @pukhalski ! Solution Architect @ EPAM Systems Lecturer @ BHASD Smashing Magazine Author
- 4. 2011, Joined
- 5. Worked mostly with (web) apps. ! • Architecture • Performance issues • UX • Mobile
- 11. How about RWD?
- 12. Yeah, suuuuure…
- 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
- 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
- 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>
- 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">
- 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() { // ... } },
- 71. Touch Events Pointer Events Mouse Events D-Pad Events*
- 72. Touch Events Pointer Events Mouse Events D-Pad Events* tap swipe
- 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
- 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
- 86. Future-proof.
- 87. XF ❤ Web Components
- 90. Software Engineer should be technology and solution agnostic. ! The blind passion for the solution can ruin your growth as a professional.