Всем привет! Меня зовут Старовойт Андрей @anstarovoyt и я разработчик @WebStormIDE в @jetbrains. На этой неделе рас… twitter.com/i/web/status/1…

Чтобы не возникло недопонимания — я Java-разработчик и знаком с веб-разработкой именно со стороны поддержки в IDE.… twitter.com/i/web/status/1…

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

@jsunderhood Были ли моменты, когда хотелось рвать, метать и кричать "Что эти разработчики библиотек себе позволяют… twitter.com/i/web/status/1…

Для начала разберемся с понятиями.
IDE — Integrated Development Environment. Если совсем простым языком, то это тек… twitter.com/i/web/status/1…

WebStorm — “JavaScript IDE by JetBrains”. На самом деле, языком JavaScript дело не ограничивается. Мы пишем поддерж… twitter.com/i/web/status/1…

Практически все IDE от JetBrains выросли из одного продукта Intellij IDEA — и представляют из себя некоторый набор… twitter.com/i/web/status/1…

Архитектурно весь код WebStorm (и других упомянутых выше IDE) можно разделить на базовый (платформенный) и код, отв… twitter.com/i/web/status/1…

Весь платформенный код у нас открыт и лежит на гитхабе как часть IntelliJ IDEA Community Edition github.com/JetBrains/inte… (осторожно, Java!)

Про платформу и задачи, которые там возникают есть несколько очень крутых докладов Алексея Кудрявцева… twitter.com/i/web/status/1…

Многие языковые фичи могут иметь общую часть. Возьмем, например, Postfix Completion.
Есть общая часть, которая лежи… twitter.com/i/web/status/1…

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

Сегодня хотел бы поговорить про поддержку языков в IDE. Можно выделить два подхода:
Первый это — реализация парсер… twitter.com/i/web/status/1…

Понятно, что существуют еще некоторые промежуточные варианты, но про них я расскажу чуть позже

В WebStorm и других IDE от JetBrains мы обычно реализуем парсер языка. Имея на руках синтаксическое дерево, можно д… twitter.com/i/web/status/1…

Понятно, что только парсером дело не ограничивается. Мы практически пишем в IDE компилятор языка (в плане понимания семантики)

У написания собственного парсера есть свои плюсы и свои минусы (тред)

Раз уж мы начали говорить о поддержке языков, расскажите какая языковая фича JavaScript/TypeScript вас больше всего… twitter.com/i/web/status/1…

@jsunderhood Очень долго привыкал к феномену "оператор запятая"

const f = x => (g(x), x)

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

Может у вас истории поинтереснее?
@art_spb, @en_Dal, @alex_zolotov

@jsunderhood @art_spb @alex_zolotov Я учился на матмехе СПбГУ, где преподавал @mshafirov, и многие его ученики прих… twitter.com/i/web/status/1…

@jsunderhood @en_Dal @alex_zolotov Моя ещё скучнее - я хотел в @jetbrains, мне предложили @phpstorm, и я согласился… twitter.com/i/web/status/1…

@jsunderhood @art_spb @en_Dal @alex_zolotov Я до JetBrains особо этим не занимался. Ничем не хуже чем любое другое… twitter.com/i/web/status/1…

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

Чтобы обработать эту конструкцию нужно:

В этом плане с TypeScript дело обстоит гораздо лучше, чем с JavaScript. В нем есть более-менее строгие правила разр… twitter.com/i/web/status/1…

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

Для JavaScript мы по возможности стараемся использовать вывод типов TypeScript (например, если есть файл “.d.ts”).… twitter.com/i/web/status/1…

Для многих языков, помимо парсера и механизма вывода типов, мы еще реализовываем Control Flow граф. Этот граф позво… twitter.com/i/web/status/1…

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

CF граф также используется для Type Guard (механизма сужения типов) в TypeScript

Чуть подробнее о том, как строится граф и как используется в TypeScript я рассказывал вот здесь:
youtube.com/watch?v=qddYQL…

Простой пример CF графа pic.twitter.com/WtFD6G9mFH

Возвращаясь к вопросам синтаксиса языков.

В TypeScript довольно развитая система типов. Используете ли вы Mapped t… twitter.com/i/web/status/1…

Сегодня расскажу про команду и то, как мы работаем

Над WebStorm трудятся 16 человек. Помимо разработки и тестирования, есть еще Product Manager, Product Marketing Man… twitter.com/i/web/status/1…

Команда рассредоточена по разным локациям. Есть люди, которые работают в офисах Питера, Мюнхена, Амстердама. Один р… twitter.com/i/web/status/1…

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

@theKashey @jsunderhood @anstarovoyt @WebStormIDE @jetbrains Работаем над этим. blog.jetbrains.com/idea/2019/12/i…

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

Но, конечно, никто не мешает тебе прийти в другую подсистему и сделать там хорошо (с код ревью)

