"React application structure at project start", Maksym Shestopal
•Transferir como PPTX, PDF•
0 gostou•247 visualizações
This talk describes in detail how to approach the creation of a project structure at the stage of its launch in order for the product to be of excellent quality, simple and stable in support, prone to expansion and development in the future, universal and understandable within the team.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Semelhante a "React application structure at project start", Maksym Shestopal
Semelhante a "React application structure at project start", Maksym Shestopal (20)
Mais de Fwdays
Mais de Fwdays (20)
"React application structure at project start", Maksym Shestopal
- 2. React application structure at project start Maksym Shestopal
- 3. Introduction Гибкость - с одной стороны это хорошо, а с другой - если с ней работать неправильно - может превратить проект в хаос, уничтожить продукт изнутри. Быстродействие Высокая производительность Компонентный подход Сообщество Гибкость Стабильность Поддержка Качество
- 4. React Apps Rendering CSR Недостатки: • SEO • Плохая загрузка на медленных устройствах и ряд других. SSR Недостатки: • Затраты • Медленные переходы между страницами • Пропускная способность
- 5. Структура React приложений Структура - это создание и декларация правил которым в дальнейшем продукт будет следовать. Это тот каркас на который в дальнейшем наслаивается вся бизнес логика, весь функционал продукта. Принципы, которым нужно следовать при создании структуры приложения: Мы сами создаем правила в соответствии с тем инструментом, что дает нам React. Упорядоченность Простота Наглядность
- 6. Структурный подход к продуктам Category 1 (Новостной портал, Блог) Масштаб продуктов Category 2 (Каталог продукции, Admin panel) Category 3 (E-commerce, Social Network, SAAS) Context API Решения Redux / MobX CSR / SSR
- 7. Составляющие приложения Основные составляющие: Составляющие любого React приложения. Как правильно разбить на модули? Routing Validators State manager Common API Packages UI
- 8. Взаимодействие между компонентами Правильное взаимодействие между компонентами - залог корректной, стабильной и оптимальной работы приложения Принципы, которым нужно следовать при создании структуры приложения: Правильная иерархия React Context Модульность
- 9. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 10. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 11. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 12. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 13. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 14. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 15. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 16. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 17. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 18. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 19. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 20. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 21. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 22. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 23. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 24. Результат использования наработок Общая структура: • app • assets • components • constants • context • hooks • layouts • modularComponents • pages • selectors • store • styles • types • utils • views
- 25. Conclusions Продукт - корабль, который мы отправляем в дальнее плаванье и в зависимости от того, что мы возьмем на борт - с этим ему и жить долгое время. Правильно построенная структура обеспечит высокое качество продукта, простоту в разработке, независимо от того какая команда будет работать над продуктом и какими этапами этот продукт будет разрабатываться, стабильность в поддержке, легкость в расширении / развитии. Давайте идти в ногу со временем, правильно выбирать подходы для продуктов и строить необходимую структуру для того, чтобы продукты жили долгое время в открытом доступе!