ПИШЕМ SINGLE PAGE APPLICATION НА TYPESCRIPT (БЕЗ ФРЕЙМВОРКА) • SPA

[@tabrisel]

Спасибо за урок! Долго искала подобное видео по архитектуре SPA. Все очень понятно для новичка.

[@MaximFilanovich]

Круто! Рад, что смог помочь!

[@АнжеликаТурлак]

@@MaximFilanovich Спасибо Вам! И мне оооочень сильно помогли!

[@MaximFilanovich]

@@АнжеликаТурлак🔥🔥🔥

[@Мефелион]

Супер, вот таких уроков бы побольше, а то вообще не мог понять как подступить к заданию!

[@MaximFilanovich]

Круто! Рад, что понравилось видео!

[@MAKSIMTSA]

@@MaximFilanovich я наверное бы провалил таску, если бы сегодня не посмотрел этот ролик) Все сдвинулось с мертвой точки. Роутинг здесь великолепен)

[@inaf.2827]

Спасибо большое! Все четко! Вы мне очень помогли на старте!

[@MaximFilanovich]

Пожалуйста)

[@НиколайРусакович]

Отличный практический урок! Разложил по полочкам. Очень доступно.

[@ЕвгенийДраганча]

Очень долго искал такого формата видео ничего не мог найти и вот наконец то оно

[@MaximFilanovich]

Круто! Рад, что понравилось видео!

[@gerompauel]

Спасибо. Отличный урок. Побольше бы таких!

[@dmytroz.2084]

годно! надеюсь будут еще ролики, а то вижу редко выходят! Отлично, что нашел этот канал!

[@MaximFilanovich]

Спасибо :)

[@sargeras1802]

Большое спасибо за урок. Спасибо, что так подробно показываешь каким должен быть код. Теория конечно хорошо, но данный ролик позволил её закрепить. Контент очень полезный, помогает разобраться как всё устроено изнутри. Ещё раз большое спасибо!)

[@RamanShalamitski]

Посомтрел пару твоих уроков, спасибо, четко и по делу) учу js 5 месяц, непростые вещи, объясняешь довольно доступно) полезных вещей подчерпунл много)

[@MaximFilanovich]

Спасибо за отзыв :) Удачи!

[@juniper2nd]

мегакрутой урок, чел ты лучший

[@disgracefulsense7882]

Спасибо! Вы определенно лучший ментор 🤗

[@MaximFilanovich]

Спасибо за комментарий и приятные слова!

[@prostonau]

Хороший урок, спасибо

[@SaintPowerFul]

если у вас не стартует dev server. надо в конфиге вэбпака заменить строку contentBase на static: { directory: path.join(__dirname, 'dist'), },

[@ioanlozan5371]

Спасибо брат

[@hacer9168]

Чел ты лучший, спасибо!

[@ВероникаТен-ф3л]

Большое спасибо за видео!! Буду ждать следующих видео с ts !!))

[@MaximFilanovich]

Рад, что понравилось! Спасибо!

[@nd1851]

Запредельно полезное видео, спасибо!

[@MaximFilanovich]

Спасибо за запредельно приятный комментарий! :)

[@Saveli_Sh]

Спасибо, то что нужно было для задания и понимания SPA. Успехов Вам!!!

[@MaximFilanovich]

Пожалуйста :)

[@hasst9261]

Круто, уааааау!

[@MaximFilanovich]

Класс, рад, что понравилось видео!

[@kotrvn1576]

Обожаю такие ламповые каналы/видео, как будто с корешем попиздели и он затер тебе про тайпскрипт) Пивка не хватает)))

[@ЕленаБасса]

Максим, видео супер!!! Все очень легко и доступно!!!

[@MaximFilanovich]

Спасибо большое за годный комментарий 🔥

[@emilvarn9474]

Супер крутой урок!

[@MaximFilanovich]

Спасибо! Рад, что видео зашло!

[@D000023]

Спасибо за полезный контент. Сделай, пожалуйста, видео по структуре приложения на примере того же match-match. Исходя из макета какие бы компоненты и модули ты выделил и как бы всё это увязал между собой. С этим у всех большие сложности, вроде по кусочкам всё можно найти, а вот как грамотно увязать вообще не понятно. Можно просто в виде схем или картинок, хочется понять принципы.

