«Ranbu»: как я стал «Комитетом»

История о том, как увлечение разработкой сервиса заставило человека изучить множество вещей, начиная от написания кода — до написания статей, что в итоге вылилось в «основу» целого проекта.

Привет, прошло много времени с последней статьи здесь. Когда-то полный надежд и энтузиазма, разработал сервис и презентовал его в этой статье. Так как по образованию географ, то к программированию пришёл совсем недавно. Оглядываясь назад, немного с улыбкой вспоминаю себя тогда, ведь тогда только начинал серьезно программировать.

За последние два года мне пришлось хорошенько поработать на собой, чтобы достичь определенных навыков. Могу теперь сносно писать бэк, фронт, мобильные приложения, но самое главное, что научился этому c оглядкой на проекты «Комитета».

Как вы знаете, в основе сайтов «VC», «TJ», «DTF» лежит платформа для контентных проектов «Osnova». Благодаря этому продуманному инструменту, издательский дом «Комитет» смог стать одной из основных контентных площадок в «рунете», потеснив на этой ниве медиа старичка "TechMedia« с их ветераном «Хаброй» (в последующем его переписали).

Как написано в презентации инструмента, в основе платформы лежат определенные модули «Paragraph» (редактор), «Leonardo» (хранилище файлов), «Booster» (рекламная система) и «Gutenberg» (озвучка статей). По моему скромному мнению, именно редактор стал той вещью, что предопределила развитие проектов «Комитета».

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

Мне хотелось воссоздать нечто подобное в собственном проекте, чтобы у меня был похожий инструмент, который бы использовал в написании собственных материалов. Так и начался мой долгострой под названием «Ranbu».

Когда вы начинаете новый пет проект, то нужно использовать вещи, которые вы хотите изучить (в моём случае хотелось так). Планировал изучить «блоковые редакторы» и на основе них написать проект. Кроме блоковых редакторов, мне нужно было изучить и смежные вещи, на которые завязан был планируемый функционал, а именно, сокеты, обработка картинок, обработка видео и хранение файлов.

Блоковый редактор работает немного по иному принципу, чем старые. Каждый блок это отдельный элемент, который хранит медиа файлы — картинки и видео файлы. Поэтому, вам с самого начала нужно задуматься о том, как и где хранить все эти файлы. Тут вам приходит на помощь «S3».

Отступление: помню, когда нашёл этот протокол и начал изучать, то моей радости не было предела. Это было первой основополагающей вещью, которую изучал с большим рвением вне рабочего времени. Хранение файлов в облаке это основа, которая сейчас стала мейнстримом, но когда я изучал, то многие даже не понимали зачем это нужно, если можно хранить файлы в папке с проектом.

Когда начинал проект, то первоначально использовал в качестве редактора «Sir Trevor Js». Он был первым и единственным открытым блочным редактором в то время. Его использование принесло мне много негатива, так как из него невозможно было выстроить редактор, который использовался в «Комитете». В итоге, мне пришлось от него отказаться и использовать свой.

Написание своего не заняло много времени. Моя поделка была лучше «Sir Trevor JS» и больше походила на то, что использовалось здесь. Но всё это продолжалось до тех пор, пока не наткнулся на открытый аналог «Paragraph» — «editor.js». Мне не сложно было понимать разницу в труде и я не зациклен на своём дерьме. Поэтому, практически сразу отказался от своего редактора и внедрил новый. Очень хорошо, что ребята делятся своими наработками. Большое уважение к «Codex Team».

Написал модули, которые бы повторяли работу прошлого по работе с видео и внедряемыми провайдерами видео (youtube, coub). Это не заняло так много времени, так как модули под редактор пишутся легко. Документация и готовые плагины тоже упрощают разработку (можно подсмотреть).

В первую очередь, будучи человеком, который всегда что-то пишет, будь это код или текст, планировал в первую очередь редактор под себя. За годы существования проекта мне пришлось написать под сотню лонгридов на интересные мне темы. Особенностью стало то, что в некоторых статьях активно использовал панорамы улиц, поэтому, один из написанных мной модулей позволял вставлять «google панорамы» улиц в статью.

Используя редактор сам, лучше начинаешь понимать специфику создания контента и улучшения инструмента под него.

Статьи пишу тогда, когда есть время. Мне это приносит большое удовольствие. Особенно радует то, что редкие люди по поисковику находят их и иногда благодарят. Посты пишу на очень редкие темы, да и в них никто особо не разбирается в СНГ.

«Leonardo» (хранилище и отдача статики) это еще одна вещь, аналоги которой активно используются во многих сервисах. Понимание того, что не нужно резать картинки и хранить их при загрузке это интересный опыт, который пришёл ко мне во время написания сервиса.

Вам легче один раз загрузить одну картинку, а потом шинковать её по запросам на лету, используя готовые медиа провайдеры или микросервисы. Поэтому, картинки которые отдаются в «Ranbu» тоже шинкуются на лету и отдаются в зависимости от «viewporta» устройства.

«Socket IO» (сокеты для реал-тайма), которое используется в «Комитете», является дополнением для «PHP» в деле введения обновляемого контента. Изучение работы сокетов и внедрение реал-тайма в сервис тоже было хорошим опытом.

«Gutenberg» (озвучка статей) стало последним, что внедрил у себя. Реализация подобного заняла день. По сути это всего лишь обращения к API SpeechKit, сборка «ogg» файлов в «mp3» и последующее хранение. Больше всего удивило, что появляются новые модели, которые намного старых.

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

Кроме того, использование «S3» на старте упростило мне контейнеризацию приложения, соответственно, последующее построение архитектуры и CI/CD. Современные приложения работают в кластере и является "stateless", поэтому, свои приложения держу в них.

Кроме того, что нужно было изучить фронт, плюс смежные с ним всякие «Intersection Observer API», «SSR» и прочие радости, то еще время потратил на изучение практик «DevOps» и продумывания развёртки. Пришлось писать собственные образы под «Alpine» и вникать в каждую деталь ремесла.

Но теперь, всё что мне остается, это всего лишь закинуть код в гит и пойти дальше писать статьи на «Ranbu». «Rolling updates» задеплоят новый функционал без простоя.

Забыл упомянуть про мобильные приложения. Так как на изучение нативки у меня уйдёт куча времени, то изучил по работе «Flutter» и написал пару приложении. Переписав под «Strict API» бэкенд, планирую написать и мобильные приложения. Таким нехитрым образом решаю проблему мобилок.

Вот таким нехитрым способом пришёл к собственному «Комитету». Без мам, пап, кредитов, команды и инвестиции стал разработчиком схожего сервиса. Причём сам в нём и редактор, сам в нём и программист. Редактор захотел новый функционал, программист сразу же внедрил без лишних цепочек.

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

Ко мне обращались насчёт покупки кода, но там на самом деле не на что смотреть. Я дурачок и мне приходится заниматься всем. Могу с уверенностью сказать, что платформа «Комитета» несомненно крутая. Старайтесь заполучить её. Мои запросы скромные, поэтому, всё это делается для себя и только для улучшения собственных навыков.

Постараюсь побыть здесь немного, а потом вернусь в свою берлогу. Если вы хорошо пишите, то заходите ко мне на огонёк. За хорошие лонгриды буду выписать чек. В общем, до скорого!