Телеграм-каналы

«Вредные советы» для оопэшника 😈

#advices #patterns #backend #frontend #mobile

«Я знаю KISS, DRY, YAGNI, GRASP, SOLID, DDD и много других страшных слов».

Начинающему разработчику всегда сложно разобраться в паттернах проектирования, методологиях и концептуальных подходах, таких как, например, MVC, MVVM или MVP. Многочисленные материалы и статьи по темам не дают конкретики по реализации, а главное, по применению обозначенных подходов на практике. Тогда разработчик начинает знакомиться с этими методологиями в рамках выбранного фреймворка, работая с уже реализованными абстракциями, порой не понимая даже, зачем они нужны. По принципу «так сказал фреймворк».

Как только сложность разрабатываемого функционала начинает возрастать и выходит за рамки туториалов по используемому каркасу, получается примерно такой код, состоящий всего из трех файлов, но имеющий объем более 500 строк, и ощущение того, что что-то пошло не так 🤔

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

Дадим пару советов, как стать на путь истинного оопэшника:
— Экспериментируй. Важно постоянно экспериментировать и внедрять в свой процесс разработки что-то новое. Например, можно начать с простых декомпозиций монолитного кода на отдельные, независимые друг от друга компоненты, обладающие единой ответственностью. Важно соблюдать принцип необходимости — избегать переабстрагирования и неверного применения тех или иных паттернов дизайна архитектуры.
— Много читай. Начни с классической и концептуальной литературы, не останавливайся на понимании каких-то гайдов к инструментам и библиотекам. Например, начни с настольной книги для каждого ООП-программиста — Gang Of Four.
— Общайся со «старшими». Когда ты работаешь в большой экосистеме разработчиков, тебя развивает окружение и более опытные наставники. Если ты лишен такой экосистемы, например ты фрилансер, то старайся посещать релевантные конференции, митапы и тусовки своего города и доступных тебе локаций. Старайся общаться, принимать и передавать опыт. Поставь себе цель дорасти до спикера, а не оставаться в слушателях.

⚡️Вкладывай валидно

#frontend #html

Рекомендуем удобный инструмент для проверки совместимости контентных моделей элементов. Теперь не нужно искать и пытаться интерпретировать информацию официальных источников. Все понятно и user-friendly 😎

Готовим новые доки 📄

#frontend #storybook #react

С момента выхода этой заметки появилась новая мажорная версия Storybook 6.0, а вместе с ней плагин Notes, который мы использовали для документирования UI, безвозвратно устарел и перестал поддерживаться 👨‍🦳

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

К сожалению, интерфейсы расширений не совместимы друг с другом, а значит, просто заменить Notes на Docs не выйдет. Поскольку оба аддона могут сосуществовать в рамках одного Storybook, можно постепенно переходить на новое расширение, переписывая документацию частями.

После подключения расширения в каждой истории появляется вкладка Docs, которая содержит соответствующую документацию по тому или иному компоненту.
По умолчанию за генерацию документации отвечает DocsPage-компонент. Документация строится на основе метаинформации о текущем сторис.

Для расширения возможностей документирования можно заменить стандартный DocsPage-компонент на кастомный, построенный на нужных нам Dock Blocks. Список доступных блоков c описанием можно найти здесь.

Аддон Docs позволяет использовать MDX-разметку, благодаря чему можно описывать компоненты с помощью Markdown-разметки и JSX для рендеринга их состояния по аналогии с нативным API Storybook. MDX-формат также можно использовать для написания только Markdown-разметки без вывода компонента. В таком случае Canvas будет повторять вкладку Docs. Подробнее о данной фиче можно узнать здесь.

Плагин Docs устроен сложнее своих аналогов, в том числе и устаревшего Notes. При этом обладает большими функциональными возможностями для описания UI-компонентов.

Сделано в Лаборатории Студии Чулакова

Студия Олега Чулакова

Дизайн-студия № 1 в России по версии Tagline, лучший usability / UX в стране по версии Золотого Сайта.

Специализируется на создании сложных систем и сервисов для крупных компаний. Среди клиентов Студии Tele2, ИКЕА, МегаФон, БКС Банк, Yota и другие крупнейшие российские бренды.