Какая лучшая архитектура для гибридного мобильного приложения?

Я разрабатываю большое гибридное мобильное приложение (PhoneGap/HTML5), которое должно содержать множество просмотров и серверных вызовов. После некоторых поисков в Интернете я обнаружил, что могу организовать свой код с помощью RequireJS, Backbone и jQuery Mobile. Я следовал this tutorial, что очень полезно, но я не очень доволен ...Какая лучшая архитектура для гибридного мобильного приложения?

Проблема в том, что каждый вид загружается RequireJS, когда я нажимаю ссылку или кнопку, и заменяет содержимое предыдущего view ... Я имею в виду, что весь код HTML между <body></body> заменяется содержимым нового представления. И если я решил не заменять предыдущий код и добавлять новый код, существует риск того, что приложение может быть не очень удобным для пользователя.

Я думал отделить все виды и поместить их в несколько файлов HTML и написать Javascript, который загружает все файлы HTML и добавляет их в основной корпус, но я не знаю, является ли это хорошей практикой и если мое приложение будет очень удобным для пользователя. Вот пример того, как я думал организовать свой код:

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
    <head> 
     <!-- ... --> 
    </head> 

    <body> 
     <!-- Here will be added the content of all the other HTML files --> 
    </body> 
</html> 


<!-- homeView.html --> 
<div data-role="header" data-theme="f"> 
    <h1 data-i18n="sections.home.title"></h1> 
</div> 

<div data-role="content"> 
    <h1 data-i18n="sections.home.welcome"></h1> 
</div> 


<!-- otherView.html --> 
<div data-role="header" data-theme="f"> 
    <h1 data-i18n="sections.otherView.title"></h1> 
</div> 

<div data-role="content"> 
    <p data-i18n="sections.otherView.content"></p> 
</div>

Что вы, ребята, думаете об этом? У кого-то есть лучшее решение? Моя цель - создать сильное, текучее и поддерживаемое приложение.

Благодарим за помощь.

источник

2013-08-02 Mohamed Amine

Из моего опыта, Магистраль дает вам более тонкий контроль над тем, как вы хотите отображать свои взгляды: вы должны иметь возможность заменять только части своего вида без необходимости выбирать между «заменить все» и «присоединять к текущему HTML».

Обычно полезно разбить свои взгляды в нескольких файлах HTML (особенно учитывая, что вы можете использовать шаблоны, например, с помощью Underscore), но я не думаю, что вы должны загружать все сразу, если это то, что вы имеете в виду.

Я расскажу вам более подробный пример, если вы чувствуете, что он ответит на ваш вопрос, но в основном, если вы нажмете ссылку или кнопку, вы сможете поймать это событие и сделать все, что хотите, от замены всего представления на простое изменение одного элемента.

EDIT: Я отвечу на оставшийся ваш вопрос здесь. Сначала вы должны взглянуть на http://backboneboilerplate.com/, это довольно хорошая демонстрация того, как структурировать базовое приложение. В частности, они используют диспетчер представлений (vm.js), который обрабатывает создание представлений.

Используя что-то подобное, вы можете сохранить в памяти последний экземпляр представления. Например, когда вы нажимаете на элемент новостей, у вас будет ваш маршрутизатор, идущий в/news/item/xx, и вы бы использовали диспетчер представлений для создания новостного элемента и заполнения модели localStorage (если вы уже выбрали содержимое) или путем опроса сервера. Глядя на код зрения менеджера, вы можете иметь что-то вроде этого:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'events' 
], function($, _, Backbone, Events){ 
    var views = {}; 
    var create = function (context, name, View, options) { 
    if(typeof views[name] !== 'undefined') { 
     if (name === "homeview") { 
     views[name].reinit(); // <==== re-initialize your view 
     return views[name]; 
     } 
     else { 
     views[name].undelegateEvents(); 
     if(typeof views[name].clean === 'function') { 
      views[name].clean(); 
     } 
     } 
    } 
    var view = new View(options); 
    views[name] = view; 
    if(typeof context.children === 'undefined'){ 
     context.children = {}; 
     context.children[name] = view; 
    } else { 
     context.children[name] = view; 
    } 
    Events.trigger('viewCreated'); 
    return view; 
    }; 


    return { 
    create: create 
    }; 
});

Таким образом, менеджер вид сохраняет свой домашний вид в памяти, и повторно инициализировать и возвращает его всякий раз, когда вы вернетесь к нему (I(), но может быть любая пользовательская функция для сброса вашего представления в состояние, которое вы ранее сохранили и визуализировали)

источник

2013-08-02 13:23:47 axelcdv

Давайте рассмотрим, что у меня есть приложение для новостей. В домашнем представлении будет много новостей, полученных с сервера, и с помощью панели меню я могу открыть представление настроек. И когда я закрываю эту точку зрения, я хочу вернуться к домашнему виду с тем же состоянием, каким оставил его (я полагаю, у меня скроллер вниз ...). Как я могу сделать это с помощью Backbone (и Underscore) и отделяя HTML-код от двух представлений? –

Под «state» вы подразумеваете, что хотите сохранить новостные элементы, полученные с сервера, и, например, позицию курсора, если пользователь прокрутил вниз? – axelcdv

Да, это то, что я хочу :) –

Какая лучшая архитектура для гибридного мобильного приложения?

ответ

Смежные вопросы