This diploma thesis compares the development of a moodboard web application using native JavaScript and the React library. Two functionally equivalent implementations were developed, both allowing the user to add, move, resize, and delete images and text elements on a digital canvas. The Konva.js library was used for canvas rendering in both cases.
The comparison covered four aspects: development paradigms, developer experience, scalability, and performance. Performance was measured using Chrome DevTools on the production build of each application with one hundred and five hundred images, measuring long tasks, scripting time, garbage collection, and frames per second.
The native JavaScript implementation proved to be more performant. With five hundred images, React recorded long tasks and nearly twice the garbage collection time, most likely a consequence of the overhead introduced by the virtual DOM and state management system. Nevertheless, React offers clear advantages in developer experience and scalability - its component architecture, declarative approach, and rich ecosystem of external libraries significantly simplify development and long-term maintenance.
This thesis contributes to the understanding of practical differences between native web technologies and modern libraries in the context of interactive web application development. The findings are relevant for developers facing technology decisions in new projects, as they provide a concrete comparison based on measurable results.
|
