Welcome to Marko: A Robust Web Development Framework

Marko is a powerful and efficient UI library for creating highly optimized and dynamic user interfaces. It takes advantage of the latest web technologies to deliver server-side rendering, compilation of templates at build time, and the ability to create performant web applications.

Getting Started with Marko

To start using Marko, you can follow these steps:

  npm install @marko/run
  npm install @marko/template

Creating Your First Marko Component

  <template>
    <div>Hello World!</div>
  </template>

This simple yet powerful syntax showcases how you can create a basic “Hello World!” component using Marko.

Examples of Marko API

1. Conditional Rendering

  <template>
    <if(state.visible)>
      <div>Now you see me!</div>
    </if>
  </template>

2. Looping Constructs

  <template>
    <for|item| of=data.items>
      <div>${item}</div>
    </for>
  </template>

3. Handling Events

  <template>
    <button on-click("showAlert")>Click Me</button>
  </template>
  <script>
    export default class {
      showAlert() {
        alert('Button Clicked!');
      }
    }
  </script>

4. Using Custom Tags

  <template>
    <my-custom-tag/>
  </template>
  <script type="module">
    import myCustomTag from './components/my-custom-tag';
  </script>

Building a Simple App with Marko

Here’s how you can create a simple app utilizing Marko’s API features:

  <template>
    <for|todo| of=state.todos>
      <div>
        <input type="checkbox" checked=todo.done/>
        ${todo.text}
        <button on-click('deleteTodo', { index })>Delete</button>
      </div>
    </for>
    <input type="text" value=newTodo on-input('handleInput') />
    <button on-click('addTodo')>Add Todo</button>
  </template>

  <script>
    export default class {
      onCreate() {
        this.state = {
          todos: [],
          newTodo: ''
        };
      }

      handleInput(event) {
        this.state.newTodo = event.target.value;
      }

      addTodo() {
        if (this.state.newTodo) {
          this.state.todos.push({ text: this.state.newTodo, done: false });
          this.state.newTodo = '';
        }
      }

      deleteTodo({ index }) {
        this.state.todos.splice(index, 1);
      }
    }
  </script>

With this example, you can create a basic todo list application that allows adding, listing, and deleting tasks.

Marko offers countless other features and APIs to streamline your web development process, making it a versatile tool for developing modern web applications.

Hash: 8c5faf36ce0dae48351f5e09c5133fdaddcf52d9baf4369db027766a12c1742f