mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REM] examples: remove benchmarks app
This will be moved in a different branch closes #44
This commit is contained in:
@@ -1,45 +0,0 @@
|
|||||||
.main {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 200px 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-thing {
|
|
||||||
background-color: gray;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-thing button {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-thing .counter span {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-thing .counter button {
|
|
||||||
width: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-thing {
|
|
||||||
padding: 20px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Message widget */
|
|
||||||
.message .author {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message {
|
|
||||||
width: 400px;
|
|
||||||
background-color: lightblue;
|
|
||||||
margin: 10px 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
import { Message } from "./message.js";
|
|
||||||
import { messages } from "./data.js";
|
|
||||||
|
|
||||||
const template = `
|
|
||||||
<div class="main">
|
|
||||||
<div class="left-thing">
|
|
||||||
<div class="counter">
|
|
||||||
<button t-on-click="increment(-1)">-</button>
|
|
||||||
<span style="font-weight:bold">Value: <t t-esc="state.messages.length"/></span>
|
|
||||||
<button t-on-click="increment(1)">+</button>
|
|
||||||
</div>
|
|
||||||
<button t-on-click="setMessageCount(10)">10 messages</button>
|
|
||||||
<button t-on-click="setMessageCount(20)">20 messages</button>
|
|
||||||
<button t-on-click="setMessageCount(500)">500 messages</button>
|
|
||||||
<button t-on-click="setMessageCount(1000)">1000 messages</button>
|
|
||||||
<button t-on-click="setMessageCount(5000)">5000 messages</button>
|
|
||||||
<button t-on-click="setMessageCount(15000)">15000 messages</button>
|
|
||||||
</div>
|
|
||||||
<div class="right-thing">
|
|
||||||
<div class="content">
|
|
||||||
<t t-foreach="state.messages" t-as="message">
|
|
||||||
<t t-widget="Message" t-att-key="message.id" t-props="message" t-on-remove_message="removeMessage"/>
|
|
||||||
</t>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
export class App extends owl.Component {
|
|
||||||
constructor(parent, props) {
|
|
||||||
super(parent, props);
|
|
||||||
this.inlineTemplate = template;
|
|
||||||
this.widgets = { Message };
|
|
||||||
this.state = {
|
|
||||||
messages: messages.slice(0, 10)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
setMessageCount(n) {
|
|
||||||
this.state.messages = messages.slice(0, n);
|
|
||||||
}
|
|
||||||
|
|
||||||
removeMessage(data) {
|
|
||||||
const index = messages.findIndex(m => m.id === data.id);
|
|
||||||
this.state.messages.splice(index, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
increment(delta) {
|
|
||||||
const n = this.state.messages.length + delta;
|
|
||||||
this.setMessageCount(n);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
export class Counter extends owl.Component {
|
|
||||||
inlineTemplate = `
|
|
||||||
<div>
|
|
||||||
<button t-on-click="increment(-1)">-</button>
|
|
||||||
<span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
|
|
||||||
<button t-on-click="increment(1)">+</button>
|
|
||||||
</div>`;
|
|
||||||
constructor(parent, props) {
|
|
||||||
super(parent, props);
|
|
||||||
this.state = {
|
|
||||||
counter: props.initialState || 0
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
increment(delta) {
|
|
||||||
this.state.counter += delta;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
export const messages = [];
|
|
||||||
|
|
||||||
const authors = ["Aaron", "David", "Vincent"];
|
|
||||||
const content = [
|
|
||||||
"Lorem ipsum dolor sit amet",
|
|
||||||
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem",
|
|
||||||
"Excepteur sint occaecat cupidatat non proident"
|
|
||||||
];
|
|
||||||
|
|
||||||
function chooseRandomly(array) {
|
|
||||||
const index = Math.floor(Math.random() * array.length);
|
|
||||||
return array[index];
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let i = 1; i < 16000; i++) {
|
|
||||||
messages.push({
|
|
||||||
id: i,
|
|
||||||
author: chooseRandomly(authors),
|
|
||||||
msg: `${i}: ${chooseRandomly(content)}`,
|
|
||||||
likes: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>Odoo WebCore Benchmarks App</title>
|
|
||||||
<link rel="icon" href="data:,">
|
|
||||||
|
|
||||||
<!-- Application JS/CSS -->
|
|
||||||
<script src="/owl.js"></script>
|
|
||||||
<link rel="stylesheet" href="/app.css">
|
|
||||||
<script type="module" src="/main.js"></script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import { App } from "./app.js";
|
|
||||||
|
|
||||||
function createApp(el) {
|
|
||||||
const env = {
|
|
||||||
qweb: new owl.QWeb()
|
|
||||||
};
|
|
||||||
const app = new App(env, { initialState: 13 });
|
|
||||||
app.mount(el);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
|
||||||
createApp(document.body);
|
|
||||||
});
|
|
||||||
@@ -1,22 +0,0 @@
|
|||||||
import { Counter } from "./counter.js";
|
|
||||||
|
|
||||||
export class Message extends owl.Component {
|
|
||||||
inlineTemplate = `
|
|
||||||
<div class="message">
|
|
||||||
<span class="author"><t t-esc="props.author"/></span>
|
|
||||||
<span class="msg"><t t-esc="props.msg"/></span>
|
|
||||||
<button class="remove" t-on-click="removeMessage">Remove</button>
|
|
||||||
<t t-widget="Counter" t-props="{initialState: props.id}"/>
|
|
||||||
</div>`;
|
|
||||||
|
|
||||||
constructor(parent, props) {
|
|
||||||
super(parent, props);
|
|
||||||
this.widgets = { Counter };
|
|
||||||
}
|
|
||||||
|
|
||||||
removeMessage() {
|
|
||||||
this.trigger("remove_message", {
|
|
||||||
id: this.props.id
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
# Examples
|
|
||||||
|
|
||||||
This project features three example to illustrate how to work with the web-core framework:
|
|
||||||
|
|
||||||
- _benchmarks_ is a small application to test large number of widgets,
|
|
||||||
|
|
||||||
## Benchmarks
|
|
||||||
|
|
||||||
This example is just a playground to experiment/showcase some features of the framework, with large number of widgets.
|
|
||||||
|
|
||||||
```
|
|
||||||
npm run example:benchmarks:build # make a build in dist/examples/
|
|
||||||
npm run example:benchmarks:dev # make a build in dist/examples/, and make a live server to access it
|
|
||||||
```
|
|
||||||
|
|
||||||
The benchmarks application generates a large number of demo messages, and display them in a list, with a few buttons that can
|
|
||||||
be used to alter the number of visible widgets.
|
|
||||||
|
|
||||||
Note that each message is itself a widget, with a sub widget. This
|
|
||||||
example could be made faster (by not using subwidgets), but the point is to observe/measure the overhead of the Component class.
|
|
||||||
Reference in New Issue
Block a user