Так же есть некоторая внутренняя ротация. Если тебе надоело заниматься чем-то одним, можно договориться о смене отв… twitter.com/i/web/status/1…

Для коммуникаций внутри и между командами мы используем в основном Slack.
Некоторые команды уже перешли на Space

О, вспомнил еще один вопрос про синтаксис TypeScript.
Используете ли вы namespace (раньше использовалось слово mod… twitter.com/i/web/status/1…

@jsunderhood Иногда удобно функции для работы с enum'ом положить в namespace с таким же названием. MyEnum.fromSomeApi(valueFromServer)

@jsunderhood Глобальный манки-патчинг. Такие вещи как express или cypress позволяют на лету добавлять свойства в об… twitter.com/i/web/status/1…

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

У нас открытый issue tracker, куда кто-угодно может прийти с жалобой или просьбой добавить новую фичу. В трекере ес… twitter.com/i/web/status/1…

Линк youtrack.jetbrains.com/issues/WEB вдруг кому интересно :)

В трекере

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

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

В команде есть Product Manager Катя, которая старается следить за новостями в мире JavaScript. Она помогает решить,… twitter.com/i/web/status/1…

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

Например, люди, которые занимаются поддержкой JavaScript, сами понимают, что нужно следить за предложенными фичами… twitter.com/i/web/status/1…

Еще один источник информации это Developer Advocate’ы, которые часто делятся с нами обратной связью (либо своей, либо от пользователей)

И последнее, и на мой взгляд, очень крутое — это EAP (Early Access Program)
Здесь будет небольшой тред о том, что это

EAP — это версия IDE, которой может воспользоваться любой желающий (там встроена лицензия на один месяц)

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

EAP-программы позволяют быстро протестировать новые фичи на небольшой группе пользователей и получить обратную связ… twitter.com/i/web/status/1…

Кроме тестирования новой функциональности, EAP-версии также помогают быстро узнать о каких-то регрессиях

Благодаря EAP-ам пользователь может непосредственно влиять на то, как будет выглядеть фича в финальной версии

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

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

У VSCode, кстати, что-то подобное называется Insiders

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

В JetBrains есть несколько frontend-команд, которые пользуются WebStorm и тоже дают обратную связь

Про то, откуда появляются задачи поговорили. Остался вопрос приоритетов.
Основные факторы влияния:
Актуальность и п… twitter.com/i/web/status/1…

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

Поддерживая новую технологию, мы практически сразу получаем фидбек в несколько десятков bugs и feature requests

Иногда их статус неоднозначен: с точки зрения разработчика, он просто не поддержал какую-то функциональность (напри… twitter.com/i/web/status/1…

Почему не делаем какие-то задачи*
Нет уверенности о реальной потребности
Слишком мало пользователей
Противоречие с… twitter.com/i/web/status/1…

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

Тот самый альтернативный способ — это использование некоторого Language Server, например, LSP (но им дело не ограничивается)

Тред про достоинства и недостатки Language Server

Есть еще одна тонкость, связанная с использование LS:
обычно хочется, чтобы подсветка кода в редакторе была момента… twitter.com/i/web/status/1…

Под "подсветкой кода" я имею ввиду подсветку ключевых слов и других синтаксических элементов

Ответ такой: обычно есть какой-то отдельный механизм, отвечающий за синтаксическую подсветку. VSCode, например, исп… twitter.com/i/web/status/1…

@jsunderhood Так же, как в редакторах, которые ничего не знают про LS? :)

Один из примеров использования LS у нас — это Dart.
Протокол взаимодействия WS и Dart Analysis Server был разработ… twitter.com/i/web/status/1…

Но несмотря на то, что в Dart используется LS, там все же реализован парсер языка на стороне IDE, для решения вопро… twitter.com/i/web/status/1…

В поддержке TypeScript мы получаем и показываем в редакторе сообщения об ошибках из TypeScript Language Server, но… twitter.com/i/web/status/1…

Плавно переходим к вопросам поддержки фреймворков, на примере Angular

У Angular есть свой языковой сервис Angular Language Service.
WebStorm какое-то время использовал Angular LS, но… twitter.com/i/web/status/1…

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

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

Для понимания синтаксиса у нас написан специальный парсер шаблонов Angular. Парсер строит обычное HTML дерево, но с… twitter.com/i/web/status/1…

И небольшой опрос в предверии завтрашней темы разговора. Если вы используете Yarn, перешли ли вы на Yarn 2 (berry)

Сегодня я хотел бы поговорить о том, как менялись web-технологии за последние 5+ лет, в контексте разработки IDE

Логично начать разговор с JavaScript (точнее ECMAScript).
Как вы думаете, что за язык на приложенной картинке? pic.twitter.com/HnD74JwytI

Многие узнают ActionScript 3. Но на самом деле, это еще и ECMAScript 4, спецификация языка, которая так и не была в… twitter.com/i/web/status/1…

