Skip to content

Commit 39469ce

Browse files
issackjohnLuis Pardo
issackjohn
and
Luis Pardo
authored
Add TodoMVC with indexedDB storage (#531)
--------- Co-authored-by: Luis Pardo <lpardosixtos@microsoft.com>
1 parent 6cd6735 commit 39469ce

70 files changed

Lines changed: 12055 additions & 4 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎experimental/javascript-wc-indexeddb/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store
2+
/node_modules

‎experimental/javascript-wc-indexeddb/README.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Speedometer 3.0: TodoMVC: Web Components IndexedDB
2+
3+
## Description
4+
5+
A todoMVC application implemented with native web components and indexedDB as the backing storage.
6+
It utilizes custom elements and html templates to build reusable components.
7+
8+
In contrast to other workloads, this application uses an updated set of css rules and an optimized dom structure to ensure the application follows best practices in regards to accessibility.
9+
10+
### Benchmark steps
11+
12+
In contrast to other versions of the todoMVC workload, this one only shows 10 todo items at a time.
13+
14+
#### Add 100 items.
15+
16+
All the items are added to the DOM and to the database, it uses CSS to show only 10 of the items on screen.
17+
18+
The measured time stops when the last item has been added to the DOM, it doesn't measure the time spent to complete the database update.
19+
20+
#### Complete 100 items.
21+
22+
The benchmark runs a loop of 10 iterations. On each iteration 10 items are marked completed (in the DOM and in the database), and the "Next page" button is clicked. When moving to the next page the items in the "current page" are deleted from the DOM.
23+
24+
The measured time stops when the last item has been marked as completed, it doesn't measure the time spent to complete the database update.
25+
26+
#### Delete 100 items.
27+
28+
The benchmarks runs a loop of 10 iterations. On each iteration the 10 items in the current page are deleted (from the DOM and the database), and the "Previous page" button is clicked.
29+
30+
When moving to the previous page the previous 10 items are loaded from the database, this is included in the measured time.
31+
32+
## Storage Options
33+
34+
This application supports two different IndexedDB implementations that can be selected via URL search parameters:
35+
36+
- **Vanilla IndexedDB** (default): Uses the native IndexedDB API
37+
- Access via: `http://localhost:7005/?storageType=vanilla` or `http://localhost:7005/`
38+
- **Dexie.js**: Uses the Dexie.js wrapper library for IndexedDB
39+
- Access via: `http://localhost:7005/?storageType=dexie`
40+
41+
Simply use the URL parameters to switch between implementations. The database will be reset when switching between storage types.
42+
43+
Navigation within the app uses simple hash-based routes like `#/active`, `#/completed`, or `#/` for all todos.
44+
45+
## Built steps
46+
47+
A simple build script copies all necessary files to a `dist` folder.
48+
It does not rely on compilers or transpilers and serves raw html, css and js files to the user.
49+
50+
```
51+
npm run build
52+
```
53+
54+
## Requirements
55+
56+
The only requirement is an installation of Node, to be able to install dependencies and run scripts to serve a local server.
57+
58+
```
59+
* Node (min version: 18.13.0)
60+
* NPM (min version: 8.19.3)
61+
```
62+
63+
## Local preview
64+
65+
```
66+
terminal:
67+
1. npm install
68+
2. npm run dev
69+
70+
browser:
71+
1. http://localhost:7005/
72+
```

‎experimental/javascript-wc-indexeddb/dist/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta name="description" content="A TodoMVC workload app for Speedometer!" />
7+
<title>TodoMVC: JavaScript Web Components</title>
8+
<link rel="stylesheet" href="styles/global.css" />
9+
<link rel="stylesheet" href="styles/header.css" />
10+
<link rel="stylesheet" href="styles/footer.css" />
11+
<!-- load these first, so that they are registered by the time the app components needs them -->
12+
<script type="module" src="src/components/todo-topbar/todo-topbar.component.js"></script>
13+
<script type="module" src="src/components/todo-list/todo-list.component.js"></script>
14+
<script type="module" src="src/components/todo-bottombar/todo-bottombar.component.js"></script>
15+
<script type="module" src="src/components/todo-app/todo-app.component.js"></script>
16+
</head>
17+
18+
<body>
19+
<header class="header">
20+
<a href="#" style="text-decoration: none"><h1 class="title">todos</h1></a>
21+
</header>
22+
<todo-app></todo-app>
23+
<footer class="footer">
24+
<p class="footer-text">Click on input field to write your todo.</p>
25+
<p class="footer-text">At least one character is needed to be a valid entry.</p>
26+
<p class="footer-text">Press 'enter' to add the todo.</p>
27+
<p class="footer-text">Double-click to edit a todo</p>
28+
</footer>
29+
<script type="module" src="src/index.mjs"></script>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)