«phpClub» — архив тем ("тредов"), посвящённых изучению PHP и веб-технологий.
Аноним 2022/05/24 18:30:48  №2362628 1
>>2362625
>простые морды, если я бэкендер
ПРостые морды для бэкендера это jquery + bootstrap, как показывает моя личная практика, лучше уж так чем говнокод на SPA.
Ответы: >>2362637
Аноним 2022/05/24 18:51:29  №2362637 2
>>2362628
Почему обязательно говнокод с vue? Пишу чисто, функционально на vue 3 как на реакте. С jquery у тебя в 99% случаев на проектах встретится говнокод. На жиквери можно компоненты писать в виде плагинов, но все любители жиквери предпочитают лапшу.

мимо
Ответы: >>2362642
Аноним 2022/05/24 18:57:46  №2362642 3
>>2362637
>функционально на vue 3
>как на реакте
Ты насрал в штаны, дружище. Во vue нет функциональных компонентов, а те, что там называются "функциональными" представляют из себя ничего более, чем статичную рендер-функцию без ветвлений внутри.
>С jquery у тебя в 99% случаев на проектах встретится говнокод.
У тебя и с реактом/вью 99% встретится говнокод, но в отличии от жиквары - он еще и будет с горой бойлерплейта, который без траты огромного количества времени не разберешь.
Ответы: >>2362645
Аноним 2022/05/24 19:04:58  №2362645 4
>>2362642
Извини, но я в твои в штаны не срал. Это ты сам наделал. cоmposition api позволяет функциональный код писать насколько это возможно в жс и даже использовать this не дает.
Ответы: >>2362646 >>2362648
Аноним 2022/05/24 19:10:02  №2362648 5
>>2362645
Потому что код полностью на функциях, без использования контекста. Тебе никто не мешает его использовать вместе с какой-нибудь ramdajs
Ответы: >>2362655 >>2363289
Аноним 2022/05/24 19:14:42  №2362655 6
>>2362648
В JS даже контекст можно реализовать на замыканиях. Отсутствие контекста и преобладание функций - не гарантирует использования парадигмы ФП. Тот же composition api функционален только в момент инициализации, потом у тебя все равно появляется тобой ненавистный контекст, в отличии от реакта - где весь жизненный цикл компонента выполнен в виде функций. Исключение в виде ErrorBoundary не рассматриваем
Ответы: >>2362659 >>2362667 >>2363329
Аноним 2022/05/24 19:19:10  №2362659 7
>>2362655
И шо? Я против реакта ничего не говорил. Я же не шизик чтобы искать чистые идеальные формы, в практических приземленных вещах как веб фреймверки
Аноним 2022/05/24 19:30:37  №2362667 8
>>2362655
Кстати раз ты такой спец покажи мне где этот контекст появляется?
setup() {
const = reactive({test: 'hello world'});

provide('HEHE', () => {
//
})

onMounted(() => {
//...
})

watchEffect(() => {
...
})
}
Ответы: >>2362670 >>2362683
Аноним 2022/05/24 19:40:22  №2362670 9
>>2362667

Кстати в вуе 3 не принято писать defineComponent({setup() {
а принято вообще чисто на функциях и макросах

<script lang="ts" setup>
defineProps({
propName: {
...
}
})

watchEffect(() => {
//})
</script>
Аноним 2022/05/24 20:06:31  №2362683 10
>>2362667
Прямиком после выполнения метода setup, когда неожиданно все, что возвращалось из него становится полями объекта внутри прокси, доступ к которым из метода render осуществляется через with(this){}
Ответы: >>2362687
Аноним 2022/05/24 20:15:10  №2362687 11
>>2362683
А разве если в реакте мы залезем в метод render или shouldComponentUpdate нам this не нужен будет?

render() {
...
this.props
...
}

не писал не когда?
Ответы: >>2362696
Аноним 2022/05/24 20:25:11  №2362696 12
>>2362687
В реакте в 2022 методы используются только в единичных случаях, все остальное уже на функциях.

function Example(props){
return <div>{props.value}</div>
}
Ответы: >>2362698
Аноним 2022/05/24 20:27:32  №2362698 13
>>2362696
Ну так вуе заставляет тебя в метод render лезть в 2022? Кстате необходимость shouldComponentUpdate тебя сейчас может заставить класс написать
Ответы: >>2362700 >>2362702
Аноним 2022/05/24 20:29:08  №2362700 14
>>2362698
>вуе заставляет тебя в метод render лезть в 2022?
Не заставляет, если ты используешь вуй для генерации статичного HTML. Во всех остальных случаях - заставляет, просто через костыль with, потому что иначе код на вуе побил бы все рекорды по размеру бойлерплейта.
Ответы: >>2362708
Аноним 2022/05/24 20:30:33  №2362702 15
>>2362698
> необходимость shouldComponentUpdate тебя сейчас может заставить класс написать
Не заставит. useMemo и useCallback
Аноним 2022/05/24 20:36:41  №2362708 16
>>2362700
расшифруй пожалуйста. я писал разные многоуровневые меню и, таблицы с динамически подгужаемым контентом в ячейках и всякую другую SPA муру и нигде не использовал render
Ответы: >>2362711
Аноним 2022/05/24 20:37:58  №2362711 17
>>2362708
>я писал разные многоуровневые меню и, таблицы с динамически подгужаемым контентом в ячейках и всякую другую SPA муру и нигде не использовал render
<template> в твоем вуй файле это ничто иное, как render()
Ответы: >>2362717
Аноним 2022/05/24 20:41:21  №2362717 18
>>2362711
>jsx это ничто иное как render
И шо? Где потерян гешефт?
Ответы: >>2362718
Аноним 2022/05/24 20:42:36  №2362718 19
>>2362717
Гешефт в том, как туда данные попадают. В рякте - через область видимости, а в вуе/классовом рякте - через контекст.
Ответы: >>2362723
Аноним 2022/05/24 20:53:38  №2362723 20
>>2362718
А доку читал?

The Debugbar will be enabled when APP_DEBUG is true.
Ответы: >>2362724 >>2362751
Аноним 2022/05/24 20:54:36  №2362724 21
>>2362722
>>2362723
насрали тут фронтендом извините промазнулся
Аноним 2022/05/24 22:02:59  №2362751 22
>>2362723
Уже фиксанул, появилось когда изменил сервер на апач
Аноним 2022/05/25 16:38:49  №2363329 23
>>2362655

> В JS даже контекст можно реализовать на замыканиях.

Можно, и я даже когда-то так делал, когда в JS не было классов, но это плохая идея в сравнении с классами, так как получается код в стиле "функция возвращает функцию", который тяжело читать. Классы читать гораздо проще.

> в отличии от реакта - где весь жизненный цикл компонента выполнен в виде функций.

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

Вот, например, кусочек из Реакта (отсюда https://reactjs.org/docs/hooks-intro.html ):

function Example() {
[count, setCount] = useState(0);
...

А вот, как это выглядит с использованием ООП:

class Example {
counter = new Counter();

render() {
...

Плюсы кода с ООП:

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

Такое ощущение, что люди готовы усложнять код, лишь бы не использовать ненавистные классы. То, что делается на хуках, ,можно сделать аналогично на ООП, только без костылей.
Ответы: >>2363340 >>2363431
Аноним 2022/05/25 16:43:19  №2363340 24
>>2363329

Ой, там в примере кода наверно надо писать

counter = new Counter(this);

а то counter не сможет пнуть компонент, чтобы он обновился.
Аноним 2022/05/25 19:20:46  №2363431 25
>>2363329
>Классы читать гораздо проще.
Когда у тебя в классе есть конструктор и пара методов - несомненно. А вот когда у тебя компонент переваливает за сотню строк все значительно хуже. В функциональщине в таких случаях ты точно знаешь что у тебя за состояние и что за метод его мутировал, а вот в классах...
Когда у тебя в состоянии больше одного поля код превращается в лапшу. Попробуй сделать компонент с 3 считчиками и 3 кнопками, которые увеличивают соответствующий ей счетчик и потом посмотри на количество бойлерплейта. Аналогичная проблема происходит, когда ты пытаешься расширить логику компонента, в функциональном компоненте тебе просто надо один раз написать useState, в классовом тебе надо менять единственное состояние компонента, возможно далеко не в одном месте. Аналогичная проблема в компонентах вуя, которые не используют композишн.
Ну и на последок: классы из-за своей специфики в JS работают медленно.
Ответы: >>2374480
Аноним 2022/06/07 22:05:15  №2374480 26
>>2363431

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

Я ничего не понял. Если ты напишешь компонент на 1000 строк, используя useState, он вряд ли будет легче для понимания, чем ООП-компонент на 1000 строк. Решение тут состоит в том, чтобы не писать слишком большие компоненты, а не заменить ООП на его имитацию через костыли.

> Попробуй сделать компонент с 3 считчиками и 3 кнопками, которые увеличивают соответствующий ей счетчик и потом посмотри на количество бойлерплейта

В ООП мы можем вынести логику подсчета в класс Counter и создать три экземпляра класса:

class DemoComponent {
#counter1 = new Counter(this);
#counter2 = new Counter(this);
#counter3 = new Counter(this);

render() {
...
}
}

Не вижу, чтобы этот код был бы сложнее чем код с использованием useEffect/useState. По моему, он даже проще.

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

> классы из-за своей специфики в JS работают медленно.

Это же просто неправда. Я буквально вчера читал вот это вот описание, как работа с объектами оптимизируется в вебките: https://webkit.org/blog/10308/speculation-in-javascriptcore/

Классы и объекты в JS очень хорошо оптимизируются, если ты не пытаешься на лету создавать или удалять свойства и методы, а определяешь их один раз заранее.

ООП наоборот логичнее, так как ты в нем создаешь все поля и методы один раз при создании объекта, а с хуками ты объявляешь поля заново при каждом вызове функции рендеринга. Это просто противоречит здравому смыслу.
Ответы: >>2374723
Аноним 2022/06/08 10:32:30  №2374723 27
>>2374480
>навигацию без перезагрузки без многомегабайтного SPA и API не реализовать?
SPA это и есть навигация без перезагркузки.