added django cotton

[wrabit]

Project Information

1. Django Cotton

2. https://django-cotton.com/

3. Description:
   Cotton gives Django templates a new lease of life. It enables us to spin up UI's from truly modular and re-usable components and features many well-adopted techniques from modern frontend frameworks. Increases productivity with an expressive syntax.

---

Criteria

Please answer the following questions about the project you are submitting. This will help us evaluate if the project should be included in the Awesome Django list.

Note: If your project is only a few months old or has under 50 to 100 stars on GitHub, it may NOT meet the criteria for inclusion in the Awesome Django list. We recommend that you promote your project more and then consider a submission at a later date when it has gained more visibility and community support.

1. Is the project new?

   • Yes
   • No

2. How long has the project been maintained?
   7 months (6 months closed-source, release history on PyPi https://pypi.org/project/django-cotton/#history)

3. How many releases has it had if it's a library or package?
   7 since public https://github.com/wrabit/django-cotton/releases

4. Are you the author or are you submitting the project on behalf of a company?

   • I am the author
   • I am submitting on behalf of a company
   • Other (please specify)

5. What makes it awesome?

• A fresh approach to UI composition in Django.
• Introduces a different yet familiar syntax
• HTML-like tags provide better coherence (thanks to nested structure) and improved productivity (thanks to native support from editors for autocomplete and autoclosing).
• Can effectively replace {% block, extends, include %} and break free from strong coupling.
• Allows ad-hoc in-component variable declaration to set defaults for UI component state
• It's built on top of Django template system, it does't replace it so it's perfectly fine to embed any django template expression.

Check https://django-cotton.com/docs/form-fields for an example walkthrough

Additional Information

Please provide any additional information you believe is relevant to the project or its evaluation for inclusion in the Awesome Django list. This might include information about the project's documentation, test coverage, community support, or any unique features that set it apart from other Django projects.

Thorough testing

• All features are tested

An example component

In the view:

<c-form-group 
  label="First name" <!-- // Standard attribute -->
  required <!-- // Boolean attribute -->
  :config="{'items': 4}"  <!-- resolves to Dict -->
>
    <input type="text" /> <!-- // Is the default slot content -->

    <c-slot name="icon">
      <svg ... /> <!-- // HTML and tempalte expression becomes available as {{ icon }} in component template
    </c-slot>
</c-form-group>

(Note we're not restricted to since-line component definitions)

A simplified component template might look like this:

<div class="border">
  <label>{{ label }}</label>

  {% if icon %}
    {{ icon }}
  {% endif %}

  {{ slot }}

  {% if required is True %}
    *
  {% endif %}

    <script>
      // Just to show possibility of dynamic attributes
      const lib SomeJsLib({{ config|json_encode }})
    </script>
</div>

It can effectively replace Django's tightly coupled native Block and Extends:

{% extends "base.html" %} 

{% block title %}{{ section.title }}{% endblock %}

{% block content %}
  <p>Here be content</p>
{% endblock %}

to

<c-base title="{{ section.title }}">
  <p>Here be content</p>
</c-base>

Performance

• Dynamic caching keeps things performant. Here's a benchmark from rendering 1000 like for like (as much as possible) components:
  • Django native tags using extend + block: 0.43s
  • Compiled Cotton Template: 0.34s
  • Cotton Cached: 0.15s

Productivity boosted by:

• Familiar syntax + code editor support (unlike all other component packages, except Jinjax which requires to configure and switch to Jinja engine)
• No component registration required, just create component file and ready to use it (unlike Slippers)
• No backend component required (unlike django-components)

https://django-cotton.com

[jefftriplett]

@wrabit looks neat. Is Cotton an existing template system or where does the name come from?

[wrabit]

@jefftriplett not existing, I took inspiration from a number of frameworks I've used in the past, Vue, Svelte but a big one being Laravel's blade components (anonymous mode) which I found to be super productive. I recently switched to python/django and couldn't find anything suitable so I built it alongside a project. Cotton name completely made up and it just sounded good with another project I'm workong on.

[wrabit]

This article might provide a bit more insight

https://www.linkedin.com/pulse/introducing-django-cotton-revolutionizing-ui-will-abbott-5earf?utm_source=share&utm_medium=member_ios&utm_campaign=share_via