Согласно недавней report

¹ , HTML является наиболее широко используемым языком для разработчиков мобильных приложений.В Основными причинами среди разработчиков для выбора веб-technologies ² являются кросс-платформенный переносимость кода и низкая стоимость разработки.Мы также слышали, что гибридные приложения, как правило, будет вялым и плохо разработана.Давайте докажем, что это, возможно ли, чтобы доставить родной вид и чувствовать, что мы привыкли .

Эта статья предоставляет множество намеки, фрагменты кода и уроки learned как построить большие гибридные мобильные приложения.Я кратко представить гибридную разработку мобильных приложений, в том числе его преимущества и недостатки.Тогда, я поделюсь с вами уроки, которые я изучил из более чем двух лет разработки Hojoki и CatchApp, оба из которых запуска изначально на основных мобильных платформ и были построены с HTML, CSS и JavaScript.Наконец, мы рассмотрим самые известные инструменты, чтобы обернуть код в родное приложение .

Что такое гибридный Мобильные приложения

Мобильные приложения в целом можно разбить на родной, гибридных и веб-приложений.Переход на родном маршрут позволяет использовать все возможности системы устройства и операционной, с минимумом накладных расходов на данной платформе.Тем не менее, строительство веб-приложение позволяет ваш код будет портирована на разных платформах, которые могут уменьшить время и стоимость разработки.Гибридные приложения объединить лучшее из обоих миров, с использованием общей базы кода для развертывания на родном, как приложения для широкого спектра платформ .

Есть два подхода к построению гибридного приложения:

• WebView appHTML, CSS и код JavaScript база работает во внутреннем браузере (так называемый WebView), который, завернутые в родное приложение.Некоторые системные интерфейсы подвергаются JavaScript через эту обертку.Примерами являются Adobe PhoneGap ³ и Trigger.io ⁴ .
• Составитель гибрид appКод написан на одном языке (например, как C # или JavaScript), и будет скомпилирован в машинный код для каждой поддерживаемой платформы.Результатом является родное приложение для каждой платформы, но меньше свободы в процессе разработки.Примерами являются Xamarin ⁵ , Appcelerator Titanium ⁶ и Embarcadero FireMonkey ⁷ .

В то время как оба подхода широко используются и существуют по уважительным причинам, мы сосредоточимся на WebView apps, поскольку они позволяют разработчикам использовать большинство существующих веб-навыков.Давайте посмотрим на все преимущества и недостатки гибридных приложений по сравнению с как нативных, так и мобильные веб-приложения .

Benefits

• Разработчик может использовать существующие веб-skills
• Один код базы для многократного platforms
• Сокращение времени разработки и cost
• Легко дизайн для различных форм-факторов (в том числе таблетки) с использованием гибкой веб-design
• Доступ к некоторым устройства и операционной системы features
• Расширенный форума capabilities
• Повышение популярности, потому что приложение может быть распределено изначально (с помощью магазинов приложений), а также мобильных браузеров (через поисковые системы)

Drawbacks

• Проблемы производительности для некоторых типов приложений (те, полагаясь на сложных родной функциональности или тяжелых переходов, таких как 3D-игры)
• Увеличение времени и усилий требуется, чтобы имитировать родной интерфейс и feel
• Не все устройства и операционной системы есть supported
• Риск быть отвергнутыми Apple, если приложение не чувствуете себя достаточно родной (например, простой веб-сайт)

Эти недостатки являются существенными и не могут быть проигнорированы, и они показывают, что гибридный подход не устраивает все виды приложений.Вы должны будете тщательно оценить ваши целевые пользователи, свои платформы выбора и требования приложения.В случае многих приложений, таких как содержательных единиц, преимущества перевешивают недостатки.Такие приложения обычно можно найти в «Бизнес и продуктивности”, “Enterprise” и “Медиа” категории, в App Store .

Как Hojoki и CatchApp очень содержательных приложений для повышения продуктивности, поэтому мы изначально думали, что они были бы отличный матч для гибридного развития.Первые три преимущества, упомянутые выше, были особенно полезны для нас в построении мобильное приложение для Hojoki всего за четыре недели.Очевидно, что первая версия не хватало многих важных вещей.Следующие недели и месяцы были наполнены работы по оптимизации производительности, обрабатывая пользовательский интерфейс для каждой платформы и эксплуатации расширенные возможности различных устройств.Обучение в то время имела решающее значение для принятия приложения выглядеть и чувствовать себя родным.Я поделюсь с вами, как много уроков, как можно ниже .

Итак, Как добиться родной вид и feel?Для мобильного веб-разработчик, будучи в состоянии использовать возможности устройства и операционной системы и быть в состоянии упаковать свои приложения для магазина приложений звучит просто потрясающе.Однако, если пользователи верить, что это родное приложение, то придется вести себя и выглядеть как один.Выполнение этого остается одним из самых больших проблем для гибридных мобильныхРазработчики .

Сделать ваши потребители чувствуют на Home

Один базовый код не означает, что приложение должно выглядеть и чувствовать себя точно так же на всех платформах.Ваши пользователи не будут заботиться вообще о базовой технологии кросс-платформенной.Они просто хотят приложение, чтобы вести себя, как ожидалось;они хотят чувствовать Ваша первая остановка должна быть принципы дизайна каждой платформы в “дома”.:

• “ IOS Дизайн Resources ⁸ ,” IOS Developer Library
• “ Android Design ⁹ ,” Android Developers
• “ Design ¹⁰ ,” Windows Dev Center

Хотя эти принципы не могут полностью удовлетворить все виды приложений, они по-прежнему обеспечивают всеобъемлющую и стандартный набор интерфейсов и опыта, что пользователи на каждой платформе будут знать и ожидать .

DIY против UI Frameworks

Реализация всех этих компонентов, моделей и анимации по своему усмотрению может быть довольно сложной задачей.Все виды рамок существуют, чтобы помочь вам в этом, начиная от коммерческой ( Кендо UI ¹¹ ) с открытым исходным кодом них ( Ionic ¹² ) и изте, с общим UI ( JQuery Mobile ¹³ и Onsen UI ¹⁴ ) ко многим конкретной платформы плиз ( Сенча Touch ^{76 15} и ChocolateChip-UI ¹⁶ ).Некоторые из них действительно хорошо на предоставление макета с точностью до пиксела, тогда как другие, а небрежно, что делает его легким для пользователя, чтобы определить веб-приложение.Тем не менее, у меня сложилось впечатление, что их основные недостатки, связанные с производительностью, потому что большинство рамок UI стараюсь быть всеохватывающей, насколько это возможно.Судите сами, взяв несколько минут, чтобы попробовать демо на вашем собственном устройстве .

В Hojoki, мы стараемся, чтобы обработать все компоненты на наш собственный, используя CSS3 и минимальный JavaScript.Это позволяет нам контролировать производительность и снижает накладные расходы.Мы, конечно, использовать небольшие библиотеки для сложных задач, которые кто-то решил просто отлично .

Пользовательские Components

Пользовательский интерфейскомпонентов также имеют много хороших вариантов использования.Выбор между UI платформы и пользовательского интерфейса, очевидно, будет зависеть от вашей целевой аудитории.Если вы хотите сделать что-то свое, вы должны иметь глубокое понимание UX дизайн, потому что руководящие принципы, связанные с выше, созданный специалистами для удовлетворения конкретных потребностей пользователей своей платформы в .

Ли вы придерживаться принципов интерфейса платформы или делать свое дело с пользовательскими компонентами, знают, что есть определенные шаблоны проектирования, что большинство людей используют каждый день, и любовь.Как люди, как правило, вводят в новое приложение?Через слайд-шоу руководстве или учебного наложения.Как людям ориентироваться?С панели вкладок или боковой панели drawer ¹⁷ .Как пользователи быстро загружать и обновлять данные?При натяжении, чтобы обновить.(Родной-как прокрутка будет широко освещены ниже.)

Ресурсы для мобильных Design

• “ Мобильная дизайна пользовательского интерфейса Шаблоны: 10 Сайты для Inspiration ¹⁸ « Иаков Gube, Six Revisions
• “ Клонирование пользовательский интерфейс прошивкой 7 С HTML, CSS и JavaScript ¹⁹ ,” Приходите Courteault
• “ Нажатие в мобильные интерфейс с HTML5 ²⁰ ” (слайды), Люк Melia и Яэль Сахар, Slideshare

Дизайн Родной-Looking Заголовок Bar

Одним из важных элементов пользовательского интерфейса является панель заголовка, своим названием и навигационных элементов, в первую очередь “до” и “обратно” кнопки.Для меня, многие популярные базы не могут обеспечить HTML и CSS решение, которое сопоставимо с родного приложения.Имитация эту часть пользовательского интерфейса с минимальным DOM и несколько строк CSS для каждой платформы на самом деле довольно просто:

<header>
   <button class="back">Feed</button>
   <h1>Details</h1>
   <!-- more actions (e.g. a search button on the right side) -->
</header>

Ознакомьтесь с полным код родной вид панели заголовка для прошивкой, Android и Windows, Phone ²¹ на JSFiddle.Это мой результат:

Используя тот же DOM на всех платформах, как правило, является предпочтительным, поскольку это приводит к более чистой код и, следовательно, увеличивает эксплуатационную надежность.Я нашел, что это легко можно в течение многих компонентов пользовательского интерфейса на МО и Android (в том числе за заголовок,панель вкладок, пользовательские меню навигации, страница настроек, пирог и многое другое).Тем не менее, это становится гораздо сложнее, когда добавление поддержки Windows Phone, который поставляется с некоторыми очень разных шаблонов проектирования .

Поддержка высокого разрешения Screens

В настоящее время, смартфоны и планшеты с экранами высокого разрешения составляют подавляющее большинство мобильных устройств, что составляет более чем на 80% IOS devices ²² и более 70% на Android devices ²³ .Для того, чтобы ваши изображения выглядят четкими для всех, вы, как правило, должны доставить в два раза размеры, чем на самом деле будет показано в вашем приложении.Обслуживание соответствующего размера изображения для всех различных резолюций является одним из самых обсуждаемых тем в Адаптивный веб-дизайн.Есть различные подходы, каждый из которых свои преимущества и недостатки, связанные с пропускной способностью, код ремонтопригодности и поддержки браузера.Давайте быстро просмотреть самые популярные из них, в частности, нет порядка:

• На стороне сервера и изменение размера delivering
• Обнаружение на стороне клиента и замена с помощью JavaScript
• HTML5 picture element
• HTML5 srcset attribute
• CSS image-set
• CSS СМИ queries
• Независимую от разрешения изображения (SVG)

Как всегда, нет серебряной пули для чувствительных изображений.Это в значительной степени зависит от типа изображений, и как они используются в приложении.Для статических изображений (например, логотипа и учебных изображений), я пытаюсь использовать SVG.Они масштабировать прекрасно без каких-либо дополнительных усилий и имеют большую поддержку браузера до тех пор, пока вы хорошо с Android 3 ²⁴ .

При SVG не вариант, HTML5 picture элемент и srcset attributes ²⁵ определенно, где передний конец развития возглавляет.В настоящее время их основной недостаток заключается в очень ограниченная поддержка браузера и, следовательно, их потребность в polyfills .

В то же время, CSS фоновых изображений и СМИ queries ²⁶ являются наиболее прагматичным решением:

/* Normal-resolution CSS */
.logo {
   width: 120px;
   background: url(logo.png) no-repeat 0 0;
}

/* HD and Retina CSS */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx) {
	.logo {
      background: url(logo@2x.png) no-repeat 0 0;
      background-size: 120px; /* Equal to normal logo width */
   }
}

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

