Які плюси та мінуси підходу HTML5, нативного та гібридного мобільних додатків?

Я хочу розробити мобільний додаток. Нещодавно я прочитав статтю на Telerik Forum , в якій порівнюється три типи мобільних додатків, і я не знаю, з кого слід вибрати. Ось зображення, що описує плюси та мінуси різних варіантів мобільного дизайну

Щоб вирішити між цими варіантами дизайну, я хотів би краще зрозуміти плюси та мінуси кожного вибору архітектури, наведеного на схемі. Які плюси і мінуси кожного архітектурного підходу?

Я мобільний розробник, який витратив чимало часу на розгляд цього питання.

Чому Ви запитуєте?

Швидше за все, ви сподіваєтесь зменшити витрати на розробку додатків за рахунок:

• Використання існуючих навичок розробки HTML5 / Javascript
• Націлювання на декілька платформ без написання декількох додатків з нуля
• Не потрібно підтримувати кілька баз коду в майбутньому

Причини можуть також включати:

• Розробка HTML5 / Javascript сприймається як "легше", ніж розробка нативного платформи
• Уникаючи сплати плати за реєстрацію програми розробника
• Уникання обмежень щодо вмісту додатків (азартні ігри тощо)
• Уникання придбання обладнання для розробки (наприклад, Mac для iPhone)

Визначення

Давайте встановимо, що саме ми маємо на увазі під кожним із трьох згаданих підходів:

Native
Додаток, який встановлюється на пристрої, як правило, з його магазину додатків (хоча іноді може бути завантаженим). Для цілей цієї дискусії інтерфейс власного додатка зазвичай не складається тільки з повноекранного веб-перегляду.

Мобільний Інтернет
Це насправді може бути взагалі будь-яка веб-сторінка, однак для цього обговорення розглянемо односторінковий веб-додаток, який намагається наслідувати зовнішній вигляд нативного додатка. Це не нативна програма, вона працює в браузері пристрою.

Гібридний
гібридний instanceofрідний додаток.

Більшість людей, напевно, розуміють, що гібридний додаток є односторінковим мобільним веб-додатком (знову ж, швидше за все, імітує зовнішній вигляд нативного додатка), але упакований як нативний додаток з доступом до власних послуг (à la Phonegap).

Однак насправді існує спектр між моделлю Phonegap і цілком рідною, про яку я пізніше пізніше.

Мобільний Інтернет

Технічні обмеження
Давайте перелічимо спочатку деякі технічні обмеження для мобільних веб-додатків, які самі по собі можуть бути вимикачами, залежно від того, що ви робите:

• Тільки HTML / полотно інтерфейсу користувача
• Немає доступу до певних подій та послуг пристрою (вони широко документально підтверджені)
• Не можна вказати у магазинах додатків (це впливає на відкриття)
• Може перетворитись на повний екран і мати значок домашнього екрану в iOS, однак це незвичне та незнайоме враження для більшості користувачів

Якщо ви можете жити з усім вищепереліченим, тоді читайте докладніше про проблеми односторінкових веб-додатків у рідному стилі. Однак цей розділ не буде повним без посилання на додаток FT.

Financial Times веб - додаток FT є відомим прикладом цього стилю додатки. Ось цікава особливість газети UK Guardian про це.

Це, безумовно, неабиякий подвиг техніки. Зауважте, що наразі він доступний лише на iOS - це говорить про те, що вони вважають, що вирішити проблеми вдосконаленої розробки крос-браузерів дуже важко.

Односторінкові веб-програми в рідному стилі

Цей розділ стосується як мобільних веб, так і додатків у стилі Phonegap.

Зовнішній вигляд і побут у веб-додатку, як правило, досягається за допомогою такої структури, як Sencha Touch, яка забезпечує набір компонентів інтерфейсу, які ви можете використовувати.

Такі рамки чудово підходять для дуже простих інтерфейсів. Однак їм не вистачає гнучкості. Ви не зможете реалізувати будь-який власний дизайн додатків за допомогою Sencha, вам потрібно буде адаптувати свій дизайн до того, що може вмістити рамки.

