narbase / kunafa

Easy to use, high level framework in Kotlin for front-end web-development

Kunafa

Easy to use, high level framework in Kotlin for front-end web-development

Create web apps without using HTML, CSS, or JavaScript.

Documentation

Find Kunafa Documentation here (Work in progress).

Philosophy

Web apps framework without using HTML, CSS, or JavaScript.

Problem

• Web technologies are pain. Html is verbose, CSS is unexpected, and javascript is.. javascript.
• The no. of technologies a developer needs to learn to write web apps is big. That is, HTML, CSS and JavaScript at the least. Then there are javascript frameworks (react, angular, vue), LESS, SCSS, Haml. There are also packaging tools, gulp, webpack.
• Modern javascript frameworks solve the JavaScript problem, not the front end problem. React use JSX (embedded HTML in javascript) while Angular requires CSS and HTML.

Proposal

An easy to use, high level framework in Kotlin for web development. You do not need to learn the web stack, only the framework to be able to write web apps.

Developer experience

Developers only need to use Kotlin for development.

• You write the view (similar to Android xml layouts) in Kotlin DSL. e. g.

            verticalLayout {
                style {
                    width = matchParent
                    height = matchParent
                    backgroundColor = Color(240, 240, 240)
                }
                button {
                    text = "Click me"
                }
            }

• The view component (similar to Android activity or iOS ViewController) implements certain life cycle functions.
• The framework views contains easy to understand and familiar components and layouts managers. i. e. Button, TextView, TextInput, HorizontalLayout, VerticalLayout and so on.
• The framework makes laying out objects easy, e. g. match parent, wrap content.
• You can wrap any html, css, and js into a framework component to use it inside the framework.

Features

• Intuitive DSL for creating views
• Type safe CSS DSL for complete control of views appearance
• Automatic CSS rule sets caching
• Flexible Components to abstract any logic
• Full Routing support (Links, URL params, Redirecting, Navigation control)
• Very easy to wrap any 3rd party library as Kunafa component

Implementation

• Kotlin transpiles to javascript, and is well designed to support DSLs.
• Code is turned to javascript at compile time, and a basic HTML file loads the generated .js file.
• At runtime, the js file will generate the required HTML, and CSS files containing the whole application.

---

Getting started

Hello Kunafa! Getting started guide.

To add Kunafa to your project, first you need to add it to your build.gradle file as a dependency.

compile 'com.narbase.kunafa:core:<latest_version>'

If you have Kotlin Js plugin configured, then you can directly use it the code and Webpack will include Kunafa in the generated bundle.

Now you are ready to use Kunafa in any Kotlin-js project.

For a complete example, check the Kunafa Todo repository

---

Your feedback is most welcomed. Let us know how is your experience with Kunafa.

kunafa's Issues

Licence

There is no licence given. It would be nice if a licence is chosen for this project.

Add path parameter to onRouteWillChange

Calling classRuleSet globally forces kunafa-styles to mount before page load

A solution might be to check if kunafa style is mounted or call it lazily otherwise.

BUG: width: matchParent with maxWidth with does not allow the view to be centered.

Given

        horizontalLayout {
            style {
                height = 400.px
                width = 400.px
                justifyContent = JustifyContent.Center
            }

            verticalLayout {
                style {
                    width = matchParent
                    maxWidth = 280.px
                    height = 200.px
                    backgroundColor = Color.red
                }
            }
        }

The expected behavior is for the child view to be centered vertically inside the parent view. However, matchParent sets alignSelf to stretch and as such, the view will not be centered.
The current work around is to set width to 100.percent instead of matchParent.

CSS 'content' tag is not sent to browser CSS if not escaped in code

Content tags are string tags. When the rules are turned into strings, they are not properly wrapped. This can be worked around by doing something like RuleSet.content = "'Content'". Otherwise, the css sent will look like content=Content, which is a badly formed rule and will be dropped.

Add custom HTML elements?

Is it possible with 0.2.4 to add a in button text? I'm trying to create animated buttons and this is required, but I cannot figure out how to do it.

Redirect doesn't pass URL params

If you have an /path/<some id>/ and I need it to redirect to /path/<some id>/dashboard , the redirect function redirects to /path/:id/dashboard instead of the actual id.

Expected behavior:

The redirect function should redirect to /path/<some id>/dashboard

Trouble in implementing Hello Kunafa example

