Hypen Language

Hypen is a UI language developed specifically for cross-platform application development. It enables developers to write one codebase that will run everywhere, instead of writing a codebase for each platform.

The language itself is simple, intuitive and focused mostly on UI development. This allows us to be a “plug and play” framework that you can integrate with your existing solutions, instead of having to change stacks.

The framework renders the language into native components on each platform, thus retaining the speed of native apps and allowing the developer to plug-in custom components or override existing ones.

Syntax

The syntax is quite simple - components are declared in a tree-like structure, defining the look of your UI. To style a component, one can apply applicators, small functions that modify the component's look.

Components are by definition stateless, and they can only receive arguments. These arguments can be static values or reactive references to the app's state. By default, components are reactive, meaning that when their arguments or state change, they will re-render automatically. Since we sometimes need managed state, we can use Modules - modules are components that have their own state and can be reused across the app. While hypen is a UI language, it supports invoking code from the app's logic layer, by using Actions. Actions are functions that can be change the app's state, perform network request, access the device's hardware, etc. This keeps the UI layer clean and focused on UI, while the logic layer is focused on the app's logic, making it easier to maintain and test.

Let's take a peek at a simple Hypen application with a component and two routes - don't worry, it's going to be quite simple:

Syntax example

Our app will have a component called UserDetails and two routes - one for the home page and one for the user details page.

 component UserDetails {
    Column {
       Card {
         Text("Username: ${@state.username}")
         Text("Email: ${@state.email}")
       }
       Button {
         Text("Logout")
       }.click(@logout)
    }
 }

This defines a component called UserDetails that doesn't accept any arguments and displays a Card containing two Text components and a Button. The text components depend on the app's state, and the button invokes the logout action when clicked.

Let's define the app and the routes now:

// We import the UserDetails component

require(what: UserDetails, from:“./UserDetails”) // Importing a module

//Root of the application
application App {

    //Initial route to be displayed
    Route(“/”) {
        
        Column {
            Image(“https://random.image/nft.jpg")
            Text(“Welcome!”)
                
            Center {
                Button {
                  Text(“Change text”)
                    .textColor(white)
                }
                .backgroundColor(blue)
                .click {
                    push(“/userDetails”)
                }
            }
            
        }
    }

    // User details route
    Route(id: “/userDetails”) {
        UserDetails()
    }
}