Packaging complex web client in easily embeddable solution
Pekkanen, Tuomas (2022)
2022
Tietotekniikan DI-ohjelma - Master's Programme in Information Technology
Informaatioteknologian ja viestinnän tiedekunta - Faculty of Information Technology and Communication Sciences
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ä
2022-06-13
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:tuni-202205315371
https://urn.fi/URN:NBN:fi:tuni-202205315371
Tiivistelmä
Complex web applications require significant effort to be embedded by third parties to external websites. M-Files Corporation wants to make embedding the M-Files web client effortless for third parties. The existing supported embedding methods include using platform-specific add-ins that cannot be used outside the platform they are custom-made for. Third parties embedding M-Files to their own website would need technical skills and significant implementation effort to match the behavior of the add-in solutions. This thesis creates a generic add-in that can be effortlessly embedded into practically any external site.
Creating a generic solution requires that the solution supports the majority of modern browsers including their older versions. Browsers support varying versions of ECMAScript and not all browsers support all the features. Transpiling and polyfills are presented as a tool for ensuring compatibility with browsers by transforming the code to an older version of ECMAScript and including the browser's missing features in the solution code.
To implement the solution a framework is chosen. Frameworks are compared on the effort required to embed the result they create, their longevity, browser compatibility and flexibility with other tools. The framework must support transpiling and polyfills. From these criteria, Lit is chosen as the framework.
A prototype project is made with Lit to embed M-Files web client. The solution combines script-based embedding with an iframe to enable easy configuration. Website administrators can configure the solution with HTML element attributes and end users with a graphical configuration panel. To make including the solution to a website effortless, the created solution is bundled into a single script file that needs to be added to the third party website. In total 2 lines of code and minimal technical skills are required to embed the created solution.
Creating a generic solution requires that the solution supports the majority of modern browsers including their older versions. Browsers support varying versions of ECMAScript and not all browsers support all the features. Transpiling and polyfills are presented as a tool for ensuring compatibility with browsers by transforming the code to an older version of ECMAScript and including the browser's missing features in the solution code.
To implement the solution a framework is chosen. Frameworks are compared on the effort required to embed the result they create, their longevity, browser compatibility and flexibility with other tools. The framework must support transpiling and polyfills. From these criteria, Lit is chosen as the framework.
A prototype project is made with Lit to embed M-Files web client. The solution combines script-based embedding with an iframe to enable easy configuration. Website administrators can configure the solution with HTML element attributes and end users with a graphical configuration panel. To make including the solution to a website effortless, the created solution is bundled into a single script file that needs to be added to the third party website. In total 2 lines of code and minimal technical skills are required to embed the created solution.