Как стать автором
Поиск
Написать публикацию
Обновить
0

$mol *

Мал, да удал

Сначала показывать
Порог рейтинга
Уровень сложности

MAM: сборка фронтенда без боли

Время на прочтение16 мин
Количество просмотров11K

Здравствуйте, меня зовут Дмитрий Карловский, и я… обожаю MAM. MАМ управляет Агностик Модулями, избавляя меня от львиной доли рутины.


Типичный Агностик Модуль


Агностик Модуль, в отличие от традиционного, это не файл с исходником, а директория, внутри которой могут быть исходники на самых разных языках: программная логика на JS/TS, тесты к ней на TS/JS, композиция компонент на view.tree, стили на CSS, локализация в locale=*.json, картинки и тд, и тп. При желании не сложно прикрутить поддержку любого другого языка. Например, Stylus для написания стилей, или HTML для описания шаблонов.


Зависимости между модулями трекаются автоматически путём анализа исходников. Если модуль включается, то включается целиком — каждый исходник модуля транспилируется и попадает в соответствующий бандл: скрипты — отдельно, стили — отдельно, тесты — отдельно. Для разных платформ — свои бандлы: для ноды — свои, для браузера — свои.


Полная автоматизация, отсутствие конфигурирования и бойлерплейта, минимальные размеры бандлов, автоматическое выкачивание зависимостей, разработка сотен отчуждаемых библиотек и приложений в одной кодовой базе без боли и страданий. Ух какая наркомания! Уберите от мониторов беременных, слабонервных, детей и добро пожаловать на подводную лодку!

Читать дальше →

Quantum Mechanics of Calculations in JS

Время на прочтение15 мин
Количество просмотров9.1K

Здравствуйте, меня зовут Дмитрий Карловский и я… безработный. Поэтому у меня есть много свободного времени для занятия музыкой, спортом, творчеством, языками, JS-конференциями и компьютерной наукой. О последнем исследовании в области полуавтоматического разбиения долгих вычислений на небольшие кванты по несколько миллисекунд, в результате которого появилась миниатюрная библиотека $mol_fiber, я вам сегодня и расскажу. Но сперва, давайте обозначим проблемы, которые мы будем решать..


Кванты!


Это — текстовая версия одноимённого выступления на HolyJS 2018 Piter. Вы можете либо читать её как статью, либо открыть в интерфейсе проведения презентаций, либо посмотреть видеозапись.

Читать дальше →

$mol_app_life: симулятор бога своими руками

Время на прочтение9 мин
Количество просмотров11K

Здравствуйте, меня зовут Дмитрий Карловский. Недавно я оказался при смерти и понял как сильно я люблю Жизнь. Это идеальная игра для социопатов, где вы выступаете в роли бога, своею дланью единоправно решающего кому жить, кому умереть, а кому фаллоформировать. Новая клетка появляется как результат соития трёх других однополых соседей и умирает будучи затоптанной толпой из более чем трёх, оставшись наедине с собой или в компании всего одного. Кто бы мог подумать, что столь простые законы породят настолько огромное разнообразие игрового опыта, что играть в Жизнь будут и спустя 50 лет после их формулировки.


Планер


Если вы ещё не работали со $mol, то перед чтением рекомендуется прочитать более дружелюбное к новичкам руководство "$mol_app_calc: вечеринка электронных таблиц". А если его уже осилили, то далее вы узнаете:


  1. Как работать с бесконечным жизненным полем.
  2. Как рисовать быструю векторную графику.
  3. Как в $mol легко и просто соединить управление пальцем и рисование графики.
Читать дальше →

$mol — лучшее средство от геморроя

Время на прочтение15 мин
Количество просмотров23K

Всем привет, меня зовут Дмитрий Карловский и я… хочу причинить вам боль. Много боли. Я напомню вам обо всех страданиях, что вы исптываете находясь в плену своего любимого js-фреймворка. Я опущу вас на самое дно самой глубокой безысходности. А потом, когда вы совсем отчаетесь и потеряете веру в комьюнити, я подам вам руку помощи и покажу светлое будущее.


Я причиню вам боль


Далее вашему представляется текстовая расшифровка одноимённого выступления c IT Global Meetup #11. Вы можете читать её как статью или же открыть в интерфейсе проведения презентаций. Приятного чтения.

Читать дальше →

$mol_app_calc: вечеринка электронных таблиц

Время на прочтение17 мин
Количество просмотров7.4K

Здравствуйте, меня зовут Дмитрий Карловский и я… обожаю математику. Однажды мне не спалось и я запилил сервис для таких же отбитых как и я — легковесную электронную таблицу с пользовательскими формулами, шарингом и скачиванием.


Живой пример с расчётом кредита:


Кредитный калькулятор


А дальше я расскажу, как сотворить такое же за вечер используя фреймворк $mol...

Читать дальше →

Объектное Реактивное Программирование

Время на прочтение16 мин
Количество просмотров22K

Объектное Реактивное Программирование


Дмитрий Карловский из SAPRUN представляет… ммм...


Это — текстовая версия одноимённого выступления на FrontendConf'17. Вы можете читать её как статью, либо открыть в интерфейсе проведения презентаций, либо посмотреть видео.

Надоело.. Чем поможет ОРП?
… писать много, а делать мало? Пиши мало, делай много!
… часами дебажить простую логику? Реактивные правила обеспечат консистентность!
… асинхронщина? Синхронный код тоже может быть неблокирующим!
… что всё по умолчанию тупит? ОРП оптимизирует потоки данных автоматом!
… функциональные головоломки? Объекты со свойствами — проще некуда!
… что приложение падает целиком? Позволь упасть его части — само поднимется!
… жонглировать индикаторами ожидания? Индикаторы ожидания пусть сами появляются, где надо!
… двустороннее связывание? Двустороннее связывание нужно правильно готовить!
… пилить переиспользуемые компоненты? Пусть компоненты будут переиспользуемыми по умолчанию!
… вечно догонять? Вырывайся вперёд и лидируй!
Читать дальше →