В TS и ES6 используется немного другой синтаксис (без ключевого слова function) pic.twitter.com/V35hq2w9CN

Кроме ES4 также была спецификация ES4X, которая предлагала синтаксис работы с XML в JavaScript коде, подобный JSX в… twitter.com/i/web/status/1…

А теперь самое интересное: эти спецификации были написаны в 2003-2004 годах. Получается, что многие идеи, на которы… twitter.com/i/web/status/1…

@jsunderhood E4X. Была реализована в SpiderMonkey и у нас всё ещё жива в древнем XSLT-легаси. Из интересного, там есть свой аналог XPath

А еще все эти скриншоты были сделаны в WebStorm, потому что WS поддерживает ES4 и E4X...
Хорошо, что все это было н… twitter.com/i/web/status/1…

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

Ну и для тех, кто не знаком с историей ES4: спецификацию сочли слишком революционной, и вместо нее приняли ES5. Ча… twitter.com/i/web/status/1…

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

Про TypeScript вроде все понятно, а вот про Babel и CoffeeScript хочу написать подробнее

Babel — это головная боль разработчика IDE. Любой может добавить в JavaScript недостающую ему синтаксическую констр… twitter.com/i/web/status/1…

Все поддержать невозможно. Мы стараемся поддерживать самые популярные плагины и драфты спецификации ES, когда они выходят из Stage 1

CoffeeScript для меня язык-загадка. Его синтаксис довольно сильно отличается от JavaScript, но каким-то образом он… twitter.com/i/web/status/1…

Мой любимый пример популярности этого языка — вот этот pull request в Node.js "Use CoffeeScript!":
github.com/nodejs/node-v0…

Понятно, что это шутка, но все же

Кроме того, у CoffeeScript были диалекты, развивающие его идеи:
Coco
LiveScript
IcedCoffeeScript

Этим не каждый язык может похвастаться

Cвою популярность CoffeeScript потерял примерно так же стремительно, как и набрал. Есть предположение, что просто п… twitter.com/i/web/status/1…

В WS есть поддержка CoffeeScript, но до диалектов мы так и не дошли — популярность технологии сошла на нет.
В 2017… twitter.com/i/web/status/1…

@jsunderhood Я однаждый фиксил баги в проекте на RedScript, там даже подсветки синтаксиса не было.

Вот список тог… twitter.com/i/web/status/1…

Мы подошли к одной из главных революций в web. В 2015 году вышел ES6 (ECMAScript 2015). Кроме языковых фич был еще… twitter.com/i/web/status/1…

Теперь, язык релизится раз в год, и в него попадают все готовые на данный момент новые фичи

В настройках WS есть опция выбора версии языка (раньше пунктов было гораздо больше).
Этот выбор нужен для того, чт… twitter.com/i/web/status/1…

При новой модели этот список стал менее актуален, потому что реализация фичи (в Babel или в одном из браузеров, или… twitter.com/i/web/status/1…

@jsunderhood Хотелось бы отметить что изначально редактор atom был полностью написан на coffeescript

Поэтому сейчас просто есть разделение “новые фичи ES6+”, ES5 и некоторые специфичные диалекты

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

Теперь небольшой тред про то, как я помню развитие Node.js

Я пришел в команду WS в 2014 из Java Enterprise разработки. Меня очень удивило, что такая экспериментальная техноло… twitter.com/i/web/status/1…

В наши дни, я думаю, даже самые ортодоксальные backend-разработчики знают, что весь веб использует Node.js для решения самых разных задач

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

Сейчас Node.js плагин добавляет очень специфичные для Node.js разработки вещи, вроде run-конфигураций и дополнитель… twitter.com/i/web/status/1…

Наверно, один из поворотных моментов в развитии Node.js был кризис, связанный с появлением io.js

В двух словах, для тех, кто не знаком с этой историей: в конце 2014 часть людей из команды Node.js сделала форк из-… twitter.com/i/web/status/1…

Форк просуществовал не очень долго — примерно полгода. Но в результате этого Node.js вышел из версии 0.xx и стал развиваться гораздо быстрее

Нам в свое время пришлось оперативно добавить поддержку io.js, а потом так же быстро выпилить ее.

Но я сегодня пр… twitter.com/i/web/status/1…

Ну а теперь Looking forward to Deno

Расскажите, что вы думаете о Deno?
Пробовали / нет?
Взлетит / нет?

@jsunderhood Причём все так дико спорили (включая Крофорда, топившего против), что в итоге сильно устали и решили п… twitter.com/i/web/status/1…

Моя трансляция подошла к концу. Спасибо всем, было интересно 🙂
С вами эту неделю был Старовойт Андрей @anstarovoyt… twitter.com/i/web/status/1…

В напутствие, обращаюсь к тем, кто использует наши IDE. По статистике только 20-30% пользователей используют одну и… twitter.com/i/web/status/1…