• Home
  • Events
  • About
  • MVC is dead – what comes next? – Part 2

    November 2nd, 2016

    The first part of this series gave an overview of the key concepts and listed some of the main advantages of using functional reactive programming techniques in UI development. Future articles we will focus on different components that are involved, starting today with the State component, a key ingredient of functional reactive UI programming.
    MVC vs FRP Data Structures
    In MVC we differentiate between domain model and UI state, in functional reactive UI programming everything is part of the State.

    Single Source of Truth

    In MVC applications we usually differentiate between the domain model and UI state. For example if we implement the TodoMVC application (see screenshot below) following some kind of MVC-pattern, our model will probably only consist of a list of ToDo-entries, because they define our domain. But the model would not keep the current entry in the input field (“What need to be done?”). And it would probably also not contain the selected filter.

    Screenshot TodoMVC
    Screenshot of TodoMVC

     

    The State component of a functional reactive application on the other hand contains the complete state of the application. The domain model and the UI state are typically merged into a single data structure – a tree. The picture at the beginning of the article shows the difference between both approaches.

    Why is this important?

    If we have all state in a single place, i.e. a single source of truth, we can implement the View as a pure function.

    This has many advantages: it is easier to understand, easier to reason about, and easier to test.

     

    Immutability

    The second important characteristic of the State is its immutability. We cannot change it.

    If the state of the application changes, we have to create new data structures.

    This may sound like a terrible waste. If we store the whole state in a tree and we have to create a new instance every time something changes, how can this be efficient? The trick is, that we do not have to copy the whole tree, but only a small part.

    Modifying an immutable tree
    When modifying a single node of an immutable tree, only a small number of nodes have to be replaced.

     

    Imagine our applications state is stored in the tree shown above. We want to change the property of the green leaf node. The node itself has changed, therefore we need to create a new instance. We also need to create a new instance for the parent node, because one of its children has changed. But the other child of that parent has not changed and we can reuse it by referencing it from the new parent node. The same is true for all the other parent nodes up to the root node. We need to create a new instance for each parent on the path to the top, but we can reuse the other children. In the diagram we only have to create new instances for the blue nodes, which are only a small fraction of the tree in particular if the tree becomes huge.

    Implementing State in Java

    I have recently started an experiment to explore how the principles from functional reactive UI programming could be applied to Java and JavaFX. You can find the current state of the mini-framework ReduxFX and a sample application at GitHub.

    Implementing the State component in Java is straight-forward. All elements of the state can be implemented as simple, immutable POJOs.

    Unfortunately the standard-collections in the JDK are not really suitable for immutability. But luckily there are several alternatives out there, that you can use instead. My personal favorite at this point are the collections in Javaslang, which offer several additional benefits besides being immutable.

    The code below shows the class AppModel from the sample project in ReduxFX. The property todos is of type Seq, which is part of Javaslang. Seq is similar to Iterable in the JDK, because it is the supertype of all sequential data structures in Javaslang (though Seq offers much more functionality). In other words todos is a list of TodoEntries.

    The property newTodoText contains the text stored in the TextField for new todo-entries. Last but not least, the property filter stores the current filter (ALL, ACTIVE or COMPLETED).

    Summary

    State in functional reactive UI programming is similar, but not the same as the Model in a classical MVC application. It contains all state, including UI state, and not only the domain model. In many frameworks the state is stored in a single data structure, usually in a tree. Another key requirement is immutability. Implementing the State component in Java is straightforward with immutable POJOs.

    The next part will cover the View-function, which translates the State to the actual UI. If you have any questions, ideas or thoughts, please leave a comment. Also do not forget to checkout my JavaFX sample ReduxFX.


    Dolphin Platform 0.8 has been released

    February 3rd, 2016

    Yesterday, we released version 0.8 of Dolphin Platform. The version contains several bugfixes and some new features.

    Validation

    The biggest new feature is the support of Java Bean Validation (JSR-303). For this feature we introduce a new module to Dolphin Platform that you can easily be added to your application dependencies:

    Once this is done you can use bean validation in the model layer. By doing so you can define your beans like this:

    As you can see the @NotNull annotation is added to the property in the bean class. By doing so you can simply validate instances of the bean by using a Validator.

    Currently not all validation annotations are supported but this is just an open todo. At the moment the following annotations are supported:

    • @AssertFalse
    • @AssertTrue
    • @DecimalMax
    • @DecimalMin
    • @NotNull
    • @Null

    For more information about the bean validation support in Dolphin Platform you should have a look at the readme.

    JavaFX bindings

    For version 0.8 we added a lot of functionality to the JavaFX binding layer. Based on this it’s now possible to simply bind a JavaFX list to an observable list of the Dolphin Platform model layer. Only one line if code is needed for this:

    Plus, we added support for converters. You can bind properties of lists of a different type to each other. This is interesting if you want to bind UI specific classes to the model layer. When using the JavaFX chart API the data model of the charts is defined by JavaFX specific classes. Since you don’t want to have this classes in the model layer that is shared between client and server you can simply define a converter and bind the model of a chart to your custom bean type. Using such a converter is as easy as a normal binding:

    Additional changes

    Next to this we added some minor features like new convenience methods in the ObservableList and fixed some bugs. A complete list of the changes can be found here.


    Dolphin Platform and Polymer

    December 15th, 2015

    Starting with version 0.7 the Dolphin Platform JavaScript and Polymer API has been released. Now you can easily create desktop, mobile and web clients for your application by using the same controller and presentation model. You only need to change the thin view layer. The Dolphin Platform repository at GitHub already contains a small client server application with a JavaFX based client and a Polymer client. In addition the example contains a Spring Boot tutorial and a KumuluzEE server. By doing so you can select the environment that fits perfectly to your needs. You can find there project here. A short description about the Polymer client API can be found here.


    Dolphin Platform Jumpstart

    December 1st, 2015

    Starting with a new technology is often hard. Even if the technology is documented and follows the pattern and structures that you already know from other APIs or frameworks the initial start is always a problem. To simplify this start when working with the Dolphin Platform, we created a first Maven archetype that creates a simple client server application.

    This application is an ideal starting point to play with the Dolphin Platform framework, learn the APIs or directly start your own application based on Dolphin Platform.

    The Maven multi module project that is created by using this first archetype contains a Spring Boot based server and a JavaFX client. With this archetype you can create your own project directly in an IDE like IntelliJ or by using the shell. If you want to use the shell you need maven on your system. IDEs like IntelliJ contain a bundled Maven instance and you don’t need to install anything on your system (without the IDE).

    The following video shows how you can create your first Dolphin Platform application in 1 minute by using IntelliJ:

    We will post about other IDE and the commandline usage later.

    If you have any questions about Dolphin Platform you can now use the “dolphin-platform” tag at stackoverflow. If you are new to Dolphin Platform you can find general information and tutorials on the Dolphin Platform website.


    Dolphin Platform in 15 minutes @ Nighthacking

    November 11th, 2015

    Michael Heinrichs and Hendrik Ebbers were interviewed at Devoxx about the Dolphin Platform. In this interview they explain the benefits of the framework and show some code:


    css.php