6 впечатляющих веб-технологий 2015 года

в 12:25, , рубрики: electron, javascript, web, webassembly, анализ, Блог компании Plarium, веб-приложения, Веб-разработка, итоги, Мобильный веб, Тестирование веб-сервисов, технологии

2015 год выдался богатым на нововведения, связанные с улучшениями веб-платформы. Аксель Рошмайер рассматривает 6 технологий, которые ему кажутся наиболее интересными:

1. Electron;
2. React Native;
3. Прогрессивные веб-приложения;
4. Visual Studio Code;
5. Rollup;
6. WebAssembly.

6 впечатляющих веб-технологий 2015 года - 1

1. Electron

Electron – технология, разработанная GitHub. Она позволяет строить кроссплатформенные десктопные приложения с использованием веб-технологий. Среди её фич:

• автоматические обновления;
• отчеты об ошибках;
• установщики Windows;
• отладка и профилирование;
• нативные меню и уведомления.

Технология была изначально создана для GitHub-редактора Atom, который на данный момент используют многие компании, включая Microsoft (в Visual Studio Code, о котором речь пойдет ниже), Slack и Docker.

Архитектура Electron включает как среду выполнения Node.js, так и встроенный браузер Chromium. Приложения, сделанные с помощью этой технологии, выполняются несколькими процессами: главный процесс запускает скрипт из файла package.json. Этот скрипт может открывать окна для отображения пользовательского интерфейса. Аналогично вкладкам в веб-браузере каждое из окон выполняет отдельный процесс – рендеринг.

2. React Native

React Native позволяет разрабатывать нативные iOS- и Android-приложения при помощи React. Расположение виртуальной модели DOM осталось неизменным, и вам всё еще нужно использовать JSX для её создания. Но теперь UI собирается с помощью нативных компонентов, например UITabBar для iOS и Drawer для Android. Расположение этих компонентов настраивается с помощью Flexbox.

С одной стороны, это означает, что разные UI-слои есть у каждой из платформ: веб, iOS и Android. С другой – у вас будет возможность повторно использовать большую часть кода и получить опыт нативной разработки для каждой из платформ.
Обычно я скептически отношусь к переносу языка с нативной платформы на другую. Но несколько месяцев назад, оценивая React Native, один iOS-разработчик заявил:

«Возможно, я больше не буду писать iOS-приложение на Objective-C и Swift».

Это примечательно, поскольку ему пришлось выучить и JavaScript, и React, прежде чем он смог продуктивно работать с React Native.
Еще одно интересное высказывание принадлежит Энди Матушаку (Andy Matuschak), человеку из команды UIkit, который помогал разрабатывать iOS с версии 4.1 по 4.8:

«Как автор UIkit, с уверенностью могу сказать: для UI-слоя React-модель намного лучше, чем модель UIkit. React Native – отличная штука!».

3. Прогрессивные веб-приложения

В чём-то нативные приложения уже догнали веб-приложения: примером тому служит применение индексации и технологий глубинного связывания. Прогрессивные приложения не столько технология, сколько обобщение характеристик современных веб-приложений. Это может означать, что в одних областях веб-приложения идут в ногу с нативными, в других – перегоняют их:

• Метод постепенного улучшения: приложение использует как можно больше окружений. Если необходим какой-либо сервис, приложение применяет то, что есть в наличии, или корректно прекращает работу, если ничего не найдено.
• Адаптивный пользовательский интерфейс: приложение подстраивается под различные способы ввода (касание, речь и т. д.) и вывода данных (разные размеры экрана, вибрация, аудио, брайлевские дисплеи).
• Независимость от соединения: приложение работает в режиме офлайн, когда соединение прерывается или вовсе отсутствует.
• UI, подогнанный под приложение: приложение перенимает UI-элементы нативных платформ, в том числе и быструю загрузку пользовательского интерфейса, который может быть заархивирован путем кэширования ассетов с помощью Service Worker.
• Постоянные обновления: Service Worker API определяет процесс для автоматического обновления приложений.
• Защищенное соединение: используется защищенный протокол передачи данных HTTPS для предотвращения слежки и атак.
• Обнаружение приложения: метаданные, такие как W3C-манифесты веб-приложения, позволяют поисковым системам находить веб-приложения.
• Взаимодействие push-уведомлений: они помогают пользователям быть в курсе событий.
• Нативная установка: на некоторые платформы можно установить веб-приложение, ничем не отличающееся от нативного (иконка на главном экране, отдельная позиция на панели многозадачности, UI браузера опционален).
• Залинкованность: возможность с легкостью расшаривать приложения по URL и запускать их без установки.

Я решил рассказать о прогрессивных веб-приложениях, потому что мне нравятся все вышеупомянутые техники и технологии, но я не до конца уверен, в чем именно состоит отличие между прогрессивными веб-приложениями и современными веб-приложениями. Единственное, что приходит в голову – это баннеры установки веб-приложений. Главная особенность в том, что этим приложениям вовсе не нужны баннеры.

Для дальнейшего чтения:

Progressive Web Apps (сайт Google);
• Статья Эндрю Беттса (Andrew Betts) “Progressive apps” are a bag of carrots. Эндрю критично относится к прогрессивным веб-приложениям как к бренду и начинает статью с его анализа.

4. Visual Studio Code

Visual Studio Code – это редактор JavaScript-кода, нечто среднее между интегрированными средами разработки и текстовыми редакторами, который, по-моему, неплохо себя зарекомендовал. Его преимущество также в том, что он написан на JavaScript и основан на Electron. В 2015 году VSC получил статус открытого программного обеспечения и приобрел расширения.

5. Rollup

Rollup – это сборщик ES6-модулей, который преобразовывает их в отдельную сборку, являющуюся модулем в формате ES6 или CommonJS. Благодаря Rollup в мире JavaScript-модулей появляются 2 инновации:

• Получаемая сборка состоит только из используемых экспортов благодаря технике tree-shaking. Эта техника существенно зависит от статической структуры ES6-модулей. Под статической структурой подразумевается возможность анализа во время компиляции без использования кода экспортов. Исключение неиспользуемого кода позволяет изменять размер модулей, не переживая о размерах сборок.
• Rollup наглядно показывает, что ES6-модули можно упаковать в ES6-формат, обходя при этом любую кастомную загрузку.

Для дальнейшего чтения:

The Rollup Guide;
Tree-shaking with webpack 2 and Babel 6;
The future of bundling JavaScript modules.

6. WebAssembly

WebAssembly – это бинарный формат статического формального языка, производного от asm.js, который можно использовать для создания динамичных исполняемых программ, поддерживаемых JavaScript-движками. Формальный язык более высокоуровневый, чем байткод, поэтому его легче поддерживать. Выходные файлы существуют в рамках JavaScript и, как следствие, хорошо в него интегрируются. Принимая во внимание быстроту работы asm.js, скорость компиляции С++ в Web Assembly будет равняться примерно 70 % от скорости компиляции C++ в нативный код.

Вероятно, что в скором времени Web Assembly будет поддерживать JavaScript OOP и станет универсальной виртуальной машиной для веба.

Для дальнейшего чтения:

WebAssembly: a binary format for the web.

Автор: Plarium

Источник


  1. Gana:

    Спасибо! Отличная статья! Я вот тут https://c-wd.ru/blog/ похожую статью читал.

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js