• Верный ли алгоритм для фильтра товаров?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Нормально. Источником состояния должно быть только одно место: в данном случае этим источником выступает url.
    Ответ написан
    Комментировать
  • Можно ли передавать CSS классы через props?

    delphinpro
    @delphinpro
    frontend developer
    я так понимаю, ваш класс меняет состояние компонента. Передавать состояние компонента через пропсы нормально.
    Однако я бы напрямую может и не стал так делать.
    Лучше передать само состояние, и внутри компонента назначить класс

    Плохо
    props: {
      'class': String
    }


    Лучше
    props: {
      disabled: Boolean
    }
    
    <div :class={disabled: disabled}>


    Это уменьшает связанность системы в целом. Компонент отвечает сам за себя, и родитель не знается о том, какие классы ему нужны.
    Ответ написан
    Комментировать
  • Можно ли передавать CSS классы через props?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Передавать класс в props можно, многие библиотек так делают, но осторожно и только когда без этого не обойтись.

    Особенно стоит обратить внимание на это при использовании scoped стилей: переданный внутрь класс не будет работать сам по себе, т.к. привязан к scope родительского компонента, придётся использовать псвевдоселектор :deep(), а это уже чревато коллизиями.

    Лучше же разбить всё на максимально небольшие компоненты с простыми api конфигурации и повсеместно использовать слоты, чтобы такие вещи не требовались слишком часто.
    Ответ написан
    2 комментария
  • Можно ли передавать CSS классы через props?

    yarkov
    @yarkov Куратор тега Vue.js
    Помог ответ? Отметь решением.
    3 комментария
  • Как переиспользовать компонент в модульной архитектуре?

    @Kostik_1993
    Web Developer
    Есть понятие модуль, а есть понятние фича, одна фича может быть использована в нескольких модулях. Но в случае с UI это даже не фича, они имеют какую-то бизнес функцию или что-то умеют, а шаред компоненты которые являются глупыми и независимомы от модулей и фич. FSD архитектура

    Так что в вашем случае нужно выносить такие компоненты в общий слой. Если это логическое что-то, не просто UI элемент то тогда делаете фичу. Если это вообще что-то глупое тогда это шаред
    Ответ написан
    Комментировать
  • Как правильно делать декомпозицию?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    Разные. Иначе вы рискуете создать монстра.
    Ответ написан
    2 комментария
  • Как добавить параметры в query?

    yarkov
    @yarkov Куратор тега Vue.js
    Помог ответ? Отметь решением.
    Ну сначала прочитать, потом объединить и только потом перезаписать
    Ответ написан
    1 комментарий
  • Как получить параметр из адреса Nuxt?

    Mi11er
    @Mi11er
    A human...
    подключите роутер и там будут параметры
    Ответ написан
    Комментировать
  • Как исключить запросы к серверу, пока перемещается range?

    IceRD
    @IceRD
    Используйте debounce (или throttle), оберните ваш запрос к серверу
    для примера можете взять готовый из библиотеки lodash или underscore
    Ответ написан
    Комментировать
  • Как проверить актуальность токена?

    dasha_programmist
    @dasha_programmist
    ex Software Engineer at Reddit TS/React/GraphQL/Go
    Перед запросом проверять token.exp с текущим временем, если устарел или устареет в течение запроса, то сначала запросить новый и сделать запрос.

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

    P.S. как это сделать в конкретном случае - зависит от инструментария,
    • например Effector State Manager позволяет делать цепочку эффектов, в базовом эффекте может быть проверка
    • например Axios имеет interceptors, можно реализовать перехватчик запроса, который будет перед вставкой токена его проверять
    Ответ написан
    Комментировать
  • Как сделать проверку внутри директивы?

    @drawnofmymind
    Для слабых
    v-if="this.$store.state.cart.cart.cart_items && this.$store.state.cart.cart.cart_items.length == 1"

    Для сильных: создай computed
    computed:  {
        getItemsLength(){
              return this.$store.state.cart.cart.cart_items?.length == 1
       }
    }


    В шаблоне

    v-if="getItemsLength"
    Ответ написан
    Комментировать
  • Как правильно сделать изменение количества товара в корзине?

    Fragster
    @Fragster
    помогло? отметь решением!
    Либо блокируешь кнопку пока запрос не отработает, либо делаешь какой-то дебаунс. Ну, или комбинацию )
    Например делаешь запрос на бэк, потом если он не выполнен - то считаешь клики, когда выполнится (но не ранее чем через 500мс, например) - делаешь еще один запрос на бэк с новым количеством и т.п. если кликать продолжают.
    Ответ написан
    Комментировать
  • Правильно ли хранить данные корзины в localstorage?

    yarkov
    @yarkov
    Помог ответ? Отметь решением.
    Хотите шарить корзину между устройствами - бэкенд.
    Не хотите - хватит и LocalStorage.
    Ответ написан
  • Как сверстать такой блок одним инпутом?

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

    https://jsfiddle.net/alexey_m_ukolov/ed8j6k0w/8/
    Ответ написан
    Комментировать
  • Как составляется NDA?

    alexgp13
    @alexgp13
    Руководитель ИТ-проектов
    Если придираться к букве закона, то просить скан Вашего паспорта (как и данные в целом) компания не имеет права. Если это сомнительная компания, то предоставлять скан паспорта есть определенный риск, хоть и не большой.
    Для крупных контор при собеседовании часто действительно нужен NDA и согласие на обработку персональных данных, для составления этих документов нужны Ваши паспортные данные. И при оформлении трудового договора Вам эти данные уже однозначно придется предоставить. Итого - если хотите работать, проще пойти навстречу работодателю и прислать скан или перепечатать нужную информацию. Как верно заметили выше, сам по себе скан работодателю не нужен, нужны именно данные, просто запросить скан проще, быстрее и понятнее для кандидата.

    p.s. поверьте, из личного опыта, некоторым кандидатам не под силу перепечатать непонятные буквы и цифры из паспорта, максимум могут фото в whatsapp сделать. А есть и такие, что даже такое не под силу. При этом процессы в компаниях стараются выстраивать максимально унифицированно.
    Ответ написан
    Комментировать
  • Как составляется NDA?

    Stalker_RED
    @Stalker_RED
    Можешь попробовать вместо скана просто переписать данные.
    В любом случае при трудостройстве вы будете предоставлять данные, по которым вас можно найти.
    Ответ написан
    Комментировать
  • В каких случаях использовать SPA с серверным рендерингом, а когда обычный сайт?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Мода есть, несомненно, но не только в ней дело!

    стоит вопрос делать его как SPA на Nuxt или как обычный сайт с перезагрузкой страниц


    Зависит от бекенда, если бекенд делает для вас api, тогда вам только SPA(не важно на чём), а если по старинке, значит по старинке, с перезагрузкой страниц. Тут как договоритесь.

    Плюсы подхода разделения бека и фронта аля SPA:
    1. Само по себе разделение ответственности. Фронт отвечает за отображение, бек за данные. В этом их суть

    2. Удобство работы. Вы работаете исключительной с той кодовой базой, которая вам понятна, приятна.

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

    4. Сами по себе преимущества spa. Обновление только нужных участков html, более быстрое решение рутинных задач, за счёт автоматизации многих процессов аля(vue cli, nuxt и т.п. - там всё уже из коробки собирается и настроено, только пиши код), разделение кода на чанки и т.п., думаю и так понятно

    5. Какая никакая, но архитектура приложения.
      Разворачивая проект через cli, вам уже даётся начальная структура папок, что уже говорит о том, что вам не нужно думать хотя бы об этом. Вы заранее знаете(если у вас есть опыт, если нету, ничто не поможет всё обговнять) что для решения тех или иных фич вам нужны те или те возможности фреймворка.
      Хоть реакт, хоть vue, уж тем более angular.



    Минусы подхода разделения бека и фронта аля SPA:
    1. Настройка всего деплоя приложения на сервере. Настроить gitlab.ci, настроить докер, настроить vps(если уже не готов), настройка nginx(не всегда, но бывает). Или вы думаете, за вас кто-то это будет делать? Бекенд себе всё настроит, а вы сами давайте. Вы же хотели разделение. Дай бог, что у вас в компании есть админ, который занимается подобными вопросами или же просто кореш, готовый вам помочь.


    2. SEO - большая проблема нашего времени. Если SEO, значит ssr, раз ssr, значит nuxt(ну или ручками настраивать, удачи). Тогда тут вступает в силу node.js. Его бы на сервере ещё запустить, на порту повесить и т.п. Просто SPA собрал и всё, а вот SEO, SEO накидывает на нас гемора и работы.


    3. Реализация "модулей" с 0, которые в старом подходе у бека уже можно скачать(из магазина готовых решений например, если это цмс, ну или готовые пакеты у фреймворков) и запустить(корзина товаров, фильтры, каталоги, сортировки и т.п. вещи). На фронте придётся всё делать заново, потому что готовых решений нет.

      Если взять какой нибудь вордпрес или битрикс, где уже имеется огромное кол-во готовых решений, которые подключил и они работают, минимально +- правя стили, то в spa подходе, дай бог что бы эти решения имели rest api для вашего чудо spa. А вы в свою очередь будете клипать вёрстку и логику с 0, мучаясь с кучей запросов, обновлением данных и т.п. вещами.

      А писать оформление заказа с выбором доставки, да и выбором адреса на карте, с последующим выбором кучи других моментов при оформлении заказа, это жесть. Но зато сами напишите, зато SPA, vue. А если ещё и авторизация какая-то будет, да и с заворотами или через какой-то внешний oauth сервер, так вообще красота)))


    4. Сложность понимания, на чьей стороне произошла ошибка. Фронт всегда будет выступать в первых рядах. Все камни полетят к вам. Не вывелось то-то, фронт иди сюда, не отправилась форма, фрооооонт, ауууууу!!!!!
      А как винить за это менеджеров? Они не должны сидеть кликая f12 и анализируя, где и какая ошибка получилась.
      Иногда бек виноват, иногда фронт.

      Да, можно подключить какой нибудь sentry. Но это, на мой взгляд, лишь доказывает, что с наш подход усложняет поддержку и разработку. Теперь у нас появился ещё 1 сайт, где мы смотрим логи фронта, что же у него случилося. У бека всё просто, зашёл на страницу, бац, ошибка sql на всю страницу, всё ясно становится)))

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


    5. Очень частая зависимость от данных бекенда. Изменилось 1 поле у бека, вам скорее всего нужно идти и править это. Добавилось новое поле, опять бежать и выводить 1 переменную. Мать твою, бек, сам не можешь что-ли переменную вывести??? Ах да, у нас же SPA.


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

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


    7. Ну и последнее, удорожание поддержки такого проекта. Т.к. вместо единой кодовой базы, теперь их 2. Внесение изменений требует большего кол-ва людей, нежели при обычном подходе. Бекендер и без фронта может написать jquery ajax запрос или вывести кнопку с модальным окном и формой, потому что очень часто тупо юзают бутстрап и собрать подобные блоки просто, или же просто вывести новое поле с текстом или ещё чем-либо.



    Я дал вам пищу для размышлений. Всё, что я написал имеет место быть. Задачи могут отличаться, проекты могут отличаться. Но суть моих слов от этого врятли поменяется. В большинстве случаев я за раздельный подход к написанию проектов.
    Ответ написан
    Комментировать
  • Какие плюсы с перехода на react c vue?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Перейдя на реакт вы будете страдать. Реакт - это тупо даунгрейд. Всё то же самое, но хуже и местами отсутствует. Есть ли в нём хоть какие-то преимущества перед vue? Не знаю таких.
    Что за проблемы у вас с библиотеками?
    Ответ написан
    2 комментария
  • Компонент Vue на обычном "монолитном" сайте. На сколько это верно?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Возможность встроиться куда угодно - это одна из фич Vue, так что с т.з. Vue это абсолютно нормально. Другое дело, что таков винегрет не слишком красив.
    Ответ написан
    Комментировать