Здравствуйте. Сделал обновление по роутингу на чистом JavaScript без фреймворков и

библиотек. Единственная стороння библиотека, это анимации animate.style которая работает через обычные классы. Сделал контент немного аккуратнее чтобы не противно было смотреть.
Использовал History.pushState()
Столкнулся с двумя проблемами, при обновлении страницы (любой кроме главной) улетает стейт, думал использовать Service Worker, но может можно как-то ещё запоминать выбор пользователя ?
Если генерирую DOM дерево в js файле History.pushState() не видит ссылки классы и id (по этой причине вынес меню в файл html)
Вот мой обновлённый код
https://github.com/definaru/js-router

Какие ошибки я допустил? Что сделал не правильно? Советы, замечания.
Есть критика - не страшно. Вникаю в SPA на чистом JS.

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

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

На счёт папок не согласен, так как должен быть порядок, если это станет проектом и будет разрастаться, то потом можно запутаться в папках и файлах. По поводу SPA на чистом js тупанул, не догадался, писал этот код самостоятельно без помощи и подсказок, можно и готовое взять или подсмотреть у других, но тут был смысл в том чтобы попробовать это реализовать самому, понять, как это работает. В прошлый раз я пользовался #хэш ссылками и гонял их по switch case. Данный подход сохранял позицию выбранной страницы, если делать History.pushState() то # можно не использовать, но тогда после перезагрузки страницы вылетает 404*. Такую же проблему я наблюдаю и у продвинутых библиотек и фреймворков. Если заморочится с кешем можно таки удержать стейт и страница будет отображаться вне зависимости от обновления. Так вот, я хочу понять, как можно удержать в браузере несуществующую страницу по URL ссылке. —- * У React с этим проблем не замечал, у Vue такое может быть, на Angular ещё не успел проверить.

в ассетс-то почему

Ребят вы просто огонь. Походу у вас в загашнике еще пара жизней. ))) Изобретать колесо для велосипеда в 21 веке. А вдруг оно квадратное получится? А? )))

Пихать всё в localstorage плохая затея, тем более что там максимум можно хранить 5 Мб, я не проверял, и до такого не доходило. Локальное хранилище переодически чистится, так что может получится сюрприз в виде ошибки 404, после того как пользователь почистит свой браузер. В Gatsby реализуется всё через запихивание статики в DOM дерево, которая была сгенерирована в на момент билда, клацаешь по ссылкам, пушишь стейт вставляя в DOM нужный html. Ну решение, но до поры, пока не понадобится динамика.

assets - ресурсы по английски, место где лежат ресурсы сайта. Что не так ?

"чистый жс с роутингом" — звучит поизвращенски

в ассетс обычно пихают ресурсы а-ля иконки, картинки и тд. м.б. в мире ларавеля туда пихают скрипты и стили. но

весь стейт должен храниться в урле самом

Вот случится что-то, интернет отключат, воду там, или перестанут производить или выращивать продукты питания, или сайт стек оверфлоу закроется, или ещё что-то станет недоступным или закончится, а вы не знаете как этим пользоваться, потому что знаний нет, все мозги как флэшка, вставил в интернет и умный. А я хочу разобраться. Понять как это работает. Вот вы угораете, а вспомните историю Google и Oracle. Им пришлось изобретать велосипед под названием Kotlin, и компания Google спасла ситуацию, так как знала принципы работы таких языков как Java, поэтому сейчас не зависят от условий поставленных компанией Oracle. Вот копировать вставить - это верх инженерии, прям мозг прогресса. Плохое качество не предвидеть будущее, последствия, и считать что всегда всё будет в достатке. Как-то делал одному мужчине проект (ну как, исправлял баги, проблемы), сайт сломался из-за платного плагина, который к тому-же долго не обновлялся. Человек просто не умел и не знал как пользоваться, поставил это г?%но себе на сайт. Я посмотрел что делает этот плагин. Там вообще ничего сложного. Предложил написать собственное решение, а плагин удалить, всё, проблемы больше нет, а так бы постоянно платил и сайт ломался.

