правильно ли я работаю с Vue

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

Спойлер: "создание экземпляра Vue"

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

Спойлер: "компонент Main"

добавил метод наблюдатель, который обновляет данные в таблице, не создавая таблицу заново

это достаточно грамотное решение? не уверен, правильно ли это или я сделал костыль.

Не думаю, что для вью будет большой проблемой пересоздать какую-то табличку. У тебя постоянно в приложении будут дестроиться и создаваться десятки компонентов. Был хоть один повод думать об этой оптимизации? Если нет, то зачем ты ее вообще делал и заморачивался по этому поводу? Аж тему создал =) http://optimization.guide/

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

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

Я так понимаю, Tabulator - это какая-то чисто жсная штука? Ты можешь написать обертку или использовать существующую (VueTabulator). Возможно, вуе сам поймет, что эту таблицу пересоздавать не нужно во время роутинга, но даже если не поймет, будь уверен, что твое приложение от этого не пострадает

Ramdesu сказал(а):↑

Не думаю, что для вью будет большой проблемой пересоздать какую-то табличку. У тебя постоянно в приложении будут дестроиться и создаваться десятки компонентов. Был хоть один повод думать об этой оптимизации? Если нет, то зачем ты ее вообще делал и заморачивался по этому поводу? Аж тему создал =) http://optimization.guide/

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

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

Я так понимаю, Tabulator - это какая-то чисто жсная штука? Ты можешь написать обертку или использовать существующую (VueTabulator). Возможно, вуе сам поймет, что эту таблицу пересоздавать не нужно во время роутинга, но даже если не поймет, будь уверен, что твое приложение от этого не пострадает

Нажмите, чтобы раскрыть...

я осознал, что для моего приложения возможности Vue излишни, поэтому отказался от него в пользу отдельного стороннего роутера page.js и jquery для того, чтобы отобразить пару динамических кнопок. на vue буду писать свой следующий проект, там реально понадобится его реактивность и компоненты

Lancer.Rev.X сказал(а):↑

я осознал, что для моего приложения возможности Vue излишни, поэтому отказался от него в пользу отдельного стороннего роутера page.js и jquery для того, чтобы отобразить пару динамических кнопок. на vue буду писать свой следующий проект, там реально понадобится его реактивность и компоненты

Нажмите, чтобы раскрыть...

откажись и от jquery тоже, js может делать все то же самое. И кода должно получиться примерно столько же

Ramdesu сказал(а):↑

Я бы рекомендовал тебе сделать две отдельных страницы - ProductsPage и MaterialsPage

Нажмите, чтобы раскрыть...

там просто вообще на всех страничках будет эта таблица: заказы, пользователи, лог. но уже в принципе не важно.

Ramdesu сказал(а):↑

откажись и от jquery тоже, js может делать все то же самое. И кода должно получиться примерно столько же

Нажмите, чтобы раскрыть...

я еще не уверен насчет jquery, без него получаются оооочень длинные строки, например, цикл

for (let element of document.getElementsByClass('admin')) {

с jquery должно быть поаккуратнее

Lancer.Rev.X сказал(а):↑

там просто вообще на всех страничках будет эта таблица: заказы, пользователи, лог. но уже в принципе не важно.

 

я еще не уверен насчет jquery, без него получаются оооочень длинные строки, например, цикл

for (let element of document.getElementsByClass('admin')) {

с jquery должно быть поаккуратнее

Нажмите, чтобы раскрыть...

document.getElementsByClass('admin').forEach(element => какое-то действие над элементом)

Не сильно короче, но я хз, что ты там собрался сокращать. В чем задача?

Ramdesu сказал(а):↑

VueTabulator

Нажмите, чтобы раскрыть...

он не заработал

 

Ramdesu сказал(а):↑

document.getElementsByClass('admin').forEach(element => какое-то действие над элементом)

Не сильно короче, но я хз, что ты там собрался сокращать. В чем задача?

Нажмите, чтобы раскрыть...

я говорю, что строка кода получается длинная и некрасивая, а с jquery меньше символов надо будет писать

 

задача: каждый элемент с классом админ показать, если пользователь - админ, потом вставить имя пользователя в формочку и делать запросы к API, это по сути все задачи

Lancer.Rev.X сказал(а):↑

я говорю, что строка кода получается длинная и некрасивая, а с jquery меньше символов надо будет писать

Нажмите, чтобы раскрыть...

Что тебе нужно сделать?

Ramdesu сказал(а):↑

Что тебе нужно сделать?

Нажмите, чтобы раскрыть...

я написал в посте

Lancer.Rev.X сказал(а):↑

я написал в посте

Нажмите, чтобы раскрыть...

я имею ввиду, что хочу увидеть конкретную строку кода, которая на жсе сильно хуже, чем на жыквери

Ramdesu сказал(а):↑

я имею ввиду, что хочу увидеть конкретную строку кода, которая на жсе сильно хуже, чем на жыквери

Нажмите, чтобы раскрыть...

Спойлер: "код на js"

Ramdesu сказал(а):↑

я имею ввиду, что хочу увидеть конкретную строку кода, которая на жсе сильно хуже, чем на жыквери

Нажмите, чтобы раскрыть...

на jquery я еще не разобрался, как писать, но там, по крайней мере, получить элементы можно так:

$('.admin')

уже короче

Lancer.Rev.X сказал(а):↑

Спойлер: "код на js"

 

на jquery я еще не разобрался, как писать, но там, по крайней мере, получить элементы можно так:

$('.admin')

уже короче

Нажмите, чтобы раскрыть...

зачем тебе getElementsByClassName, когда есть querySelectorAll, который будет работать с такими же css селекторами как и jq?

itachinight сказал(а):↑

зачем тебе getElementsByClassName, когда есть querySelectorAll, который будет работать с такими же css селекторами как и jq?

Нажмите, чтобы раскрыть...

в таком случае действительно jquery не нужна

Lancer.Rev.X сказал(а):↑

в таком случае действительно jquery не нужна

Нажмите, чтобы раскрыть...

http://youmightnotneedjquery.com/ можешь почитать, как просто заменить функционал который есть в jq ванильным js.

И если не нужна поддержка IE то вместо xhr спокойно юзай fetch для любых запросов

я уверен что fetchData отрабатывает дольше чем рендерится твоя таблица) 

P.s посмотрел на vue, какой-то ужас

P.s2 меня как-то сильно смущает fetchData метод, который загружает данные по роуту через switch case, мне кажется лучше бы было сделать отдельный компонент для каждого роута, саму таблицу вынести в отдельный компонент

После этого в каждом компоненте подгружать данные, которые нужны на этой странице, а не смотреть через switch case по роуту.

 

Например для /products сделать компонент ProductPage, с нем делать fetch данных, которые нужны для этой странице, после этого передавать эти данные через пропсы в компонент таблицы

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

p.s3 опыта на vue у меня нет, но думаю не сильно отличается от реакта, поэтому все выше сказанное 100% применимо к vue))

> Оптимизирую один-единственный компонент

> Отказываюсь от Vue, потому что "его возможности излишни"

> Подключаю огромный jQuery, потому что "что строка кода получается длинная и некрасивая"

 

Рекомендую тебе сравнить минифицированый размер Vue и jQuery, прежде чем создавать такие темы)

Я уже не говорю про то, что ты тянешь джейквери в 2020 году, когда весь мир уже от него отказался, и он остался только как 5+ летний легаси)))

 

HiThere сказал(а):↑

P.s посмотрел на vue, какой-то ужас

Нажмите, чтобы раскрыть...

Это не вуе ужас, это тс не умеет на нем писать) Маленькие проекты на вуе быстро и легко пишутся на +-адекватном уровне (быстрее, чем на реакте, и значительно быстрее, чем в ангуляре по очевидным причинам), хотя в больших проектах работа с вуе непременно сопряжена с болью в жопе

 

HiThere сказал(а):↑

p.s3 опыта на vue у меня нет, но думаю не сильно отличается от реакта, поэтому все выше сказанное 100% применимо к vue))

Нажмите, чтобы раскрыть...

все так, в этом плане подход в них абсолютно один и тот же

Шрек 2 сказал(а):↑

Маленькие проекты на вуе быстро и легко пишутся на +-адекватном уровне (быстрее, чем на реакте, и значительно быстрее, чем в ангуляре по очевидным причинам), хотя в больших проектах работа с вуе непременно сопряжена с болью в жопе 

Нажмите, чтобы раскрыть...

это почему?

S30N1K сказал(а):↑

это почему?

Нажмите, чтобы раскрыть...

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

 

И еще одна из главных проблем вуе - маленькое комьюнити, вследствие чего на вью тебе доступен достаточно ограниченный круг тулзовин. Чаще всего, когда ты пишешь на вью, у тебя нет никакого выбора между тем, что ты будешь использовать. К примеру, в реакте есть паршивый Redux и хороший MobX, во вью же у тебя есть только Vuex, полностью слизанный с редакса.

 

И это только самые очевидные моменты, к которым приходишь спустя пару средне-крупных проектов на Vue, так что кроме как 4-fun или маленьких проектов его использовать мало смысла: себе дороже.

Шрек 2 сказал(а):↑

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

 

И еще одна из главных проблем вуе - маленькое комьюнити, вследствие чего на вью тебе доступен достаточно ограниченный круг тулзовин. Чаще всего, когда ты пишешь на вью, у тебя нет никакого выбора между тем, что ты будешь использовать. К примеру, в реакте есть паршивый Redux и хороший MobX, во вью же у тебя есть только Vuex, полностью слизанный с редакса.

 

И это только самые очевидные моменты, к которым приходишь спустя пару средне-крупных проектов на Vue, так что кроме как 4-fun или маленьких проектов его использовать мало смысла: себе дороже.

Нажмите, чтобы раскрыть...

что по поводу третьей вьюхи думаешь?

Шрек 2 сказал(а):↑

Vuex, полностью слизанный с редакса.

Нажмите, чтобы раскрыть...

ничего не путаешь?)

я к тому что vuex ближе к mobx чем к редуху

 

Шрек 2 сказал(а):↑

оттуда же в вуе проблемы с тайпскриптом

Нажмите, чтобы раскрыть...

насколько я помню проблемы у vue с ts из-за .vue файлов

 

S30N1K сказал(а):↑

что по поводу третьей вьюхи думаешь?

Нажмите, чтобы раскрыть...

если тебя вдруг интересует мнение кого-то другого - вьюха стала лучше: меньше бандл, улучшеная поддержка ts(потому что все переписали на ts), стала шустрее, но все также можно выстрелить в голову ногу, лучшая(в теории) масштабируемость т.к. ввели composition api 

лучше почитай release note на гите, вроде называется "vue 3 one piece"

а, вот, нашел: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Lancer.Rev.X сказал(а):↑

Спойлер: "код на js"

 

на jquery я еще не разобрался, как писать, но там, по крайней мере, получить элементы можно так:

$('.admin')

уже короче

Нажмите, чтобы раскрыть...

Что-то такое:

const $ = x=> document.querySelectorAll(x)

$('.admin).forEach(elem => elem.removeAttribute('hidden'))

 

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

Siller__ сказал(а):↑

ничего не путаешь?)

я к тому что vuex ближе к mobx чем к редуху

Нажмите, чтобы раскрыть...

Не путаю, у вуекса то же огромное количество бойлерплейта, что и у редакса, то же нарушение SOLID, что и у редакса (в использовании с тем же redux-thunk). На бумаге - да, похож на mobx, но по факту того, как это реализовано - тот же редакс. Честно скажу, С MobX я пока не особо знаком, там, вроде как, эти проблемы решены

 

Siller__ сказал(а):↑

насколько я помню проблемы у vue с ts из-за .vue файлов

Нажмите, чтобы раскрыть...

Vue компоненты в принципе неудобны для работы с тайпскриптом, да и не были для этого задуманы. Темплейты вообще не типизированы, пропсы валидируются только на элементарных типах данных, ко всему пишешь аннотации сам, из-за этого ты можешь кидать в те же Vuex экшены вообще все что угодно, разве это типизация? Даже тот же DefinitelyTyped, в котором для реакта типизировано почти все что угодно, в случае со вью редко помогает. Тут может только Vue3 спасти, в котором они обещали ввести нормальную поддержку тайпскрипта, и который они обещали выпустить в 1 квартале 2020, но уже кончается 3  

 

S30N1K сказал(а):↑

что по поводу третьей вьюхи думаешь?

Нажмите, чтобы раскрыть...

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

 

UPD.: оказывается, она вышла неделю назад, как-нибудь гляну релиз ноут на досуге

UPD2.:

Цитата:

If you decide to use Vue for a new production project, the official recommendation is to still start with Vue 2 right now.

Нажмите, чтобы раскрыть...

Понял, можно еще полгода подождать)