New Features and Updates for dncomponents!

[nikola]

Here are the latest updates to the dncomponents project. Check it out on GitHub: dncomponents

New Reactivity Features

This release brings some powerful new features inspired by popular frameworks like Vue, React, and Angular:

• Reactivity Data-binding system that synchronizes the state of the application with DOM.
  
• Component based Organizing code into reusable UI components encapsulating their own logic, styling, and structure.
  
• Two-way data binding Changes in the model affect the view and vice versa.
  
• Loops Iterating over arrays and objects using the dn-loop directive, handy for rendering lists and tables dynamically in the DOM.
  
• Conditional Rendering With dn-if, dn-if-else dn-else directives, you can conditionally render elements based on the value of expressions or data properties.

For more details, read more here.

Java 21 Support with TeaVM

The dncomponents project has been ported to TeaVM. You can find it on GitHub: dncomponents-tea

Now you have the option to choose between the GWT or TeaVM compiler.

The most notable difference at this moment is TeaVM's support for Java 21 language features.

Components Update

Rich set of ready-to-use components remains stable with continuous bug fixes. This includes Lists, Trees, Tables, and more, which you can explore here.

To run those examples locally follow instructions here.

In my humble opinion, thanks to dncomponents' HTMLBinder, the ability to organize code around components—where HTML markup, CSS, tags, and logic are all in one class—along with the continually improving features of the Java language, compilers like GWT or TeaVM, makes web development in Java competitive with current popular JavaScript/TypeScript frameworks.

//language=html
@Component(template = """
      <div class='helloCss'>
        <h2>*** HelloComponent ***</h2>
        <h1>Hello, {{name}}!</h1>
      </div>
""",
//language=css
css = """
        .helloCss {
           background: #e69ff1;
           padding: 20px;
           border: 1px solid gray;
         }
""",
tag = "hello-component"
)

public class HelloComponent implements IsElement {
   HtmlBinder<HelloComponent> binder = HtmlBinder.create(HelloComponent.class, this);

   String name = "All";

   public HelloComponent() {
      binder.bindAndUpdateUi();
   }

   @Override
   public HTMLElement asElement() {
      return binder.getRoot();
   }
}

[Jeff Hill]

Nicely Done!  Excited to try this out.

[nikola]

  Here is the new release of dncomponents with bug fixes and improvements. And an interesting  example of TodoMVC application written in Java with dncomponents TodoComponent.java Very comparable to Vue TodoMVC  :)