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

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

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





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
134,75
Разработчик мобильных и браузерных игр
Поделиться публикацией

Комментарии 37

    –3
    Что Atom, что VSCode — глючные поделки, которые тормозят и без конца падают.
      +7
      Пользуюсь Атомом больше года: в целом все стабильно, иногда плагины глючат, но так чтобы было что-то критичное что мешало бы работать — еще не встречал.
      Один минус — медленный запуск.
        +2
        А отсутствие проверки необъявленных/неиспользуемых/используемых переменных ен мешает? Я пытаюсь привыкнуть, но вот к тому, что под спойлером как-то трудновато.

        Адская подсветка синтаксиса
        image
          0
          Я linter-flake8 для Питона использую, выглядит вроде неплохо:

          как-то так

            0
            Есть куча плагинов линтеров, и прочего. Просто надо настроить
              0
              Вот два плагина которыми я пользуюсь для проверки
              https://atom.io/packages/linter-jscs (есть гифка с примером)
              https://atom.io/packages/linter-eslint
                0
                В VS Code такие проверки есть.
                +1
                Пользовался атомом (месяц) под ubuntu, сначала все было хорошо, но потом он начал ужасно тормозить (после одного из обновлений), и падал тоже очень часто.
                  0
                  некоторые плагины ведут себя не очень хорошо, вы можете это проверить командой Timecop View
                  0
                  На SDD запускается быстро, на HDD да, долго
                    –1
                    У меня MacBook Pro (Retina, 15-inch, Mid 2014) с SSD, разумеется, запуск занимает секунд 5.
                    Может плагин какой-то подтормаживает :(
                  –2
                  Работаю с Atom на OS X и не испытываю проблем. Не знаю, может у вас ОС глючная?
                    +3
                    Да-да, и руки кривые, и железо китайское.
                  0
                  Не очень понял в чем особенность Rollup от тех же System.js и Webpack
                    0
                    Tree-shaking. Он всасывает в бандл только то, что импортируется (а в ES6 импортировать можно не все сразу, а частями). В итоге бандл меньшим по разеру получается. В Webpack 2 это тоже будет.
                      0
                      вы про import ClassName from 'my-classes.js'?
                        0
                        Import {map} from 'lodash';
                        0
                        В общем, продолжаем использовать вебпак.
                      0
                      Что-то кажется, что в скором будущем десктоп приложения будут делаться на игровых движках уровня Unreal, Unity, Crytek и т.д.
                        +1
                        С распространением шлемов виртуальной реальности так и будет
                        +5
                        Впечатляющие технологии?

                        Electron — откровенное говно. Завернули хром и кривое js-приложение в ехешник и радуются. Простейший блокнотик(Atom) запускается полчаса и интерфейс еще заметно менее плавно чем нативный работает. Зачем это вообще нужно? Осильте уже другие языки кроме js.

                          0
                          В решениях типа electron и nw.js есть свои плюсы.
                          А вот atom действительно странный, но зато там любой может крутить бордер-радиусы и бесполезные плагинчики писать.
                            +3
                            Просьба хабравчан, которые ставят минусы этому господину, пояснить свою позицию.
                            Для меня идея писать десктопные приложения с той же лёгкостью, как и браузерные кажется весьма заманчивой, но знакомство с Eectron ограничилось установкой Hello World приложения (которое, кстати, для этого самого Hello Word запустило новый инстанс Хрома и отожрало памяти). Может быть люди, которые успели поработать с этой технологией и уже что-то создали, смогут рассказать о своём опыте поробнее?
                              –1
                              Я только nw.js трогал. Это по сути тоже самое, но не такое модное. Просто пишешь приложения на веб технологиях со всеми вытекающими. Жрут много памяти, и много весят. Но зато быстро и просто.
                                +3
                                Используем Electron + React + cвоя библиотека виджетов для in-house приложений. Непосредственно занимаюсь GIS приложением. Сократили число пользователей лицензии ArcGIS в компании наполовину, компенсируем своим приложением, добавляем новый функционал по-запросу. Добавляем в пакет Elasticsearch (+ снапшоты статичных данных), хорошо подходит для spatial данных. Ёмкие операции, вроде генерации сеток (mesh grid), heatmaps или симуляция движения объектов (одновременно) на карте (Elasticsearch scroll + nodejs stream) — перебрасываем на web workers. Команда небольшая — 2 человека. Коммерческих приложений в интернете хватает, но личного опыта не было.
                                0
                                Какие языки вы предлагаете осилить? Вот серьезно, предложите нам кроссплатформенный стек чтобы можно было предметно оценить что есть "говно" а что нет. Я конечно понимаю, что тема холиварная, но если делать такие резкие заявления, нужно ведь иметь на это веские основания? Боюсь, что на деле все окажется далеко не так однозначно.
                                  0
                                  Вот именно, ничего нет, в том-то и проблема. Нет, есть QT, но 1. это C++, для обычных приложений это оверкилл, 2. сделать красивый интерфейс (действительно красивый, а не такой как большинство написанного на QT) можно, но надо очень сильно постараться. Поэтому пока js — лучший выбор если надо сделать быстро и достаточно качественно.
                                  А критики сейчас вам скорее всего предложат сделать по отдельному приложению на каждую ось, как обычно и предлагают. Ну да, так будет лучше. Если ресурсы бесконечны.
                                    0
                                    На C# есть Perspex под все платформы. Но использовать его для серьезных приложений, конечно, рановато.
                                      0
                                      Ну я сам то довольно хорошо себе представляю ситуацию, но мне хотелось чтобы человек подкрепил свое безапелляционное высказывание какой-то конкретикой, тем более, что многие с ним согласились.
                                        –3
                                        Я уже приводил пример. Atom — простой блокнотик, написанный с применением electron, в 2016 году тормозит даже на мощном железе, запускается ощутимое время и т.п. Тоже самое касается brackets и vscode. Какая еще конкретика нужна? Или по вашему это нормально?

                                        Отвечу сразу на другой ваш коммент: пользоваться этим всем заставляет рынок. Например если sublime text перестанет развиваится или авторы закроют этот проект, то нормальных современных и кроссплатформенных текстовых редакторов на рынке просто не останется.

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

                                        Что за гранью, так это блокнотик сжирающий половину ресурсов компьютера.

                                          +2
                                          У меня прямо сейчас открыт Атом с 15+ открытыми вкладками и порядком 20 установленных плагинов и он "съел" 78,5 Мб памяти. Когда и при каких условиях этот "блокнотик" отожрал у вас половину ресурсов компьютера?
                                            –3
                                            У вас память единственный ресурс? Ну и к слову, Sublime с 100+ вкладок ест в 2 раза меньше.
                                      –1
                                      Отлично. Потому что на рынке нет решений позволяющих писать кроссплатформенные приложение так же просто как на js, будем писать кривые и тормозные приложение работающие через 10 абстракций. Наплодили например блокнотиков — Atom, brackets, vscode — простые приложения, но выжирают ресурсы как жирный браузер. Потому что это и есть браузер.
                                      Кто вообще такое придумал? Это решение — дерьмо, с какой стороны ни посмотри. И все это ради того чтобы огромная армия веб-девелоперов, не желающих учить ничего кроме любимого js, могли писать десктопные приложния.

                                      А нам потом этим говном пользоваться.

                                      Хотя чего удивляться, если Qt\C++ уже считается оверскиллом.
                                        +2
                                        Кто вас заставляет пользоваться "говном"? Это уже просто за гранью: "все веб-девелоперы идиоты, не хотят ничего учить, а нам, крутым пласерам, потом пользоваться нечем потому, что… мы ничего пока лучше не написали, интерфейсы делать не умеем, и вообще это ниже нашего достоинства!" Шикарная точка зрения.
                                    0
                                    Visual Studio Code – это редактор

                                    но никак не технология
                                      +1
                                      Какой-то странный список, кроме react native ничего дельного...
                                        +1
                                        Шесть веб-технологий 2015 года, способных сожрать впечатляющий объём оперативной памяти в кратчайшие сроки.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое