Introduction

INFO

You are reading the documentation for olova 1.O (beta version)!

What is olova?

Olova is a lightweight, modern JavaScript framework designed to make web development smoother and more efficient. It comes with all the latest features you expect from a framework today, including a powerful reactive system that ensures your user interface stays in sync with the underlying data.

The name Olova carries a deeper meaning. In Tsonga, Olova translates to "simple" and "easy," which reflects the framework’s core philosophy. It is designed to be simple to learn, easy to use, and flexible enough to handle complex applications. With Olova, developers can build high-performance applications without the usual complexity, allowing them to focus on delivering a great user experience.

Example

Here is a minimal example:

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    count: 0,
  },
});
app.mount("#app");

<div id="app">
  <template>
    <button @click="count++">{ count }</button>
  </template>
</div>

The above example demonstrates the two core features of olova:

• Declarative Rendering: olova uses a special way to write HTML that is based on JavaScript. This makes it easy to describe how HTML should look based on what is happening in the JavaScript code.

• Reactivity: olova watches for changes in JavaScript and automatically updates the HTML on the page when something changes. This makes it more efficient and easier to keep the page up-to-date.

Olova Framework – Easy HTML & JavaScript Rendering

With Olova, you’ve got two powerful ways to render your app: the HTML way and the JavaScript way. It’s all about flexibility and ease!

HTML Way:

Using <template> in your HTML

Olova keeps things simple when you're working with HTML. Just add a <template> tag directly inside your HTML. This is where you’ll write the code that will dynamically render your content.

Think of it like this: the <template> is your space for dynamic content, and Olova takes care of making it come to life!

Example:

<div id="app">
  <template>
    <div>
      <div>{ count }</div>
      <button @click="increment">Increment</button>
    </div>
  </template>
</div>

<script type="module">
  import { createApp } from "//unpkg.com/olova";

  const app = createApp({
    data: {
      count: 0,
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  });
  app.mount("#app");
</script>

What’s happening here?

• The <template> tag holds your dynamic HTML code.
• { count } will automatically update when the count value changes.
• The button’s @click="increment" runs the increment function, increasing the count.

Super clean and easy! Olova will take care of the reactivity for you. No complex boilerplate needed.

JavaScript Way:

Rendering Directly in JS

If you're more of a JavaScript lover, Olova has your back. You can define the template directly in your createApp() function. This allows you to keep everything in one place and even make the template respond to JavaScript functions.

Example:

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  template: "<h1>{ count }</h1>", // JavaScript handles the rendering directly here!
});

app.mount("#root");

0

What’s happening here?

• You define both the data (like count) and the methods (like increment) inside createApp().
• The template is part of your JavaScript, making it perfect for those who love keeping logic and UI together.
• Whenever count changes, the <h1> tag is re-rendered with the updated value. Smooth and automatic!

Functional Component Style:

Returning Template Strings

Now, let’s explore a cool functional component approach where you return your template as a string. This is especially great for developers who love a more functional style of coding!

Example:

import { createApp } from "//unpkg.com/olova";

const App = () => {
  return `
    <h1>{ count }</h1>
  `;
};

const app = createApp({
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count++;
    },
  },
  template: App(), // Call the App function to set the template
});

app.mount("#root");

0

How It Works:

• The App function returns a template string that Olova uses for rendering.
• This allows for dynamic template generation and keeps your logic clean and functional.
• Like before, { count } updates whenever the data changes, keeping your UI in sync effortlessly.

Why Olova is Awesome

• Multiple ways to define your app – Choose HTML, JavaScript, or functional styles.
• Built-in reactivity – Keep your UI in sync with minimal setup.
• Clean and flexible templates – Structure your code however you prefer.

With Olova, you have the power to build reactive applications in a way that suits your coding style! Whether you’re working with traditional HTML, straightforward JavaScript, or modern functional components, Olova has you covered. Enjoy coding!