Integrating Modern Front-end Methodologies and Workflow in the Context of E-commerce Systems
Baidauletov, Dair; Salehin, Fayjus (2020)
Baidauletov, Dair
Salehin, Fayjus
2020
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202003314220
https://urn.fi/URN:NBN:fi:amk-202003314220
Tiivistelmä
This thesis investigates modern front-end development methodologies and workflow in the context of e-commerce platforms. It aims to improve the development cycles in the agile team’s workflow and overall quality and efficiency of delivering e-commerce solutions. The research was commissioned by Vaimo Finland Oy, the omnichannel e-commerce solution provider. The company has been looking for new technologies and tools that can help to build Progressive Web Applications with support for the Magento platform.
The latest web development technologies, namely PWA, were integrated into the e-commerce infrastructure. Vue Storefront was used as a PWA storefront solution with Magento in the back-end. The benefits for clients and development teams were researched and assessed. The development of the components, installation, and configuration of third-party modules, building and deploying procedures were tested, documented and applied during the implementation of the project. Potential improvements in the current workflow with the help of modern web technologies were studied. Automated unit and functional testing, accessibility and performance evaluation, a realization of the design system for creating sustainable component library were tested, and their effects on the collaboration of developers, QA and UI/UX engineers were studied and compared with traditional workflow.
The research resulted in a number of positive discoveries in favor of PWA storefronts. Benefits of headless architecture improved the key performance metrics of the web application and separation of concerns between front-end and back-end developers. The continuous integration time was shortened to less than 10 minutes with the help of headless architecture and existing DevOps practices. Automated web testing has proved to be helpful in improving quality engineering in the development cycles, and developing design systems was found to be useful for improving the collaboration between designers and front-end developers.
The latest web development technologies, namely PWA, were integrated into the e-commerce infrastructure. Vue Storefront was used as a PWA storefront solution with Magento in the back-end. The benefits for clients and development teams were researched and assessed. The development of the components, installation, and configuration of third-party modules, building and deploying procedures were tested, documented and applied during the implementation of the project. Potential improvements in the current workflow with the help of modern web technologies were studied. Automated unit and functional testing, accessibility and performance evaluation, a realization of the design system for creating sustainable component library were tested, and their effects on the collaboration of developers, QA and UI/UX engineers were studied and compared with traditional workflow.
The research resulted in a number of positive discoveries in favor of PWA storefronts. Benefits of headless architecture improved the key performance metrics of the web application and separation of concerns between front-end and back-end developers. The continuous integration time was shortened to less than 10 minutes with the help of headless architecture and existing DevOps practices. Automated web testing has proved to be helpful in improving quality engineering in the development cycles, and developing design systems was found to be useful for improving the collaboration between designers and front-end developers.