$mol_app_bench: готовим JS бенчмарки быстро и просто

Время на прочтение13 мин
Количество просмотров3.5K

Здравствуйте, меня зовут Дмитрий Карловский и я… тот ещё гурман. Мне нравится готовить изысканные блюда, которые элегантно и просто решают привычные уже набившие оскомину проблемы. Можно долго рассказывать о преимуществах тех или иных подходов, удешевлении поддержки, ускорении разработки, упрощения отладки, но всё это остаётся достаточно субъективными оценками, над которыми нужно размышлять. Поэтому рано или поздно (но как правило преждевременно), всё обсуждение скатывается к более-менее измеримым величинам — скорости работы, скорости загрузки и прочим скоростям. И мало того, что нужно сделать несколько реализаций на разных технологиях, чтобы было что сравнивать, так ещё и не плохо было бы нарисовать интерфейс с понятной человеку выдачей результатов. А всё это — время, которого всегда не хватает, особенно, если делать хорошо.


Чтобы упростить разработку бенчмарков мы выделили общую их часть в отдельное приложение, которое рисует весь интерфейс от выбора тестируемых вариантов до наглядного представления результатов, а вариативная часть подключается извне и реализует довольно простой интерфейс. Всё "накликанное" состояние сохраняется в ссылке, так что им легко поделиться с другими гурманами. Кроме того, поддерживается локализация и сортировка результатов по разным критериям — настоящий пир для всех любителей быстрой еды.


Быстрей, а то всё вкусное съедят


Далее вы узнаете:


  • Как замутить свой бенчмарк, практически не прилагая усилий.
  • Как запилить что-то по сложнее, с загрузкой целых приложений в отдельных фреймах.
  • Как устроен $mol_app_bench изнутри.
  • Как теперь жить-то со всем этим.
Читать дальше →

$mol_atom: теория и практика реактивности

Время на прочтение15 мин
Количество просмотров12K

Здравствуйте, меня зовут Дмитрий Карловский и я… состоятельный человек. У меня есть состояние на сервере, есть состояния в локальных хранилищах, есть состояние окна браузера, есть состояние доменной модели, есть состояние интерфейса. И всё это многообразие состояний нужно поддерживать синхронизированным. Если одно состояние как-то изменяется, то остальные связанные с ним состояния должны как можно скорее обновиться. Особую пикантность ситуации придаёт то, что синхронизация с сервером может занимать секунды, а блокировать пользовательский интерфейс можно лишь на доли секунд.


Состоятельный человек


Далее вы узнаете: как реактивность побеждает асинхронность, как императивная реактивность уживается с функциональной, как простые абстракции позволяют писать надёжный и быстрый код, а также как я однажды перешёл на идемпотентную сторону силы и всё заверте

Читать дальше →

React'ивные Panel'и

Время на прочтение6 мин
Количество просмотров12K

Что такое панель? Это довольно простой компонент, разбивающий видимую область на 2-3 блока:


  • Шапка. В шапку обычно выводится заголовок и какие-то (обычно навигационные) элементы правления.
  • Тело. В тело панели выводится выводится произвольное содержимое. Часто этот блок делается скроллируемым, чтобы шапка не уходила из поля зрения.
  • Подвал. Опциональный блок. Сюда выводят обычно общую для содержимого панели информацию и элементы управления.

Не смотря на кажущуюся простоту, реализации обычно не такие уж и простые. Связано это с тем, что вариантов его использования великое множество.


В шапке может быть, а может не быть:


  • Заголовок. Дополнительно у него может быть подзаголовок.
  • Хлебные крошки. Они могут быть частью заголовка, а могут — подзаголовка.
  • Навигационные ссылки. Такие как "назад", "следующий" и тп.
  • Кнопки. Такие как "открыть фильтры", "переключить флаг", "закрыть окно" и другие.

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


Получается, что у панели должно быть минимум 3 параметра, которые принимают "сложное содержимое", то есть такое, которое не является плоским текстом, а содержит иерархию вложенных блоков.


Далее идёт обзор тех готовых решений, которые можно найти в гугле. Для каждого указан размер реализации в строках кода (CLOS). Плюс бонус в конце, для тех, кто доберётся ;-)

Читать дальше →

$mol: reactive micromodular ui-framework

Время на прочтение28 мин
Количество просмотров22K

Сколько нужно времени, чтобы просто вывести на экран большой список, используя современные фреймворки?


Список на 2000 строк ReactJS AngularJS Raw HTML SAPUI5 $mol
Появление списка 170 ms 420 ms 260 ms 1200 ms 50 ms
Обновление всех его данных 75 ms 75 ms 260 ms 1200 ms 10 ms

Напишем нехитрое приложение — личный список задач. Какие у него будут характеристики?


ToDoMVC ReactJS AngularJS PolymerJS VanillaJS $mol
Размер ( html + js + css + templates ) * gzip 322 KB 326 KB 56 KB 20 KB 23 KB
Время загрузки 1.4 s 1.5 s 1.0 s 1.7 s 0.7 s
Время создания и удаления 100 задач 1.3 s 1.7 s 1.4 s 1.6 s 0.5s

Небольшая головоломка: перед вами синхронный код, загружающий и обрабатывающий содержимое 4 файлов, но с сервера они грузятся параллельно. Как такое может быть?


Синхронная параллельная загрузка ресурсов


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

Читать дальше →