Всем привет! На этой неделе с вами Андрей Нагих @andrnag.

Я из Новосибирска. Работаю в компании Plesk (@Plesk), ра… twitter.com/i/web/status/1…

5:27

Начнём с WebAssembly и моего традиционного вопроса: каков ваш опыт с этой технологией?

5:35

Те, кто уже использует, делитесь своим юзкейсом в реплаях.

В Инетре мы вывели Wasm в продакшн для того, чтобы порт… twitter.com/i/web/status/1…

5:41

Итак, WebAssembly. Как мы видим из опроса, очень мало людей используют его в продакшене. Это не удивительно, т.к. т… twitter.com/i/web/status/1…

7:59

Если посмотреть в корень, то Wasm это двоичный формат файла, в котором мы можем сохранить байткод для выполнения на… twitter.com/i/web/status/1…

7:59

Что это нам даёт?

1. Мы можем генерировать этот байткод из языков системного программирования (С, C++, Rust).

2.… twitter.com/i/web/status/1…

7:59

Два слова об asm.js. Это прародитель Wasm, эксперимент компании Mozilla, целью которого было получить возможность з… twitter.com/i/web/status/1…

7:59

Этот проект выстрелил, у него даже появилась неплохая поддержка в браузерах caniuse.com/#search=asm.js. Но стали очеви… twitter.com/i/web/status/1…

7:59

Организуя проект WebAssembly Mozilla изначально привлекла к написанию спецификации всех основных вендоров браузеров… twitter.com/i/web/status/1…

7:59

Примечательно, что весь процесс написания спецификации шёл открыто на GitHub, и любой мог наблюдать за ним или поуч… twitter.com/i/web/status/1…

7:59

Сейчас работа продолжается так же на GitHub. В 2017 году в браузеры зарелизили MVP. Около года собиралась обратная… twitter.com/i/web/status/1…

7:59

Браузеры очень быстро реализовали поддержку, а сейчас она просто великолепна: caniuse.com/#search=webass…

Мы начали ре… twitter.com/i/web/status/1…

7:59

Что умеет WebAssembly?

Во-первых, это цель компиляции. Нет смысла писать его руками (хотя такая возможность есть).… twitter.com/i/web/status/1…

8:33

Alon ключевая фигура в этой технологии, именно он был основной движущей силой проекта asm.js, приведшего к Wasm. И… twitter.com/i/web/status/1…

8:33

Наш проект Bytefog b2b.peers.tv/bytefog написан как раз на C++, поэтому нашим основным инструментом был как раз… twitter.com/i/web/status/1…

8:33

2⃣ Очень активно развивается поддержка в Rust. Это не удивительно, т.к. и язык, и технология авторства Mozilla. На… twitter.com/i/web/status/1…

8:33

Также, в экосистеме Rust пишутся файлы биндингов к Web API. Биндинги нужны, если мы хотим из контекста Wasm вызвать… twitter.com/i/web/status/1…

8:33

Команда Rust использует для написания биндингов язык WebIDL (тот же, что и W3C для спецификаций браузерных API).

E… twitter.com/i/web/status/1…

8:33

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

8:33

3⃣ Начиная с версии 1.11 Go поддерживает Wasm.

Эта поддержка до сих пор экспериментальна. И на выходе получаются… twitter.com/i/web/status/1…

8:33

Для сравнения, весь наш код Bytefog уложился в 2Mб.

Очень классно, что .wasm файлы отлично жмутся gzip: на выходе… twitter.com/i/web/status/1…

8:33

4⃣ Симметрично, хотелось бы поддержки Kotlin. И некоторые подвижки в этом есть. Статья 2018 года… twitter.com/i/web/status/1…

8:59

5⃣ Есть эксперименты с поддержкой Java. Но все они пока не достигли зрелости. Ключевые слова: TeaVM, JWebAssembly, Bytecoder

8:59

6⃣ Гораздо лучше дела у .Net, в репозитории Mono есть примеры как скомпилировать в WebAssembly. github.com/mono/mono/tree…

8:59

7⃣ Многие спрашивают: «Можно ли JavaScript скомпилировать в WebAssembly». Идея звучит странно, но есть команда, реа… twitter.com/i/web/status/1…

9:02

Есть ряд интерпретируемых языков (например Lua), которые тоже работают в Wasm. Но это достигли тем, что скомпилиров… twitter.com/i/web/status/1…

9:08

Реестр поддерживаемых языков ведётся на GitHub github.com/appcypher/awes… Там можно взять ссылки на те проекты, что я… twitter.com/i/web/status/1…

9:08

Также, подписывайтесь на его канал t.me/juliarderity с новостями стандартизации JS, Wasm и Web API. Сергей вс… twitter.com/i/web/status/1…

12:34

Итак, наш исходный код мы компилируем в байткод WebAssembly.

Этот байткод портативный, т.е. не зависит от архитект… twitter.com/i/web/status/1…

14:20

Перед запуском браузер снова компилирует его в другой байткод — своей виртуальной машины JS.

🚀 Важно сделать это к… twitter.com/i/web/status/1…

14:20

И медленный, выдающий оптимизированный код. Он работает уже после старта приложения, и нагорячую подменяет байткод. v8.dev/blog/liftoff

14:20

Кстати в FireFox такая архитектура появилась раньше, чем в Chrome. Lin Clark отлично написала почему это важно hacks.mozilla.org/2018/01/making…

14:20

Lin Clark @linclark это ещё один человек в мире Wasm за которым обязательно нужно следить. Она пишет великолепно ил… twitter.com/i/web/status/1…

14:20

🚀 Ещё одна фишка для ускорения старта — это потоковая компиляция. Супер полезная вещь: представьте, ваш код начинае… twitter.com/i/web/status/1…

14:20

🚀 И это ещё не всё. В браузерном API разделены стадии компиляции модуля и его инстанцирования. Это значит, что вы м… twitter.com/i/web/status/1…

14:20

Мы поговорили о том, что может Wasm и какой он классный. Но, как и у любой технологии, у него есть ограничения.

14:47

🛑Как я уже говорил, в Wasm нет сборщика мусора, поэтому либо вы используете язык с ручным управлением памяти, либо… twitter.com/i/web/status/1…

14:47

Но работы по нему ведутся поэтапно. И пропозал ReferenceTypes, который нужен для реализации GC, уже на 3 стадии. Эт… twitter.com/i/web/status/1…

14:47

🛑Другая особенность: только 32 битный доступ к памяти. Это оставляет нас с жалкими 4Гб памяти возможной для использ… twitter.com/i/web/status/1…

14:47

🛑 Ещё одна проблема, это треды. Изначально их поддержка была реализована в Emscripten, но она использует SharedArra… twitter.com/i/web/status/1…

14:47

На сегодняшний день поддержка вернулась только в Chrome. Ожидается поддержка в Edge. FF пока осторожничает.

14:47

🛑Пожалуй, главная неприятность, которая нас ждёт, это то, что Wasm исполняется внутри песочницы браузера. Поэтому к… twitter.com/i/web/status/1…

15:19

Все эти возможности нам придётся реализовать теми средствами, которые уже есть у браузеров. Далеко не всегда удаётс… twitter.com/i/web/status/1…

15:19

Например, до tcp или udp сокета не добраться никак.
Мы можем посылать HTTP запросы.
Или работать по WebSocket.
Или… twitter.com/i/web/status/1…

15:19

Наш p2p прокси-сервер Bytefog, как вы понимаете, основательно полагается на сеть. И нам пришлось полностью передела… twitter.com/i/web/status/1…

15:19

При портировании приложения больше половины времени (8 мес.) у нас ушло на рефакторинг C++ кода. Мы выделяли интерф… twitter.com/i/web/status/1…

15:19

🛑Очень важный и для многих неожиданный недостаток — Wasm не ускорит ваш код.

Есть популярное мнение, что если взят… twitter.com/i/web/status/1…

15:34

Мы провели небольшой эксперимент: реализовали несколько фильтров обработки изображения на JS и C++. При компиляции… twitter.com/i/web/status/1…

15:34

Я тут по ходу публикую слайды из своего доклада о нашем опыте внедрения WebAssembly.

Для нетерпеливых сразу опубли… twitter.com/i/web/status/1…

15:36

Продолжая о производительности.

