Upgrade to Pro — share decks privately, control downloads, hide ads and more …

XFramework: the story so far

XFramework: the story so far

Why and how XFramework was built.

xframeworkjs.org

Ilya Pukhalski

March 30, 2014
Tweet

More Decks by Ilya Pukhalski

Other Decks in Programming

Transcript

  1. Mobile Page #1 Module #1* Module #2 Page #2 Module

    #1* Module #3 Page #3 Module #1* Module #4
  2. <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
  3. 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
  4. 1. Independent customizable modules 2. Lazy loading 3. Device profiles

    4. Device dependent templates 5. Easy UI elements
  5. XF.define(‘My App', function () { ! return new XF.App({ initialize:

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

    { types : [ { name : 'ios', range : { max : 1024, min : 320 }, supports : ['isIOS'], templatePath : 'ios/', defaultAnimation: 'slideleft' }, !
  7. 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 } }); ! });
  8. <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
  9. <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">
  10. <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
  11. <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
  12. // 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
  13. 1. How to deal
 with open-source?
 2. Legal Issues
 •

    What type of licence? • Why this one? • Intellectual property?
  14. Software Engineer should be technology and solution agnostic. ! The

    blind passion for the solution can ruin your growth as a professional.