Skip to content

Mol presentation

Stefan edited this page Mar 6, 2022 · 9 revisions

$mol - уникальная экосистема для web-разработки

$mol - высокоуровневый фреймворк для создания веб-приложений(SPA-PWA). Подходы к разработке в нем сильно переосмыслены, так чтобы писать меньше кода - делать больше. Результат многолетних исследованний и экспериментов в области web-разработки. Экосистема $mol позволяет за считанные часы получать продакшен-реди ультра компактные и шустрые PWA приложения. Наши наработки позволяют меньшей командой за меньшие сроки сделать больше, да ещё и качественнее.

Общие принципы

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

Адаптивность

В коробке свой набор компонент(типа как bootstrap, material ui), поддерживающих буклетный дизайн, который позволяет малыми усилиями получать приложение сразу для всех размеров экранов, т.е. если использовать его, то не надо пилить отдельные версии для телефонов/планшетов/декстопов. Но можно и не использовать буклетный дизайн, а сделать на основе mol свою библиотеку UI. Одно приложение сразу для всех платформ (поддерживается кордова для упаковки под мобилки).

Высокоуровневость

Аналоги высокоуровневых фреймворков - extjs, OpenUI5. В моле также из кирпичиков собираются приложения, только одновременно с этим он более гибок чем например низкоуровневый реакт.

Скорость

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

Бережливость

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

Потребление ресурсов не зависит от объема контента, благодаря виртуализации рендеринга, как основы $mol. Что дает экономию по памяти в 10 раз и более на больших объемах контента.

Малый объем кода на выходе делает не актуальными минификацию и frontend-микросервисы, что упрощает инфраструктуру.

Самодостаточность

$mol - экосистема с нуля, внешних зависимостей немного (typescript, chokidar). Велосипедить с нуля приходилось, т.к. существующие решения не отвечали следующим требованиям:

Низкое качество большинства библиотек в NPM:

  • раздутые
  • медленные
  • не расширяемые
  • не единообразные в масштабировании

Проблемы модульной системы NPM:

  • лишние зависимости, которые при сборке надо очищать от лишнего кода (тришейкать), существующие инструменты делают это не всегда хорошо
  • неожиданная загрузка нескольких версий одной библиотеки на клиент
  • невозможность плавной миграции между версиями библиотеки

Разделение ответственностей

С кодом на $mol могут работать люди с разными уровнями компетенций. Это достигается через DSL для прототипирования и расширяемостью.

Для программиста

Расширяемость

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

Багоустойчивость

Этому способствуют строгая типизация (typescript), оригинальная реализация реактивности, автотесты

Отлаживаемость

Любая часть mol легко отлаживается, говорящие, структурированные имена, хлебные крошки на всех уровнях, от компонентов до верстки, облегчающих работу программисту

Модульность

$mol включает "среду разработки" - МАМ. Она реализует модульную систему, сборку приложений в бандлы, работу с NPM, удаленными гит репозиториями. Вопросы с минимизацией размера приложения, организацией моно/поли репозиториев, микрофронтендов(создание приложений большими командами) уже решены из коробки. Модульная система заточена на легкое переиспользование кода и работу с большими объемами кода/приложений. Большинство потребностей, модули мола закрывают. Но в случае чего можно обратится к NPM.

Изоморфность

$mol изоморфен, т.е. один и тот же код из коробки работает и в браузере и на сервере(nodejs). Легко пилить тесты к компонентам, сделать серверный рендермнг. И соответственно тесты тоже в коробке.

Примеры

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

Статус: Активно используется

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

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

Статус: Активно используется

Это веб поисковик без рекламы, с блек листами, фильтрами и прочими плюшками.

Статус: Активно используется

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

План: прикрутить $hyoo_sync для безопасной синхронизации между личными девайсами.

Статус: Активно используется

Это приложение для проведения презентаций.

Статус: Есть прототип, встроен в ряд других приложений

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

План: прикрутить к нему аудиочаты со стенографией/озвучкой, где можно будет одновременно общаться в аудио и текстовом виде.

Статус: Есть прототип

Это бесконечный коллаборативный вайтборд.

План: прикрутить его к $hyoo_talks, чтобы можно было что-то обсуждать и тут же быстро что-то рисовать для пояснения.

Статус: Есть прототип

Это no-code платформа для создания экосистем приложений использующих единую информационную базу.

Статус: Есть прототип

Это онлайн элентронная таблица.

$hyoo_crowd

Статус: Есть прототип

Это уникальный алгоритм бесконфликтной синхронизации в реальном времени.

$hyoo_sync

Статус: Есть прототип

Это абстрактный сервис синхронизации состояний клиентов в реальном времени. Позволяет реализовывать коллаборативные приложения без написания собственного API сервера.

Ближайший аналог: FireBase.

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

Истории успеха

Успехов у нас не очень много, но всё же есть чему порадоваться.

2 место в Moscow City Hack

За пару суток с нуля разработали рабочий прототип встраиваемого мессенджера $hyoo_talks для Сбербанка.

3 место в Dev Hack

Продемонстрировали работу нашей микрофронтендовой системы на примере ПромСвязьБанка.

1 место в AC-VO-PPR-Hackathon

Реализовали управление уличной стеллой жестами по веб-камере и голосом, на примере сайта PiterJS.

Статьи

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

Видео обзор экосистемы

Clone this wiki locally