Django IDOM
django-idom allows Django to integrate with IDOM, a package inspired by ReactJS for creating responsive web interfaces in pure Python.
You can try IDOM now in a Jupyter Notebook: 
Install Django IDOM
pip install django-idom
Django Integration
To integrate IDOM into your application you'll need to modify or add the following files to your_project:
your_project/
├── __init__.py
├── asgi.py
├── settings.py
├── urls.py
└── example_app/
├── __init__.py
├── idom.py
├── templates/
│ └── your-template.html
└── urls.py
asgi.py
Follow the channels installation guide in order to create ASGI websockets within Django. Then, we will add a path for IDOM's websocket consumer using IDOM_WEBSOCKET_PATH.
Note: If you wish to change the route where this websocket is served from, see the available settings.
import os
from django.core.asgi import get_asgi_application
from django_idom import IDOM_WEBSOCKET_PATH
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "test_app.settings")
# Fetch ASGI application before importing dependencies that require ORM models.
http_asgi_app = get_asgi_application()
from channels.routing import ProtocolTypeRouter, URLRouter
application = ProtocolTypeRouter(
{
"http": http_asgi_app,
"websocket": URLRouter(
# add a path for IDOM's websocket
[IDOM_WEBSOCKET_PATH]
),
}
)
settings.py
In your settings you'll need to add django_idom to the INSTALLED_APPS list:
INSTALLED_APPS = [
...,
"django_idom",
]
You may configure additional options as well:
# the base URL for all IDOM-releated resources
IDOM_BASE_URL: str = "_idom/"
# Set cache size limit for loading JS files for IDOM.
# Only applies when not using Django's caching framework (see below).
IDOM_WEB_MODULE_LRU_CACHE_SIZE: int | None = None
# Configure a cache for loading JS files
CACHES = {
# Configure a cache for loading JS files for IDOM
"idom_web_modules": {"BACKEND": ...},
# If the above cache is not configured, then we'll use the "default" instead
"default": {"BACKEND": ...},
}
urls.py
You'll need to include IDOM's static web modules path using IDOM_WEB_MODULES_PATH. Similarly to the IDOM_WEBSOCKET_PATH. If you wish to change the route where this websocket is served from, see the available settings.
from django_idom import IDOM_WEB_MODULES_PATH
urlpatterns = [
IDOM_WEB_MODULES_PATH,
...
]
example_app/components.py
This is where, by a convention similar to that of views.py, you'll define your IDOM components. Ultimately though, you should feel free to organize your component modules you wish. The components created here will ultimately be referenced by name in your-template.html. your-template.html.
import idom
@idom.component
def Hello(greeting_recipient): # component names are camelcase by convention
return Header(f"Hello {greeting_recipient}!")
example_app/templates/your-template.html
In your templates, you may inject a view of an IDOM component into your templated HTML by using the idom_component template tag. This tag which requires the name of a component to render (of the form module_name.ComponentName) and keyword arguments you'd like to pass it from the template.
idom_component module_name.ComponentName param_1="something" param_2="something-else"
In context this will look a bit like the following...
{% load static %}
{% load idom %}
<html>
<body>
...
{% idom_component "your_project.example_app.components.Hello" greeting_recipient="World" %}
body>
html>
example_app/views.py
You can then serve your-template.html from a view just like any other.
from django.http import HttpResponse
from django.template import loader
def your_view(request):
context = {}
return HttpResponse(
loader.get_template("your-template.html").render(context, request)
)
example_app/urls.py
Include your view in the list of urlpatterns
from django.urls import path
from .views import your_view # define this view like any other HTML template view
urlpatterns = [
path("", your_view),
...
]
Developer Guide
If you plan to make code changes to this repository, you'll need to install the following dependencies first:
- NPM for installing and managing Javascript
- ChromeDriver for testing with Selenium
Once done, you should clone this repository:
git clone https://github.com/idom-team/django-idom.git
cd django-idom
Then, by running the command below you can:
-
Install an editable version of the Python code
-
Download, build, and install Javascript dependencies
pip install -e . -r requirements.txt
Finally, to verify that everything is working properly, you'll want to run the test suite.
Running The Tests
This repo uses Nox to run scripts which can be found in noxfile.py. For a full test of available scripts run nox -l. To run the full test suite simple execute:
nox -s test
To run the tests using a headless browser:
nox -s test -- --headless
2.7k Jan 7, 2023
1.1k Dec 14, 2022
167 Nov 10, 2022
21 Dec 17, 2022
3 Dec 11, 2022
1 Jan 31, 2022
4 Nov 18, 2021
4.7k Jan 2, 2023
3 Sep 20, 2021
31 Aug 9, 2022
2.8k Jan 2, 2023
909 Dec 26, 2022
10k Dec 31, 2022
68 Oct 19, 2022
139 Dec 5, 2022
8 Oct 28, 2022
51 Sep 15, 2022
3 Aug 8, 2021
8 Jun 27, 2022