Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mindfiredigital/iframevswebcomponents
The project aims to deliver a comprehensive performance comparison guide for developers contemplating the use of IFrames or Web Components in their web applications. The findings will be documented, highlighting strengths and weaknesses of each approach in different scenarios.
https://github.com/mindfiredigital/iframevswebcomponents
Last synced: about 2 months ago
JSON representation
The project aims to deliver a comprehensive performance comparison guide for developers contemplating the use of IFrames or Web Components in their web applications. The findings will be documented, highlighting strengths and weaknesses of each approach in different scenarios.
- Host: GitHub
- URL: https://github.com/mindfiredigital/iframevswebcomponents
- Owner: mindfiredigital
- License: mit
- Created: 2023-12-07T08:15:26.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-11T16:47:54.000Z (12 months ago)
- Last Synced: 2024-01-11T22:38:20.943Z (12 months ago)
- Language: HTML
- Size: 5.61 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Iframe Vs Web Components
This open-source software (FOSS) project focuses on evaluating and comparing the performance characteristics of two widely used web development techniques: IFrames and Web Components.
## Table of Contents
- [Project Name](#project-name)
- [Table of Contents](#table-of-contents)
- [Description](#description)
- [Features](#features)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgments](#acknowledgments)
## Description
The project aims to deliver a comprehensive performance comparison guide for developers contemplating the use of IFrames or Web Components in their web applications. The findings will be documented, highlighting strengths and weaknesses of each approach in different scenarios.
## Features
- Add Product
- View List of Products
- Click a particular product row to show the details of that product.
- Latest Product Added and Total no. of products.
## Getting Started
Instructions on how to get started with your project, including installation, prerequisites, and basic usage.
### Prerequisites
- Knowledge of basic html5 templates, css and javascript.
- Knowledge about Iframes and usages.
- Knowledge of web components and usages.
### Installation
#### Project setup
```
npm install
```
#### Setup .env file
```
create a .env file in the same path of env.example and put the same parameters with the appropriate values.
```
#### Compiles and minifies for production
```
npm run build
```
## Usage
We are comparing performance between iframe and webcomponents. Here is the data we have collected:
| Type | Load Time (in ms) |
| -------------------------- | ----------------- |
| Iframe with Web Components | 0.79 |
| Iframe with HTML | 0.70 |
| Only Web Components | 0.50 |
| Single HTML | 0.80 |
## Contributing
See [here](CONTRIBUTING.md) for how to contribute to this project.
## License
This project is under the MIT license. See the [LICENSE](LICENSE.md) file for details.
## Acknowledgments
Lakin Mahapatra, thanks for leading this project and sharing useful paths and resources.