Веб-приложения становятся лучше

Веб-приложения становятся лучше

Slack - это веб-приложение. Trello - это веб-приложение. Гугл документы. Gmail. Много Twitter.

Интернет начинался как собрание документов с гиперссылками. Шумиха вокруг «Web 2.0» в середине 2000-х была связана с тем, как Интернет становится интерактивным. Сначала мы просто комментировали и голосовали за документы, содержащие гиперссылки, но при условии, что такие люди, как я, могли бы выполнять почти всю свою работу в так называемых «веб-программах». Некоторые из этих программ добавляли сотрудничество или другие полезные функции к классическим задачам настольных приложений, таким как электронная почта или разработка файлов. Другие имеют более характерный документ с гиперссылками - подумайте о встраивании в Slack и Twitter, или даже о многопользовательском персонаже Trello.

Но есть один почти золотой принцип интернет-приложений: родное приложение, вероятно, лучше.

Нативные программы - приложения, которые были разработаны специально для таких платформ, как iOS, Android или Windows - обладают множеством неотъемлемых преимуществ по сравнению с веб-программами. Независимо от того, сколько JavaScript вы накладываете поверх HTML-документа, трудно согласовать с качеством функциональности и постоянством собственной программы. Веб-программы могут быть быстрее создавать, их проще распространять и легче повторять, но этого преимущества недостаточно для отказа от нативных приложений в огромном количестве случаев.

Однако веб-платформа продолжает развиваться, и в ближайшее время появятся несколько веб-технологий, которые могут дать сетевым программам больше шансов конкурировать с их собственными «родными» аналогами.

Поговорим о некоторых из них.

Прогрессивные веб-программы

В феврале Microsoft произвела большой фурор, поддержав прогрессивные веб-программы в Windows. Но знаете ли вы, что iOS незаметно добавила поддержку PWA в Safari в обновлении 11.3? Это означает, что теперь вы можете создать программу Progressive Web и отправить ее на Android, iOS, Chrome OS и Windows.

Итак, что такое прогрессивная веб-программа?

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

Но вместо того, чтобы просто загружать веб-сайт в Интернете, программа Progressive Web обычно кэшируется на вашем устройстве, чтобы иметь некоторую автономную функциональность. Это может быть что угодно, начиная от сохранения JavaScript и CSS, поэтому сайт просто загружается быстрее, в той же степени, что и сохранение всего, что делает пользователь локально, как традиционное приложение.

Прогрессивные веб-программы, что важно, также могут поддерживать push-уведомления и другую настольную работу из-за новой интернет-технологии, известной как «сервис-воркеры». Сервисные работники могут помогать кэшировать новый контент, а также синхронизировать локальные изменения с удаленным сервером, который сохраняет прогрессивные интернет-программы в актуальном состоянии, как обычный сайт, и при этом остается таким же реактивным, как собственное приложение.

В настоящее время лучшим примером прогрессивного веб-приложения является ваш клиент Twitter Lite. Он быстрый, минимальный, а также имеет переключатель, позволяющий минимизировать использование данных. Некоторые интернет-магазины и публикации также воспользовались красноречивой работой PWA. Я фактически играл с минимальным 2048 клоном PWA на моем iPhone на прошлой неделе. Он работает в автономном режиме и запоминает мой рекорд между сессиями. Иногда он также сохраняет состояние игры, чтобы я мог продолжить работу надолго, но это не идеально.

Поддержка Apple критериев программы Progressive Web Program разрознена и далеко не полна. На самом деле Apple, похоже, имеет иное видение, чем Google, о том, насколько эффективна PWA. Мы увидим, как это видение будет развиваться по мере того, как PWA станут более распространенными и сильными в отношении программ конкурентов Apple.

WebAssembly

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

Но нативные приложения имеют преимущество в виде скомпилированного кода, близкого к металлическому. Если вы напишете свое приложение на Java, чтобы получить Android или Swift для iOS, оно легко превзойдет по производительности любое приложение на основе JavaScript. Если вы пишете части своей программы на C или C ++, как, например, делают многие разработчики игр, вы можете пойти еще быстрее.

Скорость кода, лежащего в основе приложения, не просто определяет, насколько восприимчива программа, но и ограничивает то, что она может делать. Редактирование видео, анимированная графика, 3D-моделирование, азартные игры, машинное обучение, производство звука, а также фильтры Snapchat - все они используют большую часть ресурсов ЦП и часто мощности графического процессора. JavaScript просто не может конкурировать по большому счету.

Именно здесь на помощь приходит WebAssembly. Это двоичный формат для Интернета. Что именно это означает? Ну, в отличие от JavaScript, который можно перевести "Just In Time" в машинный код, который будет понимать ваш процессор, код WebAssembly предварительно скомпилирован, прежде чем он будет отправлен во всемирную сеть, а затем полностью скомпилирован вашим Интернет-браузер, когда он загружен. Это означает, что браузеру легче уделять меньше внимания, и он может работать со скоростью, близкой к родной, с постоянной производительностью. веб-сборка была создана для взаимодействия с JavaScript, поэтому обычное веб-приложение может иметь подавляющую часть своей логики, написанной на JavaScript, чувствительные к скорости компоненты, такие как алгоритмы обработки изображений, скажем, целая видеоигра может работать на веб-сборке.

Что хорошо в веб-сборке, так это то, что вам не нужно изучать совершенно новый язык программирования, чтобы использовать ее. Высокопроизводительный код, уже написанный на C и C ++, может быть включен в веб-сборку. Например, два Unity и Unreal Engine были перенесены на веб-сборку. Обычно это означает, что вы можете играть в игры в окне браузера, даже не беспокоясь об установке отличительного плагина.

В отличие от множества предложений по интернет-технологиям, которые годами томятся в ловушке комитетов по стандартам или даже когда-либо пользуются неоднозначной или непоследовательной поддержкой со стороны различных браузеров, WebAssembly был полностью принят Google, Mozilla, Apple и Microsoft и в настоящее время отправляется во все важные браузеры. если не считать Web Explorer.

Соединение WebAssembly с прогрессивными интернет-программами превращает унылый старый веб-сайт в жизнеспособного претендента на место на вашем домашнем экране рядом с «настоящими» программами, созданными с использованием собственных технологий, без потери каких-либо преимуществ унылого старого веб-сайта.

Гудини

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

Я имею в виду, конечно, вы можете загрузить PWA, который остается в автономном режиме, предоставляет вам push-уведомления всякий раз, когда они оправданы, и работает так же, как собственное приложение благодаря веб-сборке. Но разве это не будет просто выглядеть и выглядеть как веб-сайт?

Да, это будет. Независимо от того, сколько работы вы делаете для имитации эстетики и анимации iOS или Android, ваши руки связаны с основными ограничениями HTML и CSS.

Итак, говоря о предложениях по веб-технологиям, которые в течение многих лет томятся в комитетах по стандартам ... позвольте мне познакомить вас с Houdini.

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

Чтобы понять, почему это может быть мощная вещь, рассмотрим, например, фреймворк для разработки приложений Flutter от Google. Flutter может имитировать внешний вид собственной программы для iOS или даже Android с предполагаемой точностью до пикселя вплоть до правильной скорости прокрутки. Flutter предназначен не для создания веб-сайтов, а для создания программ для iOS, Android, а также программ Fuchsia.

Но под капотом Fuchsia делает весь этот идеальный по пикселям дизайн, стилизует анимацию с помощью библиотеки изображений Skia, которая является идентичным движком, который поддерживает рендеринг браузера Chrome. Когда вы создаете веб-сайт, вы указываете материал в HTML и стиль в CSS, однако именно механизм рендеринга, такой как Skia, рисует фактические пиксели. Сказав это, «сделайте мне красный ящик», однако Скиа контролирует, как именно.

Houdini разработан, чтобы предоставить вам доступ к этому движку рендеринга браузера. Но вместо того, чтобы писать собственный код, чтобы получить Skia и отправлять его как собственное приложение с Flutter, вы можете написать CSS и JavaScript и общаться с механизмом рендеринга каждого браузера.

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

Трудно сказать, будут ли предложения Houdini когда-либо достаточно глубоко проникать во внутреннее устройство браузера, чтобы имитировать все, что Flutter делает со Skia. Но интригует то, что продавцы браузеров хотят продвигаться в этом направлении.

К сожалению, сейчас большая часть спецификаций Houdini остается в воздухе, и Chrome является вашим единственным браузером, в котором можно протестировать некоторые из этих идей. Однако, если интернет-приложения, вероятно, будут выглядеть и ощущаться «коренными», Houdini может быть маршрутом, который они выбирают, чтобы попасть туда.

Однако как насчет собственных API-интерфейсов?

Таким образом, резюмируем:

  • Прогрессивные веб-приложения дают мне изображение на домашнем экране, поддерживают автономную работу и push-уведомления.
  • WebAssembly предоставляет мне собственные или почти нативные функции.
  • Гудини, если это действительно происходит, дает мне сложные анимации и тени, которые я так жажду.
  • «А как насчет Characteristic X, моего любимого нового API из Android / iOS?» Что ж, тебе, наверное, не повезло.

Всегда будет роль для нативных программ. Нативная программа для iOS или даже Android может воспользоваться всеми конкретными преимуществами платформы: ARKit от Apple, чипом Visual Core от Google, API собственных изображений и множеством других функций, которые накапливаются в рабочих системах каждый год. конкурентоспособный. Тем не менее, что касается программ, которые ценят повсеместность и удобство над передовой функциональностью, мне кажется, что количество и значение Интернет-программ на наших домашних экранах и ноутбуках в ближайшие несколько лет будет только расти.

Трудно предсказать, какие веб-программы следующего поколения окажут наибольшее влияние. Прямо сейчас Twitter Lite - это золотой случай прогрессивных интернет-программ, и вскоре мы увидим тонну легких игр, созданных с помощью WebAssembly (обычно в виде рекламы), но что нас ждет в ближайшем будущем?

Одно место для начала поиска: все, что кажется полезным в качестве программы, однако по какой-либо причине отсутствует в магазинах программ.