Начиная с прошлого года, все больше и больше производителей Android пошли на один шаг дальше, что называется XXHDPI (или очень-очень высокого разрешения) экранов.Какой бы решение выше подходит ваша потребность, имейте в виду, что вы должны будете изображениячто в три раза первоначальные размеры для поддержки последних флагманских устройств Android, .

Использование системы Fonts

Простой, но важный способ сделать пользователю чувствовать себя как дома, чтобы использовать системные шрифты .

Это мои рекомендуемые шрифт стеки на основных платформах:

/* iOS */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

/* Android */
font-family: 'RobotoRegular', 'Droid Sans', sans-serif;

/* Windows Phone */
font-family: 'Segoe UI', Segoe, Tahoma, Geneva, sans-serif;

Кроме того, IOS 7 предлагает некоторые интересные предварительные настройки, которые автоматически установить правильный семейства шрифтов, размер шрифта и высота строки.Это так же просто, как с помощью font: -apple-system-body для обычного текста и font: -apple-system-headline для заголовков.Это не только упрощает декларации шрифта, но и улучшает доступность через “ динамический type ³⁰ ” общесистемной настройки размера шрифта Apple.Можно копать глубже в IOS 7 предустановок шрифтов в сообщение от Thomas Fuchs ³¹ .

Ответить стоит тысячи Words

