LINUX.ORG.RU

SPA, на примере Youtube

 , , , ,


0

2

Сначала вводная, затем вопросы.

Уже давно, как Youtube выкатили SPA.

Работает оно из рук вон плохо, т.к. не отменяются задачи, запущенные на предыдущей «странице».

Как воспроизвести?

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

Немного нытья.

Ну какого хрена? Смысл этой SPA пропадает напрочь. Разработчики ютуба сидят на последнем железе и быстром инете и даже не подозревают о таких косяках?

Теперь по пунктам:

1) Подтвердите баг в SPA ютуба.

2) Товарищи жеесники, любители ноды, реактов, вуей и прочего кофескрипта:

2.1) Задумываетесь ли боретесь ли вы с такими проблемами в своих SPA?

2.2) Существуют ли необходимые инструменты в ваших модных и современных библиотеках?

1 - кликай медленнее по кнопкам, чай не на порнолабе, спешить некуда.
2.1 - боремся.
2.2 - не монкеи чистят состояние прошлой вьюшки при переходе в следующую. Даже первый Angular умел в колбеки для этого.

Deleted ()
Ответ на: комментарий от anonymous

Костыль костыля костылем погоняет.

Но, за наводку спасибо.

deep-purple ★★★★★ ()
Ответ на: комментарий от deep-purple

А у тебя это прям регулярно наигрывается? Минут за пять сосредоточенного тыканья я осилил наиграть это один раз.

Deleted ()
Ответ на: комментарий от anonymous

А, я понял что это. Это просто добавляет в урл параметр: «disable_polymer=1». Не спасает.

deep-purple ★★★★★ ()

Подтвердите баг в SPA ютуба.

Не подтверждаю. Google Chrome 70.0.3538.110
В пресетах сети выставил 3G.
Баг не воспроизводится. Все функционирует нормально.

https://support.google.com/youtube/answer/4347644

mimico ()

А ты не кликай резко! Ишь раскликался. Конечно лепить эту дрисню на ненадежных медленных каналах, великолепная идея. Обожаю веб!

bread ()

Давно наблюдаю такое.

Может людям с разогнанными i7 и 32гб оперативной памяти это и не заметно. На моей буханке или ждать пока страница прогрузится, паузить видео и потом переходить по ссылкам или потом рефрешить.

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

stormblastt ★★★ ()

Баг подтверждаю. К сожалению, так и не понял, как убрать автовоспроизведение, не имея учётки

XMs ★★★★★ ()

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

th3m3 ★★★★★ ()
Ответ на: комментарий от stormblastt

пытается запустить видос пока еще весь интерфейс прогружается

Бывает так и не может прогрузить весь интрефейс вообще. А бывает не может прогрузить комменты.

deep-purple ★★★★★ ()
Ответ на: комментарий от anonymous

Если не секрет, какими? Раньше работал YouTube HD, но из-за него у меня был другой баг: видео тут же ставилось на паузу, даже после запуска воспроизведения руками на 100500-й раз

XMs ★★★★★ ()
Ответ на: комментарий от Deleted

не монкеи чистят состояние прошлой вьюшки при переходе в следующую

Хочу добавить. Вот зачем все эти лишние абсракции? Браузер и так чистит состояние «вьюхи» (предыдущей страницы) при переходе на следующую. Т.е. придумали прослойку поверх того, что не может работать иначе как запрос-ответ (вебсокеты по сути туда же) и поимели двойные проблемы — лишний жор ресурсов клиента и ручная уборка за собой. Найс!

deep-purple ★★★★★ ()

Мне не нравится интерфейс YouTube, поэтому пользуюсь youtube-dl + mpv или SMTube. SPA — сложный stateful интерфейс. В WWW намного проще работать с stateless, они надежнее и предсказуемее.

Pravorskyi ★★ ()

1) Не смог воспроизвести.

2.1) Таких проблем нет и не будет если все написано нормально, в гугле и ютубе говнокодеры, там уже давно не делают хороший код.

2.2) Все существует, но тут проблема в том что ютуб сделан на полимере, это боль и извращение, там все слишком сыро и куча багованых полифилов.

Noob_Linux ★★★ ()
Последнее исправление: Noob_Linux (всего исправлений: 1)
Ответ на: комментарий от Deleted

Яцна. Всё вручную. Врядли этим пользуются хотябы 50% пейсателей. Ну, после прочтения этого треда, задумавшихся об этом, надеюсь, станет больше.

deep-purple ★★★★★ ()

Работает оно из рук вон плохо

Это касается не только ютуба, но и многих других сервисов в виде SPA, над которыми, по-идее, трудятся толпы народа, и должны вылизывать всё до блеска... но нет. Буквально на днях, пока меня не забанили, на хабре видел такую хрень, где у меня вместо различных значений вылезали текстовые строки типа обращения к значениям каких-то структур (дословно не помню, но типа должно быть: «карма: 5», а мне пишет: «карма: user_data.karma.count»). Потом вроде это пропало, но стало в других местах вылазить, вроде после нажания кнопок. А ещё есть беды даже не на SPA, просто на аджаксе. На ЛОРе, например, я так понял, ещё не починили: тыкаешь кнопку «отправить», вылезает плашка «Был добавлен новый комментарий. Обновить.», а потом оказывается, что этот новый комментарий - это то, что ты только что отправил нажатием на кнопку «отправить».

MetalBeaver ()
Ответ на: комментарий от Noob_Linux

Все существует, но тут проблема в том что ютуб сделан на полимере, это боль и извращение, там все слишком сыро и куча багованых полифилов.

Всё дело в

1 Динамической типизации, при которой никогда не узнаешь, что откуда когда и зачем может прийти, особенно, если работаешь не один, а в большой комманде. И даже обмазавшись кучей тестов, можно лишь снизить вероятность факапов в продакшене, но никак не избавиться от них.

2. Асинхронности. Где калбэк на калбэке калбэком погоняет, плюс это всё завёрнуто в сопрограммы, прописы и всякие await/async, которые в свою очередь завёрнуты в кишки фреймворка. И даже вооружившись дебаггером, можно себе мозг сломать, желая просто отследить путешествие одного запроса через все эти дебри.

MetalBeaver ()
Ответ на: комментарий от deep-purple

Ваш вопрос слишком абстрактен. Уточните.

Судя по описанию бага, на ютубе остаеться нода с видосиком в доме. Скорее всего проблема в коде роутера/виртуал дома, а не в коде пользователя (пейсателя).

Noob_Linux ★★★ ()
Ответ на: комментарий от MetalBeaver

1. Внезапно вроде ютуб пишут на тайпскрипте (могу ошибаться).

2. А без неё никак, собственно эти фреймворки и призваны с ней бороться за счет реактивности.

Noob_Linux ★★★ ()
Ответ на: комментарий от Noob_Linux

Скорее всего проблема в коде роутера/виртуал дома

Да, вот ещё одна проблема. Я что-то про неё забыл. Забагованность самих фреймворков. Когда ты пишешь, вроде как всё верно, но все равно всё работает через одно место. Мне как-то доводилось писать на AngularJS (это который первой версии) и я учитался до усрачки документации, чтобы сделать всё нормально, но память в определённый момент утекала по мегабайту раз в несколько секунд. Тогда я полёз в сеть и обнаружил воркэраунды, которые почему-то ничерта не работали. А исправлять баги никто не хотел, потому что вышел уже Angular 2,3,5,6,etc. - и ваш первый уже никому не интересен. Решилось это всё отловом каких-то событий (уже не помню нюансов) в недрах реакта и ручной чисткой DOMа. Но убит был не один человекодень, подключались люди из параллельных проектов, все плевались и уходили. А перейти на ангуляр 2 низя - несовместимость, мать их.

MetalBeaver ()
Ответ на: комментарий от deep-purple

Хрен редьки был не слаще, слышал я.

Я тоже слышал. Но на проектах не пробовал, только палочкой тыкал. Там же ещё вышла куча версий. И я вообще не в теме, зачем, и как это между собой совместимо. Говорят, сейчас Vue - больше труъ. Но, как по мне, та же ересь только в профиль.

MetalBeaver ()
Ответ на: комментарий от MetalBeaver

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

deep-purple ★★★★★ ()
Ответ на: комментарий от deep-purple

Всё новое - хорошо забытое старое, только сложно, медленно и с ошибками, а иногда и за деньги.

MetalBeaver ()
Ответ на: комментарий от deep-purple

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

Никто не мешает и сейчас так писать, особенно если нужно что-то попроще макаронного монстра фейсбука. Может они еще к этому вернуться на каком-то витке «развития».

bread ()
Ответ на: комментарий от MetalBeaver

Ангуляр это жуткое говнецо, особенно первой версии, ничуть не удивлен. Там сама идея двухстороннего биндига был ошибочна. Говорят в последних версиях перешли на реакто подобную модель с виртуальным домом и стало лучше но я не проверял.

Noob_Linux ★★★ ()
Ответ на: комментарий от deep-purple

Ну так из любой конфетки можно сделать говно, дело то не хитрое :) А тут и конфетки не было, делали из с того что было)

Noob_Linux ★★★ ()
Ответ на: комментарий от anonymous

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

Запилил свой трёхстрочник юзерскрипт:

// SPDX-License-Identifier: MIT-0

// ==UserScript==
// @name     Disable polymer on Youtube
// @grant    none
// @include  https://www.youtube.com/*
// @run-at   document-start
// ==/UserScript==

(function() {
    if (!document.location.search.match('disable_polymer')) {
        document.location.search
            += ( (!document.location.search ? '?' : '&') + 'disable_polymer=1');
    }
})();
За работоспособность вне ФФ не ручаюсь. У меня работает и ладно. Кому надо — пофиксите.

deep-purple ★★★★★ ()
Ответ на: комментарий от MetalBeaver

Кстати, в первом ангуляре угорал с canvas: я грузил картинку, чтобы подготовить канвас Большого размера, нужно знать ширину родителя канваса. Ширину которого я узнаю после рендеринга. Который происходит сильно после сборки директивы angular, так что нормально сделать канвас в директиве не возможно! Только с костылями сбоку.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.