Разница между нативной разработкой, разработкой H5 и гибридной разработкой

JavaScript

Режим разработки приложения

На рынке существует три основных типа приложений:

  1. Родное приложение
  2. Веб-приложение (например, HTML5)
  3. Гибридное приложение Конечно, есть еще флаттер и т.д.

Сравнение режимов разработки приложений

1. Нативная разработка

Нативная разработка (разработка нативных приложений) заключается в использовании официально предоставленного языка разработки, библиотеки классов разработки и средств разработки для разработки приложений на мобильных платформах, таких как Android и IOS. Например, Android использует Java, Eclipse и Android Studio, а IOS использует для разработки Objective-C и Xcode.

преимущество:

  1. Он может получить доступ ко всем функциям мобильного телефона (таким как GPS, камера и т. Д.) И может реализовать наиболее полные функции;
  2. Высокая скорость работы, высокая производительность, отличный пользовательский интерфейс;
  3. Поддержка большого количества графики и анимации, отсутствие задержек, быстрый отклик;
  4. Высокая совместимость, каждый код тщательно проработан программистами, как правило, флешбеков не будет, а также это может предотвратить появление вирусов и лазеек;
  5. Использование интерфейса, предоставляемого на стороне устройства, относительно быстро дает преимущество в скорости обработки.

недостаток:

  1. Время разработки долгое, самое быстрое — около 3 месяцев, а медленное — около пяти месяцев;
  2. Себестоимость производства высока, а себестоимость высока;
  3. Портативность относительно плохая: для нативного приложения Android и IOS нужно разрабатывать отдельно, а одну и ту же логику и интерфейс писать в двух наборах;
  4. Ограничения контента (ограничения App Store);
  5. Вы должны дождаться завершения загрузки, прежде чем пользователь сможет открыть его.Когда вы получите новую версию, вам нужно снова загрузить обновление приложения.
  6. Новые требования повторяются, а запуск идет медленно.

2. веб-приложение (разработка h5)

Разработка приложений HTML5 — это разработка приложений с использованием веб-технологий.Веб-сайт, который можно открыть в браузере мобильного телефона, называется веб-приложением. Веб-технологии сами по себе нуждаются в поддержке браузеров для отображения и взаимодействия с пользователем, поэтому основными используемыми технологиями являются HTML, CSS, Javascript и JS-фреймворки, такие как jQuery, Vue и React.

преимущество:

  1. Он поддерживает широкий спектр устройств, может быть кроссплатформенным, а написанный код может работать на Android, IOS и Windows одновременно;
  2. Низкая стоимость разработки и короткий цикл;
  3. отсутствие ограничений по содержанию;
  4. Он подходит для отображения страниц с большими абзацами текста (например, новости, стратегии и т. д.) и насыщенными форматами (например, полужирный, различные шрифты);
  5. Пользователи могут напрямую использовать последнюю версию (автоматическое обновление, пользователям не нужно обновлять вручную).

недостаток:

  1. Из-за ограничений самой веб-технологии мобильные приложения H5 не могут получить прямой доступ к оборудованию устройства и автономному хранилищу, поэтому существуют большие ограничения в плане опыта и производительности;
  2. Он имеет высокие требования к сети и не может выполнять какие-либо операции в автономном режиме;
  3. ограниченный функционал;
  4. Скорость отклика приложения низкая, а скорость переключения страниц низкая;
  5. Картинки и анимация не очень полезны;
  6. Плохой пользовательский опыт;
  7. Аппаратное обеспечение телефона (камера, микрофон и т. д.) не может быть вызвано.

Гибридная (Native + H5) разработка — разработка гибридных приложений

Гибридная разработка (разработка гибридных приложений) относится к гибридному приложению, в котором используются собственные технологии и технологии разработки H5, чтобы повысить эффективность и сократить расходы при разработке продукта приложения. Проще говоря, это режим веб-страницы, который обычно состоит из двух частей: «Облачный веб-сайт HTML5 + приложение-клиент APP». Гибридная разработка — это режим разработки, в котором изучаются сильные и слабые стороны друг друга. Часть собственного кода использует подключаемые модули WebView или другие фреймворки для предоставления контейнеров для H5. Основная бизнес-реализация и отображение интерфейса программы реализованы с использованием веб-интерфейса, связанного с H5. технологии. Например, такие приложения, как JD.com, Taobao и Toutiao, созданы с использованием гибридной модели разработки.

преимущество:

  1. Высокая эффективность разработки и экономия времени. Один и тот же набор кодов можно использовать как на Android, так и на IOS;
  2. Обновлять и развертывать удобнее: каждую версию обновления нужно обновлять только на стороне сервера, и ее больше не нужно загружать в App Store для проверки;
  3. Сопровождение кода удобно, обновления версий происходят быстро, а затраты на продукт снижаются;
  4. Больше функций, чем в веб-версии;
  5. Может быть запущен в автономном режиме.