В доклад не попало, но мы сделали ещё один замер, С++ код в нативе (без Wasm, и бе… twitter.com/i/web/status/1…

15:56

Из всего этого я делаю такой вывод. Современные виртуальные машины JS настолько оптимизированы, что простой арифмет… twitter.com/i/web/status/1…

15:56

В случае Wasm браузеру проще это сделать, т.к. код уже разложен по полочкам, использует строгие типы и сам управляе… twitter.com/i/web/status/1…

15:56

Любой такой вызов имеет накладные расходы вызванные устройством браузера.

Также Emscripten добавляет к ним при про… twitter.com/i/web/status/1…

15:56

Именно поэтому сложно сделать объективный benchmark.

Также, браузеры постоянно работают над снижением накладных ра… twitter.com/i/web/status/1…

15:56

В нашем случае, вычислительного кода было совсем мало, и выполнялся он почти мгновенно.

Ограничителем производител… twitter.com/i/web/status/1…

15:56

Вчера мы поговорили о том что такое WebAssembly, а сегодня я хочу рассказать о том, какие задачи с помощью него мож… twitter.com/i/web/status/1…

10:54

🛠 Wasm широко применяется в игровых движках. Unreal, Unity и Unigene все имеют возможность скомпилировать игру под… twitter.com/i/web/status/1…

10:54

В Emscripten отдельный упор сделан на поддержку 3D-графики. Вы пишете привычный код на C++ и он превращается в необ… twitter.com/i/web/status/1…

10:54

🛠 Можно обрабатывать данные пользователя прямо в браузере, не посылая на сервер. Например:

* изображения
* звук
* видео
* загруженные файлы

10:54

🛠 Можно запускать обученные нейронные сети на стороне пользователя. Это позволит работать с данными с низкой задерж… twitter.com/i/web/status/1…

10:54

🛠 Кусочек Chrome, распознающий язык текста доступен как Wasm-библиотека. И её можно приспособить для своих задач. П… twitter.com/i/web/status/1…

10:54

🛠 Можно проверять орфографию с помощью HunSpell. npmjs.com/package/hunspe…

🛠 Или распознавать речь на PocketSphinx github.com/syl22-00/pocke…

10:54

🛠 Первое правило криптографии: «Не пиши свою криптографию». Если не хватает встроенных возможностей Web Crypto API,… twitter.com/i/web/status/1…

11:18

🛠 Очень классный юзкейс подсказал Андрей Карпушин @reven86. Его сервис wotinspector.com/en/replays/ позволяет анализиров… twitter.com/i/web/status/1…

11:43

Таким образом, тяжёлые вычисления выполняются на компьютерах пользователей. Каждый пользователь обрабатывает только… twitter.com/i/web/status/1…

11:43

🛠 В мире существует куча библиотек, написаных за многолетнюю историю C и C++. Можно попробовать компилировать их в… twitter.com/i/web/status/1…

11:43

Уже сейчас доступны в виде модулей Wasm:

* видео-конвертер FFmpeg
* аудио-кодек Opus
* компьютерное зрение OpenCV… twitter.com/i/web/status/1…

11:43

🛠 Всё это позволяет унести к пользовтателю ту работу с данными, которая обычно делалась на сервере.

Что в итоге:… twitter.com/i/web/status/1…

11:43

🛠 Модули Wasm можно использовать и для Node.js

Здесь очень круто играет портативность Wasm.

Сейчас нативный модул… twitter.com/i/web/status/1…

11:43

Это список платформ, которые поддерживается в node-sass — библиотеке для компиляции SASS.

Для каждого релиза нужно… twitter.com/i/web/status/1…

11:43

Если тот же модуль скомпилировать под Wasm, то на каждый релиз будет достаточно одного бинарника.

Вот тут уже проб… twitter.com/i/web/status/1…

11:43

🛠 Для приложений, написанных на asm.js Wasm может предложить значительное ускорение запуска.

Популярный онлайн-ред… twitter.com/i/web/status/1…

11:43

🛠 Всеми любимая VSCode, хоть и работает на Electron, использует нативные модули для критичных к производительности… twitter.com/i/web/status/1…

11:43

🥳 Настало время крутых демок! 🎉

AutoCAD портировал свою 30-летнюю кодовую базу в браузер с помощью WebAssembly.

Т… twitter.com/i/web/status/1…

11:51

Почитать и посмотреть об опыте Autodesk

through-the-interface.typepad.com/through_the_in…

Кстати, свой релиз они представляли на Google I/O… twitter.com/i/web/status/1…

11:51

⌨️Как на счёт командной строки с настоящим Linux прямо в браузере?

Fabrice Bellard, автор QEMU, запустил его в бра… twitter.com/i/web/status/1…

11:59

🖥️🖱️Но Fabrice этого показалось мало, и он запустил X Window.

Там даже можно открыть браузер и... сходить на local… twitter.com/i/web/status/1…

12:04

🤯Что может быть ещё более сумасшедшее?

🥁 Windows 2000, собственной персоной, на виртуальном компьютере, внутри бра… twitter.com/i/web/status/1…

12:08

🎥Видео-редактор на WebAssembly.

Можно наложить разные фильтры в реальном времени. Можно сравнить реализацию на Was… twitter.com/i/web/status/1…

12:13

🚀 Windows 95 как приложение Electron.

Потому что мы можем.

github.com/felixrieseberg… pic.twitter.com/XytxNOdN11

12:15

😱 We need to go deeper!

Трёхмерный гараж, с виртуальным компьютером, на котором работает реальная Windows 3.11, в… twitter.com/i/web/status/1…

12:19

⚽️Список, собираемый мэнтейнерами Emscripten.

Игрушки:
* Doom
* Quake 3
* Doom 3
* Dune II
* и куча других.

Графи… twitter.com/i/web/status/1…

12:26

В общем, можете дальше сами фантазировать над применением WebAssembly.

Думаю, демки хорошо иллюстрируют его возмож… twitter.com/i/web/status/1…

12:31

❓ Спрашивают, почему Wasm c нами надолго?

Было много попыток построить второй рантайм в браузере:

* ActiveX
* Jav… twitter.com/i/web/status/1…

12:57

WebAssembly основывается на той изоляции, которая работает уже много лет в браузере.

Да, из-за этого есть проблемы… twitter.com/i/web/status/1…

12:57

❓Именно поэтому WebAssembly не пришёл, чтобы заменить JS. Это также частый вопрос.

Для запуска .wasm файла как мин… twitter.com/i/web/status/1…

12:57

Нужен «клеевой код» на JS, который пробрасывает в Wasm встроенные API браузера и ваши объекты и функции.

При компи… twitter.com/i/web/status/1…

12:57

Вообще, Emscripten работает как «Browserify для C++», т.к. по максимуму старается полифилить нативные API:

* STDIN… twitter.com/i/web/status/1…

12:57

Также большая часть Emscripten, это тот самый биндинг сущностей из двух миров.

Есть три способа это делать:
* ccall/cwrap
* WebIDL
* Embind

12:57

ccall/cwrap не умеет в объекты, это только для простых C-функций. Чаще всего встречается в tutorials для начинающих.

12:57

WebIDL это язык описания интерфейсов. Умеет много чего, и похоже, что сейчас это самый перспективный вариант. Я уже… twitter.com/i/web/status/1…

12:57

Мы взяли Embind, т.к. он лучше лёг на нашу кодовую базу. С помощью жёсткой магии шаблонов C++ он предоставляет впол… twitter.com/i/web/status/1…

12:57

Можно пробрасывать:
* функции
* классы
* интерфейсы
* статические методы
* value objects
* сырые указатели
* умные… twitter.com/i/web/status/1…

12:57

А также довольно логично биндит встроенные типы данных C++ в типы данных JS.

12:57

Честно говоря, писать биндинги поначалу это очень больно.
* Синтаксис непривычен ни плюсовикам, ни фронтендерам, л… twitter.com/i/web/status/1…

12:57

Но задачу свою он решает, и потренировавшись на кошках, можно им пользоваться.

Документация есть, но не самая полн… twitter.com/i/web/status/1…

12:57

Поэтому лучше всего — смотреть в тесты Embind. Там есть такие выкрутасы, которые даже не сразу придумаешь.

Один сл… twitter.com/i/web/status/1…

12:57

Сегодня хочу закончить с темой WebAssembly.
Если есть вопросы, задавайте.

Расскажу кратко про разработку.

13:19

Конечно, надо как-то отлаживать. Для этого придумано текстовое представление WebAssembly .wat

Браузеры показывают… twitter.com/i/web/status/1…

13:19

Можно ставить точки останова. Но не более того. Переменные теряют свои названия и типы, поэтому посмотреть можно то… twitter.com/i/web/status/1…

13:19

Есть возможность сгенерировать SourceMap. Делается это с притопами, работает не всегда, надеюсь со временем ситуаци… twitter.com/i/web/status/1…

13:19

В браузере выглядит завораживающе.

Плюсы внутри DevTools. Теперь мы видели всё! pic.twitter.com/ngwccE3Mwv

13:19

Переменные рассматривать бесполезно, формат SourceMap их не позволяет биндить. Возможно, нас ждёт его обновление. Очень бы хотелось!

13:19

Также, работает профайлер. В FF он даже разматывает имена функций. Chrome показывает показывает «мангленные». pic.twitter.com/PfEVgNkmg8

13:19

Совсем недавно в LLVM появилась возможность отладки WebAssembly по-взрослому. Но это не для браузера. Подробности в… twitter.com/i/web/status/1…

13:19

Я всё время говорил про использование Wasm в контексте браузера.

Немного затронул тему работы в Node.js.

Но так в… twitter.com/i/web/status/1…

13:36

Это проекты:

Wasmtime wasmtime.dev
Wasmer wasmer.io
Lucet github.com/fastly/lucet/

И неко… twitter.com/i/web/status/1…

13:36

Дошло до того, что WebAssembly стали называть «Новым Docker». Это жарко обсудили в одном из @radio_t

Конечно же, н… twitter.com/i/web/status/1…

13:36

В результате, группа по стандартизации WebAssembly принялась за стандартизацию системного интерфейса, пока реализац… twitter.com/i/web/status/1…

13:36

Тут шутки кончились. Предлагаю почитать опять же статью Lin Clark о том, почему это важно.

hacks.mozilla.org/2019/03/standa…

13:36

Когда мы говорим про бразуер, то он является Host-платформой для Wasm модуля.

Когда мы говорим про системные ранта… twitter.com/i/web/status/1…

13:36

Для этого ведётся работа над Interface Types proposal.

В результате этих двух вещей может появиться штука, от кото… twitter.com/i/web/status/1…

13:36

Эти психи написали windows 95 на Javascript! И это меньше, чем спустя год после того, как мы увидели Winamp в виде… twitter.com/i/web/status/1…

🚀 Windows 95 как приложение Electron.

Потому что мы можем.

github.com/felixrieseberg… pic.twitter.com/XytxNOdN11

13:56

В дополнение к теме WebAssembly ссылка на доклад Сергея Рубанова @chicoxyzzy о внутреннем устройстве Wasm с конферн… twitter.com/i/web/status/1…

14:15

Кстати, сегодня у меня день рождения. 🥳

3:58

📺Переходим к теме разработки для SmartTV, которой я посвятил несколько лет.

Все телевизоры сейчас, кроме самого ни… twitter.com/i/web/status/1…

15:31

Если кто не знает, она позволяет запускать сторонние приложения прямо на телевизоре, без всяких приставок.

Это мог… twitter.com/i/web/status/1…

15:31

Один из основных продуктов Инетры это сервис онлайн-тедевидения Peers.TV. Естественно, для нас важн… twitter.com/i/web/status/1…

15:31

У нас есть сайт, приложения для мобильных телефонов и планшетов, приставки, и SmartTV мы, конечно, не собирались упускать.

15:31

Сразу оговорюсь, что есть смарты на основе Android и AndroidTV. Они появились совсем недавно. В основном это бренды… twitter.com/i/web/status/1…

15:31

Все SmartTV что не Android — используют web платформу.

Как бы это не было удивительно, но да, для разработки под н… twitter.com/i/web/status/1…

15:31

Основные прлизводители таких ТВ это Samsung, LG, Panasonic. Есть и другие, но их доля на рынке мала.

Samsung это,… twitter.com/i/web/status/1…

15:31

Исторически, Samsung первый сделал SmartTV, и их магазин приложений самый проработанный и хорошо наполнен. У меня д… twitter.com/i/web/status/1…

15:31

Возможности web платформы всем нам хорошо знакомы, и управления телевизором там нет. В чём же секрет?

16:07

А секрета никакого нет: также как браузеры расширяют возможности JS своими дополнительными API (такими как DOM, His… twitter.com/i/web/status/1…

16:07

В любой ТВ ОС вы встретите похожий набор API:
📺 управление плеером
📺 получение данных о ТВ
📺 обработка кнопок пульт… twitter.com/i/web/status/1…

16:07

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

И, как водится, каждый производ… twitter.com/i/web/status/1…

16:07

Вы скажете: «Им бы договориться о едином стандарте». И будете правы, и такой стандарт даже есть! Но и он не уберёг… twitter.com/i/web/status/1…

16:07

📛 И это большая проблема для разработчиков!

В начале нашего пути у нас было 3 отдельных приложения: для Samsung, L… twitter.com/i/web/status/1…

16:07

И в этот момент (где то в конце 2014 года) вендоры не сговариваясь объявляют о переходе на новую ОС.

Тут бы им объ… twitter.com/i/web/status/1…

16:07

Итак, что мы имели на тот момент по ОС:
📺Samsung Orsay
📺LG NetCast
📺Panasonic VIERA Connect

А теперь следите за ру… twitter.com/i/web/status/1…

16:07

Это было фиаско.

Количество платформ в одночасье удвоилось (бейте астрологов).

И хотя Firefox OS загнулась до тог… twitter.com/i/web/status/1…

16:07

Также, у нас были планы по портированию на малопопулярные телевизоры и приставки (там тоже есть web приложения), т.… twitter.com/i/web/status/1…

16:07

Думали мы не долго, идея лежит на поверхности: сделать общие интерфейсы для платформозависимых модулей и подставлят… twitter.com/i/web/status/1…

16:07

На тот момент было несколько готовых реализаций такого подхода. Как правило, это были проекты таких же как мы компа… twitter.com/i/web/status/1…

16:07

💎Но нашёлся среди этого настоящий алмаз. Это фреймворк BBC TAL.

Они не только реализовали такую абстракцию, но и н… twitter.com/i/web/status/1…

16:07

Правда основан он на уже тогда устаревших технологиях. И я принял решение переписать наши приложеня с нуля с ES2015… twitter.com/i/web/status/1…

16:07

❗️Важный урок, который я тогда вынес — революционный путь ведёт к проигрышу. Только небольшие эволюционные изменения приводят к успеху.

16:07

☝️Взять всё и переписать не срабатывает почти никогда.

Позже я неоднократно слышал о похожем опыте коллег с теми же выводами.

16:07

В итоге, мы смержили наши приложения, как и планировали, реализовав абстракцию платформы минимальными средствами.

16:07

На что похожа разработка под SmartTV?

🔥Это просто, как ездить на велосипеде. Который горит, и ты горишь, и все гор… twitter.com/i/web/status/1…

17:06

🔥 Я уже говорил, что в каждой ОС одни и те же вещи делаются по разному. А ОСей — 5 штук.

🔥 Во-вторых, документация… twitter.com/i/web/status/1…

17:06

🔥 В-третьих: баги. С багами может помочь только вендор. Для этого идем на форум или в техподдержку, которые тоже ра… twitter.com/i/web/status/1…

17:06

🔥 Производитель как правило предоставляет эмулятор на котором можно отлаживаться.

Не попадайте в эту ловушку! То ч… twitter.com/i/web/status/1…

17:06

🔥 Там бы быстро пришли к пониманию, что отлаживать надо только на реальных устройствах. И первая проблема с ними: их нужно купить.

17:06

Да, разработка под SmartTV это не дешёвое удовольствие.

Иногда везёт и производитель присылает телек, только чтобы… twitter.com/i/web/status/1…

17:06

🔥 Следующая проблема с устройствами возникает не сразу: их некуда ставить. С гонкой за диагоналями, телеков меньше… twitter.com/i/web/status/1…

17:06

🔥 Идея красиво развесить коллекцию телеков на стене также провалилась.

Сегодя эта конкретная модель нужна одному р… twitter.com/i/web/status/1…

17:06

💪 Для разработки под SmartTV подходят только сильные программисты.

(локальный мем).

17:06

Самая тяжелая, кстати, была та халявная 42" плазма от Панасоника.

Современные 32" LCD — как пушинки, боишься, что его со стола сдует.

17:06

🔥 Как вы поняли, телевизоров нужно много. Почему? Потому что в индустрии бытовой электроники принято обновлять моде… twitter.com/i/web/status/1…

17:06

🔥 Причём старые устройства с поддержки не снимешь. ТВ это не смартфон, который меняют раз в год. Человек покупает т… twitter.com/i/web/status/1…

17:06

🔥 Итак, надежды на обновление пользовательских устройств — нет. Да, приходят какие-то апдейты, но принципиально вст… twitter.com/i/web/status/1…

17:06

🔥 Однажды, я попытался выяснить, что за браузер стоит на телевизоре 2014 года. Очевидно, что это разновидность WebK… twitter.com/i/web/status/1…

17:06

🔥 Но даже зная это, нельзя сказать точно, какие фичи в нём будет работат, а какие нет.

Производитель вполне мог чт… twitter.com/i/web/status/1…

17:06

🔥🔥🔥 И пожалуй самая-самая боль — это средства разработки.

Про те 3 старые платформы справедливо сказать, что средс… twitter.com/i/web/status/1…

17:51

Мы писали утилиту, которая распечатывает объекты поверх интерфейса приложения.

JSON кстати там тоже не было, притащили полифил.

17:51

Потом мы нашли чудесную штуку: WeInRe. Странное название расшифровывается как WebInspector Remote.
people.apache.org/~pmuellr/weinr…

17:51

Приблуда состоит из двух частей: js агента для приложения и серверной части с каким то древним форком WebKit DevToo… twitter.com/i/web/status/1…

17:51

Несмотря на всю неказистость и глючность, она стала настоящим спасением.

Появилась консоль! Стало можно выполнить… twitter.com/i/web/status/1…

17:51

🔥 Отдельное удовольствие это процесс запуска девелоперской сборки на телевизоре.

17:51

Скачать пакет обратно.

Положить его на флешку.

Вытащить флешку из компьютера.

Вставить флешку в телевиз… twitter.com/i/web/status/1…

17:51

Я не шучу и не преувеличиваю.

Именно так LG предлагала разрабатывать под NetCast в 2014 году.

Хотел приложить скр… twitter.com/i/web/status/1…

17:51

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

Это сквозило из док… twitter.com/i/web/status/1…

17:51

Мы конечно быстро написали служебное приложение которое строило список ссылок на все наши приложения в разработке и… twitter.com/i/web/status/1…

17:51

На машине разработчика поднимался вебсервер, который раздавал текущий рабочий каталог.

Программулина позволяла отк… twitter.com/i/web/status/1…

17:51

В само приложение встроили секретные комбинации клавиш для location.reload() и штук посложнее, вроде сброса настрое… twitter.com/i/web/status/1…

17:51

Справедливости ради, с выходом Tizen и WebOS Developer Experience кардинально изменился.

Появилась Node.js CLI ути… twitter.com/i/web/status/1…

17:51

Для UI дебаггера использовались уже современные Chrome DevTools. И общались они с телеком по одноимённому протоколу… twitter.com/i/web/status/1…

17:51

Но совсем они не ушли. У нас до сих пор половина пользователей пользуется этими устаревшими платформами. А значит,… twitter.com/i/web/status/1…

17:51

💽Я обещал рассказать про выкладывание в сторы. pic.twitter.com/ZYySs5PsqE

18:29

О, иногда это напоминало цирк абсурда!

Казалось бы, вот рядом целая индустрия мобильных приложений выросшая с нуля… twitter.com/i/web/status/1…

18:29

💩Но нет. Во-первых, у каждого производителя стор свой. Ну это даже не удивляет.

18:29

💩Во-вторых, не все сторы одинаково полезны. Самые молодцы это Samsung, там всё как-то ещё отлажено было и автоматиз… twitter.com/i/web/status/1…

18:29

💩 В-третьих, первый раз встать в стор некоторые вендоры превращали в испытание похлеще Форт Боярд.

Боже, как мы намучились с LG!

18:29

Процесс добавления приложения в их стор занял у нас 6 месяцев! Я не шучу.

Не знаю как сейчас, но в 2014 году это был просто цирк с конями.

18:29

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

После непродолжительной… twitter.com/i/web/status/1…

18:29

Локальный мем: Разработчик SmartTV должен уметь разговаривать с Корейцами.

Мы даже в вакансиях это писали.

Сейчас… twitter.com/i/web/status/1…

18:29

💩Очень частый баг на ревью связан с сетевыми проблемами. Видеоконтент на серверах в России. Тестировщик с телевизор… twitter.com/i/web/status/1…

18:29

💩 Ещё классный казус: приложение показывает рекламу, это указано в карточке в сторе. Но т.к. рекламодателей в Корее… twitter.com/i/web/status/1…

18:29

В итоге, на подсети вендора настроено и своё вещание, и фейковая реклама.

18:29

Ревью могут завернуть из-за бага, который в прошлый раз не посчитали критичным.🤷‍♂️

Опять похвалю Samsung — у них… twitter.com/i/web/status/1…

18:29

💩Взрывает мозг отчёт о багах от LG (кажется до сих пор так), приходит письмо со вложенным Excel, в котором огромная… twitter.com/i/web/status/1…

18:29

В общем, на процесс деплоя в стор надо закладывать месяц-два.

Я не разрабатывал под мобилки, но вроде там быстрее… twitter.com/i/web/status/1…

18:29

Есть чит (как и в мобильных сторах), задеплоить приложение-пустышку, которая будет редиректить на сервер разработчи… twitter.com/i/web/status/1…

18:29

Вендоры страсть как хотят держать руку на пульсе и контролировать качество приложений.

Даже Panasonic, у которого… twitter.com/i/web/status/1…

18:29

Вот так и живём, зато весело.

Не дай бог зарелизить критичный для сервиса баг, который пройдет приемку вендора.

18:29

Думаю, теперь вы понимаете, почему для SmartTV так мало приложений. Писать сложно, деплоить долго, сплошной геморрой.

18:29

👨‍💻Написание приложений.

Когда приспособился отлаживать, когда пролез в стор, остаётся заниматься разработкой.

И… twitter.com/i/web/status/1…

19:03

Чем принципиально телевизор отличается от всех остальных платформ?

Мы управляем телевизором при помощи пульта.

Та… twitter.com/i/web/status/1…

19:03

Это драматически меняет UX, и UI вместе с ним.

Во-первых, пользователь не может просто кликнуть по элементу.

Он д… twitter.com/i/web/status/1…

19:03

Писать это приходится руками, т.к. web платформа такого не предлагает.

Мы пытались скрестить фокус с tabindex, но… twitter.com/i/web/status/1…

19:03

Ещё одна проблема c рамкой фокуса: как выбрать следующий элемент, когда мы нажимаем кнопку курсора.

Элементы вообщ… twitter.com/i/web/status/1…

19:03

Кстати именно поэтому на телевизоре невозможно пользоваться ванильным Android. Да, экран переходит в альбомную орие… twitter.com/i/web/status/1…

19:03

Даже в приложениях Гугла есть места где фокус становится невидимым, или скачет как угорелый по экрану, перемещаясь… twitter.com/i/web/status/1…

19:03

Дальше. Для ввода текста нужна экранная клавиатура. Писать её тоже придётся самим. Есть платформы, где можно позват… twitter.com/i/web/status/1…

19:03

Ввод текста в SmartTV это просто боль.

⌨️Кнопки пульта нажимаются вязко.
⌨️ИК сигнал может улететь не туда.
⌨️При… twitter.com/i/web/status/1…

19:03

Поэтому мой лайфхак при разработке: подключать к телевизору или приставке USB-клавиатуру и мышь.

Не знаю почему, н… twitter.com/i/web/status/1…

19:03

На железках под капотом Linux, и переферия там нормально поддерживается.

Важно понимать, что это ваш личный чит-ко… twitter.com/i/web/status/1…

19:03

Кстати это работает и в другую сторону. Желательно, чтобы периферия у вас всё таки работала, если кто-то её всё так… twitter.com/i/web/status/1…

19:03

Радует, что проблема не только на смартах, но и в Android приставках, а значит её решает больше компаний.

И индуст… twitter.com/i/web/status/1…

19:03

В приставках Электронного города, которые тоже делает Инетра, пульт помимо ИК цепляется по Bluetooth. И микрофон вс… twitter.com/i/web/status/1…

19:03

Но я отношусь к голосовому вводу скептически. Он требует отдельного UX и добротной ML под капотом. Нельзя просто от… twitter.com/i/web/status/1…

19:03

Мне больше нравится идея спаривания STB с приложением на смартфоне.

Например, у приставок Eltex есть такое.

Коман… twitter.com/i/web/status/1…

19:03

Или более высокоуровневое приложение-компаньон в котором не элементы управления, а, например, дубль каталога фильмо… twitter.com/i/web/status/1…

19:03

Мне бы эту информацию 2 года назад – никогда бы не пошёл писать под телек

💽Я обещал рассказать про выкладывание в сторы. pic.twitter.com/ZYySs5PsqE

19:05

🥳Поздравляю всех программистов, с днём программиста (13 сентября), всех тестировщиков, с днём тестировщика (9 сентя… twitter.com/i/web/status/1…

15:18

@jsunderhood Самый ад был для Haier и TCL, ре лизились туда через посредника, все общение было через Facebook Messa… twitter.com/i/web/status/1…

6:06

@jsunderhood Просишь логи, версию телека, ОС которая там стоит, браузер и получаешь это только на 5-6 раз.

6:06

Завершить неделю хочу рассказом о Новосибирске.
🏡Достопримечательности
💻IT сфера
🙋‍♂️Сообщества

12:04

Как следует из названия, Новосибирск находится в Сибири. (Не путать с Новороссийском 😃)

🌲🐻❄️Город носит неофициаль… twitter.com/i/web/status/1…

12:04

Несмотря на свою удалённость от столиц, Новосибирск это 3-й город России по населению. Здесь живёт более 1.6 млн. людей.

12:04

Во время войны сюда эвакуировали много производств из европейской части России, что привлекло в город специалистов… twitter.com/i/web/status/1…

12:04

🎭В городе 9 театров, филармония, проходят различные фестивали. Культурная жизнь идет.

🏦В сфере образования тоже ес… twitter.com/i/web/status/1…

12:04

Программистов готовят в НГУ, НГТУ (АВТФ и ФПМИ), СибГУТИ, СГУПС. Есть близкие специальности в НГУЭУ и НГПУ.

Для ме… twitter.com/i/web/status/1…

12:04

👩‍🔬 Академ

В конце 50-х годов на удалении от города был построен легендарный теперь Академгородк. Там собрано огро… twitter.com/i/web/status/1…

12:04

В Академгородке работал легендарный академик Андрей Ершов — один из первых программистов СССР. Он внёс неоценимый в… twitter.com/i/web/status/1…

12:04

Одно из направлений деятельности Ершова была организация обучения школьников информатике. Возможно, именно это зало… twitter.com/i/web/status/1…

12:04

Кстати Ершов дружил с Джоном Маккарти (LISP) и Дональдом Кнутом (TAOCP). Они даже посещали СССР по его приглашению.

12:04

В 2010-х в Академгородке построили Технопарк. Центр развития инноваций. И его здание в виде «Гусей» стало неофициал… twitter.com/i/web/status/1…

12:04

Всё это делает Новосибирск уникальным местом для IT.

Ещё с конца 90-х годов стало открываться много фирм в Академг… twitter.com/i/web/status/1…

12:04

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

12:04

Из крупных или тех, что на слуху у нас: 2ГИС, Яндекс, ЦФТ, Plesk, JetBrains, Movavi, СКБ Контур, НГС, СберТех, Ново… twitter.com/i/web/status/1…

12:04

Каждый год, вот уже 10 лет весной проходит конференция CodeFest. Рассказывать о нем бессмысленно, это прекрасный пр… twitter.com/i/web/status/1…

12:04

Года три назад к нему добавился DevFest от GDG Novosibirsk. Эта конференция больше ориентирована на студентов и дер… twitter.com/i/web/status/1…

12:04

Второй раз проходил Highload++ Siberia. Конференции Бунина идут в регионы. highload.ru/siberia/2019

12:04

Проходят также конференции по маркетингу (Груша)
2019.grushaconf.ru

Есть продуктовая конференция ProductCamp.
productcamp.ru/novosibirsk

12:04

🙋‍♂️Сообщества

Меня очень радует то, как у нас развились сообщества связанные с IT за последние несколько лет.

12:52

Моя личная боль в том, что когда я начинал изучать программирование (1999) информацию было сложно достать, единомыш… twitter.com/i/web/status/1…

12:52

Первый CodeFest состоялся только осенью 2010.
Его прототип, DevPoint — весной 2010.

И это было событие! Организато… twitter.com/i/web/status/1…

12:52

Чуть не забыл «Сибирские Интернет Недели». В 2018 году прошли 12 раз. А это значит, что они должны были быть до Dev… twitter.com/i/web/status/1…

12:52

Это всё организованные конференции, проходящие раз в год.

А вот с сообществами, проводящими регулярные встречи было туго года до 2014.

12:52

Именно тогда я первый раз пришел на DevDay — инициативу от 2ГИС. Встречи проходили на разные темы, но довольно редк… twitter.com/i/web/status/1…

12:52

В 2015 сотрудник 2ГИС Денис Речкунов организовал JSib, сообщество по JS, за что ему огромный респект.

Денис начал… twitter.com/i/web/status/1…

12:52

Подхватил знамя Леонид Кальнеус — организовал Google Developer Group Novosibirsk.

Они проводили встречи на широкий… twitter.com/i/web/status/1…

12:52

Как это бывает, Леонид тоже уехал, но GDG продолжили проводить Ден и Кир под его чутким руководством.

12:52

В тот момент из GDG выделилось сообщество DEV NSK, движимое силами прекрасной Саши Кукиной и Олега Федосеева.

Идея… twitter.com/i/web/status/1…

12:52

В результате этих событий жизнь сообществ в Новосибирске забурлила!

Порой бывало что на одни выходные приходилось… twitter.com/i/web/status/1…

12:52

К 2018 году сообщества посыпались как из рога изобилия — многие компании захотели сделать своё, чтобы обозначить се… twitter.com/i/web/status/1…

12:52

В 2015 году главная проблема организатора сообществ была не поиск докладчика, а поиск площадки для проведения.

Ден… twitter.com/i/web/status/1…

12:52

GDG до раскола, и DEV NSK после традиционно проходили в НГС.

GDG перехал в академ в около-технопарковскую тусовку.

12:52

Но главным катализатором этого движения стало открытие в 2018 году Лектория-бара ПОТОК.

Говорю об этом с большой г… twitter.com/i/web/status/1…

12:52

Про ПОТОК.

Это лекторий-бар с трибуной на 250 человек. Здесь можно одновременно провести лекцию и выпить крафтовог… twitter.com/i/web/status/1…

13:13

Фишка ПОТОКа в том, что если вы делаете открытое мероприятие в часы работы бара, то вы, как организатор, ничего не… twitter.com/i/web/status/1…

13:13

На площадке ПОТОКа сейчас проходят не только IT мероприятия, но и эксперименты с театральным форматом, просмотр кон… twitter.com/i/web/status/1…

13:13

Чтобы два раза не вставать, расскажу про второй офф-лайн проект Инетры — коворкинг ПРОСТОР.

На базе него можно про… twitter.com/i/web/status/1…

13:13

Ну и коворкинг есть коворкинг, само собой. Можно приходить, работать, есть кухня, терасса, норы, телефонные будки,… twitter.com/i/web/status/1…

13:23

А сейчас я попробую смертельный номер🦁🔥 — перечислю сообщества, которые у нас есть.

Сначала независимые:

13:49

GDG NSK
Чат: t.me/GDGNsk
meetup.com/ru-RU/GDGNsk/

* WebDev
* QA
* Blockchain
* Android
* Go
* Google I/O

13:49

DEV NSK
Чат: t.me/DEVNSK
meetup.com/ru-RU/DEVNSK/

* Frontend
* Backend
* QA
* HR

13:49

Agile NSK
Чат: t.me/AgileNSK
meetup.com/ru-RU/AgileNSK

13:49

Docker NSK
Чат: t.me/dockernsk
meetup.com/ru-RU/Docker-N…

13:49

JUG NSK
Чат: t.me/jugnsk
meetup.com/ru-RU/JUGNsk/

13:49

NskDotNet
meetup.com/ru-RU/NskDotNe…

13:49

Сообщество Техписателей Write the Docs Siberia
meetup.com/ru-RU/Write-th…

13:49

Сообщество инженеров Конвеерум
konveerum.ru
vk.com/konveerum

13:49

TechTalks @nsu
vk.com/techtalksnsu

13:49

Чат продуктологов Product Camp
t.me/productcampnsk

13:49

Чат тестировщиков QA Сибирь
t.me/qa_siberia

13:49

Kubernetes Novosibirsk
meetup.com/ru-RU/Kubernet…

13:49

React NSK
meetup.com/ru-RU/ReactNSK/

13:49

Functional Programming Specialty
meetup.com/ru-RU/Function…

13:49

LambdaNSK
vk.com/lambdansk

13:49

Hyperledger Novosibirsk
meetup.com/ru-RU/Hyperled…

13:49

Группа ПОТОКа для IT мероприятий
meetup.com/ru-RU/Лекторий…

* PhotoHack NSK
* Event meetup
* Soft Skills meetup
* Web… twitter.com/i/web/status/1…

13:49

Много митапов сделали компании. И это классно, больше движухи!

13:49

DevDay
2ГИС
devday.ru

13:49

Plesk meetups
Чат: t.me/NSKITevents
meetup.com/ru-RU/plesk-ev…

* трансляции конференций
* QA meetup
* Kubernetes
* Node School

13:49

JS Party NSK
Яндекс
Чат: t.me/jsparty_nsk

13:50

Яндекс периодически делает разные тематические митпаы:

events.yandex.ru/?q=%7B%22selec…

* Я.Субботник по разработке интерф… twitter.com/i/web/status/1…

13:50

ЦФТ проводит кучу мероприятий и мини-конференции.

team.cft.ru/events
meetup.com/ru-RU/itevents…

* Master Suppor… twitter.com/i/web/status/1…

13:50

MobiFest
ЦФТ

Конференция о мобильной разработке.

Следующая 21 сентября, вход бесплатный.

Чат:… twitter.com/i/web/status/1…

14:12

DataFest Siberia
ЦФТ

Конференция о Machine Learning

Следующая 28 сентября, вход бесплатный.
Пройдет в ПОТОКе!… twitter.com/i/web/status/1…

14:12

Nsk Tech Talks
СКБ Контур
eventskbkontur.timepad.ru/events/

14:12

K8s meetup
PooshWoosh
Чат: t.me/k8smeetup
pushwoosh.ru/k8s

14:12

Paymentwall Novosibirsk
meetup.com/ru-RU/Paymentw…

14:12

MD-community
Roowix/MindDesign
md-team.ru/rday
Чат: t.me/rnd_community
meetup.com/ru-RU/md-commu…

14:12

One Inc. Developers Group
meetup.com/ru-RU/oneinc/

14:12

Sibito!
Magora Systems

Сообщество в сфере заказной разработки
meetup.com/ru-RU/sibito/

14:12

Фух! Вроде всё.

Несколько сообществ ранее собирались регулярно, но давно молчат.

14:12

Golang NSK
meetup.com/ru-RU/GolangNS…

К сожалению, не было встреч с 2018 года.

14:12

NodeSchool Novosibirsk
Проводил мой коллега Женя Карагодин @ekaragodin

meetup.com/ru-RU/nodescho…

14:12

PyNSK

Сообщество по Python, регулярно проходило, пока Саша не уехал. 😅

vk.com/pynsk… twitter.com/i/web/status/1…

14:12

Ну и как не упомянуть JSib Дениса Речкунова @pragmader

vk.com/jsibnsk

14:12

Необычный пока для НСК формат: завтраки от Open Data Science проходят раз в неделю попеременно в академе и городе.… twitter.com/i/web/status/1…

14:12

Скромно пристрою в конец этого списка два своих чатика. Они пока маленькие, но мы растём.

14:12

AngularNSK

t.me/angularNSK

14:12

AWS@NSK

t.me/awsNSK

14:12

За появлением новых сообществ можно следить на Meetup

meetup.com/ru-RU/find/?al…

14:18

А также в чате NSK IT events
Его ведут мои коллеги из Plesk.

t.me/NSKITevents

14:18

За рынком Digital-разработки НСК пристально следит коллективный аккаунт «What is IT?» и комментирует с непременной… twitter.com/i/web/status/1…

14:18

😱Чуть не забыл самое необычное IT-сообщество Новосибирска!

Borsh NSK

Ребята собираются вместе и... варят Борщ!… twitter.com/i/web/status/1…

14:20

Submeet в Электронном городе

* Frontend
* Backend
* Enterprise

Сообщество от коллег из Новотелекома. Новотелеком… twitter.com/i/web/status/1…

14:25

Второй раз в этом году ЦФТ будет проводить Mobifest — бесплатную ❗️ конференцию по мобильной разработке.
На отлично… twitter.com/i/web/status/1…

14:31

Ещё одна конференция ЦФТ в партнёрстве с Open Data Science — DataFest.

Конференция по Data Science и Machine Learn… twitter.com/i/web/status/1…

14:31

Если вы собираетесь в Новосибирск, у нас есть что посмотреть.

В городе множество достопримечательностей: улочек с… twitter.com/i/web/status/1…

15:03

Мне очень нравится ул. Богдана Хмельницкого, особенно осенью в листопад.

Мне повезло жить неподалёку. pic.twitter.com/AHZjuhn1QO

15:03

Новосибирский зоопарк это гордость города. Там ведут уникальную работу по разведению редких животных.

zoonovosib.ru

15:03

Театр оперы и балета, в самом центре города, это самый большой оперный театр России. pic.twitter.com/muhBGbg1CP

15:03

А в этой чёрной высотке, на фоне находится офис Инетры, лекторий-бар ПОТОК и коворкинг ПРОСТОР.

Гуляя по городу за… twitter.com/i/web/status/1…

15:03

Наш метромост тоже достопримечательность, его длинна 2145 метров — он самый длинный в мире! pic.twitter.com/ATcC9MCrYM

15:03

А ещё есть памятник светофору 🚦 и памятник лабораторной мыши 🐁

15:03

А буквально на этой неделе, в центральном парке запустили новый цвето-музыкальный фонтан без чаши.

Очень красиво,… twitter.com/i/web/status/1…

15:03

О других достопримечательностях можно почитать например здесь.

tonkosti.ru/Достопримечате…

15:03

@jsunderhood Т.е. нельзя просто встроить на страницу обычный HTML5-плеер?

15:05

А ещё, у нас бывают морозы до -45 °C ❄️

Если всегда хотели это испытать, то приезжайте в январе-феврале. ⛄️

15:09

Кстати зимой очень солнечно. Чем холоднее, тем солнечнее. 🌞

Вообще в году очень много солнечных дней. Это вам не СПБ и не Москва. 😃

15:11

Моё дежурство заканчивается.

С вами был Андрей Нагих @andrnag.

Спасибо вам, что читали. Подписывайтесь, буду про… twitter.com/i/web/status/1…

17:03

Если хотите устроить что-то в ПОТОКе пишите сразу Варе Косман, она «хозяйка медной горы». Варя хорошая. :-) t.me/Fresera

17:07