Основний спосіб, через який ці рамки страждають, - це намагання наслідувати власні тонкощі інтерфейсу користувача. Який приємний маленький підстрибуючий ефект, який ви отримуєте, коли прокручуєте до кінця списку iPhone? Ваша рамка повинна наслідувати це в JavaScript. Відтворити його повністю неможливо, він буде схильний до уповільнення, і ваші користувачі будуть застрявати в "дивовижній долині" додатка, який виглядає начебто як рідний, але, очевидно, не є і нетехнічним Користувач не зможе покласти пальця на те, чому саме.

Міф "HTML5 / Javascript - це легко"

Фрагментація пристроїв у веб-переглядачах є достатньою, і коли ви вийдете за межі найосновніших HTML та CSS, ви помітите, що речі не так працюють, як ви очікували. Ви можете виявити, що витрачаєте більше часу на вирішення проблем із користувальницьким інтерфейсом, ніж ви б заощадили, роблячи це натисно вдвічі. Якщо ви перебуваєте на нашому веб-сайті , зауважте, що веб-перегляди нативної програми не збігаються з веб-переглядачами пристроїв і мають свої проблеми з фрагментацією.

Оскільки ваш додаток стає більш функціонально складним, ви виявите, що вам потрібно більше, ніж основні навички jquery, щоб зберегти Javascript чистим і доступним.

Однак, за допомогою цього підходу цілком можливо створити прості, функціональні додатки досить швидко. Але це досить очевидно, коли це робить додаток.

Далі по спектру

Таким чином, ми хочемо запропонувати кращі UX, ніж можуть запропонувати програми в стилі Phonegap, не записуючи абсолютно все з нуля кілька разів. Що ми можемо зробити?

Поділитися кодом, який не використовується UI

Існує цілий ряд методів для обміну бізнес-логікою на декількох нативних платформах. Google запустив J2ObjC, що переводить Java в Objective-C. При ретельному розбитті коду бібліотеку Java можна використовувати як на Android, так і на iOS.

Бібліотеки, такі як Калатрава і Кірін, дозволяють кодованим базам, написаним на Javascript (а отже, будь-чим, що може бути скомпільовано в Javascript), маніпулювати з рідного коду. Відмова: Я працюю на майбутніх платформах, які створили Кірін; ми мали великий успіх, використовуючи його на iOS з Javascript, згенерованого на Java з GWT, причому код Java також запускається на Android на Android.

Використовуйте веб-перегляди ... де це доречно

Повноекранні веб-перегляди мають зробити багато роботи, щоб мати змогу імітувати переходи екрану та ефекти відмов. Але веб-перегляд всередині нативного хрому додатка може бути невідрізним від рідного.

Існують стандартні та добре задокументовані методи для спілкування з власними програмами та веб-переглядами.

Списки та таблиці можуть працювати особливо добре, якщо це зроблено таким чином, проте введення тексту є прикладом чогось найкраще керованого в домашніх умовах (для повного контролю над клавіатурою).

Підводячи підсумок

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

Мій девіз: використовуйте веб-перегляди, де тільки можете, але переконайтеся, що ваші користувачі не можуть цього сказати .

Спочатку перевірте це опитування, щоб знати, що відбувається!

порівняння між трьома типами: розуміння параметрів розробки мобільних додатків

Порівняння рідного та гіпріда:

HTML5 проти Native

HTML5 vs Native App: Який вибрати ??

Це дійсно добре: HTML5 v рідні програми: основні міркування для вашої мобільної стратегії

Коментарі:

• Ви можете піти на одну з них, залежить від того, що у вас є (навички) і що ви можете отримати (зовнішній вигляд, продуктивність, функціональність, ...)
• Кожен розробник мобільних додатків повинен мати чітке бачення / вимоги щодо програми, яку він збирається розробити для перших версій та майбутніх! тільки для того, щоб варіант, який він використовував, не обмежив його в якийсь момент.
• Немає нічого, як мати реальний досвід роботи з трьома способами та бути в курсі одночасно, це дасть тобі відчуття та можливість прийняти правильне рішення.

Якщо вам потрібно отримати доступ до апаратного забезпечення телефону, вам слід створити нативну програму (в HTML5 ви можете отримати доступ до деяких апаратних компонентів пристрою, таких як GPS).

Якщо вам зручніше в розробці веб-сторінок, вам слід дотримуватися цього, якщо вам не потрібно робити нативний додаток.

Щодо того, що ви повинні знати, я б сказав, що вам слід пам’ятати про всі різні розміри екрана (включаючи вертикальну та горизонтальну орієнтацію). Слід пам’ятати про різні версії ОС (це більше для android). Оскільки це мобільні поглинання, є ймовірність, що користувач відповість на телефон, називає його своїм телефоном, а також у них немає обчислювальної потужності робочого столу чи сервера.

Для мене, коли пишемо будь-яку програму для споживачів, головним для її успіху є прийняття користувачем і сприйняття програми. Через це чотири причини схилятися до рідних додатків, незважаючи на додаткові витрати, пов’язані з навчанням, навчанням та програванням WORA (пишіть один раз запускати куди завгодно):

1. Швидше запуск програми
2. Більш плавне прокручування
3. Більш послідовні користувальницькі програми, які більше зв'язуються з рештою ОС та додатків
4. Швидше відповідь інтерфейсу програми

Те, що ви хочете вище всього іншого, - це чудовий досвід користувачів, який допомагає вашій програмі досягти успіху на ринку перерізаного горла. Звичайно, є винятки, особливо відсутність набору навичок, брак часу та бюджету. Іноді програми орієнтовані на обмежений набір ділових користувачів, які можуть не так сильно піклуватися про ці речі.

Причини, подібні цим, Facebook вирішив застосувати свою стратегію на користь рідних програм для IOS та Android:

Будь ласка, прочитайте:

Марк Цукерберг: Найбільша наша помилка ставила занадто багато на HTML5 http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on- html5 /

Чому Facebook вийшов з мобільного Інтернету та пішов з Native за допомогою свого нового додатка для iOS http://readwrite.com/2012/08/23/how-facebook-ditched-the-mobile-web-went-native-with-its-new- ios-app # awesm = ~ o9jDrRefxdgnpS

Сподіваюся, це допомагає.

З нижченаведеним моїм поточним положенням щодо цього дебале є те, що гібрид добре почати з того, щоб вивчити ваш додаток, швидко переглядати відгуки клієнтів та стабілізувати набір функцій. Потім переписати додаток на рідну мову відповідно до специфікації, щоб покращити досвід.

Я покинув мобільну мережу, тому що це зовсім інше призначення. Якщо ви хочете бути в магазинах додатків, Native / Hybrid - це шлях. Якщо ви хочете спростити розгортання і готові пожертвувати досвідом та технічними можливостями, перейдіть на веб-сторінку Mobile.

Про / проти рідних :

• Pro: Він відповідає решті досвіду роботи пристрою, жодних проблем з долиною немає .
• Про: В основному це забезпечує плавний постійний досвід користувальницького інтерфейсу, без затримок, без заїкань.
• Про: Мало технічних обмежень, ви можете повністю використовувати пристрій.
• Про: Народні інструменти забезпечують відповідність валідації магазинів додатків.
• Pro: Рідні рамки включають перетворення на версію платформи, менший час, витрачений на точну настройку.
• Кон: Це побудова триває, а тому для побудови потрібно більше часу.
• Con: Потрібні розробники поліглотів, яких важко знайти, дорого коштувати.
• Con: Потрібно ознайомити API кожного платформи пристроїв (iOS / Android / тощо)
• Con: Крута крива навчання.
• Con: Різні набори інструментів на платформі.

Про / проти гібриду :

