Lenra Docs
Register on Lenra
  • Home
  • Getting started
    Open/Close
  • Guides
    Open/Close
  • Features
    Open/Close
  • References
    Open/Close
  • PrinciplesContribute

    How does Lenra work ?

    Lenra uses a simple but efficient realtime MVC pattern. This means that any changes to the Model will update the view in real time for every connected users.

    Views

    The views are simple functions with 2 arguments: the data, a property object (props). This function will return a json tree composed by native components or other views. If one of the two argument changes, the view is rebuilt.

    You can find all of the existing components by checking our documentation.

    For example, the counter view (in the template app) uses the props to customize the printed message and the data to get the counter value. When the + button is pressed, the increment listener will be called.

    module.exports = (data, counter) => {
    
      return {
        "type": "flex",
        "spacing": 2,
        "mainAxisAlignment": "spaceEvenly",
        "crossAxisAlignment": "center",
        "children": [
          {
            "type": "text",
            "value": `${counter.text}: ${data[0].count}`
          },
          {
            "type": "button",
            "text": "+",
            "onPressed": {
              "action": "increment",
              "props": {
                "id": data[0]._id,
                "datastore": data[0].datastore
              }
            }
          }
        ]
      }
    }
    

    Listeners

    If we want to change the model, we must call a listener. Your listener is a function that is able to call the data API to get/create/update/delete a document. This function is called when an action is performed by the user on the UI (button pressed, click, checkbox checked…).

    The listener takes 3 arguments: a property object (props), the event that triggered this listener and an api object that contains all the informations needed to call the API.

    To update the model, simply call the HTTP data API in your listener. For example, the increment listener in the node template simply increments the counter given in the props. Here, the event is irrelevant (button click).

    const apiService = require("../services/api");
    
    module.exports = async (props, event, api) => {
    
        let res = await apiService.getDoc(api, "counter", props.id);
        let counter = res.data
        counter.count += 1;
        return apiService.updateDoc(api, "counter", counter);
    }
    

    Data

    The model in Lenra is simply a mongo database. In this database you will store documents that are basically a JSON object. These JSON objects will be stored in collections. For example, create a ingredients collection that will store all the ingredients of your cooking app. Then create a recipes collection to store your recipes…

    You can also query into your documents using the mongo query language. For example, let’s say you want to get all the ingredients that are currently in your fridge. Your query will look like that:

    {
        "coll": "ingredients",
        "query": {
            "inFridge": true
        }
    }
    

    The tech stack

    In order to build that platform we had to create a custom application system based on open-source technologies.

    Lenra architecture

    If you want to know more about our tech stack, you can visit their website by clicking on the links below:

    If you've already used Flutter or Mongo, you will probably see a lot of the same principles while building your app with Lenra. You can use this knowledge !