Да куда только не пихают эти файлы 😂😅 как вспомню легаси в начале нулевых, аж пот холодный по телу.

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

Почему несуществующих? Они же все описаны в роутах. Сам http stateless и состояние хранит в урлах, если придерживаться такого же подхода, то проблем будет меньше. Например, закешируете Вы стейт куда-то, а пользователь две вкладки открыл. Тогда в одной из вкладок будут закешированные данные второй

Допустим. Сделал что-то типа сервис воркер ?

Занятно. Но ваша цепочка размышлений не полной картиной обустроена. В случае отключения интернета - ну зачем вам будет все это? В частности веб приложухи? )) А если воду... Ну тут даже до продуктов уже дела не будет. Разобраться конечно хорошо. Но я понимаю разобраться - это знания языка программирования. А лезь в дебри просто по сути структуры какой либо плюшки - придуманной уже за тебя? Вот если свое что либо! А так. Сравнение гугла с ораклом тут как бы за уши притянуто. Не находите. ) С другой стороны, если у вас вагон и маленькая тележка времени, а почему бы и нет.

Чтобы вам было понятно. Я собираюсь делать соц.сеть. И это не прикол. Да и какая разница, амбициозный план или нет. Пройдёт время, её многие увидят, и скорее всего начнут пользоваться, когда в старых соц.сетях окончательно всё прогнеёт и будет невыносимо пользоваться сервисом и спокойно общаться. Анализ показал, что Vue принадлежит китайцам, а эти ребята всё под себя гребут (у них рекордное нарушение всех известных брендов, нарушение авторских прав, и кража интеллектуальной собственности), React и Next - продукты Facebook (Meta), получается что соц.сеть будет разрабатываться на продукте конкурента, который легко заберёт её как свою собственность. Марк, прости, ничего личного. Angular - собственность Google. Они пытались сделать соц.сеть Google+ но что-то пошло не так и её закрыли. В случае с Vue и React всё понятно - это точно отметается. Остаётся Universal и Angular - будет ли в будущем это проблемой для моей соц.сети, пока не знаю. Я потому и пришёл в это сообщество, что тут самые продвинутые и умные программисты сидят. Чтобы знаний и опыта набраться. Попробовать сделать это приложение на Ангуляре. В процессе всё равно надо будет писать что-то своё, чтобы не зависеть от права собственности и лицензии. P.S. Надеюсь объяснил более понятно.

Тут согласен. Цель оправдывает средства. У вас тот вариант - когда это оправданно. И к сожалению другого варианта нет - если вы хотите свой продукт реализовать - уникальный.

ты что нибудь про лицензии слышал?

Это дело времени, рыночек решает. Когда халява закончится, вопрос времени. Если сделают продукт проприетарным, я про Vue и React, то скорее всего нужно будет покупать лицензию, а уже разработанные продукты на этих решениях могут перестать работать, зависимости ведь обновляются, кто знает, может в ваших проектах уже есть бэкдор, разработка ведь принадлежит крупным корпорациям.

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

Понятно, сейчас разговор в пустую.

И придет время $mol

Я вам расскажу небольшую историю. Было это в середине 90-ых. Я тогда в классе 6 учился. У нас был кабинет информатики. Самого урока информатики у нас никогда небыло. Нас туда водили просто когда небыло какого-либо препода, чтоб мы по школе не наводили паники. Включали на компьютерах (как сейчас помню «Корвет 91 года выпуска») игры по типу 8 битных гонок. И мои одноклассники задротили. А мне тоже было это не интересно. Пару раз я тоже поиграл в игру — надоело. И после стал изучать кнопки на компе. Нашел RESET и вышел из игры. Так повторялось несколько раз. Достав учителя данными действиями, я получил какую-то бумажку с какими-то буквами и цифрами на английском. Начал писать их на клаве. В итоге при запуске кода, переписанного с бумажки у меня получился нарисованный «снеговик». Это было намного круче 8 битных машинок. Весь класс тут же захотел так же рисовать. Информатики у нас так и не было за всю бытность школы. Заинтересованный данной рисовалкой, я нашел человека старших классов, у которого была информатика. Подружился с ним. Он мне объяснил основные команды языка «Бейсик» если мне не изменяет память. И на уроках, когда мои одноклашки сидели и писали что либо, я сидел и в тетрадке тоже писал. Но совсем не уроки. )) Мне было совершенно не удобно прописывать на тот момент каждую линию типа Line(кордината начала, кордината конца) и круг Circle(координата точки, радиус) и т.д. В итоге за месяц примерно я написал программку типа удобного рисовальщика, где можно было поставить точку и просто клавишами ее двигать и получать линию, круги и разные геометрические фигуры. Закрашивать их, просто удобным способом. После это все я записал на «накопитель» - тогда использовали кассеты и магнитофон. Запись шла звуками разных писков, трещалок и перделок. Тогда не то, что интернета небыло, но даже книжек по программированию. А ОС типа виндовс я увидел уже намного лет позже. Писал код просто в тетрадке ручкой на листке бумаги. Это я к тому, что я хорошо понимаю ваши старания. Но опять же. Цель и свободное время решающий фактор во всем.

Интересная история. 😊Как говорил выше, вникаю в работу с DOM и в Angular.

стоп, вы же только что говорили что пишите соц сеть, не сочтите за оскорбление

Пора начать писать свой фреймворк с блекджеком и...)

Нет оскорбления. Пользоваться и вникать в суть это не одно и тоже. Когда пользуешься, это открыл документацию и сделал как там написано. А вникать, это понимать, почему они сделали именно так. Я тут скидывал своё решение без сторонних библиотек и фреймворков. Хотел понять. Сильно ли я отупел после кучи готовых решений. Смогу ли я что-то написать самостоятельно, или буду зависим, как раньше люди писали только на jQuery. Сейчас из-за этого во многих компаниях легаси. И в вакансии указано что нужно знать jQuery, чтобы поддерживать старые проекты (переписывать с нуля очень дорого). Пройдёт время, придумают что-то лучше чем React или Angular 😊 чувствуете? История повторяется.

Честно. Мое мнение. Для столь грандиозного проекта я бы не стал использовать только JS. Вы же хотите его монетизировать? А JS по сути в браузере выполняется. Ну и по сути фронт как бы переписывается в соответствии со временем по любому. Тут я бы вам посоветовал сосредоточится на Беке. Вот это будет основной костяк любого проложения. А фронт вы можете модулями писать и переписывать в дальнейшем как вам удобно и на каком удобно фреймворке. Тут как бы не вижу препятствий.

Вы что подглядываете 😂 а ну не списывать. Да. Это так. Потом можно этот бек раздать куда угодно. Вот тебе мобильное приложение, сайт, декстоп, PWA да хоть что 😊 так что я тут не с проста спрашивал про node js и pm2

Ноду для нормального прода на беке не рассматриваю. Свои соображения по этому поводу имеются.

То есть если нода будет на сервере общаться с PostgresQL и возвращать API в виде json - это плохая практика ?

SSR, CSR тебе не пойдет)

Ну мне вообще JS не особо нравится. Агуляр то использую из-за TypeScript сугубо. А так я к типизации полной склонен. Для бека и прода считаю это особо актуально.

SSR мне нужен. Так как будет постоянная динамика. Есть ещё вариант ISR. Статику вообще не рассматриваю 😊

Вот смотри, есть чисто node, есть TypeORM, и Nest.js все они могут законнектится с PostgresQL и взаимодействовать с БД. Есть навязанная тема с алголой, редисом, монго дб и эластик сёрч, потому что это всё платное и это выгодно продавать. Вот почему так популярны нереляционные базы данных. Продвигают то что приносит деньги. А не потому что это круто. Аналогия Bitrix, который очень был популярен, сейчас бизнес пытается от него избавится.