Рубрика: Vue.js

Практически каждый разработчик проходит похожий путь.

В начале карьеры решение задачи выглядит как один большой файл. Главное — чтобы программа работала.

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

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

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

Например, backend-разработчик может прекрасно проектировать архитектуру: выделять сервисы, репозитории, доменные модели, соблюдать принципы SOLID и разделения ответственности. Но, создавая Vue-приложение, он нередко начинает писать компоненты на тысячу строк, в которых вперемешку находятся шаблон, бизнес-логика, работа с API, обработчики событий и вспомогательные функции.

Конечно, frontend имеет свою специфику. Поэтому он требует отдельного разговора.

После выхода Composition API разработчики приложений на Vue получили в свое распоряжение композиционные функции — еще один способ разбить код на небольшие модули для лучшей читаемости и повторного использования. Так были решены проблемы, которые мы имели применяя иные подходы: Mixins (Миксины) и Renderless Components (Компоненты без представления). Но спустя время многие из нас не достаточно хорошо владеют тонкостями написания Composables. В этой статье вы найдете описание важных моментов, благодаря которым ваш код будет становится более поддерживаемым.

Если в вашем Vue-приложении переводы работают через Vue-i18n, то вы наверняка сталкивались с ситуациями, в которых приходилось добавлять перевод для фразы, которая содержит html-разметку. Чаще всего это ссылки (тег a) или строковые контейнеры (тег span), позволяющие сделать акцент на определенных частях фразы. В таких ситуациях самым легким решением кажется добавить фразу вместе с разметкой в JSON с переводами, а вывод сделать через v-html. Давайте посмотрим какие с этим есть проблемы и как можно сделать лучше.

Чтобы не повторять себя (принцип DRY) при разработке Vue-приложения приходится прибегать к различным приемам. Одним из таких приемов (не так сильно известным, кстати) является применение атрибута is для динамического переключения между компонентами. В этой статье будет показано и рассказано как можно использовать такой подход.