Препарируем JavaScript и лечим родовые травмы

Валентин Ульянов

Препарируем JavaScript
и лечим родовые травмы

Валентин Ульянов

Обо мне

Фото Валентина Ульянова

Обо мне

Фото Валентина Ульянова

Обо мне

Фото Валентина Ульянова
mlut

Make CSS exciting again!

Обо мне

Фото Валентина Ульянова
SPb IT Club

Обо мне

Фото Валентина Ульянова

Я и JavaScript

Я и JavaScript

Я и JavaScript

Я и JavaScript

Содержание

Дмитрий Карловский

Системный код - код, который нужен для работы другого кода. Библиотеки, фреймворки, утилиты, etc

Системный код - код, который нужен для работы другого кода. Библиотеки, фреймворки, утилиты, etc

Прикладной код - программа для решения задач предметной области. Сервис доставки, интернет-магазин, онлайн-банк, etc

Проблемы развития JS-разработчика

Увлеченный JS-разраб
Скрин со state of js
Как Стать Senior Разработчиком за 1 год?
Книга чистый код
Книга чистый код Книга GOF
Книга чистый код Книга GOF Книга про паттерны
сложная UML диаграма с паттерном
Логотип TypeScript
Пример кода с интерфейсами
Пример кода с интерфейсами Пример кода с классами
Мем: клоун наносит грим
Лого Нест Мб лого ангуляр
Скрин из документации nest
Мем: сравнение Nest и Spring
Скрин из документации spring

Можно проще?

Код на Нест

Можно проще?

Код на Нест Код на Нест

Стандартные паттерны

Стандартные паттерны

Увлеченные разрабы на афтепати
Скрин с доклада про Elixir
Скрин с доклада про Ocaml

Динамический метод

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

Пример динамического метода на Ruby
Пример динамического метода на Ruby

Динамический метод

Динамический метод

Динамический метод

А как это делать в JS? 🤔

Перегрузка операторов

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

Пример перегрузки операторов на Scala
Пример перегрузки операторов на Scala
Пример перегрузки операторов на Scala

Перегрузка операторов

Proposal перегрузки операторов в js

Что делать?

AI слоп код с proxy
Логотип GigaScript

GigaScript

GigaScript

GigaScript

GigaScript

Код на GigaScript
Код на GigaScript
Код на GigaScript

Слабые стороны

Слабые стороны

Кадр из Кунг-фу Панды: свиток дракона
Пример кода с перегрузкой операторов на JS
Пример кода с динамическим методом на JS

Продвинутый JavaScript

Продвинутые возможности

Продвинутые возможности

Продвинутые возможности

Прототипное наследование

Возможность экземпляров иметь доступ к цепочке прототипов-предков и использовать свойства и методы из них

Пример кода с прототипным наследованием
Пример кода с прототипным наследованием
Пример кода с прототипным наследованием
Пример кода с прототипным наследованием
Пример кода с прототипным наследованием
Пример кода с прототипным наследованием
Мем скуби ду классы и прототипы

Proxy

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

Пример кода с Proxy
Пример кода с Proxy
Пример кода с Proxy
Список proxy traps

Symbol.toPrimitive

Символьный метод, позволяющий отслеживать преобразование
объекта к примитиву

Symbol.toPrimitive

Пример кода с Symbol.toPrimitive
Пример кода с Symbol.toPrimitive

Применение
на практике

Кейсы

Кейсы

Кейсы

Кейсы

Обложка доклада про typescript
Бэкенд инфраструктура в AWS
Синяя книга про DDD
Пример value object в коде
Пример value object в коде
Создание сущности из DTO
Translator entity использует базовый класс Entity
Translator entity использует базовый класс Entity
Translator entity использует базовый класс Entity
Translator entity использует базовый класс Entity
Реализация Entity
Реализация Entity
Мем: когда применил в проде прототипное наследование

Кейсы

Редактор таблиц Р7
Макрос в Р7
Страница документации VBA

События в редакторах

События в редакторах

Глобальные события

Глобальные события

Глобальные события

Глобальные события

Код макроса с событием

RPC для взаимодействия документов

RPC для взаимодействия документов

Макрос с вызовом метода другого документа

Модуль для RPC

Модуль для RPC

Модуль для RPC

Мем: с дядей Бобом

Сильный инженер не пишет типовой код

Пример работы documents change в VBA
Пример работы documents change в VBA

Модуль для RPC

Documents - array-like абстракция для работы с коллекцией открытый документов

Код работы с коллекцией Documents
Код работы с коллекцией Documents
Код класса коллекции DocumentsRpc
Код класса коллекции DocumentsRpc
Код класса коллекции DocumentsRpc
Код класса коллекции DocumentsRpc
Код добавления документа в коллекцию
Код добавления документа в коллекцию
Код добавления документа в коллекцию
Код DocumentProxyTrap
Код DocumentProxyTrap
Код DocumentProxyTrap
Код DocumentProxyTrap
Код отправления сообщения
Код работы с коллекцией Documents

Кейсы

Пример кода с перегрузкой операторов на JS
Класс Money
Методы класса Money
Методы класса Money
Использование класса Money
toJSON в классе Money
Сериализация объекта money
Сериализация объекта money
Класс DateRange
Класс DateRange
Класс DateRange
Класс DateRange
Использование класса DateRange

Заключение

Преимущества продвинутого JS

Преимущества продвинутого JS

Преимущества продвинутого JS

Минусы

Мем: они же прост формошлепы

Минусы

Минусы

Выводы

Выводы

Выводы

Выводы

Вопросы?

Валентин Ульянов Презентация: 150.lv/t/fix-js
Телеграм-канал:
qr-код на телеграм канал