Зміст
- PWA проти власних додатків: у чому різниця?
- Прогресивні веб-програми: створення Інтернету
- Сильні сторони PWA
- Слабкі сторони PWA
- React Native
- Сильні сторони React Native
- Слабкі сторони React Native
- NativeScript
- Сильні сторони NativeScript
- Слабкі сторони NativeScript
Який підхід слід використовувати під час створення додатка? Чи варто вам йти на шлях PWA / веб-технологій або вам слід перейти на власний дизайн і розробляти дизайн для певних платформ? Обидва варіанти мають свої плюси і мінуси, і в цій статті ми зупинимося на декількох популярних варіантах, що використовуються для створення веб-програм та власних додатків.
PWA (Прогресивні веб-програми), також відомі як веб-програми, створені з використанням популярних веб-технологій HTML, CSS та JavaScript і працюють у веб-браузері. (Ознайомтеся з деякими важливими тегами HTML, щоб допомогти у вашій збірці.) PWA - це фактично мобільні веб-сайти, розроблені, щоб виглядати як додаток, а використання веб-API надає їм функціональність, подібну до власної програми.
Щоб отримати додаткові поради щодо створення додатків, дивіться нашу публікацію про те, як створити програму, або якщо це веб-сайт, який ви хочете створити, перегляньте ці найкращі розробники веб-сайтів та служби хостингу.
PWA проти власних додатків: у чому різниця?
Прогресивні веб-програми мають ту перевагу, що їх можна встановлювати та працювати на пристрої без потреби в магазині додатків. І, частиною процесу є Web App Manifest, який дозволяє розробникам контролювати, як з’являється програма та як вона запускається. Крім того, веб-дизайнери / розробники інтерфейсу вже матимуть набір навичок, необхідний для негайного початку створення. Не потрібно вивчати нову мову, на відміну від рідних програм.
Власні програми створюються з урахуванням конкретної ОС - тобто. iOS та Android - і використовуйте фреймворк або мову для досягнення цієї мети. Додатки iOS зазвичай використовують Xcode або Swift, а додатки Android - JavaScript. Але в цій статті ми зупинимося на декількох фреймворках з відкритим кодом на основі JavaScript - React Native та NativeScript - які працюють для обох платформ.
Переваги власних додатків полягають у тому, що вони, як правило, приносять кращу функціональність, оскільки вони краще використовують апаратне та програмне забезпечення пристроїв, швидші та гнучкіші, і ви отримуєте гарантію якості, хоча рейтинги в магазинах програм. Але це означатиме необхідність навчитися користуватися певним фреймворком або бібліотекою.
Тут ми розглядаємо три різні варіанти - один для Інтернету (PWA) і два для власного (React Native, NativeScript) - для створення програми. Ми проаналізуємо, як вони працюють, що вони можуть зробити, і розглянемо їх сильні та слабкі сторони, щоб допомогти вам вирішити, який варіант ви повинні вибрати для створення своєї програми.
Прогресивні веб-програми: створення Інтернету
Сильні сторони PWA
- Додатки також працюють у браузері
- Поширення: браузер, корпоративні магазини та магазини додатків
- Може використовувати React, Angular, Vue, vanilla або інші фреймворки
Слабкі сторони PWA
- Немає доступу до кожного власного API
- Можливості та розподіл магазинів на iOS та iPadOS обмежені
- Це в постійній еволюції
PWA - це поточний шаблон дизайну для створення високопродуктивних, автономних програм, які можна встановити, використовуючи лише веб-стек: HTML, CSS, JavaScript та API браузерів. Завдяки службі обслуговування та специфікаціям веб-додатків ми тепер можемо створити першокласний досвід роботи після встановлення для Android, iOS, iPadOS, Windows, macOS, Chrome OS та Linux.
Для створення PWA можна використовувати будь-яку архітектуру: на серверному, ванільному JavaScript, React, Vue, Angular або інших фреймворках на стороні клієнта. Це може бути односторінковий додаток або багатосторінковий веб-додаток, і ми визначаємо, як будемо підтримувати користувачів у режимі офлайн.
При такому підході нам не потрібно упаковувати та підписувати ресурси нашого додатку: ми просто розміщуємо файли на веб-сервері, і працівник служби відповідає за кешування файлів у клієнті та обслуговує їх після встановлення. Це також означає, що якщо додаток потребує оновлення, ви просто змінюєте файли на сервері, і логіка працівника служби відповідає за їх оновлення на пристроях користувачів без втручання користувача чи магазину програм.
Що стосується розповсюдження, то найпоширенішим методом є браузер. Користувачі встановлюють програму з браузера, використовуючи пункт меню Додати на головний екран або Встановити, приймаючи запрошення на встановлення або користувальницький користувальницький інтерфейс веб-програми на сумісних платформах. Варто зазначити, що Apple відкидає чисті PWA, опубліковані в App Store, і закликає веб-розробників розповсюджувати їх через Safari.
Користувальницький інтерфейс управляється виключно веб-середовищем виконання, а це означає, що веб-дизайнер відповідає за рендеринг кожного елемента керування на екрані. Якщо ви використовуєте структуру інтерфейсу користувача, таку як Ionic, або бібліотеку Material Design, HTML та CSS будуть імітувати власні інтерфейси на Android або iOS, але це не обов’язково.Під час роботи з PWA застосування методів веб-продуктивності є обов’язковим, щоб забезпечити хороший досвід користування.
Що стосується можливостей, PWA матиме доступ лише до API, доступних у механізмі браузера на цій платформі, і його неможливо розширити за допомогою власного коду - за винятком дистрибутивів PWA з магазину додатків. У цьому питанні iOS та iPadOS є більш обмеженими платформами для PWA, тоді як Chrome (для ОС Android та настільних ПК) має більшу доступність і докладає всіх зусиль, щоб додати всі можливі API до JavaScript із проектом Fugu.
- Найкраще хмарне сховище: Виберіть правильний варіант для себе.
React Native
Сильні сторони React Native
- Такі самі шаблони, як і у React.js
- Деякі веб-API відкриті
- Підтримка Інтернету та робочого столу
Слабкі сторони React Native
- Не вдається повторно використати компоненти веб-інтерфейсу
- Рідний міст потребує певної роботи
- Потрібен досвід реагування
React Native - це компонентна структура з відкритим кодом на основі JavaScript, спонсорована Facebook, яка використовує шаблони дизайну React, а також мову JavaScript для компіляції власних програм для iOS, iPadOS та Android з одного вихідного коду.
Але жодні елементи HTML не приймаються до візуалізації; дійсними є лише інші власні компоненти. Тому, замість надання a div> з p> і a введення> елемент з JSX, ви будете візуалізувати файл Переглянути> з Текст> і a Введення тексту>. Для компонування стилів ви все ще використовуєте CSS, а макет визначається через Flexbox.
Інтерфейс користувача не відображатиметься в DOM браузера, а за допомогою власних бібліотек користувальницького інтерфейсу на Android та iOS. Отже, a Кнопка> в ReactNative стане екземпляром UIButton на iOS та android.widget.Button клас на Android; у React Native немає веб-середовища виконання.
Однак весь код JavaScript буде виконуватися на віртуальній машині JavaScript на пристрої, тому при компіляції програми не буде перетворення JavaScript у справжній власний код. Для веб-розробників існує набір добре відомих API, таких як Fetch API, WebSockets та таймери браузера: setInterval та requestAnimationFrame. Інші здібності розгортаються на платформі за допомогою спеціальних API, таких як анімація.
Ви можете розпочати швидкий проект React Native з двома безкоштовними CLI: Expo або більш досконалим та офіційним ReactNative CLI. Якщо ви використовуєте офіційний CLI, вам також потрібна Android Studio для компіляції та тестування програми Android та Xcode, щоб зробити те саме на iOS та iPadOS, тому вам знадобиться комп'ютер macOS для цієї платформи.
React Native компілює нативні програми для iOS та Android, а це означає, що розповсюдження вашої програми буде дотримуватися тих самих правил, що й інші рідні програми: магазини програм для загальнодоступних програм, розподіл підприємств та альфа / бета-тестування. Як правило, ви не можете поширювати програму через браузер, хоча React Native для Інтернету та Microsoft React Native для платформ Windows можуть допомогти.
NativeScript
Сильні сторони NativeScript
- Хороші інструменти для кодування та тестування
- Велика галерея програм, готових до гри
- Усі API для Android та iOS представлені в JS
Слабкі сторони NativeScript
- Невелика громада
- Не вдається повторно використати компоненти веб-інтерфейсу
- Немає веб-підтримки, робочого столу чи підтримки React
NativeScript не такий відомий, як React Native, але він конкурує в тій же галузі: власні програми для iOS та Android з JavaScript та веб-фреймворків. Це дозволяє використовувати JavaScript або TypeScript та файл користувацького інтерфейсу XML для створення власних програм. Він також підтримує Angular і Vue прямо зараз, тому це чудове рішення для розробників, які звикли до цих фреймворків.
Переваги NativeScript стають зрозумілішими, коли ви використовуєте Angular або Vue. Для Angular ви створюєте ті самі компоненти, до яких ви звикли, але використовуючи XML замість HTML для шаблону, включаючи всі прив'язки даних. У XML, замість div> з p> та ан img>, ви розмістите a StackLayout> з Етикетка> та ан Зображення> компонент.
CSS та Sass підтримуються у браузері з подібними стилями до CSS. Маршрутизація та управління мережею здійснюються завдяки реалізації стандартних сервісів Angular. Для Vue це щось подібне; ви пишете шаблон у XML, замість того, щоб використовувати HTML у ньому шаблон> елемент у вашому файлі .vue.
NativeScript включає колекцію компонентів, які потім відображаються на власному елементі керування Android або iOS, тому, коли ви відтворюєте список або інструмент вибору, це буде власний додаток, використовуючи ту ж ідею, що і в React Native.
Ваш код JavaScript або TypeScript (переведений) виконується на віртуальній машині JavaScript на пристрої з мостом до / з рідного середовища. У цьому мосту виставляються всі власні API з Android або iOS / iPadOS, тому, незважаючи на доступ до міжплатформенних API, ми можемо створити екземпляр або викликати будь-який код Java або Objective-C з JavaScript / TypeScript, а NativeScript буде маршувати типи даних.
NativeScript має чудову підтримку інструментальних засобів, включаючи плагіни коду VS, CLI, систему тестування гарячого перезавантаження та додаток NativeScript на дитячому майданчику, тому вам не потрібно встановлювати всі залежності під час тестування, а також кілька додаткових служб, таких як Інтернет дитячий майданчик.
Нарешті, NativeScript складає лише додаток для Android та iOS, який можна встановити з офіційних каналів розповсюдження та магазинів додатків, якщо ви дотримуєтесь їхніх правил, корпоративного розподілу та альфа / бета-тестування. Зазвичай неможливо розповсюдити програми з браузера, і для цієї платформи не існує рішень для настільних програм.
Ця стаття була спочатку опублікована в випуск 325 of net, найпопулярніший у світі журнал для веб-дизайнерів та розробників. Купуйте випуск 325 або передплатити до мережі.
Приєднуйтесь до нас у квітні 2020 року з нашою лінійкою суперзірок JavaScript на GenerateJS - конференція, яка допоможе вам створити кращий JavaScript. Забронюйте зараз за адресоюgeneratedconf.com
