Hypen Apps

App basics

A Hypen app consists of 4 main parts:

• The App Component
• Modules
• Actions
• Router

The Hypen engine facilitates interactions and reactivity between the aforementioned parts, thus leaving the developer only with developing the logic and the UI, without having to worry about architecture.

The App Component

The app component is the root of your application's UI. It defines an application and is the entry point from which your application starts.

Usually, the App component consists of a few simple parts:

• the actions
• the initial state
• the routes.

require(what: Actions, from: "/actions.js")

application App(
            actions: Actions, 
            state: { user: "John"}){
                Route("/"){
                    Text("Hello ${john}!")
                }
}

The App part is the root container of the app. Here, you can define properties of the app such as its name, initial state, requirements etc. The Route part defines a main route for the navigation link "/" (also known as navigation root). The Text part shows a simple text containing "Hello world"!

State

The state of the app is a persistent key-value store that can live as long as the app session lives. Inside the app object, you can pass in an initial state that can be loaded when the application starts, but it usually starts out empty.

The state object itself is reactive (more specificially, it is reactivelly exposed to the rest of the app), meaning that when you update a property, the rest of the app knows about it and reacts accordingly.

For example, let's say we have a simple text component:

Text(@state.myText)

The @state reference allows us to access the state object and observe it's property changes.

So if we update the myText property from our actions, our text component will react immediately.

function updateText(action, state, dispatch){
    state.myText = 2
    dispatch.updateState(state)
}