• Теория программирования: Вариантность

      Здравствуйте, меня зовут Дмитрий Карловский и я… хочу поведать вам о фундаментальной особенности систем типов, которую зачастую или вообще не понимают или понимают не правильно через призму реализации конкретного языка, который ввиду эволюционного развития имеет много атавизмов. Поэтому, даже если вы думаете, что знаете, что такое "вариантность", постарайтесь взглянуть на проблематику свежим взглядом. Начнём мы с самых основ, так что даже новичок всё поймёт. А продолжим без воды, чтобы даже профи было полезно для структурирования своих знаний. Примеры кода будут на псевдоязыке похожем на TypeScript. Потом будут разобраны подходы уже нескольких реальных языков. А если же вы разрабатываете свой язык, то данная статья поможет вам не наступить на чужие грабли.


      а вдруг там лис?

      Читать дальше →
    • Презентация приложения для проведения презентаций

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


        Тестируем голосовое управление


        Но и этого нам мало, поэтому мы решили отметить юбилей по крупному, организовав конференцию на берегах Невы PiterJSConf, которая пройдёт уже в эту субботу 7 сентября 2019. Спешите записываться, пока ещё есть свободные места, ведь участие в ней для вас будет совершенно бесплатно.


        Мы всё это делаем не за деньги, а за великую идею, что знания должны быть бесплатны. Поэтому всё, что мы делаем, доступно в Open Source. Мы с радостью делимся своими наработками, знаниями и опытом с другими. И призываем к сотрудничеству организаторов из других городов для создания открытой платформы организации технологических митапов на регулярной основе. Присоединяйтесь к нам в качестве организатора, партнёра, докладчика, волонтёра, патрона или просто слушателя.


        А пока, предлагаю вам рассказ про веб приложение для проведения презентаций $hyoo_slides, которое я использую для всех своих выступлений. Видеозапись доступна на YouTube, но там не всё. Можете читать этот рассказ как статью, так и открыть в интерфейсе самого приложения. Далее я расскажу вам, сколько всего оно умеет, и как работает.

        Читать дальше →
      • Фрактал имён элементов

          Здравствуйте, меня зовут… Человек. Число рук равно 2. Число ног равно 2. Группа крови равна 1. Резус равен истине.


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


          Три мужика и девочка


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

          Читать дальше →
        • MAM: сборка фронтенда без боли

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


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


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


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


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

            Читать дальше →
          • Велосипедофобия

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


            Я почему раньше злой был? У меня просто велосипеда не было.

            Чтож, приступим к лечению..
          • Лента новостей: почему мы делаем это неправильно?

            Здравствуй, меня зовут Дмитрий Карловский и у меня для вас новость. Ну как новость, свежий взгляд на привычную вещь в виде очередной статьи. Скорее всего вы попадёте на неё из какой-либо ленты новостей. Или не попадёте, если новость будет опубликована не вовремя. Независимо от того, насколько данная статья была бы вам интересна.


            Типичная лента новостей


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

            Читать дальше →
          • Quantum Mechanics of Calculations in JS

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


            Кванты!


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

            Читать дальше →
          • Популярные антипаттерны: паджинация

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


            Разные паджинаторы

            Читать дальше →
          • Заблуждения об автоматическом тестировании

            Здравствуйте, меня зовут Дмитрий Карловский и это продолжение традиционной рубрики "Почему мы так не любим писать тесты?". Короткий ответ: потому, что получаемые от них бонусы не перевешивают затрачиваемых усилий. Если это так, значит мы делаем что-то не правильно. Давайте разберёмся что же могло пойти не так..


            Картинка для привлечения внимания


            Данная заметка выросла из главы "Заблуждения" лонгрида "Концепции автоматического тестирования", посредством дополнения новыми заблужениями и аргументами.

            Читать дальше →
          • Концепции автоматического тестирования

            Здравствуйте, меня зовут Дмитрий Карловский и у меня, к сожалению, нет времени писать большую статью, но очень хочется поделиться некоторыми идеями. Поэтому позвольте потестировать на вас небольшую заметку о программировании. Речь сегодня пойдёт об автоматическом тестировании:


            1. Зачем мы пишем тесты?
            2. Какие бывают тесты?
            3. Как мы пишем тесты?
            4. Как их стоит писать?
            5. Почему модульные тесты — это плохо?

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

            Читать дальше →
          • GitHub Flow

            Увидев в очередной раз базворд GitFlow я психанул и решил перевести описание более простой и менее проблемной схемы работы с ветками под названием GitHub Flow. Именно её имеет смысл использовать по умолчанию, переходя к какой-то другой лишь в случае непреодолимых обстоятельств.


            Создайте ветвь



            Пока вы работаете над одним проектом, у вас может быть куча различных реализуемых параллельно улучшений. Некоторые из них готовы к работе, а другие — нет. Ветвление позволяет вам управлять этим рабочим процессом.

            Читать дальше →
          • $mol_app_life: симулятор бога своими руками

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


            Планер


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


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

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


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


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

            Читать дальше →
          • $mol_app_calc: вечеринка электронных таблиц

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


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


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


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

            Читать дальше →
          • Объектное Реактивное Программирование

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


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


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

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

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


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


              Разбирать мы будем вот этот вот реляционный звездолёт:


              17 таблиц


              А собирать вот такой вот графовый скворечник:


              5 классов

              Читать дальше →
            • $mol_app_bench: готовим JS бенчмарки быстро и просто

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


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


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


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


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

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


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


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

                Читать дальше →
              • React'ивные Panel'и

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


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

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


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


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

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


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


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

                Читать дальше →
              • $mol: reactive micromodular ui-framework

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


                  Список на 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 файлов, но с сервера они грузятся параллельно. Как такое может быть?


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


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


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