Hi. I'm currently trying to implement this framework by following your Hello Kunafa tutorial. I think I've been able to sync the gradle properly and build the project. But I don't see anything when I open the index.html file.
I've followed the instructions and modified the build.gradle and created index and app.kt. The build shows successful but I can't see anything when I open the html file.(I'm using gradle build, also tried gradle assembleWeb and gradle compileK2J). Is there anything else in the 'Hello Kunafa' tutorial that I need to do?

Better lifecycle observers support for component

To observe a component lifecycle, currently you need to use its rootView

component.rootView?.bind(lifecycleObserver)

This however does not work if the root view is not yet created.
A better way is to allow the component to have a lifecycle observers that it can then pass to the root view when created.

rootView is not initialized in onViewCreated

Missing paragraph `p` element

webassembly support

Is a bit shameful that modern framework writtern in high level language like Kotlin doesn't support compilation directly to wasm like C# Blazor does.

Please fix this misapprehension.

State of things with Kunafa

Is it production ready? and is it still actively developed?

Examples/Tests for 0.2.0

I've just started using Kunafa, and struggling to find some concrete examples of usage.

The closest is the information in https://medium.com/the-kotlin-chronicle/kunafa-easy-to-use-high-level-framework-in-kotlin-for-front-end-web-development-ee5237aea5b but it doesn't link Component classes to a main, so I'm struggling to put them together. I'm sure it's obvious but I'm just missing it

I'd just like something fairly simple, so far I've created a simple Component class, as this:

class AppView: Component() {
    override fun View?.getView(): View {
        return horizontalLayout {
            textView {
                text = "Some text"
            }
        }
    }
}

but how do I use it?
So far this is all I've managed:

fun main(args: Array<String>) {
    page {
        AppView().addToParent(this)
    }
}

which feels less than optimal.

I'd also ask, where are the tests? This is a large-ish code base for what it does but I don't see any tests anywhere. They were the first things I looked for in trying to work out how to get this going.

GitHub releases not up to date with maven central

The latest release on maven central is 0.1.4 upload on the 24th while the latest release on GitHub is 0.1.3 upload on the 21st.

kotlin gradle build example

I had trouble integrating kunafa into a build.gradle.kts (kotlin based) build using the examples in the docs, but managed to come up with the following:

plugins {
    id("kotlin2js")
}

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("com.narbase:kunafa:0.2.0-beta")

    testImplementation(kotlin("stdlib-js"))
}

tasks {
    compileKotlin2Js {
        kotlinOptions {
            outputFile = "${sourceSets.main.get().output.resourcesDir}/output.js"
            sourceMap = true
            // moduleKind = "plain"
        }
    }

    fun copyJar(outputDir: File, pattern: String) {
        val jar = configurations.compileClasspath.get().single {
            it.name.matches(Regex(pattern))
        }
        copy {
            includeEmptyDirs = false
            from(zipTree(jar))
            into(outputDir)
            include("**/*.js")
            exclude("META-INF/**")
        }
    }

    val unpackKotlinJsStdlib by registering {
        group = "build"
        description = "Unpack the Kotlin JavaScript standard library"
        val outputDir = file("$buildDir/$name")
        inputs.property("compileClasspath", configurations.compileClasspath.get())
        outputs.dir(outputDir)
        doLast {
            copyJar(outputDir, "kotlin-stdlib-js-.+\\.jar")
        }
    }

    val unpackKunafaLib by registering {
        group = "build"
        description = "Unpack the kunafa library"
        val outputDir = file("$buildDir/$name")
        inputs.property("compileClasspath", configurations.compileClasspath.get())
        outputs.dir(outputDir)
        doLast {
            copyJar(outputDir, "kunafa-.+\\.jar")
        }
    }

    val assembleWeb by registering(Copy::class) {
        group = "build"
        description = "Assemble the web application"
        includeEmptyDirs = false
        from(unpackKotlinJsStdlib)
        from(unpackKunafaLib)
        from(sourceSets.main.get().output) {
            exclude("**/*.kjsm")
        }
        into("$buildDir/web")
    }

    assemble {
        dependsOn(assembleWeb)
    }
}

BUG: Route does not work if it is directly inside page.

Route does not work if it is directly inside page.

page {
        route("/") {
            verticalLayout {
                textView { text = "Root" }
            }
        }
    }

As a work around, you can wrap the route inside a view (or verticalLayout/horizontalLayout).

not run with get started or cloning kunafa-todo

Hello, it seems to be a lot of fun to use kunafa, but I can’t run following get started, or even cloning kunafa-todo… please make sure the step is right or kunafa-todo will run successfully

In textView, replace text with innerText instead of innerHTML