mirror of
https://github.com/django-components/django-components.git
synced 2025-09-27 16:09:07 +00:00
docs: add perf section (#1002)
* docs: add perf section * refactor: add asv badge
This commit is contained in:
Juro Oravec
GitHub
parent
d5e45125dc
commit
81ac59f7fb
2 changed files with 45 additions and 5 deletions
26
README.md
26
README.md
|
|
@ -1,6 +1,6 @@
|
||||||
# <img src="https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg" alt="django-components" style="max-width: 100%; background: white; color: black;">
|
# <img src="https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg" alt="django-components" style="max-width: 100%; background: white; color: black;">
|
||||||
|
|
||||||
[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml)
|
[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml) [](https://django-components.github.io/django-components/latest/benchmarks/)
|
||||||
|
|
||||||
### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>
|
### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>
|
||||||
|
|
||||||
|
|
@ -86,6 +86,10 @@ And this is what gets rendered:
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Read on to learn about all the exciting details and configuration possibilities!
|
||||||
|
|
||||||
|
(If you instead prefer to jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject))
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
### Modern and modular UI
|
### Modern and modular UI
|
||||||
|
|
@ -278,6 +282,11 @@ Button.render(
|
||||||
)
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Handle large projects with ease
|
||||||
|
|
||||||
|
- Components can be infinitely nested.
|
||||||
|
- (Soon) Optimize performance with component-level caching
|
||||||
|
|
||||||
### Debugging features
|
### Debugging features
|
||||||
|
|
||||||
- **Visual component inspection**: Highlight components and slots directly in your browser.
|
- **Visual component inspection**: Highlight components and slots directly in your browser.
|
||||||
|
|
@ -291,7 +300,7 @@ Button.render(
|
||||||
|
|
||||||
- Install and use third-party components from PyPI
|
- Install and use third-party components from PyPI
|
||||||
- Or publish your own "component registry"
|
- Or publish your own "component registry"
|
||||||
- Highly customizable - Choose how the components are called in the template, and more:
|
- Highly customizable - Choose how the components are called in the template (and more):
|
||||||
|
|
||||||
```django
|
```django
|
||||||
{% component "calendar" date="2024-11-06" %}
|
{% component "calendar" date="2024-11-06" %}
|
||||||
|
|
@ -312,6 +321,19 @@ Button.render(
|
||||||
|
|
||||||
... or jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject).
|
... or jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject).
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
Our aim is to be at least as fast as Django templates.
|
||||||
|
|
||||||
|
As of `0.130`, `django-components` is ~4x slower than Django templates.
|
||||||
|
|
||||||
|
| | Render time|
|
||||||
|
|----------|----------------------|
|
||||||
|
| django | 68.9±0.6ms |
|
||||||
|
| django-components | 259±4ms |
|
||||||
|
|
||||||
|
See the [full performance breakdown](https://django-components.github.io/django-components/latest/benchmarks/) for more information.
|
||||||
|
|
||||||
## Release notes
|
## Release notes
|
||||||
|
|
||||||
Read the [Release Notes](https://github.com/django-components/django-components/tree/master/CHANGELOG.md)
|
Read the [Release Notes](https://github.com/django-components/django-components/tree/master/CHANGELOG.md)
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<img src="https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg" alt="django-components" style="max-width: 100%; background: white; color: black;">
|
<img src="https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg" alt="django-components" style="max-width: 100%; background: white; color: black;">
|
||||||
|
|
||||||
[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml)
|
[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml) [](/django-components/benchmarks/)
|
||||||
|
|
||||||
`django-components` combines Django's templating system with the modularity seen
|
`django-components` combines Django's templating system with the modularity seen
|
||||||
in modern frontend frameworks like Vue or React.
|
in modern frontend frameworks like Vue or React.
|
||||||
|
|
@ -40,7 +40,7 @@ Or a combination of Django template, Python, CSS, and Javascript:
|
||||||
```
|
```
|
||||||
|
|
||||||
```js title="components/calendar/calendar.js"
|
```js title="components/calendar/calendar.js"
|
||||||
document.querySelector(".calendar").onclick = function () {
|
document.querySelector(".calendar").onclick = () => {
|
||||||
alert("Clicked calendar!");
|
alert("Clicked calendar!");
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
@ -195,7 +195,7 @@ class Calendar(Component):
|
||||||
|
|
||||||
`django-components` makes intergration with HTMX, AlpineJS or jQuery easy by allowing components to be rendered as HTML fragments:
|
`django-components` makes intergration with HTMX, AlpineJS or jQuery easy by allowing components to be rendered as HTML fragments:
|
||||||
|
|
||||||
- Components's JS and CSS is loaded automatically when the fragment is inserted into the DOM
|
- Components's JS and CSS is loaded automatically when the fragment is inserted into the DOM.
|
||||||
|
|
||||||
- Expose components as views with `get`, `post`, `put`, `patch`, `delete` methods
|
- Expose components as views with `get`, `post`, `put`, `patch`, `delete` methods
|
||||||
|
|
||||||
|
|
@ -267,6 +267,11 @@ Button.render(
|
||||||
)
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Handle large projects with ease
|
||||||
|
|
||||||
|
- Components can be infinitely nested.
|
||||||
|
- (Soon) Optimize performance with component-level caching
|
||||||
|
|
||||||
### Debugging features
|
### Debugging features
|
||||||
|
|
||||||
- **Visual component inspection**: Highlight components and slots directly in your browser.
|
- **Visual component inspection**: Highlight components and slots directly in your browser.
|
||||||
|
|
@ -295,6 +300,19 @@ Button.render(
|
||||||
- Vue-like provide / inject system
|
- Vue-like provide / inject system
|
||||||
- Format HTML attributes with `{% html_attrs %}`
|
- Format HTML attributes with `{% html_attrs %}`
|
||||||
|
|
||||||
|
## Performance
|
||||||
|
|
||||||
|
Our aim is to be at least as fast as Django templates.
|
||||||
|
|
||||||
|
As of `0.130`, `django-components` is ~4x slower than Django templates.
|
||||||
|
|
||||||
|
| | Render time|
|
||||||
|
|----------|----------------------|
|
||||||
|
| django | 68.9±0.6ms |
|
||||||
|
| django-components | 259±4ms |
|
||||||
|
|
||||||
|
See the [full performance breakdown](https://django-components.github.io/django-components/latest/benchmarks/) for more information.
|
||||||
|
|
||||||
## Release notes
|
## Release notes
|
||||||
|
|
||||||
Read the [Release Notes](../release_notes.md)
|
Read the [Release Notes](../release_notes.md)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue