Архитектура Frontend с Нуля до Продакшена. Docker, Webpack, CI/CD, React, Deploy
Вставка
- Опубліковано 26 лис 2024
- В этом видео мы подробно рассмотрим архитектуру Frontend-приложений, начиная с технологий и инструментов, заканчивая настройками и деплоем. Это будет комплексный обзор всех ключевых компонентов архитектуры: React, Redux, Storybook, Webpack, Docker, Nginx, CI/CD и других технологий.
В следующих видео мы детально разберем каждую технологию по отдельности и начнем пошаговое создание собственного приложения с нуля.
YeaHub github:
github.com/Yea...
Менторство:
reactify.ru
Отзывы:
t.me/mentor_re...
Telegram канал (Схема тут):
t.me/reactify_IT
Сообщество:
community.reac...
Beget хостинг:
beget.com/p206...
#frontend #reactjs #программирование
на момент написания комментария 17:14 на таймере, видео очень хорошее, ожидаю более подробного раскрытия тем, на уровне jun+/middle идеальный багаж знаний для развития
Это видео закрыло много вопросов которые месяцами пылились на полке questions в моей голове. Спасибо, пересмотрю еще не раз. Делайте еще контент пожалуйста
Рад слышать! Спасиибо!
Очень мощно, я хоть не новичок, но освежить некоторые моменты полезно))
Спасибо! Рад, что оценили!
Отличное видео! Спасибо вам за вашу работу.
Спасибо!
Очень качественный обучающий контент!
Спасибо!
Единственный минус, конечно, это FSD))) Но это исправимо))
Привет, а почему FSD - это минус? Можешь поподробнее расписать?
@@LiRiKOOO-k9g Если кратко, то FSD ничем не лучше любой кастомной модульной архитектуры фронта, удобной для команды. Но при этом FSD-методология недоописана, в практических примерах на различных технологиях (в частности React + Redux Toolkit) противоречит себе, чем порождает кучу накладных расходов, дополнительные сущности и кастомные соглашения внутри конкретных команд.
Итоги: FSD решает все задачи также как и любая другая архитектура (модульная, объектно-ориентированная Angular-style), но при этом сложнее в кастомизации под реальные практические кейсы, увеличивает колич-во кода и абстракций, не давая никакой выгоды взамен.
Ответил на вопрос?
Great work man.
thank you bro!
потрясающее видео
Спасибо!
Основная база есть, но ничего не сказано про архитектурные паттерны, которые лежат в основе современных фреймворков. Рассматривать чистый MVC в том же Backbone например это прошлый век, но на примере Ангуляра можно было бы рассказать и про MVVM и MVP. Ну, либо пускай будет идеей для следующего видео
вайт -> віт
дякую
Není za co
А есть схема по system design в общем доступе, в телеге не нашел ?
system design был митап для сообщества, запись и схема находятся в закрытом чате
Ну и все таки MobX не упрощенная версия redux, а очень мощный стейт менеджер. На котором вы поработав некоторое время, не захочете больше возвращаться на redux.
я работал с МобИкс
Не особо оценил, возможно, молодым был и не опытным
Мне вообще по душе zustand, слишком простой и мощный
Серьезно? с каких пор React стал быть фреймворком?
даже сами реакта пишут The library for web and native user interfaces
дак юноша использует вебпак =) не вит, даже не ВАЙТ, а вебпак))) какие вопросы тут могут быть?
есть такая вещь как маркетинг
давайте будем придираться к словам.
мне его надо было отдельно записать в Библиотеки интерфейсов?
на 80% проектов используется вебпак
произношу как хочу, я не англичанин
@@tiertiertiertiertier дак юноша играет в оверВатч)))!)!) Какие вопросы ты тмогут быть ? ))())!
Аксес-токен небезопасно в сторежке, нужно как и рефреш хранить
это лишь токен) не путать авторизацию и аутентификацию. сейчас есть oauth и это гуд, а вручную это все делать-трата времени на таких петпроектах
Первый
Спасибо!
У тебя избыточность кода и ты все усложняешь!
Вы приняты на работу
Крч просто реклама курсов)))
Курсы не рекламирую, я против курсов
Раскрой, пожалуйста, почему css in js - антипаттерн?
Мы же в любом случае будет отделять логику и верстку от стилей, какая разница на чем они будут написаны?
Само собой, и у того и у другого есть преимущества и недостатки, но зачем сходу называть css in js антипаттерном мне не ясно.
Тут писал
t.me/reactify_IT/651
Что и куда положить (по папках) ето не архитектура)🤣🤣🤣
жду от вас видео, по архитектуре, интересно посмотреть.
Почему в разделе по оптимизации только Реакт апи указан? Эта тема более глубокая и чаще одним реактом не обойтись!
Про ci/cd вообще ни слова, че это такое, для чего, какую проблему решает
Почему про анализ бандла рассказывается уже ПОСЛЕ рассказа про деплой, а не до раскатки приложения ?
Конечно глубокая, кэширование на сервере, минифиация файлов, cdn для картинок, испольование веб и сервис воркером, сжатие картинок. Тема для отдельного видео. Я сказал в видео, что существует множество оптимизаций и сказал, что планирую снять видео отдельное
ci/cd я показал на примере зачем он и для чего, подробно в другом видео. Я рассказал про проблему реальную, пересмотрите плиз
Анализ бандла оставил на конец, когда наше приложение запущенно и мы смотрим его работоспособность, посчитал нужным его в конце указать
Опять же, деплой может быть тестовым, мы смотрим насколько быстро файлы отдаются на тестовом серваке, тестируем
Конечно же можно анализ бандла проводить хоть после добавляения каждой компоненты
@@reactify-it бандл анализирует ДО деплоя приложения, иначе вы отдаете юзеру кучу ненужного говна)
Какой же слабый видос, дизлайк
ты можешь снять лучше (не можешь)
@@reactify-it Руслан, спасибо за видео, всё понятно и по делу👍