Використання React та Redux під час розробки вебзастосунків: проблеми та перспективи
DOI:
https://doi.org/10.31866/2617-796X.8.1.2025.335535Ключові слова:
веброзробка, фреймворк, React, Redux, frontend-розробка, бібліотеки JavaScriptАнотація
Розробка вебзастосунків від простих вебсторінок до складних інтерактивних платформ, таких як соціальні мережі, системи е-commerce, корпоративні портали, потребує використання нових підходів, інструментів і технологій. Особливу роль у розробці вебзастосунків відіграють JavaScript-бібліотеки та фреймворки, які спрощують створення ефективних, масштабованих і зручних інтерфейсів.
Метою статті є дослідження проблем та перспектив використання React у поєднанні з Redux під час створення вебзастосунків складної структури, оцінка переваг їх сумісного використання порівняно з аналогічними інструментами та розробка вебзастосунку «FarmerProducts».
Методами дослідження є основні методологічні підходи та технологічні засоби для розробки вебзастосунків. Такими методами, зокрема, є системний і порівняльний аналізи – для виявлення особливостей створення вебзастосунків; метод експертних оцінок, який передбачає аналіз літературних джерел та інформаційних ресурсів, проведення інтерв’ю та опитування експертів, а також процеси розробки й тестування масштабованих і високопродуктивних вебзастосунків на основі використання REACT та REDUX.
Новизною дослідження є аналіз сучасного інструментарію (React, Angular, Vue.js) з розробки вебзастосунків, визначення проблем та перспектив їх застосування, створення авторського вебзастосунку (за допомогою React та Redux), який охоплює інтуїтивно зрозумілий інтерфейс, гнучку базу даних, спрощуючи процес роботи із застосунком завдяки використанню стеку сучасних технологій.
Висновки. У роботі проаналізовано проблеми та перспективи використання сучаного інструментарію розробки вебзастосунків; приділено основну увагу React, який підходить для різних проєктів; проведено порівняльний аналіз React з Angular, Vue.js та Svelte, визначено їхні основні характеристики, переваги, недоліки; продемонстровано залежність вибору інструментарію від контексту проєкту (React у поєднанні з Redux може забезпечити оптимальний баланс між продуктивністю, гнучкістю та масштабованістю); описано авторський вебзастосунок – інтернет-магазин «FarmerProducts»; визначено подальші шляхи вдосконалення цього вебзастосунку.
Посилання
Angular (web framework), n.d. Wikipedia. [online] Avialable at: <https://en.wikipedia.org/wiki/Angular_(web_framework)> [Accessed 01 March 2025].
Armstrong, L., 2020. Using Vue in jQuery and JavaScript Sites. DEV, [ online] 1 March. Avialable at: <https://dev.to/workingwebsites/using-vue-in-jquery-and-javascript-sites-1ib7> [Accessed 01 March 2025].
Dave Ceddia, 2019. Introduction to Svelte. [online] 24 July. Avialable at: <https://daveceddia.com/svelte-intro/> [Accessed 01 March 2025].
Developer Survey, n.d. [online] Avialable at: <https://survey.stackoverflow.co/2023/#section-admired-and-desired-web-frameworks-and-technologies> [Accessed 01 March 2025].
Di Gese, I., 2019. jQuery isn’t useful anymore. Here’s why. Do we still need jQuery to DOM-script web pages?. Medium, [online] 29 September. Avialable at: <https://javascript.plainenglish.io/jquery-will-die-soon-heres-why-976a6b8105e1> [Accessed 01 March 2025].
Doglio, F., n.d. Top 7 Frontend Frameworks to Use in 2025: Pro Advice. Roadmap.sh. [online] Avialable at: <https://roadmap.sh/frontend/frameworks> [Accessed 01 March 2025].
facebook/react, n.d. GitHub. [online] Avialable at: <https://github.com/facebook/react> [Accessed 01 March 2025].
Gorilla Logic, 2020. How to Achieve Aspect-Oriented Programming (AOP) in Angular 2+ Gorilla Logic, [blog] 6 February. Avialable at: <https://gorillalogic.com/blog-and-resources/how-to-achieve-aspect-oriented-programming-aop-in-angular-2> [Accessed 01 March 2025].
Guest, 2021. What is React JS? Simpat Tech, [online] 23 August. Avialable at: <https://simpat.tech/what-is-react/> [Accessed 01 March 2025].
Hernandez, I., 2024. Svelte vs. React: The Ultimate JavaScript Framework Showdown. Dreamhost, [online] 14 August. Avialable at: <https://www.dreamhost.com/blog/svelte-vs-react/> [Accessed 01 March 2025].
Patel, K., 2020. Vue JS FAQs. Francium Tech, [blog] 11 April. Avialable at: <https://blog.francium.tech/vue-js-faqs-ddf744dd4093> [Accessed 01 March 2025].
Prasandeep, 2024. How To Integrate Redux with React Based Application: A Step By Step Tutorial. Semaphore, [online] 31 January. Avialable at: <https://semaphore.io/blog/redux-react> [Accessed 01 March 2025].
React Community, n.d. [online] Avialable at: <https://react.dev/community> [Accessed 01 March 2025].
React Router Official Documentation, n.d. [online] Avialable at: <https://reactrouter.com/> [Accessed 01 March 2025].
Ready to use Material Design components, n.d. [online] Avialable at: <https://mui.com/material-ui/?srsltid=AfmBOora8qN_ab1KonqyHwKXn3saxNOXMCfK_9sjV7Ng-qGC8FmCKxUc> [Accessed 01 March 2025].
Virtual DOM and Internals, n.d. React. [online] Avialable at: <https://uk.legacy.reactjs.org/docs/faq-internals.html> [Accessed 01 March 2025].
Ways of Using Vue, n.d. Vue.js. [online] Avialable at: <https://vuejs.org/guide/extras/ways-of-using-vue> [Accessed 01 March 2025].
What is dirty checking in AngularJs and how does it work?, n.d. Quora. [online] Avialable at: <https://www.quora.com/What-is-dirty-checking-in-AngularJs-and-how-does-it-work> [Accessed 01 March 2025].
##submission.downloads##
Опубліковано
Як цитувати
Номер
Розділ
Ліцензія

Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
Автори зберігають авторські права на статтю та одночасно надають журналу право його першої публікації на умовах ліцензії Creative Commons Attribution License, яка дозволяє іншим особам вільно поширювати опубліковану статтю з обов’язковим посиланням на її авторів та першу публікацію.
Журнал дозволяє авторам зберігати авторські права і права на публікації без обмежень.
Автор опублікованої статті має право поширювати інформацію про неї та розміщувати посилання на роботу в електронному репозитарії установи.