[@MaximFilanovich]

Спасибо за идею! Обязательно ее учту :)

[@МаксимКлименков-л6у]

Все очень понятно, спасибо!

[@MaximFilanovich]

Рад, что зашло!

[@АндрейНи-э9р]

Спасибо! Очень хорошее объяснение!

[@MaximFilanovich]

Спасибо за годный коммент! Рад, что понравилось видео!

[@dianaholoborodko2651]

Шикарное видео! Всё доступно и понятно рассказываешь! Побольше таких подробных разборов тем!

[@MaximFilanovich]

Спасибо за крутой отзыв! Рад, что видео помогло!

[@nouchance]

Спасибо большое процветанию вашему каналу удачи вам! Очень четко и понятно!!

[@MaximFilanovich]

Спасибо за крутой комментарий!

[@df7464]

Круто! Спасибо! Хорошо объясняете, я понимаю!)

[@MaximFilanovich]

Спасибо за классный отзыв!

[@shaxay]

Очень кстати! Спасибо большое, жду больше уроков))

[@MaximFilanovich]

Спасибо за крутой отзыв!

[@ТатьянаЛ-л9э]

спасибо за видео!

[@MaximFilanovich]

Спасибо за крутой отзыв! Рад, что понравилось видео!

[@alenache1]

не буду комментировать архитектуру:)) но отмечу важный момент: автор упустил из виду, что использование хеша не дает вам возможность использовать якоря на странице. А если они вам будут все-так нужны, то имейте ввиду, что роутинг без хеша будет перезагружать страницу, если не отменить действие браузера по умолчанию на нажатие ссылки и hashchange уже работать не будет.

[@ВячеславМаксютов-у5н]

отличное видео

[@MaximFilanovich]

Спасибо!

[@dolb9sha]

Спасибо. Все просто и понятно

[@MaximFilanovich]

Спасибо за крутой комментарий!

[@artemido4ka]

Очень круто, хотелось бы скорее увидеть реализацию страничек)

[@MaximFilanovich]

Спасибо! Хах, ну она навряд ли будет, потому что дизайна нету. Но я подумаю на этот счёт)

[@localhost666]

Почему так мало видео на канале? Контент шикарен

[@apavlukovich]

Спасибо за видео! Помогло.

[@MaximFilanovich]

Пожалуйста! Спасибо за отзыв! Рад, что смог помочь :)

[@apavlukovich]

побольше таких роликов, сейчас на ютубе редко можно найти такое видео с созданием сайта на ts, в основном js

[@MAKSIMTSA]

Почему Вы раньше не сделали этот ролик!?? ) Он бы мне ответил на много вопросов как по SPA так и по TS

[@MaximFilanovich]

Лучше поздно чем никогда))

[@MAKSIMTSA]

@@MaximFilanovich Хотелось бы еще новых видео в таком исполнении! Например про асинхронные выполнения, IndexedDB и много чего другого)

[@sharkman6434]

оч классный урок единственно позволю себе посоветовать писать константы в enum вида MY_CONSTANT = 'My constant' ; потому что считаеться что штуки типа MyConstant это может быть как компонента так и некая функция , особенно в реакт где все компоненты так и пишуться

[@annaantypova6956]

Спасибо большое за видео! Как раз то что искала. А можно ли сделать spa в таком формате, только с подключением html файлов?

[@MaximFilanovich]

Хорошая идея, подумаю над этим)

[@foreveryoung5039]

Спасибо за полезное видео. Один вопрос. Ты здесь раскидываешь модули по папкам. Хочу уточнить, согласно какой архитектуре организации кода ты это делаешь? Может скинешь почитать что-то на этот счёт.

[@tanercoder1915]

для начинающего запутанно, что у тебя два index.ts : один в корне другой в папке app . в чем приимущество так делать? поидее ведь лучше app.ts просто для логичности.

[@donalnoye4946]

16:50 в run и render вместо append напишите appendChild, иначе вылазит ошибка

[@Saveli_Sh]

