Todo List

This tutorial guides you through creating the same simple Todo List application using three different coding styles available in Neo.mjs. This will help you understand the flexibility of the framework and choose the approach that best fits your project or personal preference.

1. HTML Style

This first version demonstrates how you can build a component in a way that might feel familiar if you have a background in traditional HTML and JavaScript. It directly constructs and manipulates a vdom (Virtual DOM) object that mirrors an HTML structure. Event handling is set up manually using DOM listeners. This approach offers fine-grained control and is useful for understanding the fundamentals of Neo.mjs's vdom system.

2. Functional Style

This second version showcases a more modern and concise way to build components using a functional approach. It leverages hooks like useConfig for state management and useEvent for handling DOM events, resulting in more declarative and readable code. This style is heavily inspired by concepts like React Hooks and is ideal for creating self-contained, stateful components with minimal boilerplate.

3. Classic Neo Style

This final version illustrates the classic, object-oriented approach to building UIs in Neo.mjs. It separates concerns by using dedicated classes for different parts of the application: a Store to manage the data, a Model to define the data structure, and Container with child components (List, Toolbar, TextField) to create the view. This powerful, structured approach is well-suited for larger, more complex applications where a clear separation of data, logic, and presentation is beneficial.