Was ist das beste Muster für reaktionsschnelle Anwendungen in famo.us

Question

Als Beispiel, in einer Bootstrap-basierten App könnte ich Markup schreiben, um ein Gitter 8 Spalten breit für große Bildschirme und 2 Spalten breit für kleine Bildschirme zu machen.

Bildschirmgröße hat sicherlich Auswirkungen auf das Bildschirmdesign, und ich möchte wissen, was ein anständiges Muster ist, bevor ich anfange, Dinge in famo.us zu versuchen. Wenn man bedenkt, dass "famo.us" "empained" ist, sollte es eigentlich nur eine Antwort geben :)

Ich bin alles für Mobile-First-Design, aber was ich nicht will, ist eine Desktop-App, die nur ein Handy ist App um 400% gestreckt.

Danke,

Andrew

Answer 1

Basierend auf dem Beispiel in den Famo.us Beispiele auf Github ..

https://github.com/Famous/examples/blob/master/src/examples/views/GridLayout/example.js

Sie könnten sehr leicht etwas tun ..

var Engine  = require("famous/core/Engine"); 
var Surface = require("famous/core/Surface"); 
var GridLayout = require("famous/views/GridLayout"); 

var mainContext = Engine.createContext(); 

var contextSize = mainContext.getSize() 

var dimensions; 

if (contextSize[0] < 480 || contextSize[1] < 480) { 
    dimensions = [2,8]; 
} else { 
    dimensions = [8,2]; 
}; 

var grid = new GridLayout({ 
    dimensions: dimensions 
}); 

var surfaces = []; 
grid.sequenceFrom(surfaces); 

for(var i = 0; i < 16; i++) { 
    surfaces.push(new Surface({ 
     content: "I am panel " + (i + 1), 
     size: [undefined, contextSize[1]/2.0], 
     properties: { 
      backgroundColor: "hsl(" + (i * 360/16) + ", 100%, 50%)", 
      color: "black", 
      lineHeight: window.innerHeight/2 + 'px', 
      textAlign: 'center' 
     } 
    })); 
} 

mainContext.add(grid); 

EDITIEREN:

Das Endziel ist Javascript als einzige Entwicklungssprache für moderne Webanwendungen. Manchmal müssen Sie die Dinge nur selbst verwalten.

Dies gilt insbesondere für einen Rahmen wie Famo.us, die auf absolute Positionierung stark abhängig ist .. Die Dinge fließen einfach nicht so glatt wie in der Box-Modell

alle feinen Unterschiede behandeln ich bauen eine StateHash Klasse, die den Zustand und gibt unterschiedliche Werte für den gleichen Schlüssel basierend auf dem aktuellen Zustand verwaltet ..

var DESKTOP, MOBILE, StateHash, screen_state, sh; 

StateHash = (function() { 

    function StateHash(states) { 
    this.set_state = __bind(this.set_state, this); 

    this.get_state = __bind(this.get_state, this); 

    this.set = __bind(this.set, this); 

    this.get = __bind(this.get, this); 

    var i, _i, _ref; 
    if (!states) { 
     states = 2; 
    } 
    this.state = 0; 
    this.hash = {}; 
    for (i = _i = 0, _ref = states - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) { 
     this.hash[i] = {}; 
    } 
    } 

    StateHash.prototype.get = function(key) { 
    return this.hash[this.state][key]; 
    }; 

    StateHash.prototype.set = function(state, key, val) { 
    return this.hash[state][key] = val; 
    }; 

    StateHash.prototype.get_state = function() { 
    return this.state; 
    }; 

    StateHash.prototype.set_state = function(state) { 
    return this.state = state; 
    }; 

    return StateHash; 

})(); 

// Usage 

MOBILE = 0; 
DESKTOP = 1; 

screen_state = some_check_mobile_function() ? MOBILE : DESKTOP; 

sh = new StateHash(); 
sh.set_state(screen_state); 

sh.set(MOBILE, "top-margin", "10px"); 
sh.set(DESKTOP, "top-margin", "20px"); 

sh.get("top-margin"); 

ich werde Sie wissen lassen, wenn ich irgendeinen anderen besseren Weg zu lernen!

Viel Glück!

Answer 2

Der Ansatz ist eine improvisierte Version der Verwendung von Rastern basierend auf der Fenstergröße. Habe gerade einen Resize-Listener hinzugefügt, um Resize-Events zu beobachten.

function ResponsiveGridView() { 

    View.apply(this, arguments); 

    this.rootModifier = new StateModifier({ 
     align: [.5, .5], 
     origin: [.5, .5] 
    }); 

    this.mainNode = this.add(this.rootModifier); 

    this.slides = []; 

    _createGrid.call(this); 
    _createSlides.call(this); 

    Engine.on('resize', function(){ 
     _reflowGrid.call(this); 
    }.bind(this)); 
} 
function _createGrid(){ 
    this.grid = new GridLayout({ 
     dimensions: window.innerWidth < 490?[1,8]:[4, 2], 
     transition: {curve: 'easeInOut',duration: 200} 
     }); 
    this.grid.sequenceFrom(this.slides); 
    this.mainNode.add(this.grid); 
} 
function _reflowGrid(){ 
    this.grid.setOptions({dimensions: window.innerWidth < 490?[1,8]:[4, 2]}); 
}