Смотрю весь день этот курс с первого урока, прямо чувствую, что вижу магию и понемногу постигаю её) забавное чувство) Первый раз вижу на ютубе такого профессионала своего дела)
Был бекендером 1 год, сейчас работаю фронтом больше года, и то, что пошло после 40й минуты - просто взрыв полезной инфы, было сложно понять некоторые вещи, но после понимания я осознал, как же это нереально полезно, ощущение будто очень сильно прокачался в "абстракции" для всего программирования. Огромное спасибо за такую полезную информацию и примеры! Пожалуйста, не прекращайте свою "просветительную" деятельность, такого сильного контента я еще не видел вообще
Илья, огромная вам благодарность за ваш труд! пересматриваю это видео уже 3й раз. отбросив в сторону вью, мне кажется, что параллельно это еще и одно из лучших видео по JS)
задание с вкладками очень прикольное. мощный курс, помимо правильного подхода к проектированию, уйма всего вкусного. От деббагинга, сокетов до броадкастчанела. Дальше еще селекшин с ренджом. агонь.
К счастью уже один раз встречался с обзервером и он тогда мне мозг взорвал, сейчас зашло проще. Спасибо за понятные объяснения про разницу между бизнес логики и реализации.
обзёрвер надо один раз написать ручками и всё разложится по полочкам. Он очень простой, там только схема взаимодействий с первого взгляда кверх ногами, а потом понимаешь, что это самый прямой и простой способ построить реактивность.
@@drak0an спасибо за ответ. Хм, оглядываясь назад понимаю, что писал то сообщение будучи сисадмином, а теперь уже 10 месяцев фронтендер. Извини, что оглядываюсь назад в этом ответе :)
Довольно запутано про обновление цены в приложении из вне получилось. Как мне показалось... Сижу на гитлабе в репо, разбираюсь, что происходит. Понял, что коллбэк вызывается при получении новых данных, но не совсем понятно, как он в само приложение значение возвращает... (Есть предположение, что в колбэке есть this на наше приложение и через него все происходит. )
После перехода на сокеты теперь при добавлении новой валюты или восстановлении ее из localstorage, мы не получим ее значение до ее обновления. А если валюта обновляется редко, то стоимость валюты будет пустая долгое время.
Расскажите, что именно непонятно? Код subscribe unsubscribe? Обычно у людей кто никогда не писал самостоятельно pub/sub взрывает мозг это место - что и зачем
@@JavaScriptNinja Передача в качестве аргумента функции и тд, которая будет сидеть в какой то там Мапе, это сложно с первого взгляда осмыслить. Понятно что попрактиковавшись можно понять, но вот так с лёту, не особо. Возможно, стоило для начала менее красивый, но более наглядный пример привести. Типа просто объект, элементами которого являются функции, делающие то-то. И еще хотелось бы более развернутого объяснения, зачем вообще все это делалось. Примерно понятно, но как-то смутно.
В npm есть библиотека events, она маленькая и как раз построена на принципе массива функций подписываемых на событие. Ещё есть хороший пример конвертация callback to promise, для async - await. Основная проблема асинхронность, это значит что результат возможно придет, когда время наступит, а что делать если результат нужен здесь и сейчас, или как связать все результаты в правильной последовательности и т.д.
Ты обещал 20 челленджов по vue3 и ещё сайт блог в каком-то другом видео. Когда вчера спросил будет ли продолжение курса, ты сказал, что не знаешь как закончить. Я не имею право требовать от тебя то, что я хочу бесплатно), но твои обещания выглядят пустыми словами, не так ли?
Мне кажется вы слова "не знаю как закончить" интерпретировали так как вам захотелось :) Не знаю как закончить было о том, что материал постоянно появляется новый и новый (особенно в контексте последних работ по апгрейду на вью3), конца даже не видно :)
Ну это, конечно, совершенно другой уровень. Не тудушки и пересказывание доки на 20 минут, а концептуальный подход и решение реальных задач. И не для новичков. Илья говорил, что хватает 2 глав learn.js - совсем нет) Либо это новички-вундеркинды) п.с. подскажите, кто еще из русского ютуба так вещает?
Кому что непонятно - задавайте Мой опыт говорит о том, что с 5 разделами 1 главы и несколькими из 2 главы (учебник реорганизовали) должно быть сложно, но выполнимо
@@JavaScriptNinja по-моему мнению нужно просто принять, что это не для новичков. Из тех, что встречала, Димыч из IT-KAMASUTRA - лучший для новичков( в плане обучения, а не конкретно вью)
@@Trulalandia Все очень понятно, никакой магии в этом нет. Для сравнения можете найти видео у Timur Shemsedinov и примеры просто на js, у вас точно дым из ушей пойдет. (Это не в упрек Тимуру, он тоже классный). Видимая для вас сложность, должна быть маячком, что вы имеете существенный пробелы в знание js. Про себя скажу, что не имею IT образование, а только learn.js + MDN и небольшой опыт для решения личных задач.
@@JavaScriptNinja похоже, главная проблема новичков здесь: не понятно, за что хвататься? Всего много: мапы, сокеты, колбеки, обсервер, транспортный слой... Вот мне отлично заходит: я к началу курса ничего не знал о Vue, но всё, о чём идёт тут речь, мне понятно. Многие же наоборот: базу JS не понимают, но немного щупали Vue. Стоит ли превращать курс по Vue в курс по базе JS? Тут не знаю, но если нет, то часть людей отвалится на этом этапе.
В книге по JS Стояна Стефанова написано что все объявления переменных поднимаются в начало функции, то есть на 30:48 эта проверка на пустой массив тикеров не имеет смысла, так как все объявления const, let и var поднимутся выше нее и запрос к апи все равно произойдет. Не уверен на счет этого поведения в современных версиях JS, по этому прошу поправить меня если я не прав, книжка старая (2011 год)
Илья такой вопрос: решил поиграться с Broadcast channel и столкнулся с вот какой проблемой (в контексте решения задачи из видео): как распределить роли? У нас же ведущий должен понять, что он ведущий, а остальные понять, что ведущий уже есть. Остальным понять не сложно, но вот как первому понять? А как бы ты решал эту задачу? Проблема в том, что у broadcast channel API нет прямого способа узнать, сколько слушателей подключено к каналу (во всяком случае я не нашел). Я решил сделать так: есть специальное сообщение ('ping') на которое любой слушатель отвечает 'pong'. Таким образом при запуске нового слушателя он может понять, что уже есть ведущий и назначить себе соответствующую логику. А как ведущему понять, ведь ему никакое сообщение не придёт, за что зацепиться? Получается как-то так: каждый сразу считает себя ведущим, потом пингует, если получает ответ, то назначает логику ведомого. При этом он как бы сразу подписывается на вебсокет, а потом, если что, отписывается. Я не вижу годного события, чтобы за него зацепиться и не назначать сразу каждого ведущим. Тайм-аут лепить, тоже костыль тот ещё (ну типа пукнул, если 500 мс никто не ответил, то ты - царь). Да и если перезагрузить вкладку ведущего, то он пинганёт, поймёт, что есть другие, и станет ведомым. И никто не будет ходить на сервер. Нужно лепить какую-то сквозную иерархию через сообщения. А если вкладку с ведущим закрыли? Короче, тут чего-то не хватает, ИМХО, решение становится всё хуже и хуже. Все проблемы тут разом решает web worker, и, похоже, это как раз задача для него. Но хотелось бы мнение по моим соображениям, я красавчик и всё правильно понимаю, или я тупой и не вижу очевидного?
@@JavaScriptNinja хоть тресни, не понимаю. С broadcast channel столько проблем: как определить, что других вкладок нет? Как поймать ситуацию перезагрузки или закрытия ведущей вкладки? Городить систему обмена сообщениями через некий интервал, и при потере мастера какая-то другая становится мастером, и т.д. и т.п. А для первой, к какому событию прицепиться, ну пингует она, ответа нет. Тайм-аут? А сколько? К ошибке сокета тоже так себе идея, а вдруг первое сообщение даст рандомную ошибку, вкладка решит, ну ок, мастер есть, ждём сообщений... С другой стороны shared worker один для всех, запускается с первой вкладкой и живёт до последней, оповещает всех когда хочет. Выглядит намного проще.
@@JavaScriptNinja да это, как раз, понятно. Просто я бы хотел понять, как подобные проблемы можно решить, или я не догоняю. Вообще, пример решения предполагается в курсе, или нет?
Курс перестал быть томным :) От простых концепций и рисования до прямого потока сознания Ильи Думаю вот как раз тут отвалятся те, кто мог подумать что это будет легкая прогулка по курсу Vue3
_Минутка ЧСВ: Будущее задание из начала видео сделал._ Будет интересно, конечно. на сколько я сделал всё не так. Особенно интересно как Вы циклические изменения реактивных переменных обойдёте - это самое противное, на чём застрял. (ну и на range/selection, но с ними просто дела не имел) Ссылку наверно не буду оставлять, чтоб другим праздник не портить.
А в вашем решении каждый экземпляр блочка (например, Имя) является отдельным Vue-компонентом, как Илья говорит на 11:45? Я пока плохо представляю, что будет если например пользователь удалит блочок из контент-эдитабла через Delete или Backspace - как обеспечить, что соответствующий инстанс Vue-компонента с его подписками на данные будет вычищен из памяти?
@@statcc0 _А в вашем решении каждый экземпляр блочка (например, Имя) является отдельным Vue-компонентом_ Честно говоря я забыл об этом. Я сначала думал как это сделать, но решил для начала обойтись span'ом. А по окончании забыл. Чуть освобожусь, вернусь к проекту, посмотрю получится ли приделать вьюшный компонент. "Попробую" - потому что как-то не доводилось создавать на лету, динамически вьюшные компоненты.
@@alekseym1058 , Вот я тоже думал про span'ы, куда родительский компонент в watch просовывал бы изменения в данных. С одной стороны, Илья говорит про отдельные компоненты. С другой - что вроде как мы уже имеем почти все необходимые знания, и дополнительно нужно только знание о ref'ах. Но динамическое создание компонентов не кажется какой-то мелочью, о которой мы "почти знаем".
@@statcc0 Посмотрел. Ещё не доделал, но могу сказать, что В первой версии: ``` Текст ... ... ``` Я так и оставил вставку через , т.к. не представляю как туда можно добавить компонент. А во второй версии (её ещё не доделал, но тем не менее) сделал через render (v3.vuejs.org/api/global-api.html#h) и, как в видео на 11:45, с доп.компонентом. В ответ на вопрос: _как обеспечить, что соответствующий инстанс Vue-компонента с его подписками на данные будет вычищен из памяти_ При изменении контента, после того как контент изменится и текстовое поле перерендерится, все старые дочерние элементы успешно отмонтируются, а новые создадутся.
Возникла пара мыслей по ходу просмотра, но поскольку весь код проекта детально не изучал, то вполне возможно, что они ошибочные. Кажется, что интерфейс subscribe/unsubscribe для каждой валюты в отдельности избыточен. Для компонента Vue в текущем его виде это вроде тоже не требуется, а лишь только добавляет ему ненужную ответственность. Почему бы не реализовать API в более декларативном стиле: просто передавать в subscribe массив идентификаторов всех валют, которые нас интересуют? А уже в конкретной реализации API можно легко организовать наиболее подходящий вариант работы с серверным API. Если для серверного API необходим subscribe/unsubscribe на каждую отдельную валюту, то его легко реализовать просто определив разницу между новым и старым списком нужных валют (a la react way). В самом компоненте получится реализовать работу с API в более естественном для Vue реактивном стиле. Достаточно будет добавить watch на список валют и при изменении просто передавать его целиком в API Как вариант: data: { currencies: [], currencyToPrice: map // реактивно зависит от currencies }, watch:{ currencies(v){ api.subscribe(v, callback) } }, methods:{ setCurrencyToPrice(map){} // вызывается из API } Таким образом в компоненте можно будет просто работать с данными, а вся API кухня будет работать реактивно. Выделение отдельно currencies позволит в дальнейшем вынести логику добавления\удаления валют в отдельный родительский компонент и получать их список через props
> Почему бы не реализовать API в более декларативном стиле: просто передавать в subscribe массив идентификаторов всех валют, которые нас интересуют? Этот подход вроде не сработает, если api будет использоваться несколькими компонентами? Т.е. вариант с subscribe / unsubscribe более гибкий, пусть даже эта гибкость в текущем состоянии проекта оказывается ненужной.
Я имел в виду, что subscribe/unsubscribe для каждой валюты в отдельности избыточен. Если API реализован как синглтон, то unsubscribe(callback) при unmount вызвать придется конечно. Мне кажется, что есть смысл перенести сложность из компонента в модуль API, сделав его более декларативным. По аналогии с virtual dom - мы не хотим прописывать "добавь", "удали" - мы просто задаем через стейт что нам нужно в итоге и vue это реализует. комментарий скорректировал
лучше бы вместо бизнес логики, я бы понял программную часть. Ушёл в депрессию, вернусь завтра. Теперь самое фиговое, что есть в моем проекте - это код с первым домашним заданием.
А как лучше всего разделять файлик api.js? К примеру, если у нас порядка 30 запросов на бэк и вот как их лучше разнести? или всё держать в одном большом файле api.js?
Это видео явно потребует повторного просмотра. Тут не просто надо писать код, а приходится программировать. Спасибо огромное!
Смотрю весь день этот курс с первого урока, прямо чувствую, что вижу магию и понемногу постигаю её) забавное чувство) Первый раз вижу на ютубе такого профессионала своего дела)
Был бекендером 1 год, сейчас работаю фронтом больше года, и то, что пошло после 40й минуты - просто взрыв полезной инфы, было сложно понять некоторые вещи, но после понимания я осознал, как же это нереально полезно, ощущение будто очень сильно прокачался в "абстракции" для всего программирования.
Огромное спасибо за такую полезную информацию и примеры! Пожалуйста, не прекращайте свою "просветительную" деятельность, такого сильного контента я еще не видел вообще
Вот это мощно.
Огромное спасибо, очень крутая подача таких сложный вещей!
У меня нет подходящих матов чтобы выразить благодарность автору за столь классный контент.
Здорово! Огромное спасибо. Актерская игра на высшем уровне :)
Илья, добавь пожалуйста это видео в плейлист. Спасибо за видосы, курс - что надо!
Илья, огромная вам благодарность за ваш труд! пересматриваю это видео уже 3й раз. отбросив в сторону вью, мне кажется, что параллельно это еще и одно из лучших видео по JS)
4:08 начало
потрясающий курс, а это видео особенно!
задание с вкладками очень прикольное. мощный курс, помимо правильного подхода к проектированию, уйма всего вкусного. От деббагинга, сокетов до броадкастчанела. Дальше еще селекшин с ренджом. агонь.
а я думала, что знаю js, ну базу так точно 😅 спасибо Илья! пошла смотреть 3 раз
Редко пишу комментарии, но тут я просто не смог пройти мимо, курс - огонь!
К счастью уже один раз встречался с обзервером и он тогда мне мозг взорвал, сейчас зашло проще. Спасибо за понятные объяснения про разницу между бизнес логики и реализации.
обзёрвер надо один раз написать ручками и всё разложится по полочкам. Он очень простой, там только схема взаимодействий с первого взгляда кверх ногами, а потом понимаешь, что это самый прямой и простой способ построить реактивность.
@@drak0an спасибо за ответ. Хм, оглядываясь назад понимаю, что писал то сообщение будучи сисадмином, а теперь уже 10 месяцев фронтендер. Извини, что оглядываюсь назад в этом ответе :)
Отличное видео. Очень доходчиво.
Крутейший стрим! Куча полезного!
Шикарный урок. Observable, так скоро уже и до rxJs дойдем, а потом и до Angular )) Ждем челендж )))
Илья спасибо!
спасибо большое=)) очень и очень полезный опыт работы с дев тулзами, видос просто огонь=)) спасибо огромное
Очень сильно, огромное спасибо, думаю нужно будет ещё раз пересмотреть некоторые моменты из этого стрима
Подскажите а что за хот кеи для отрытия менюшки с изменениями на 34:19?
Довольно запутано про обновление цены в приложении из вне получилось.
Как мне показалось... Сижу на гитлабе в репо, разбираюсь, что происходит.
Понял, что коллбэк вызывается при получении новых данных, но не совсем понятно, как он в само приложение значение возвращает...
(Есть предположение, что в колбэке есть this на наше приложение и через него все происходит.
)
Ничего непонятно, но очень интересно.
Челендж уже начался, прошёл или как?
Обещали подсказки в описании. Или еще не успели добавить?
Ещё не успели, и подсказки это к челленджу
Какая разница между git switch и checkout, впервые увидел у тебя на стриме switch
Команда checkout была заменена на более логичные switch и restore потому что делала слишком много
Просто огонь)
После перехода на сокеты теперь при добавлении новой валюты или восстановлении ее из localstorage, мы не получим ее значение до ее обновления. А если валюта обновляется редко, то стоимость валюты будет пустая долгое время.
Есть такое, я вылечил это GET-запросом при добавлении токена.
спасибо
Спасибо за ваш труд
Огонь!
Была бы возможность, поставил бы 100 лайков, а так один огромный! Спасибо
Крутой!
так... сюда однозначно придется возвращаться
Спасибо за урок!
Огооооонь!
Переделка api.js для подключения сокетов - с первого взгляда взрывает мозг. Как то резко сложность подскочила.
Расскажите, что именно непонятно? Код subscribe unsubscribe? Обычно у людей кто никогда не писал самостоятельно pub/sub взрывает мозг это место - что и зачем
@@JavaScriptNinja Передача в качестве аргумента функции и тд, которая будет сидеть в какой то там Мапе, это сложно с первого взгляда осмыслить. Понятно что попрактиковавшись можно понять, но вот так с лёту, не особо. Возможно, стоило для начала менее красивый, но более наглядный пример привести. Типа просто объект, элементами которого являются функции, делающие то-то. И еще хотелось бы более развернутого объяснения, зачем вообще все это делалось. Примерно понятно, но как-то смутно.
@@Shadzen ок, сделаем спин-офф этого урока :)
@@JavaScriptNinja Спасибо.
В npm есть библиотека events, она маленькая и как раз построена на принципе массива функций подписываемых на событие. Ещё есть хороший пример конвертация callback to promise, для async - await. Основная проблема асинхронность, это значит что результат возможно придет, когда время наступит, а что делать если результат нужен здесь и сейчас, или как связать все результаты в правильной последовательности и т.д.
Ты обещал 20 челленджов по vue3 и ещё сайт блог в каком-то другом видео. Когда вчера спросил будет ли продолжение курса, ты сказал, что не знаешь как закончить. Я не имею право требовать от тебя то, что я хочу бесплатно), но твои обещания выглядят пустыми словами, не так ли?
Мне кажется вы слова "не знаю как закончить" интерпретировали так как вам захотелось :)
Не знаю как закончить было о том, что материал постоянно появляется новый и новый (особенно в контексте последних работ по апгрейду на вью3), конца даже не видно :)
Ну это, конечно, совершенно другой уровень. Не тудушки и пересказывание доки на 20 минут, а концептуальный подход и решение реальных задач. И не для новичков. Илья говорил, что хватает 2 глав learn.js - совсем нет) Либо это новички-вундеркинды)
п.с. подскажите, кто еще из русского ютуба так вещает?
Кому что непонятно - задавайте
Мой опыт говорит о том, что с 5 разделами 1 главы и несколькими из 2 главы (учебник реорганизовали) должно быть сложно, но выполнимо
@@JavaScriptNinja по-моему мнению нужно просто принять, что это не для новичков. Из тех, что встречала, Димыч из IT-KAMASUTRA - лучший для новичков( в плане обучения, а не конкретно вью)
@@Trulalandia ну мы преследуем с ним разные цели :) отсюда и разные стили
@@Trulalandia Все очень понятно, никакой магии в этом нет. Для сравнения можете найти видео у Timur Shemsedinov и примеры просто на js, у вас точно дым из ушей пойдет. (Это не в упрек Тимуру, он тоже классный). Видимая для вас сложность, должна быть маячком, что вы имеете существенный пробелы в знание js.
Про себя скажу, что не имею IT образование, а только learn.js + MDN и небольшой опыт для решения личных задач.
@@JavaScriptNinja похоже, главная проблема новичков здесь: не понятно, за что хвататься? Всего много: мапы, сокеты, колбеки, обсервер, транспортный слой...
Вот мне отлично заходит: я к началу курса ничего не знал о Vue, но всё, о чём идёт тут речь, мне понятно. Многие же наоборот: базу JS не понимают, но немного щупали Vue. Стоит ли превращать курс по Vue в курс по базе JS? Тут не знаю, но если нет, то часть людей отвалится на этом этапе.
В книге по JS Стояна Стефанова написано что все объявления переменных поднимаются в начало функции, то есть на 30:48 эта проверка на пустой массив тикеров не имеет смысла, так как все объявления const, let и var поднимутся выше нее и запрос к апи все равно произойдет. Не уверен на счет этого поведения в современных версиях JS, по этому прошу поправить меня если я не прав, книжка старая (2011 год)
Конст и лет не хойстятся
@@JavaScriptNinja ясно, тогда извянки если кого то ввел в заблуждение!
Вот поэтому и не стоит заострять свое внимание на книгах, они устаревают до того как вышли, а тем более 2011 год
неужели так сложно самому написать пару строк и посмотреть всплывают они или не всплывают
@@404Negative перед тобой отдельно извиниться?
Илья такой вопрос: решил поиграться с Broadcast channel и столкнулся с вот какой проблемой (в контексте решения задачи из видео): как распределить роли? У нас же ведущий должен понять, что он ведущий, а остальные понять, что ведущий уже есть. Остальным понять не сложно, но вот как первому понять? А как бы ты решал эту задачу?
Проблема в том, что у broadcast channel API нет прямого способа узнать, сколько слушателей подключено к каналу (во всяком случае я не нашел). Я решил сделать так: есть специальное сообщение ('ping') на которое любой слушатель отвечает 'pong'. Таким образом при запуске нового слушателя он может понять, что уже есть ведущий и назначить себе соответствующую логику. А как ведущему понять, ведь ему никакое сообщение не придёт, за что зацепиться? Получается как-то так: каждый сразу считает себя ведущим, потом пингует, если получает ответ, то назначает логику ведомого. При этом он как бы сразу подписывается на вебсокет, а потом, если что, отписывается. Я не вижу годного события, чтобы за него зацепиться и не назначать сразу каждого ведущим. Тайм-аут лепить, тоже костыль тот ещё (ну типа пукнул, если 500 мс никто не ответил, то ты - царь). Да и если перезагрузить вкладку ведущего, то он пинганёт, поймёт, что есть другие, и станет ведомым. И никто не будет ходить на сервер. Нужно лепить какую-то сквозную иерархию через сообщения. А если вкладку с ведущим закрыли? Короче, тут чего-то не хватает, ИМХО, решение становится всё хуже и хуже.
Все проблемы тут разом решает web worker, и, похоже, это как раз задача для него. Но хотелось бы мнение по моим соображениям, я красавчик и всё правильно понимаю, или я тупой и не вижу очевидного?
Не web worker, а shared web worker, конечно же.
@@ИмяФамилия-э4ф7в можно конечно и shared webworker, но это уже хардкор :)
@@JavaScriptNinja хоть тресни, не понимаю. С broadcast channel столько проблем: как определить, что других вкладок нет? Как поймать ситуацию перезагрузки или закрытия ведущей вкладки? Городить систему обмена сообщениями через некий интервал, и при потере мастера какая-то другая становится мастером, и т.д. и т.п. А для первой, к какому событию прицепиться, ну пингует она, ответа нет. Тайм-аут? А сколько? К ошибке сокета тоже так себе идея, а вдруг первое сообщение даст рандомную ошибку, вкладка решит, ну ок, мастер есть, ждём сообщений...
С другой стороны shared worker один для всех, запускается с первой вкладкой и живёт до последней, оповещает всех когда хочет. Выглядит намного проще.
@@ИмяФамилия-э4ф7в Да, я ж не против :) Это ж вообще детали реализации, которые ко вью не относятся. Пусть будет shared worker
@@JavaScriptNinja да это, как раз, понятно. Просто я бы хотел понять, как подобные проблемы можно решить, или я не догоняю. Вообще, пример решения предполагается в курсе, или нет?
В мене тариф на криптокомпаре дозволяє відкрити тільки 1 сокет, а в мене відкривається 2 та видає message TYPE 429(вирішено)
Таки да
Курс перестал быть томным :)
От простых концепций и рисования до прямого потока сознания Ильи
Думаю вот как раз тут отвалятся те, кто мог подумать что это будет легкая прогулка по курсу Vue3
Тут больше отвалились кто не знает JS и с 40 минуты все начало превращаться в магию....
Отличное видео. Так держать :)
_Минутка ЧСВ: Будущее задание из начала видео сделал._
Будет интересно, конечно. на сколько я сделал всё не так.
Особенно интересно как Вы циклические изменения реактивных переменных обойдёте - это самое противное, на чём застрял. (ну и на range/selection, но с ними просто дела не имел)
Ссылку наверно не буду оставлять, чтоб другим праздник не портить.
А в вашем решении каждый экземпляр блочка (например, Имя) является отдельным Vue-компонентом, как Илья говорит на 11:45? Я пока плохо представляю, что будет если например пользователь удалит блочок из контент-эдитабла через Delete или Backspace - как обеспечить, что соответствующий инстанс Vue-компонента с его подписками на данные будет вычищен из памяти?
@@statcc0 _А в вашем решении каждый экземпляр блочка (например, Имя) является отдельным Vue-компонентом_
Честно говоря я забыл об этом. Я сначала думал как это сделать, но решил для начала обойтись span'ом. А по окончании забыл.
Чуть освобожусь, вернусь к проекту, посмотрю получится ли приделать вьюшный компонент. "Попробую" - потому что как-то не доводилось создавать на лету, динамически вьюшные компоненты.
@@alekseym1058 , Вот я тоже думал про span'ы, куда родительский компонент в watch просовывал бы изменения в данных. С одной стороны, Илья говорит про отдельные компоненты. С другой - что вроде как мы уже имеем почти все необходимые знания, и дополнительно нужно только знание о ref'ах. Но динамическое создание компонентов не кажется какой-то мелочью, о которой мы "почти знаем".
@@statcc0 Посмотрел. Ещё не доделал, но могу сказать, что
В первой версии:
```
Текст ...
...
```
Я так и оставил вставку через , т.к. не представляю как туда можно добавить компонент.
А во второй версии (её ещё не доделал, но тем не менее) сделал через render (v3.vuejs.org/api/global-api.html#h) и, как в видео на 11:45, с доп.компонентом.
В ответ на вопрос: _как обеспечить, что соответствующий инстанс Vue-компонента с его подписками на данные будет вычищен из памяти_
При изменении контента, после того как контент изменится и текстовое поле перерендерится, все старые дочерние элементы успешно отмонтируются, а новые создадутся.
@@statcc0 И, в итоге, через Render Functions оказалось сделать не на много сложнее, чем через Template.
Возникла пара мыслей по ходу просмотра, но поскольку весь код проекта детально не изучал, то вполне возможно, что они ошибочные.
Кажется, что интерфейс subscribe/unsubscribe для каждой валюты в отдельности избыточен.
Для компонента Vue в текущем его виде это вроде тоже не требуется, а лишь только добавляет ему ненужную ответственность.
Почему бы не реализовать API в более декларативном стиле: просто передавать в subscribe массив идентификаторов всех валют, которые нас интересуют? А уже в конкретной реализации API можно легко организовать наиболее подходящий вариант работы с серверным API. Если для серверного API необходим subscribe/unsubscribe на каждую отдельную валюту, то его легко реализовать просто определив разницу между новым и старым списком нужных валют (a la react way).
В самом компоненте получится реализовать работу с API в более естественном для Vue реактивном стиле. Достаточно будет добавить watch на список валют и при изменении просто передавать его целиком в API
Как вариант:
data: {
currencies: [],
currencyToPrice: map // реактивно зависит от currencies
},
watch:{
currencies(v){
api.subscribe(v, callback)
}
},
methods:{
setCurrencyToPrice(map){} // вызывается из API
}
Таким образом в компоненте можно будет просто работать с данными, а вся API кухня будет работать реактивно.
Выделение отдельно currencies позволит в дальнейшем вынести логику добавления\удаления валют в отдельный родительский компонент и получать их список через props
> Почему бы не реализовать API в более декларативном стиле: просто передавать в subscribe массив идентификаторов всех валют, которые нас интересуют?
Этот подход вроде не сработает, если api будет использоваться несколькими компонентами? Т.е. вариант с subscribe / unsubscribe более гибкий, пусть даже эта гибкость в текущем состоянии проекта оказывается ненужной.
Я имел в виду, что subscribe/unsubscribe для каждой валюты в отдельности избыточен.
Если API реализован как синглтон, то unsubscribe(callback) при unmount вызвать придется конечно.
Мне кажется, что есть смысл перенести сложность из компонента в модуль API, сделав его более декларативным. По аналогии с virtual dom - мы не хотим прописывать "добавь", "удали" - мы просто задаем через стейт что нам нужно в итоге и vue это реализует.
комментарий скорректировал
Добавьте пожалуйста этот урок в общий плейлист:) За который отдельное спасибо)
Поправьте меня, если я не прав.
Этот урок вообще не про Vue.
Сложный вопрос :)
изначально пугало когда в data использовался метод push) Мутацияяяя
биток по 50, как грустно стало
лучше бы вместо бизнес логики, я бы понял программную часть. Ушёл в депрессию, вернусь завтра. Теперь самое фиговое, что есть в моем проекте - это код с первым домашним заданием.
А как лучше всего разделять файлик api.js? К примеру, если у нас порядка 30 запросов на бэк и вот как их лучше разнести? или всё держать в одном большом файле api.js?
Можно по слоям логики, а можно не разделять. Мы к примеру не разделяем
gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/api.js
12:02
Когда курс бесплатный, будь готов на 70% заниматься самостоятельно
Когда платный- тоже
Со второго раза понятней стало )
А что будет с третьего?
Сеньером станешь
@@redhook777 оч смешно 🤣🤣🤣🤣
А почему бы не сделать formatPrice как фильтр?
Во Vue3 нет фильтров
Эх биткоин по 50(
Подробное объяснение массива tickersHandlers не помешало. Я подумал что понял, затем понял, а затем понял еще лучше
Спасибо