Koppa.js is a progressive client-side rendering framework for creating user interfaces that do not require a virtual DOM.
It consists of an easy-to-use core library that focuses on managing the individual components and the viewport.
Koppa.js is highly modular and thus can be used for small SinglePages or even complex applications.
Here is a small list what Koppa.js Core offers.
- Components (single File Templates)
- Modules (extend the functionality)
- Router (routing content to URL)
- Store (easy local & session Storage handling)
- Fetcher (easy use of Fetch-API)
- Templating HTML
- Reactive live data
and many more...
| Project | Status | Description |
|---|---|---|
| core | Framework Core | |
| componenter | in progress, coming soon | Component Module |
| documentation | in progress, coming soon | Documentation |
| get-started | Git-Repository to start a project |
You can easy use the koppa-core.2.0.6.min.js in your HTML with the script-tag.
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Get Started with Koppa.js</title>
<script src="https://koppajs.s3.eu-central-1.amazonaws.com/koppa-core.2.0.6.min.js"></script>
</head>
<body>
<script>
koppa.take('app-view', './app-view.html');
koppa('app-view');
</script>
</body>
</html>app-view.html
<template>
<header>{{title}}</header>
<nav>Nav</nav>
<main>Main</main>
<footer>Footer</footer>
</template>
<script>
data: {
title: 'Get Started with Koppa.js'
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
display: block;
width: 100%;
height: 100%;
}
app-view {
display: block;
width: 100%;
height: 100%;
background-color: #ddd;
}
</style>This is something you should have dealt with before.
We will only teach you how to use Koppa.js, not the other things.
We have a git-repository that you can easily clone.
This is the best and easiest way to start a full development project with Koppa.js.
It provides everything you need.
© 2020-present | Bastian Bensch