недостаток:

  1. Функцию/интерфейс нельзя настроить: все содержимое фиксировано, интерфейс нельзя изменить или добавить функции;
  2. Медленная загрузка/высокие требования к сети: все данные смешанных приложений должны быть получены с сервера, и каждая страница должна быть загружена повторно, поэтому скорость открытия низкая, использование сети высокое, а время буферизации длительное, что легко вызвать отвращение у пользователей;
  3. Уровень безопасности относительно низкий: код представляет собой старый код, который не может быть хорошо совместим с новейшей системой мобильной связи, а уровень безопасности низок.
В настоящее время существует два режима разработки для гибридной разработки:
  1. Режим разработки с собственным руководством: требуются собственные разработчики для Android и IOS. Все приложение имеет как собственные страницы, так и страницы H5. Когда требуются страницы H5, инженеры-разработчики внедряют встроенные средства. Проект, который я недавно разрабатываю, использует такой режим разработки. .
  2. Режим разработки под руководством H5: только инженеры-разработчики H5 необходимы для упаковки приложений и вызова собственных функций устройства с помощью некоторых упакованных инструментов, таких как функция облачной упаковки HBuilder.

Как отличить нативный код от H5 в приложении для смешанной разработки

На картинке выше верхняя часть родная, а нижняя H5

1. Посмотрите на способ загрузки - (точнее)

Если под панелью навигации есть строка загрузки открытия новой страницы, страница является страницей H5, если нет — нативной. При открытии нашей страницы H5 в WeChat есть общая зеленая строка загрузки.

Например, при открытии приложения Gome APP отображается красный индикатор выполнения.

2. Посмотрите, можно ли закрыть панель навигации в верхней части приложения (не очень точно)

Если в навигационной панели вверху приложения есть кнопка закрытия или значок закрытия, то текущая страница точно H5, а нативная не появится (если только разработчик дизайна не сделал это намеренно)

Meituan, приложение Dianping и приложение WeChat будут отображать слово «закрыто» в верхнем левом углу, когда загружено слишком много h5.

3. Посмотрите на границы макета (только для телефонов Android)

Вы можете открыть границу макета отображения в параметрах разработчика, Когда элементов страницы много, макет представляет собой целый блок h5, а плотный макет — это собственный элемент управления. Страницы с макетом являются нативными, в противном случае страницы h5. (Только для пробной версии телефона Android)

4. Посмотрите советы по копированию статей, нужно сравнить, чтобы получить результат. (неточно)

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

5. Проверьте отключение сети

Отключите телефон от интернета. Затем нажмите на страницу. Тогда то, что может отображаться нормально, пишется нативно. Страница 404 или ошибка отображается на странице html. Некоторые собственные страницы можно открыть в обычном режиме, и есть разница между собственными отчетами об ошибках и отчетами об ошибках H5, которые невозможно открыть.

6. Оценка того, когда страница вытягивается для обновления (при условии, что есть функция обновления вытягивания вниз)

Если интерфейс не имеет очевидного явления обновления, он является родным, а если есть очевидное явление обновления (например, вспышка), это страница H5 (iOS и Android). Например, краудфандинговая страница Taobao.

7. Когда страница раскрывается, поставщик URL должен быть H5.

Статья взята с:

  1. сегмент fault.com/ah/119000002…

Суммировать

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

  1. Приложение Pure H5 — худший опыт
  2. В приложениях hybird способ встраивания H5 в режим веб-просмотра в настоящее время больше используется крупными производителями и малыми и средними предприятиями.
  3. Flutter — это SDK для мобильных приложений, код которого может одновременно генерировать два высокопроизводительных и качественных приложения для iOS и Android. В настоящее время многие малые и средние предприятия начали использовать его в больших количествах.
  4. В настоящее время Weex не используется в проекте, и я знаю, что не так много продуктов, которые его используют.
  5. rn в настоящее время используется в небольшом количестве на JD.com.

думать

  1. Наше приложение, как выбрать техническую структуру, подходящую для нашей команды, сделать наше приложение более быстрым и удобным, это то, к чему мы стремимся. В настоящее время отечественные vue и react очень зрелы с точки зрения экологии, библиотек компонентов и семейных ведер. Если вы тот, кто любит пробовать что-то новое, рекомендуется получить флаттер. Учитывая стабильное развитие проекта, по-прежнему рекомендуется использовать vue и react.
  2. Насколько я понимаю, РН по вложениям в разработку, рабочей силе почти близка к родной. В настоящее время наша команда не рассматривает
Категории