Иконография является важной частью пользовательского опыта на всех основных мобильных платформ.Как со шрифтами, вы, как правило, лучше выключить, используя значки, которые ваша целевая аудитория уже знает.Ссылаясь на то, что я сказал о экраны с высоким разрешением ранее, убедитесь, что ваши значки масштабируемый.Реализация их в качестве шрифт через CSS ‘@font-face правила является отличным способом для достижения этой цели, и он приходит с широкий support ³² .Он даже позволяет изменять внешний вид пиктограммы (например, его цвет, тени и прозрачность) легко с помощью CSS.Вот мои рекомендации:

1. Получить различные значок платформа шрифты . Ionicons ³³ наша базовый набор, потому что она включает в себя почти все, что нужно.Это включает в себя специальные значки для МО и Android в дополнение к их общие.Остальные приходят от конкретных значок платформа шрифтов для iOS ³⁴ , Android Установить 1 ³⁵ и установить 2 ³⁶ и Окна Phone ³⁷ .
2. Сочетайте их с иконкой шрифта генератор .Использование нескольких шрифтов значок в заблуждение и быстро добавляет в размерах.Вот почему мы используем Fontello ³⁸ совместить различные наборы, регулировать основные коды и экспортировать их для каждой платформы.Результат <span class="icon">s</span>, который выглядит как значок поиска на IOS, Android и Windows Phone.Кроме того, проверьте популярных альтернатив IcoMoon ³⁹ и Fontastic ⁴⁰ .

На Windows Phone, вы также можете сойти с родной font-family: 'Segoe UI Symbol' ⁴¹ .

Оптимизировать для Performance

Производительность, как правило, считается одним из основных недостатков гибридного мобильного приложения.Это в основном верно, если ваше приложение имеет много тяжелых анимации, содержит огромные списки прокрутки и должен работать на старых устройствах.Однако, если вы все в порядке с поддержкой только новые версии платформы (Android 4, IOS 7 и Windows Phone 8), то вы, весьма вероятно, удовлетворительные результаты.Это, в конечном счете вопрос о том, сколько усилий вы положили в оптимизации DOM и CSS селекторы, писать производительную технологию Java, сокращая время рендеринга и свести к минимуму число перекомпоновке и перерисовки.Бесконечное количество статей и учебных пособий охватывает мобильный веб-производительность.Вот некоторые из моих любимых:

• “ Производительность и UX соображения для успешного PhoneGap Apps ⁴² “, Андрей Trice
• “ Телефон: Web Performance ⁴³ ” (слайды), Эстель Weyl
• “ Дать Быстрый, эффективно использует память JavaScript ⁴⁴ “, Эдди Османи, Smashing Magazine
• “ МинимизацияБраузер Reflow ⁴⁵ “, Линдси Симон, Google Developers
• “ Как сделать свой сайт быстрее на мобильный Devices ⁴⁶ “, Йохан Йоханссон, Smashing Magazine

Кроме того, мобильные и аппаратного рендеринга двигатели улучшения в быстром темпе, с новыми устройствами выходит каждый день.Разработчики могут сделать работу гибридного WebView приложения трудно отличить от таковой полностью родное приложение на серии iPhone 5 и Android телефонов, сопоставимых с Nexus 4 и 5 .

Увеличение воспринимаемого Speed

Строительство производительную приложение одно, но делает его feel быстр совсем другая.Если необходимо ваше приложение какое-то время для выполнения определенной задачи (например, некоторые тяжелой расчета или клиент-серверного взаимодействия), представляя мгновенную обратную связь имеет решающее значение для обеспечения жидкости и отзывчивый опыт.Распространенный метод заключается в задержке задачи, которые пользователь еще не нужно, при прогнозировании и предварительной загрузки шаги пользователь может принимать следующий.Известный пример Instagram, который добавления фотографий в background ⁴⁷ а пользователь занят Добавление тегов и обмен.Воспринимаемая скорость может быть очень отличается от фактической скорости, так что давайте использовать его в нашу пользу.Здесь не некоторые легкие задачи .

Удалить щелчком ожидания на сенсорной Devices

Нормальное обработчик события нажатия JavaScript на сенсорном устройстве идет с небольшой задержкой между touchstart и нажмите увольнения (обычно около 300 мс).Эта функция встроена в браузер, чтобы обнаружить пользователь выполняет ли одно- или двойное нажатие.Если вы не нуждаетесь в “дважды нажмите, чтобы увеличить”, вы смело можете устранить эти 300 миллисекунд, чтобы получить намного более чувствительными поведение крана.Мой любимый решением для этого является FastClick ⁴⁸ библиотека.Используйте его на все, кроме Internet Explorer:

if ('ontouchstart' in window) {
   window.addEventListener('load', function() {
      FastClick.attach(document.body);
   }, false);
}

Internet Explorer 10 немного легче.Вам просто нужно немного CSS:

html {
   -ms-touch-action: manipulation; /* IE 10  */
       touch-action: manipulation; /* IE 11+ */
}

Стиль Активный State

Как только пользователь нажимает для судебного элемент, такой как кнопки или ссылки, они должны немедленно получить какую-то обратную связь, что приложение обнаруженного их действие.В то время как CSS псевдо-класс :hover отлично работает для этого на рабочий стол, необходимо, чтобы перейти к :active или решение JavaScript для того, чтобы работать на мобильном телефоне.Я сравнил три приближается к активному state ⁴⁹ на JSFiddle.В то время как все они работают одинТак или иначе, вы судить, что лучше для вас .

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

IOS и Android:

button {
   outline: 0;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
}

Windows Phone 8:

<meta name="msapplication-tap-highlight" content="no">

Укажите Loading

Всякий раз, когда ваше приложение выполняет действие, которое будет занять некоторое время, чтобы закончить, даже на секунду, рассмотреть вопрос о включении индикатор загрузки.Если вы этого не сделаете, пользователи будут думать, что ваше приложение зависает иногда, или они будут нажмите вокруг, когда они не должны, или они могут даже разрушить вещи, а затем обвинить ваше приложение.Из того, что я испытал, анимированные GIF-файлы, как правило, плохая идея в мобильных браузерах.Как только есть нагрузка на процессор, GIF замерзает, таким образом, победив весь свой цели.Я предпочитаю Spin.js ⁵⁰ за конфигурирования и простотой использования.Кроме того, проверить некоторые другие JavaScript solutions ⁵¹ и CSS loaders ⁵² .

Кросс-платформенные инструменты, такие как PhoneGap и Trigger.io также обеспечить доступ к родной погрузчиков, который является большим для показа в полноэкранном режиме загрузки анимации .

Получить прокрутки Right

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

Прокруткой контента и фиксированный заголовок и / или нижний колонтитул бар являются общими почти для всех приложений.Есть два общих подхода к достижению этой цели с помощью CSS:

1. Включение прокрутки на body, и применяя position: fixed к заголовку;
2. Отключение прокрутки на body, и применяя overflow: scroll к содержанию;
3. Отключение прокрутки на body, и применяя JavaScript пользовательский прокрутки к содержанию .

В то время как первый вариант имеет некоторые преимущества (например, родной действия Иос прокрутки до потолка и простой структуры кода), я настоятельно рекомендую идти с второй вариант, overflow: scroll.Он имеет меньше оказания issues ⁵³ (хотя по-прежнему много), и поддержка браузера является большим на современных платформах (Android 4, IOS 5 и Windows Phone 8), с миленький Polyfill Для некоторых старых ones ⁵⁴ .Кроме того, можно заменить overflow: scroll с пользовательским прокрутки библиотеки (третий вариант), такие как iScroll ⁵⁵ .Хотя эти JavaScript решения позволяют более гибко с особенностями (например, положение прокрутки во время движения, обработки событий, настройки эффектов и полосы прокрутки и т.д.), они всегда наказывать производительности.Это становится критической, когда вы используете много DOM узлов и / или CSS3 эффектов (таких как box-shadow, text-shadow, opacity и rgba) в области содержимого .

Давайте посмотрим на некоторые из основных прокрутки имеет .

Momentum Effect

Приятной на ощупь эффект импульса позволяет пользователям быстро прокрутить больших площадей контента в интуитивно понятным способом.Она может быть легко активирован с некоторыми простыми CSS КСН 5 и в некоторых версиях Chrome для Android.КСН, это также позволит содержание отскакивают верхний и нижний края .

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

Потяните вниз, чтобы Refresh

Различные решение для этого имеются в Интернете, таких, как тот, по Damien Antipa ^{57 56} .В то время как решения для МО и Windows Phone имеют аналогичный вид и чувствовать, Android недавно представила свой собственный механизм (см ниже).Мы осуществили это в CatchApp использовать некоторые JavaScript и CSS ключевых кадров.(Я до сих пор, чтобы обернуть его красиво и положил его на GitHub, так что следите за об …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров