diff --git a/dev/overview/welcome/index.html b/dev/overview/welcome/index.html index b78a9508..e48710bc 100644 --- a/dev/overview/welcome/index.html +++ b/dev/overview/welcome/index.html @@ -1,4 +1,4 @@ - Welcome to Django Components - Django-Components
Skip to content

Welcome to Django Components

django-components

PyPI - Version PyPI - Python Version PyPI - License PyPI - Downloads GitHub Actions Workflow Status

django-components introduces component-based architecture to Django's server-side rendering. It combines Django's templating system with the modularity seen in modern frontend frameworks like Vue or React.

Features¤

  1. 🧩 Reusability: Allows creation of self-contained, reusable UI elements.
  2. 📦 Encapsulation: Each component can include its own HTML, CSS, and JavaScript.
  3. 🚀 Server-side rendering: Components render on the server, improving initial load times and SEO.
  4. 🐍 Django integration: Works within the Django ecosystem, using familiar concepts like template tags.
  5. ⚡ Asynchronous loading: Components can render independently opening up for integration with JS frameworks like HTMX or AlpineJS.

Potential benefits:

  • 🔄 Reduced code duplication
  • 🛠️ Improved maintainability through modular design
  • 🧠 Easier management of complex UIs
  • 🤝 Enhanced collaboration between frontend and backend developers

Django-components can be particularly useful for larger Django projects that require a more structured approach to UI development, without necessitating a shift to a separate frontend framework.

Quickstart¤

django-components lets you create reusable blocks of code needed to generate the front end code you need for a modern app.

Define a component in components/calendar/calendar.py like this: 

@register("calendar")
+ Welcome to Django Components - Django-Components      
  
  
  
 
  
 
 
 
 
  
 
 
 
 
 
  
 
 
 
 
       
Welcome to Django Components
 
django-components
 
PyPI - Version PyPI - Python Version PyPI - License PyPI - Downloads GitHub Actions Workflow Status
 
django-components introduces component-based architecture to Django's server-side rendering. It combines Django's templating system with the modularity seen in modern frontend frameworks like Vue or React.
 
Features¤
 
     
  1. 🧩 Reusability: Allows creation of self-contained, reusable UI elements.
    2.  
  2. 📦 Encapsulation: Each component can include its own HTML, CSS, and JavaScript.
    3.  
  3. 🚀 Server-side rendering: Components render on the server, improving initial load times and SEO.
    4.  
  4. 🐍 Django integration: Works within the Django ecosystem, using familiar concepts like template tags.
    5.  
  5. ⚡ Asynchronous loading: Components can render independently opening up for integration with JS frameworks like HTMX or AlpineJS.
    6.  
 
Potential benefits:
 
     
  • 🔄 Reduced code duplication
    •  
  • 🛠️ Improved maintainability through modular design
    •  
  • 🧠 Easier management of complex UIs
    •  
  • 🤝 Enhanced collaboration between frontend and backend developers
    •  
 
Django-components can be particularly useful for larger Django projects that require a more structured approach to UI development, without necessitating a shift to a separate frontend framework.
 
Quickstart¤
 
django-components lets you create reusable blocks of code needed to generate the front end code you need for a modern app. 
 
Define a component in components/calendar/calendar.py like this: 
@register("calendar")
 class Calendar(Component):
     template_name = "template.html"
 
@@ -7,4 +7,4 @@
 
 
With this template.html file:
 
<div class="calendar-component">Today's date is <span>{{ date }}</span></div>
 
 
Use the component like this:
 
{% component "calendar" date="2024-11-06" %}{% endcomponent %}
 
 
And this is what gets rendered:
 
<div class="calendar-component">Today's date is <span>2024-11-06</span></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)
 
Release notes¤
 
Read the Release Notes to see the latest features and fixes.
 
Community examples¤
 
One of our goals with django-components is to make it easy to share components between projects. If you have a set of components that you think would be useful to others, please open a pull request to add them to the list below.
  
Contributing and development¤
 
Get involved or sponsor this project - See here
 
Running django-components locally for development - See here
  
 
   
  
  
 
 
 
 
       
\ No newline at end of file
+

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)

Release notes¤

Read the Release Notes to see the latest features and fixes.

Community examples¤

One of our goals with django-components is to make it easy to share components between projects. If you have a set of components that you think would be useful to others, please open a pull request to add them to the list below.

Contributing and development¤

Get involved or sponsor this project - See here

Running django-components locally for development - See here

\ No newline at end of file diff --git a/versions.json b/versions.json index 3d368808..11734cce 100644 --- a/versions.json +++ b/versions.json @@ -1,7 +1,7 @@ [ { "version": "dev", - "title": "dev (58b3ad3)", + "title": "dev (2b938eb)", "aliases": [] }, {