Добрый день! Все-таки некорректно работает рендеринг при перезагрузке страницы. Например, если мы на settings-page, то при обновлении страницы, хэш остается settings-page, но загружается стартовая и при попытке перейти на settings-page, кликая на кнопку settings-page - ничего не происходит, кнопка не работает, также и с Statistics Page - если на ней остаешься, то после перезагрузки страаницы, она некликабельна, пока не пощелкаешь несколько раз. Хотелось бы, чтобы при перазагрузке хэш был старт-пейдж или вообще пустой, как при первом открытии спа. Получается, что работа приложения после перезагрузке некорректна, к сожалению((( сначала не обратила внимание, а теперь проверила, скачав Ваш код из гитхаба

[@ЮрийЛютый-о1ч]

Максим здраствуйте. Спасибо за ваш труд. Подскажите. В чем может быть проблема. На всех страница при попытке вывести title получаю undefind. Задаю аргумент в метод в таком формате. createHeaderTitle(SettingsPage.TextObject.MainTitle); Как в видео. На всех страницах кроме главной отображается undefind. Буду благодарен за ответ

[@rhorv]

Привет, что думаешь по поводу того что разработчиков, (давай возьмем в тему веб) сможет заменить Искусственный Интеллект, и какая вероятность этого на наше время, потому что реально страшно, что какой-то робот сможет забрать работу, и банально то - чем нравиться заниматься.

[@vitaly-]

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

[@danil2738]

Подскажите пожалуйста, что за расширение для перевода выделенного текста в браузере? Я разные перепробовал, но все работают так или иначе плохо

[@barabucho]

Я так и не понял,что выступает в роли движка/ядра web-приложения на стороне клиента? (что удерживает изменение контента от перезагрузки страницы)

[@kaprizov3200]

подскажи пожалуйста, у меня есть есть база по реакту, стоит ли учить реакт нативный ?

[@MaximFilanovich]

Если есть база по рекату, то стоить учить продвинутые темы по Реакту. Сначала стоит прокачать себя в самом реакте. Если это сделаешь, то на нативку потом перейти составит примерно 1,5 - 2 недели

[@kaprizov3200]

@@MaximFilanovich понял, спасибо, просто конкуренция большая, устроится на работу, решил выделиться так сказать)

[@ViktorElenich]

Продолжение будет этого видео?

[@MaximFilanovich]

Навряд ли :)

[@staskob5502]

Выдает ошибку при запуске npx webpack serve Не могу понять [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }

[@banyman7405]

такая же ошибка на этом шаге. как решили?

[@aruna8689]

Здравствуйте, у меня завтра интервью онлайн, по js и react, без онлайн кода, что нужно знать? Очень волнуюсь

[@MaximFilanovich]

Привет! Я рекомендую перейти в мой Instagram профиль и посмотреть 2 последних поста. Там описываются топ вопросов по React, которые мне задавали на собесах :) Вот ссылка: instagram.com/p/CPGbYK8jyV2/ Также есть пост про топ популярных вопросов по JS на собеседовании (с ответами на эти вопросы): instagram.com/p/CMKOS5PgJQW/ Тут главное помнить, что собеседование - это не экзамен. Собес - это общение 2-х разработчиков за чашечкой кофе. Все обычно проходит в лайтовой обстановке. Поэтому, самое главное, что нужно взять с собой на собес - это спокойствие и хорошее настроение. 😉 Уверен, у тебя все получится!

[@aruna8689]

@@MaximFilanovich спасибо

[@JavaScriptcher]

Почему импортируем { pageIds } в скобках?

[@ДмитрийКуликов-ы9ч7ф]

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

[@MaximFilanovich]

Опыт в том, что мы пишем это без фреймворков. Новичкам нет смысла начинать сразу с библиотек, так как без базы никуда не уедешь. А в этом видео очень много базовых и полезных вещей из JS и TS. А если рассматривать реальный проект, то конечно же нужна библиотека :)

[@ДмитрийКуликов-ы9ч7ф]

Новичкам надо объяснить то, что инструмент должен соответствовать задаче. Если у меня есть лендинг с одной формой и тремя аккордионами, то я просто пишу более или менее структурированную лапшу и это нормально, а вот если я буду фигачить сюда классы, вот тут поддержка этого всего превращается в ад. Если вы хотите показать преимущества классов, так напишите бизнес логику с богатой моделью на Domain Driven Design, вот тут к месту будет и приватные методы и статические и инкапсуляция и полиморфизм, потом возьмите и поменяйте фреймворк, например, вот оп рабоает на реакте, потом оп на ангуляре, потом оп на svelte. При этом в самой бизнес логике вообще ничего не изменяя. Вот это будет действительно полезно для новичков и будет понятно зачем классы вообще нужны.

[@MaximFilanovich]

@@ДмитрийКуликов-ы9ч7ф Во всяком случае это ваше мнение и спасибо, что им поделились :) Отзывы других людей говорят сами за себя и поэтому я понимаю, что делаю все правильно

[@ДмитрийКуликов-ы9ч7ф]

@@MaximFilanovich Так я не в плане наезда, просто приходится довольно часто править за джуниорами что-то вот такое на классах при этом не являющееся ООП, если в программе есть классы это еще не означает, что есть ООП. Любой инструмент должен быть к месту использован мне кажется.

[@1Malak16]

Внесу немножко критики, надеюсь будет воспринята адекватно. На мой взгляд, нужно более внимательно относиться к тому коду, который вы предлагаете новичкам, которые пока не имеют достаточного опыта, что-бы разделить, что хорошо, а что плохо. Например, конструкция в классе app из последовательных if else. Уверен, вы никогда бы такое не написали в продакшин коде.

[@MaximFilanovich]

Юрий, это ваше мнение и ему есть место быть. Я же считаю иначе. Данная конструкция с if else имеет место быть на реальных проектах и в ней ничего плохого нет. Что вместо него использовать? switch case? Ну у него по факту та же логика. Цепочки if else очень популярные конструкции на проектах. Я это говорю как человек с опытом работы в 1 год. Если Вы более опытный, то Вам, видимо, виднее :)

[@lolbozland]

​@@MaximFilanovich во всём, что работает - нет ничего плохого) switch case вынесенный в отдельный файл, наверное более красивое решение) чем if else в App, наверно об этом говорилось) В любом случае, посмотрел - повторил - усвоил, благодарю)

[@aleksandrmatyka3118]

@@MaximFilanovich Отличное видео, но соглашусь с комментарием выше, можно было бы к примеру вынести в отдельный файл в виде обьекта страниц все инстансы и потом просто сопоставлять урл по ключу с обьектом или памится в случае массива но для учебного примера это не столь важно

[@cartel3580]

не запускается девсервер - выдает много ошибок

[@zir6471]

та же фигня

[@victormog]

*switch*

[@MaximFilanovich]

Не совсем понял, к чему это))

[@victormog]

@@MaximFilanovich if-else-if

[@MaximFilanovich]

@@victormog По факту, тут разницы большой нет. Это уже вкусовщина

[@victormog]

@@MaximFilanovich Видел статьи и видео о нежелательности else вообще - но не смотрел, т.к. сам else-if использую крайне редко...

[@MaximFilanovich]

@@victormog Вообще, это зависит от разработчика, насколько часто он используют ту или иную структуру :)

[@victormog]

Не понял практического смысла в объявлении поля TextObject *статическим...*

[@MaximFilanovich]

Смысл TextObject в том, что он хранит константы с контентом, который будет видеть пользователь. Это вообще любой текст для конкретной страницы. Почему он статический? 1. TextObject относится к определенной сущности (будь то страница либо компонент). А значит, он должен находится внутри класса 2. Не вижу смысла делать текстовые константы не статическими. Если поле либо функция никак не работает с this, то есть большой смысл использовать static

[@victormog]

@@MaximFilanovich Из-за этого статического поля класс сразу стал _одноразовым..._ ... а можно было бы вынести его в абстрактный.

[@victormog]

@@MaximFilanovich Статическими всё-таки принято делать поля и методы общие для всех экземпляров, а не потому, что они не используют this.

[@MaximFilanovich]

@@victormog Интересное мнение. Я так конечно же не считаю. Просто "одноразовый" класс. Странное выражение. Во всяком случае круто, что мы поделились мнениями))

[@hennadiikhudolieiev2198]

ударение в аббериватуре ids ставиться не на i "Айдиз", а на d "айдИз"

[@hennadiikhudolieiev2198]

не хИдер, а хЭдер.

[@ВалерийФилиппенков-к1ю]

devServer: { static: path.resolve(__dirname, 'dist') port: 8080 }