Содержание
- PWA и нативные приложения: в чем разница?
- Прогрессивные веб-приложения: создание для Интернета
- Сильные стороны PWA
- Слабые стороны PWA
- React Native
- Сильные стороны React Native
- Слабые стороны React Native
- NativeScript
- Сильные стороны NativeScript
- Слабые стороны NativeScript
Какой подход выбрать при создании приложения? Стоит ли вам выбирать путь PWA / веб-технологий или лучше использовать нативный дизайн для конкретных платформ? У обоих вариантов есть свои плюсы и минусы, и в этой статье мы сосредоточимся на нескольких популярных вариантах, используемых для создания веб-приложений и нативных приложений.
PWA (прогрессивные веб-приложения), также известные как веб-приложения, созданы с использованием популярных веб-технологий HTML, CSS и JavaScript и работают в веб-браузере. (Ознакомьтесь с некоторыми из основных HTML-тегов, которые помогут в ваших сборках.) PWA фактически представляют собой мобильные веб-сайты, разработанные так, чтобы выглядеть как приложение, а использование веб-API дает им функциональность, аналогичную нативному приложению.
Дополнительные советы по созданию приложений можно найти в нашей публикации о том, как создать приложение. Если это сайт, который вы хотите создать, ознакомьтесь с этими лучшими разработчиками веб-сайтов и услугами веб-хостинга.
PWA и нативные приложения: в чем разница?
Преимущество прогрессивных веб-приложений в том, что они могут устанавливаться и работать на устройстве без необходимости в магазине приложений. И частью процесса является манифест веб-приложения, который позволяет разработчикам контролировать, как приложение выглядит и как оно запускается. Кроме того, веб-дизайнеры / разработчики интерфейсов уже будут обладать навыками, необходимыми для немедленного начала разработки. Нет необходимости изучать новый язык, в отличие от нативных приложений.
Нативные приложения создаются с учетом конкретной ОС, т. Е. 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
React Native - это компонентная среда с открытым исходным кодом на основе JavaScript, спонсируемая Facebook, которая использует шаблоны проектирования React, а также язык JavaScript для компиляции собственных приложений для iOS, iPadOS и Android из одного исходного кода.
Но никакие HTML-элементы не принимаются для рендеринга; действительны только другие собственные компоненты. Поэтому вместо рендеринга div> с p> и ввод> элемент с JSX, вы будете визуализировать Просмотр> с Текст> и TextInput>. Для стилизации компонентов вы по-прежнему используете CSS, а макет определяется через Flexbox.
Пользовательский интерфейс будет отображаться не в DOM браузера, а с использованием собственных библиотек пользовательского интерфейса на Android и iOS. Следовательно, Кнопка> в ReactNative станет экземпляром UIButton на iOS, а android.widget.Button класс на Android; в React Native нет веб-среды выполнения.
Однако весь код JavaScript будет выполняться на виртуальной машине JavaScript на устройстве, поэтому при компиляции приложения нет преобразования JavaScript в реальный собственный код. Существует набор хорошо известных API-интерфейсов для веб-разработчиков, таких как Fetch API, WebSockets и таймеры браузера: setInterval и requestAnimationFrame. Другие возможности развертываются на платформе с помощью настраиваемых API, таких как анимация.
Вы можете начать быстрый проект React Native с двумя бесплатными интерфейсами командной строки: Expo или более продвинутым и официальным интерфейсом командной строки ReactNative. Если вы используете официальный интерфейс командной строки, вам также потребуется Android Studio для компиляции и тестирования приложения Android и Xcode, чтобы сделать то же самое на iOS и iPadOS, поэтому для этой платформы вам понадобится компьютер с macOS.
React Native компилирует нативные приложения для iOS и Android, что означает, что распространение вашего приложения будет следовать тем же правилам, что и другие нативные приложения: магазины приложений для общедоступных приложений, корпоративное распространение и альфа / бета-тестирование. Как правило, вы не можете распространять приложение через браузер, хотя могут помочь React Native для Web и 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>, вы разместите 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-кода, интерфейс командной строки, систему тестирования с горячей перезагрузкой и приложение для игровой площадки NativeScript, поэтому вам не нужно устанавливать все зависимости во время тестирования, а также несколько дополнительных сервисов, таких как онлайн детская площадка.
Наконец, NativeScript только компилирует приложение для Android и iOS, которое можно установить из официальных каналов распространения и магазинов приложений, если вы соблюдаете их правила, корпоративное распространение и альфа / бета-тестирование. Обычно нет возможности распространять приложения из браузера, и для этой платформы нет решений для настольных приложений.
Эта статья изначально была опубликована в Выпуск 325 of net, самый продаваемый журнал для веб-дизайнеров и разработчиков в мире. Купить Выпуск 325 или же подписываться в чистую.
Присоединяйтесь к нам в апреле 2020 года с нашей линейкой суперзвезд JavaScript на GenerateJS - конференции, которая поможет вам создать лучший JavaScript. Забронируйте сейчас наgenerateconf.com
