Я обычно смотрю ролики именно по тем вопросам, которые у меня в данный момент возникают, но это единственный канал, ролики на котором я смотрю все подряд и для общего развития и для решения конкретных вопросов. Ты очень крутой учитель, продолжай в том же духе!
Рубрика очень крутая) получить качественный фидбек от более опытных людей всегда круто! Надеюсь рубрика продолжит жить, и еще много начинающих программистов получат обратную связь к своим проектам!
автор 16:52 добавлял в window стор, потому что так делал Димыч из it-kamasutra, автор видимо просто повторил и забыл удалить. Димыч просто показывал че запихивается в стор, когда делали "свой редакс" чтобы понять как работает все под капотом)))
Самый интересный час моей жизни, побольше бы таких ревью. Спасибо за твой труд! Как вариант, можешь сделать платное ревью проекта. Думаю многих это заинтересует, меня точно.
Спасибо, очень полезно увидеть такой разбор. Было бы супер ещё что бы кто-то выложил проект где хорошо написаны юнит тесты и используется тайпскрипт, что бы увидеть показательный проект
Добрался таки до ролика:) Во-первых, Тимур, спасибо большое, ролик занял почти час, но бегло проскакивать файлы и акцентировать определённые места сложно, не проверив внимательно код заранее, что подразумевает довольно много потраченных сил и времени... Просто к слову:) а по поводу ролика: 1) в первом проекте отдельный лайк за функционал, особенно начало прочтения с текущей страницы. По поводу каши и "универсальности", не знаю как остальным, но на меня очень повлияло краткое знакомство с идеологией бэм. 2)К сожалению функционал можно посмотреть только в коде. Со своей колокольни... У Тимура есть отличный курс мерн диска, где довольно много времени он тратит на схемы сущностей и тд, там наглядно можно посмотреть как идут связи. И как же я благодарен ему, что в самом начале начал делать такие схемы БД и приложений, тогда можно и структуру расписать и сущности и увидеть где слабые места логики. В общем, это как муз. инструмент настроить перед игрой. Некий мизанплас в программировании:) 3) Тут не дорос и ничего не могу сказать, всё довольно элегантно:) ещё внимательно буду знакомиться с логикой и тс, хотелось бы увидеть реализацию ролей на роутах(там основа я так понял есть, для меня очень актуально, мучаюсь на роутер 6 с ролями, лэйзи и моб/десктоп). А в общем, видно насколько уникально каждый подходит к задачам и реализации кода, у каждого свои приоритеты... Помогает и на свой код посмотреть с другого угла:) очень полезно, надеюсь будут ещё такие видео:)))
Тимур, спасибо за видео в таком формате, интересно было смотреть твой разбор по замечаниям к проектам.Полезно было узнать что является сильными и слабыми сторонами в коде по твоему мнению.
Привет!) Отличная рубрика, очень зашло) Отдельно хотел бы отметить анимацию в первом проекте - заставила меня задуматься, как бы я реализовывал подобную вещь) Ну и однозначно лайк третьему проекту)
Анимация перелистывания страниц в готовых примерах есть на google.com, тут главное, если делать, то до конца, иначе получается, что управление всё где-то там за экраном :) Убрать из корзины - либо её делать моментальной, либо делать двойную (с проверкой на случайный клик), так как в проекте можно быстро дважды кликнуть на крестик и товар из корзины не успеет удалиться :)
чтоб не получался такой вот набор не пойми чего, нужна архитектура! поэтому я все и всегда советую почитать книгу "чистая архитектура", хотя бы ее. и перед тем как садиться писать проект, сначала заготовить архитектуру, где и что будете хранить, как и что будите именовать. да, это займет не мало времени, но зато напишите на много лучше и как показывает практика, на много быстрее! я сам себя с трудом к этому приучиваю, но оно реально более чем хорошо работает.)))
По структуре: я тоже всё воспринимаю буквально, типа он про - ему виднее) Хотелось бы конечно увидеть, как делать 100% правильно. Ибо чего сложно найти в инете (лично мне), так это данные по архитектуре современных приложений (куда можно отнести и структуру папок проекта).
Спасибо за видео! Я считаю, что код ревью -- это прямо мощь! Понятно, что на всех желающих времени просто физически не хватит, но даже пара-тройка проектов на ревью даёт очень многое новичкам.
Я тоже добавил store в объект window. Таким образом можно в консоли браузера посмотреть что сейчас находится в стейте)) Но перед тем как отдавать свой код на код ревью я бы конечно такое убрал)) А за видео спасибо, буду использовать как некий гайдлайн для своих проектов)
Очень классная рубрика! Начинающим как раз очень не хватает опытного взгляда на свой код, потому что редко у кого-то есть друг-программист, готовый помочь(ну или фидбек от рекрутера по тестовому заданию)! Надеюсь, что будет побольше таких видео :)
Спасибо большое за разбор, Тимур! Вот такого контента как раз не хватало, почерпнул интересного. До стадии линтеров и тестов мне далековато пока, но декомпозиция определенных строк кода и вынос анонимных функций в отдельные, это я уже подзабыл.
По третьему проекту. Сначала по инфраструктуре: - В вебпаке небольшой сумбур, видно, что за основу брался другой проект, в котором очень развесистая и большая конфигурация. Для такой сборки использование этого комбайна будет излишним. Стоит подумать в сторону упрощения и написания конфигурации под конкретный проект прямо руками. - При установке есть проблема с разрешением дерева зависимостей. Опять же, эхо из других проектов, код которых просто брался за основу, но не устанавливался напрямую в проект как зависимость. - В описании указано, что можно использовать для сборки и управления проектом npm, однако очевидно, что использовался yarn, который ещё и зачем-то ставится в dependencies. Нехорошо. Под npm придётся переделывать скрипты в package.json. Отсюда становится понятным проблема с деревом зависимостей, потому что yarn по-умолчанию такую проверку не проводит. - Всё собирается в один увесистый бандл, что для спа, в принципе, ок, но можно было заморочиться и сделать сборку ассетов, стилей, модулей с компонентами в разные файлы/папки, чтобы где-то работало кеширование браузера, где-то ресурсы отдавались быстрее. Ну и в целом будет чуть опрятнее. - Раз уж используется husky и prettier, было бы здорово их подружить и добавить в хуки соответствующие проекты, можно ещё пройтись по самому проекту всякими npx prettier --write, вылезет много мест, отдельным коммитом бы это оформить не мешало. - Лучше всего придерживаться единого стиля именования всех конфигов. Часть (webpack, eslint) лежит в js-файлах, некоторые (.prettierrc, .stylelintrc.json) нет. Выгоднее привести к единообразию и отформатировать по образцу. - Немного привести в порядок сам package.json, поправить все ссылки на другие репозитории для некой консистентности. - Вроде как есть browserslist и даже работает, но при сборке при указании, например, ie11, всё равно остаются артефакты в виде стрелочных функций. Есть предположение, что это лезет из node_modules, которую обходит вниманием webpack, если верить конфигу. Если spa не предполагает использования в старых браузерах (что сейчас уже нормально), то на это не стоит обращать внимания, но иногда может стрельнуть. - Не очень понятно назначение папки public с одной несчастной фавиконкой внутри. Плюс кое-где встречаются всякие странные файлы типа er.email - для чего они?
Немного по коду: - Некоторые файлы .css выглядят так, как будто должны быть .scss. Вложенные селекторы, например. Не круто. - Не помешало бы задать некий base_url в конфиге того же тайпскрипта, чтобы не писать относительные пути ../../../.. в импортах, а пользоваться абсолютными, import { component } from "components", вроде того. - Сомнительна сама по себе идея держать BASE_URL в отрыве от конфигурации webpack и public_path, base_url из прикладных вещей. Оптимальнее было бы использовать какой-нибудь json-файл с конфигурацией, откуда начитывать служебный конфиг перед стартом приложения (раз уж у нас spa), либо сделать его в .js и настроить в webpack его загрузку через external - Я в курсе, что Ulbi не любит инлайн-стрелочные функции в обработчиках внутри jsx, но заводить плеяду констант, которые состоят, по сути, из setOpen(true)/setOpen(false) тоже как-то некрасиво. Уж лучше пусть живут прям в разметке. Если что-то длиннее двух строк, пожалуй, стоит задуматься о выносе в функцию, тут с Ulbi я согласен. - Для валидации форм рекомендую посмотреть в сторону всяких штук типа Formik. Можно и своё накидать, но пользоваться какими-то готовыми вещами как-то опрятнее и чище, хотя это холиварный вопрос. - Если брать общую структуру проекта, не стоит зацикливаться на функциональную, можно попробовать модульную. Например, внутри проекта разделить папками всё на модули, общие куски вынести наружу, зато все бизнес-сущности, характерные для раздела (модуля) будут сконцентророваны в одном месте, а не размазаны по 3-4 папкам. Иными словами, вместо pages можно завести модули, куда будет входить своя стилизация, свои компоненты, своя логика, свои сервисы. Общие куски вынести в общие папки. Иначе получается, что в components у нас свалка компонентов, которые зачастую нифига не общие и очень даже специфичные для отдельно взятой страницы. С модулями получится эту историю не раздувать. Это не призыв к действию, а вариант на подумать. - По сути, раз уж у нас css modules, можно вообще не использовать возможности вложения селекторов друг в друга (то, что нам тут даёт scss), а писать как есть, всё равно ведь добавятся хеши и будет ништяк. - В папке с компонентами, наверное, будет разумно делать общие файлы index.ts, где просто экспортируется всё, что есть внутри. Это позволяет сразу оценить, что из компонента нужно у него внутри, а что идёт наружу, плюс при импорте можно всё красиво обернуть в один, а не писать несколько подряд. - Кое-где по проекту встречается статика, которая тянется из интернета. В принципе, ок, но такое лучше размещать у себя, тем более, что запускаться всё это может в изолированном контейнере во внутренней сети - откуда тогда брать эти ресурсы? - Не помешает глянуть в сторону чего-то типа react-query для работы с асинхронными запросами. Простые и понятные обёртки помогут навести порядок и избавить код от лишних в некоторых местах useEffect. Плюс у этой штуки есть своё кеширование, можно много всего прикольного навертеть, зачастую даже обойтись вовсе без стора (если проект не очень большой). - Кое-где встречаются ссылки вместо , досадно. - Как вариант развития на будущее, чтобы не описывать интерфейсы для данных с бэкенда вручную, можно поискать какое-то решение, как в том же graphql, который автоматизирует эту работу на основе схемы. Не знаю, есть ли такое для rest, но это всё равно удобнее, если повесить на хук, чем вручную следить за этой консистентностью.
В целом, проект всё равно неплохой, это всё выше по большей части придирки, но как мысли для тех, кто подумает, а что бы ещё можно было тут улучшить. Большое спасибо ребятам за примеры, благодарность Ulbi за то, что он старается популяризировать, обучить, рассказать. Получается здорово.
У девушки сильный проект, много нового узнал. Что такое сборка проекта на webpack, узнал про lazy, про библиотеку, которая предоставляет сервер. Круто.
Что интересно, она выше в комментах написала что учит разработку 6 месяцев. Т.е. человек знает реакт на неплохом уровне, что очень важно, имеет понятие о правильном нейминге и архитектуре (это приходит все ТОЛЬКО С ОПЫТОМ). Дальше. Умеет работать с вебпаком, знает о лейзилоадинге, понимание html, css соответственно, понятие о бекенде есть, знание JS... токенов и авторизации...это все за полгода?? ПОЛГОДА, блин это более-менее освоить html и css - вот полгода)) ну может джс потрогать... короче, либо человек гений, либо хер знает что происходит:)
@@dmitriystoyanov933 Не волнуйся, это скорее всего не правда. Либо этот проект скопирован, либо это был не джун. Даже если смотреть её гитхаб, у неё с февраля 21 года уже началась активность. До этого её приложения - это проекты Владилена Минина. Т.е она с таких проектиков потом резко апнулась до уровня мидла? Короче странный гитхаб и проект, я бы на месте людей так не расстраивался. Вот первые 2 проекта я поверю что делали джуны, ибо я сам похожий делал.
@@wh1teb1ack92 чувак, вот это у тебя догадки. но я раскрою занавес тайны, чтобы тебе и другим переживающим стало полегче - это просто проект со стажировки в компании. дают таски и ментора, который ревьюит твой код и бьет по пальцам. однако проект не из легких, как по мне: все-таки делать надо все-равно самому. ментор ведь не нянька. А веб-пак уже готовый дается. P.S. Сам щас в процессе стажировки в этой компании. Забавно вышло, что мой проект тут на ревью. Я вообще на fullstack стажируюсь и залетел на фронт сейчас после лабы по .NET с нулевыми знаниями по JS. Тяжеловато :(
@@mxrquez7692 я ниже с парнишкой переписывался, так он писал: а третьему проекту больше 2.5 лет, и там не один контрибьютер, там еще от кого-то пуши были в проект. Короче история эта вся бредовая, не стоит внимания. Просто непонятный проект которому несколько лет, так ещё и сделанный не одним челом.
@@wh1teb1ack92 в контрибьюторах ментор сидит. А так иногда бывает, что если сильно тупит стажер, то ментор сам иногда пуши делает. Случалось со знакомым такое уже х)
Для совсем новичка, как по мне, из этого ролика можно вынести то, что структура это скелет/основа и если приучить себя строить понятную и чистую структуру, то и писать код проще и в будущем пригодится. В тех же курсах по интернет магазину, спотифай и тд Тимур как раз и показывает понятную и простую структуру, что куда складывать и зачем:)))
Здравствуйте спасибо за ролик, в первом кейсе можно использовать Prettier для красоты , а глобальный объект window скорей всего нужен для того , что бы можно было в консоли посмотреть на свой state
Привет, подчеркнул от сюда setStete как функция из redux, штука классная. Запилишь видео на тему БЭМ в связке с модульным стилем. Мол когда мы пишем БЭМ, как он ценен при использовании модульности, в чем вообще отличие и ценности, слабые/сильные стороны обеих из. Было бы круто увидеть реальную ценность модульности, а еще как в этом всем может помочь БЭМ или пропасть в использовании.
Я обычно смотрю ролики именно по тем вопросам, которые у меня в данный момент возникают, но это единственный канал, ролики на котором я смотрю все подряд и для общего развития и для решения конкретных вопросов. Ты очень крутой учитель, продолжай в том же духе!
Рубрика топ ! КОД РЕВЬЮ ПРОЕКТОВ ПОДПИСЧИКОВ!
Рубрика очень крутая) получить качественный фидбек от более опытных людей всегда круто! Надеюсь рубрика продолжит жить, и еще много начинающих программистов получат обратную связь к своим проектам!
"А у тебя в качестве ядра массив строк. Нуууу, какое ядро, такое и приложение..." На этом момент что-то вголос.
Очень полезный формат видео! Лайк!
Мало ревью, так он ещё и исправляет! Фуру лайков, срочно. Золотой контент, с ложечки кормят, я хз как такое вообще в общем доступе лежит
Огромное спасибо!
то что давно искал, а именно правильная структура реакт проекта и 'best practices'.
Супер. Побольше видео с код ревью - это очень важно и полезно.
Думал будет скучно, но получилось очень даже круто. Главное чтоб были работы интересные на проверку
автор 16:52 добавлял в window стор, потому что так делал Димыч из it-kamasutra, автор видимо просто повторил и забыл удалить. Димыч просто показывал че запихивается в стор, когда делали "свой редакс" чтобы понять как работает все под капотом)))
ochen' zdorovo, avtoru spasibo !! zhdem novuh :)
Спасибо тебе ,Тимур! Всегда жду и смотрю ролики твои!
Тимур, вот это сила!!! Спасибо за видео. код ревью, react, redux, архитектура,
комментарий для продвижения ролика, автор крут, удачи и терпения
Ты очень крут! Желаю всяческих успехов! Ценнейший канал!
Наконец-то ютюб вовремя кинул оповещение:))) на выходных нужно будет внимательно посмотреть, спасибо и всем приятного просмотра!!!
работаешь уже?
@@Ryold почти, я на фрилансе:))
@@ipa_stor О, привет, давно не виделись)
Легенда канала
@@luckyman5983 Привет 👋👋👋, да, а тут отличный повод- разбор кода:)))
Большое спасибо, смотрим!👏👍
Ооооочень круто, Тимур! Так держать. Спасибо 👌🏻 продолжай в том же духе
Коммент в поддержку канала!
Спасибо огромное за разбор проекта, а также за труд и время, которые ты выкладываешь в каждый свой ролик ❤️
Так, лайк поставил, можно и смотреть
Очень круто и ничего не понятно)) только начал изучать сие чудо. Но смотреть тебя приятно. Спасибо за труды.
Как обычно качествнный материал, благодарю. Очень смеялся с "Какое ядро, такое и приложение", за это отдельное спасибо)
Блин, это слишком полезное и крутое видео) Видел много всяких ревью, это видео одно из лучших на тему кодревью! Респект!
Все ребята молодцы, сделать свой проект, любой, не важно хоть какой-то - это огромный опыт, но 3 проект на 10 из 10!
dude ты крут! Спасибо тебе. Ты делаешь очень хорошее для ребят
Обязательно продолжай эту рубрику, давно ждал чего-то подобного)
Однозначно крутой формат, пойду изучать проекты на выходных. Ну и что радует не так уж плохо я и пишу!
Дружище, супер крутая и нужная рубрика. Жду с нетерпением продолжение
Супер формат!!! С открытым ртом смотрел!=)
Ждём следующий!
приятный подгон в начале недели!
Отличный видос. Последний проект огонь
Шикарный формат!! Однозначно надо продолжать!
Вот это прям очень годный контент. Не думал проводить стримы с код ревью за донаты? Денег подзаработал бы и нам приятное сделал)
Круто! Сильно жду видос про тестирование
Последний продж прям харош, если такой есть в портфеле то многие комании оторвут с руками и ногами)
Спасибо!!! Очень полезная рубрика! Наглядно видно, на какие моменты обращать внимание в своем коде.
Тут просто попросить человека покрить все тестами и человек би сам отрефакторил и 50% какашки би ушло само собой) Рубрика зачет, спасибо.
Согласен с тестами
Отличный ролик! Это классная рубрика, много нового можно узнать.
У тебя очень качественный контент, спасибо за твой труд!
Самый интересный час моей жизни, побольше бы таких ревью. Спасибо за твой труд!
Как вариант, можешь сделать платное ревью проекта. Думаю многих это заинтересует, меня точно.
очень скучная жизнь, чел))
Большое спасибо за полезные комментарии и за то, что дали ссылки на репозитории!
Оценки ставить не буду, однозначно молодцы все трое, каждый услышит фидбек и, надеюсь, сделает выводы. Спасибо за твой труд, как всегда, лучший.
ну последнее - прям крепкий мидл проект в моем понимании. Жаль первого пацана.. начинал за здравие, закончил за упокой..)
Спасибо за ролик! Очень полезная информация.
Годный контент, автор, спасибо!)
это уже некст левел братан, как всегда ты лучший
лайк не глядя, так как предыдущий контент показал всё во всей красе :) рубрика должна получится очень крутой)
Спасибо, очень полезно увидеть такой разбор. Было бы супер ещё что бы кто-то выложил проект где хорошо написаны юнит тесты и используется тайпскрипт, что бы увидеть показательный проект
Спасибо, очень полезный формат видео.
Добрался таки до ролика:) Во-первых, Тимур, спасибо большое, ролик занял почти час, но бегло проскакивать файлы и акцентировать определённые места сложно, не проверив внимательно код заранее, что подразумевает довольно много потраченных сил и времени... Просто к слову:) а по поводу ролика:
1) в первом проекте отдельный лайк за функционал, особенно начало прочтения с текущей страницы. По поводу каши и "универсальности", не знаю как остальным, но на меня очень повлияло краткое знакомство с идеологией бэм.
2)К сожалению функционал можно посмотреть только в коде. Со своей колокольни... У Тимура есть отличный курс мерн диска, где довольно много времени он тратит на схемы сущностей и тд, там наглядно можно посмотреть как идут связи. И как же я благодарен ему, что в самом начале начал делать такие схемы БД и приложений, тогда можно и структуру расписать и сущности и увидеть где слабые места логики. В общем, это как муз. инструмент настроить перед игрой. Некий мизанплас в программировании:)
3) Тут не дорос и ничего не могу сказать, всё довольно элегантно:) ещё внимательно буду знакомиться с логикой и тс, хотелось бы увидеть реализацию ролей на роутах(там основа я так понял есть, для меня очень актуально, мучаюсь на роутер 6 с ролями, лэйзи и моб/десктоп).
А в общем, видно насколько уникально каждый подходит к задачам и реализации кода, у каждого свои приоритеты... Помогает и на свой код посмотреть с другого угла:) очень полезно, надеюсь будут ещё такие видео:)))
Формат, который мы заслужили. Продолжай! :)
Классное видео! Спасибо большое! Очень хороший канал, буду всем своим друзьям и родственникам рекомендовать!!!)
Надя - умница! очень практичный проект получился, надеюсь вы уже с оффером:)
Очень круто, спасибо тебе за твой труд!
Отличное code review! Автору +
Очень полезное видео, спасибо))
Какое ядро - такое и приложение))) красава
Очень классный ролик! Спасибо. и спасибо ребятам, что показали свои работы
УчителЪ, научи!!!!)))) Репект тебе мужик, все ролики, что доктор прописал без поды, без чавкания... Долгих лет тебе! Возми в свою Школу
Очень круто. спасибо огромное
Тимур, спасибо за видео в таком формате, интересно было смотреть твой разбор по замечаниям к проектам.Полезно было узнать что является сильными и слабыми сторонами в коде по твоему мнению.
Однозначно крутая тема +100500 что бы продолжать её!!!
Привет!)
Отличная рубрика, очень зашло)
Отдельно хотел бы отметить анимацию в первом проекте - заставила меня задуматься, как бы я реализовывал подобную вещь)
Ну и однозначно лайк третьему проекту)
Анимация перелистывания страниц в готовых примерах есть на google.com, тут главное, если делать, то до конца, иначе получается, что управление всё где-то там за экраном :)
Убрать из корзины - либо её делать моментальной, либо делать двойную (с проверкой на случайный клик), так как в проекте можно быстро дважды кликнуть на крестик и товар из корзины не успеет удалиться :)
Классная рубрика! Я бы посмотрел ещё таких видео
Аплодирую стоя👏👏👏
Очень интересный формат, было бы интересно видеть его в дальнейшем 1-2 ревью в 10-20 минут.
Я тут увидел в папке "Фундаментальный курс Angular", очень жду
Очень круто, Тимур, спасибо огромное зв такие полезные ролики. Тут не просто ревью, а ещё и исправления!! За такое даже тысячу лайков будет мало...
Thank you! You are the best!
Супер. Даёшь больше такого контента.
Очень круто!
чтоб не получался такой вот набор не пойми чего, нужна архитектура! поэтому я все и всегда советую почитать книгу "чистая архитектура", хотя бы ее. и перед тем как садиться писать проект, сначала заготовить архитектуру, где и что будете хранить, как и что будите именовать. да, это займет не мало времени, но зато напишите на много лучше и как показывает практика, на много быстрее! я сам себя с трудом к этому приучиваю, но оно реально более чем хорошо работает.)))
Молодчик!!
Привет, тоже отправил свой проект, надеюсь рубрика продолжится)
Вооооооодще класс 👍👍👍, Спасибо огромное
По структуре: я тоже всё воспринимаю буквально, типа он про - ему виднее) Хотелось бы конечно увидеть, как делать 100% правильно. Ибо чего сложно найти в инете (лично мне), так это данные по архитектуре современных приложений (куда можно отнести и структуру папок проекта).
Дякую за канал, тут я дізнався багато чого нового
Спасибо за видео! Я считаю, что код ревью -- это прямо мощь! Понятно, что на всех желающих времени просто физически не хватит, но даже пара-тройка проектов на ревью даёт очень многое новичкам.
Наикрутейшая рубрика. Продолжай, пожалуйста!!!
Я тоже добавил store в объект window. Таким образом можно в консоли браузера посмотреть что сейчас находится в стейте)) Но перед тем как отдавать свой код на код ревью я бы конечно такое убрал))
А за видео спасибо, буду использовать как некий гайдлайн для своих проектов)
Есть расширение для браузера Redux DevTools, оно тебе показывает твой стейт в реалтайме.
Очень классная рубрика! Начинающим как раз очень не хватает опытного взгляда на свой код, потому что редко у кого-то есть друг-программист, готовый помочь(ну или фидбек от рекрутера по тестовому заданию)! Надеюсь, что будет побольше таких видео :)
Классная рубрика, лайк однозначно
Спасибо большое за разбор, Тимур! Вот такого контента как раз не хватало, почерпнул интересного. До стадии линтеров и тестов мне далековато пока, но декомпозиция определенных строк кода и вынос анонимных функций в отдельные, это я уже подзабыл.
Крутой ролик.
Крутая рубрика, продолжай в том же духе! спасибо за разборы
По третьему проекту.
Сначала по инфраструктуре:
- В вебпаке небольшой сумбур, видно, что за основу брался другой проект, в котором очень развесистая и большая конфигурация. Для такой сборки использование этого комбайна будет излишним. Стоит подумать в сторону упрощения и написания конфигурации под конкретный проект прямо руками.
- При установке есть проблема с разрешением дерева зависимостей. Опять же, эхо из других проектов, код которых просто брался за основу, но не устанавливался напрямую в проект как зависимость.
- В описании указано, что можно использовать для сборки и управления проектом npm, однако очевидно, что использовался yarn, который ещё и зачем-то ставится в dependencies. Нехорошо. Под npm придётся переделывать скрипты в package.json. Отсюда становится понятным проблема с деревом зависимостей, потому что yarn по-умолчанию такую проверку не проводит.
- Всё собирается в один увесистый бандл, что для спа, в принципе, ок, но можно было заморочиться и сделать сборку ассетов, стилей, модулей с компонентами в разные файлы/папки, чтобы где-то работало кеширование браузера, где-то ресурсы отдавались быстрее. Ну и в целом будет чуть опрятнее.
- Раз уж используется husky и prettier, было бы здорово их подружить и добавить в хуки соответствующие проекты, можно ещё пройтись по самому проекту всякими npx prettier --write, вылезет много мест, отдельным коммитом бы это оформить не мешало.
- Лучше всего придерживаться единого стиля именования всех конфигов. Часть (webpack, eslint) лежит в js-файлах, некоторые (.prettierrc, .stylelintrc.json) нет. Выгоднее привести к единообразию и отформатировать по образцу.
- Немного привести в порядок сам package.json, поправить все ссылки на другие репозитории для некой консистентности.
- Вроде как есть browserslist и даже работает, но при сборке при указании, например, ie11, всё равно остаются артефакты в виде стрелочных функций. Есть предположение, что это лезет из node_modules, которую обходит вниманием webpack, если верить конфигу. Если spa не предполагает использования в старых браузерах (что сейчас уже нормально), то на это не стоит обращать внимания, но иногда может стрельнуть.
- Не очень понятно назначение папки public с одной несчастной фавиконкой внутри. Плюс кое-где встречаются всякие странные файлы типа er.email - для чего они?
Немного по коду:
- Некоторые файлы .css выглядят так, как будто должны быть .scss. Вложенные селекторы, например. Не круто.
- Не помешало бы задать некий base_url в конфиге того же тайпскрипта, чтобы не писать относительные пути ../../../.. в импортах, а пользоваться абсолютными, import { component } from "components", вроде того.
- Сомнительна сама по себе идея держать BASE_URL в отрыве от конфигурации webpack и public_path, base_url из прикладных вещей. Оптимальнее было бы использовать какой-нибудь json-файл с конфигурацией, откуда начитывать служебный конфиг перед стартом приложения (раз уж у нас spa), либо сделать его в .js и настроить в webpack его загрузку через external
- Я в курсе, что Ulbi не любит инлайн-стрелочные функции в обработчиках внутри jsx, но заводить плеяду констант, которые состоят, по сути, из setOpen(true)/setOpen(false) тоже как-то некрасиво. Уж лучше пусть живут прям в разметке. Если что-то длиннее двух строк, пожалуй, стоит задуматься о выносе в функцию, тут с Ulbi я согласен.
- Для валидации форм рекомендую посмотреть в сторону всяких штук типа Formik. Можно и своё накидать, но пользоваться какими-то готовыми вещами как-то опрятнее и чище, хотя это холиварный вопрос.
- Если брать общую структуру проекта, не стоит зацикливаться на функциональную, можно попробовать модульную. Например, внутри проекта разделить папками всё на модули, общие куски вынести наружу, зато все бизнес-сущности, характерные для раздела (модуля) будут сконцентророваны в одном месте, а не размазаны по 3-4 папкам. Иными словами, вместо pages можно завести модули, куда будет входить своя стилизация, свои компоненты, своя логика, свои сервисы. Общие куски вынести в общие папки. Иначе получается, что в components у нас свалка компонентов, которые зачастую нифига не общие и очень даже специфичные для отдельно взятой страницы. С модулями получится эту историю не раздувать. Это не призыв к действию, а вариант на подумать.
- По сути, раз уж у нас css modules, можно вообще не использовать возможности вложения селекторов друг в друга (то, что нам тут даёт scss), а писать как есть, всё равно ведь добавятся хеши и будет ништяк.
- В папке с компонентами, наверное, будет разумно делать общие файлы index.ts, где просто экспортируется всё, что есть внутри. Это позволяет сразу оценить, что из компонента нужно у него внутри, а что идёт наружу, плюс при импорте можно всё красиво обернуть в один, а не писать несколько подряд.
- Кое-где по проекту встречается статика, которая тянется из интернета. В принципе, ок, но такое лучше размещать у себя, тем более, что запускаться всё это может в изолированном контейнере во внутренней сети - откуда тогда брать эти ресурсы?
- Не помешает глянуть в сторону чего-то типа react-query для работы с асинхронными запросами. Простые и понятные обёртки помогут навести порядок и избавить код от лишних в некоторых местах useEffect. Плюс у этой штуки есть своё кеширование, можно много всего прикольного навертеть, зачастую даже обойтись вовсе без стора (если проект не очень большой).
- Кое-где встречаются ссылки вместо , досадно.
- Как вариант развития на будущее, чтобы не описывать интерфейсы для данных с бэкенда вручную, можно поискать какое-то решение, как в том же graphql, который автоматизирует эту работу на основе схемы. Не знаю, есть ли такое для rest, но это всё равно удобнее, если повесить на хук, чем вручную следить за этой консистентностью.
В целом, проект всё равно неплохой, это всё выше по большей части придирки, но как мысли для тех, кто подумает, а что бы ещё можно было тут улучшить.
Большое спасибо ребятам за примеры, благодарность Ulbi за то, что он старается популяризировать, обучить, рассказать. Получается здорово.
У девушки сильный проект, много нового узнал. Что такое сборка проекта на webpack, узнал про lazy, про библиотеку, которая предоставляет сервер. Круто.
Что интересно, она выше в комментах написала что учит разработку 6 месяцев. Т.е. человек знает реакт на неплохом уровне, что очень важно, имеет понятие о правильном нейминге и архитектуре (это приходит все ТОЛЬКО С ОПЫТОМ). Дальше. Умеет работать с вебпаком, знает о лейзилоадинге, понимание html, css соответственно, понятие о бекенде есть, знание JS... токенов и авторизации...это все за полгода?? ПОЛГОДА, блин это более-менее освоить html и css - вот полгода)) ну может джс потрогать... короче, либо человек гений, либо хер знает что происходит:)
@@dmitriystoyanov933 Не волнуйся, это скорее всего не правда. Либо этот проект скопирован, либо это был не джун. Даже если смотреть её гитхаб, у неё с февраля 21 года уже началась активность. До этого её приложения - это проекты Владилена Минина. Т.е она с таких проектиков потом резко апнулась до уровня мидла?
Короче странный гитхаб и проект, я бы на месте людей так не расстраивался. Вот первые 2 проекта я поверю что делали джуны, ибо я сам похожий делал.
@@wh1teb1ack92 чувак, вот это у тебя догадки. но я раскрою занавес тайны, чтобы тебе и другим переживающим стало полегче - это просто проект со стажировки в компании. дают таски и ментора, который ревьюит твой код и бьет по пальцам. однако проект не из легких, как по мне: все-таки делать надо все-равно самому. ментор ведь не нянька. А веб-пак уже готовый дается.
P.S. Сам щас в процессе стажировки в этой компании. Забавно вышло, что мой проект тут на ревью. Я вообще на fullstack стажируюсь и залетел на фронт сейчас после лабы по .NET с нулевыми знаниями по JS. Тяжеловато :(
@@mxrquez7692 я ниже с парнишкой переписывался, так он писал: а третьему проекту больше 2.5 лет, и там не один контрибьютер, там еще от кого-то пуши были в проект.
Короче история эта вся бредовая, не стоит внимания. Просто непонятный проект которому несколько лет, так ещё и сделанный не одним челом.
@@wh1teb1ack92 в контрибьюторах ментор сидит. А так иногда бывает, что если сильно тупит стажер, то ментор сам иногда пуши делает. Случалось со знакомым такое уже х)
То что нужно! Спасибо большое! Побольше бы таких ревью проектов
Полезный выпуск!))
Еще бы таких роликов, особенно советов по структуризации и декомпозиции)
Полезная рубрика 👍🏻
Я только начинаю. Ни чего не понятно но есть чувство, что пригодится в будущем.
через месяц вернёшься, всё поймёшь, такая же фигня была со мной
Для совсем новичка, как по мне, из этого ролика можно вынести то, что структура это скелет/основа и если приучить себя строить понятную и чистую структуру, то и писать код проще и в будущем пригодится. В тех же курсах по интернет магазину, спотифай и тд Тимур как раз и показывает понятную и простую структуру, что куда складывать и зачем:)))
Прикольный обзор с разбором ошибок. Классная рубрика, зачет!)
Очень интересно
Отличная рубрика!
Здравствуйте спасибо за ролик, в первом кейсе можно использовать Prettier для красоты , а глобальный объект window скорей всего нужен для того , что бы можно было в консоли посмотреть на свой state
Крутая идея, было бы интересно услышать от прошаренного чела о том как правильно писать код
три класса нельзя, жаль) тогда спасибо, коммент и палец вверх. У тебя классные уроки есть что посмотреть!
store в window отправляется скорее всего для того, чтобы в консоле браузера можно было в любой момент посмотреть его состояние
Привет, подчеркнул от сюда setStete как функция из redux, штука классная.
Запилишь видео на тему БЭМ в связке с модульным стилем. Мол когда мы пишем БЭМ, как он ценен при использовании модульности, в чем вообще отличие и ценности, слабые/сильные стороны обеих из. Было бы круто увидеть реальную ценность модульности, а еще как в этом всем может помочь БЭМ или пропасть в использовании.
оч полезно, спасибо