Handling unidirectional data flow in a React.js application
Marttila, Riku (2016)
2016
Tietotekniikan koulutusohjelma
Tieto- ja sähkötekniikan tiedekunta - Faculty of Computing and Electrical Engineering
This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Hyväksymispäivämäärä
2016-06-08
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tty-201605254133
https://urn.fi/URN:NBN:fi:tty-201605254133
Tiivistelmä
The scale and complexity of web applications is growing as applications move more and more to the users' browser instead of the server. New types of web applications called single-page applications are gaining popularity because they provide a good user experience. In a single-page application the application code is loaded to the user's browser on initial start up. After this navigation and other operations are executed in the users browser. Only additional needed data is fetched from the server in the background.
As applications get more complex, frameworks and libraries are needed to aid building them. Frameworks are a base that applications can be built on top of. They provide generic functionality that helps speed up the development process. When building applications a particular question arises, how to handle the data flow from the server to the user, and how to handle updates if the data changes.
In this thesis the target was to examine how to handle the data flow in a user interface library called React.js. Since React.js is a UI library, it needs application architecture to handle the data flow. In this thesis an example application is created using application architecture called Flux. The same application is also created using an improved version of Flux called Redux. Since the exactly same example is implemented with both alternatives, they can be compared with each other.
Based on the examined applications it can be clearly said that both, Flux and Redux, implement the same architecture at a general level. The example applications were similar, but it was visible that Redux is an improved version of the Flux architecture. This could be seen especially in the use of helper methods in parts that are verbose and error-prone in the Flux version. As a conclusion it was noted that instead of the original Flux architecture, Redux could have been compared with another improved implementation of Flux.
As applications get more complex, frameworks and libraries are needed to aid building them. Frameworks are a base that applications can be built on top of. They provide generic functionality that helps speed up the development process. When building applications a particular question arises, how to handle the data flow from the server to the user, and how to handle updates if the data changes.
In this thesis the target was to examine how to handle the data flow in a user interface library called React.js. Since React.js is a UI library, it needs application architecture to handle the data flow. In this thesis an example application is created using application architecture called Flux. The same application is also created using an improved version of Flux called Redux. Since the exactly same example is implemented with both alternatives, they can be compared with each other.
Based on the examined applications it can be clearly said that both, Flux and Redux, implement the same architecture at a general level. The example applications were similar, but it was visible that Redux is an improved version of the Flux architecture. This could be seen especially in the use of helper methods in parts that are verbose and error-prone in the Flux version. As a conclusion it was noted that instead of the original Flux architecture, Redux could have been compared with another improved implementation of Flux.