• Pro: Єдина база коду для націлювання на кілька платформ пристроїв.
• Про: Швидкі цикли розробки, велика доступність у компонуванні, ідеально підходить для складання прототипів та MVP .
• Pro: Зручна крива навчання, багато документації, рамки, які допоможуть вам допомогти.
• Pro: Єдиний набір інструментів для розробки. Інструменти для налагодження Chrome - відмінні.
• Pro: одна база коду для націлювання на кілька платформ пристроїв.
• Про: Багато розробників доступні, їх легко вивчити.
• Con: Потрібен гідний фреймворк інтерфейсу, щоб адаптувати інтерфейс користувача для кожної різної платформи, щоб він відповідав досвіду роботи пристрою. Є такі рішення, як Kendo UI , Sencha Touch .
• Con: Потрібно бути дуже обізнаним щодо використання пам'яті та обчислень, деякі CSS, петлі JavaScript можуть серйозно уповільнити додаток. Налаштування не дуже хороших інструментів на пристрої.
• Кон: Ще не дозріла, все може раптом змінитися, хоча інструменти вдосконалюються.

Будучи самим розробником мобільних пристроїв, найгірше - це автономний доступ. Ви просто змушуєте користувачів бути в Інтернеті, що має працювати в багатьох додатках, але не у всіх.

Інший великий поганий аспект - повільність. Час, необхідний для аналізу віддалених даних, може зайняти значний час. Так, ви можете попередньо отримати дані під час завантаження, але у всіх інших випадках ви не можете уникнути повільності.

Я виявив, що така програма закінчила додаток дорожче, ніж рідні. Я більше не рекомендую їх жодному моєму клієнту.

Великою проблемою гібридних додатків є фрагментація каркасів: їх явно набагато більше (Ionic, Xamarin, React Native тощо), ніж є цікаві мобільні платформи (зазвичай це лише дві Android та iOS). Ці рамки конкурують, виникають, занепадають, тому перехід на гібрид не врятує вас від стрибків з платформи на платформу, навіть якщо ви плануєте зберегти свою команду на все життя.

Google та Apple намагаються найкращим чином надавати та підтримувати редакторів, налагоджувачів, тестування рамок, інструментів рефакторингу та інших засобів для розробки платформ. Тому я б взяв типове формулювання " просто набагато простіше розробити гібридний додаток, редагувати його улюбленим редактором та відкривати у браузері " з розумним застереженням. Xamarin та React Native - це платформи розвитку, такі ж, як Swift або Java / Android, і хоча "привіт світ" може виглядати коротшим, з часом слід зайняти порівняно час, щоб правильно навчатися.

Якщо в будь-якому випадку виникла б потреба в нативних компонентах (наприклад, існуюча стороння бібліотека повинна бути інтегрована), ви отримаєте три рамки, а не дві: iOS, Android і ваш гібридний фреймворк вгорі, в кінцевому підсумку з більш складною архітектурою. Налагодження таких додатків, перехід між міжшаровими дзвінками, реєстрація всіх шарів, зберігання коду в синхронізації складно часом неможливо.

Деякі кажуть, що " додаток буде виглядати абсолютно однаково для всіх платформ ". Це справді гарна річ? Додаток для Android повинен виглядати як додаток для Android, а додаток для iOS має бути схожим на додаток для iOS.

А як щодо нових функцій? Носиться? Миттєві додатки, які зараз пропонує платформа Android? Показ додаткових даних на зовнішньому дисплеї? Зараз гібридні додатки підтримують багато нативних функцій, але чи реально вони підтримують усі ? У будь-який час, негайно?

Нарешті, не лише продуктивність та досвід роботи користувачів, а й безпека можуть бути більше на стороні нативного додатка. Гібридний каркас додає шар непрямості, який може мати власні помилки, в тому числі помилки безпеки.

Завершуючи все вище, під можливістю вибору, я б обов'язково або перейшов до двох нативних програм, одного для iOS, і одного для Android, або ж просто створив мобільну версію веб-сайту, не турбуючись із розробкою додатків для будь-якої платформи. .