Какой у вас был опыт работы с RhoMobile + JqueryMobile + KnockoutJS? - PullRequest
Новая
       26

Какой у вас был опыт работы с RhoMobile + JqueryMobile + KnockoutJS?

1 голос
/ 19 января 2012

Моя команда и я занимались созданием нескольких кроссплатформенных (BlackBerry, Android, iOS) мобильных приложений для нашей организации с использованием RhoMobile + JqueryMobile + KnockoutJS.Опыт разработки является приемлемым, учитывая состояние кроссплатформенной разработки мобильных приложений сегодня.Разочарование начинает наступать при использовании приложения на самих мобильных устройствах.Проблемы с производительностью являются для нас болевым пунктом номер один в настоящее время.Я не хочу, чтобы это было напыщенным, но я хотел бы знать, что другие сделали, чтобы облегчить проблемы с производительностью.В частности, проблемы с производительностью на устройствах BlackBerry.Я пробовал решения, рекомендованные в документации RhoMobile .Возможно, есть и другие советы, которые сообщество может предложить.Я ценю любые отзывы, которые вы можете предоставить.

Ответы [ 2 ]

1 голос
/ 19 января 2012
  1. Удалите box-shadow и text-shadow из CSS, это делает страницы немного медленнее.
  2. Вы также можете установить классы -hover и -down такими же, как их производные, чтобы браузеру не приходилось перерисовывать страницу при нажатии элемента (например, ссылки listview) при прокрутке. (это сделало прокрутку на моем устройстве Android 2.3 намного более плавной).

Чтобы удалить тени: 

.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

Чтобы сделать -hover классы одинаковыми, вам нужно изменить стили следующим образом: 

.ui-btn-hover-a {
    border: 1px solid       #000 ;
    background:             #444444 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 )); 
    background-image: -webkit-linear-gradient( #666 , #444 ); 
    background-image:    -moz-linear-gradient( #666 , #444 ); 
    background-image:     -ms-linear-gradient( #666 , #444 ); 
    background-image:      -o-linear-gradient( #666 , #444 ); 
    background-image:         linear-gradient( #666 , #444 );
}

Быть таким же, как его производная (в данном случае это будет .ui-btn-up-a): 

.ui-btn-hover-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

Вы также можете сделать это для -down классов, которые срабатывают, когда в элементе происходит событие tap: 

.ui-btn-down-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

Вот ссылка на неминифицированную версию CSS-таблицы стилей jQuery Mobile 1.0: http://code.jquery.com/mobile/latest/jquery.mobile.css

1 голос
/ 19 января 2012

У меня есть опыт работы только с Jquery mobile, и, хотя мне нравилась быстрая разработка, это позволило бы, если бы у меня было время, я бы всегда программировал нативное приложение. Мобильные приложения Jquery лучше всего работают на устройствах iOS благодаря поддержке CSS3 в Safari. Анимации, такие как слайд и т. Д., Довольно нестабильны в браузере Android и совершенно некачественные в браузере Blackberry.

Кроме того, Jquery mobile практически не переключает страницы. Каждый раз, когда вы запрашиваете новую страницу (через гиперссылку или что-то еще), она извлекает страницу с помощью AJAX-запроса и вставляет ее в DOM текущей страницы (вы можете явно запросить, чтобы этого не произошло, но затем вы не можете «скользить» к другой странице). страница). Эта форма навигации вызывает проблемы после долгой цепочки навигации. Не говоря уже о том, что вы должны быть очень осторожны, чтобы два элемента во всем приложении не использовали один и тот же идентификатор.

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

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

Дополнение к вашему комментарию:

Ничто из того, что делает Jquery Mobile, не может быть сделано одним Jquery. Но, используя jquery, если вы добавите анимацию CSS3, будете использовать стиль навигации с одним DOM и т. Д., У вас возникнут те же проблемы. Проблема не в мобильном телефоне Jquery. Проблема в том, что лишь немногие мобильные браузеры могут справиться с эффектами, которые использует Jq mobile. Как я уже сказал, iPhone делает хорошо. Отчасти это связано с реализацией CSS 3 в Safari 3, и в основном потому, что iOS отдает приоритет потокам пользовательского интерфейса над фоновыми работниками.

...