Product Release

Announcing GenieFramework.jl, a new API for building Julia apps faster, with half the code

Pere Giménez

Published on October 4, 2022

Whether you are a data scientist, analyst, or researcher like me, interactive dashboards and visualization tools are critical to your success. After all, our work is only useful as long as we can share it with the end user.

Genie Framework has empowered the Julia language community with a highly productive, low-code toolset for building data apps with beautiful UIs. It has become the most popular app framework for Julia, with over 35k downloads in the last 12 months. Yet, many of our users are new to Julia and web development concepts, so they find the code too complex and the tutorials hard to follow.

So, today we’re taking a step towards making Genie Framework easier to use. We are releasing GenieFramework.jl 1.0. With this new meta-package, we have made it easier to work with the packages in the framework so that you can get your apps up and running faster than ever. Further, we have strengthened our commitment to improving and extending Genie Framework’s educational material.

A new rebranded API

Our team has been hard at work streamlining the API, which has resulted in the following major improvements:

The new GenieFramework.jl bundles Genie.jl, Stipple.jl, StippleUI.jl and StipplePlotly.jl plus other dev tools. A single import gives you access to the full power of Genie Framework!
Reactive structs replaced with new @in and @out macros to expose individual variables to the UI. Restarting Julia on model changes is no longer necessary!
The data processing logic, dashboard logic, and UI now are clearly separated.

Take a look at the example below to get an idea of how much easier the app-building process has become. The new macros make code easier to read, and the number of lines you’ll need to write has been reduced!

hellopie.jl

          using Faker
          using GenieFramework
          @genietools
          
          @handlers begin
            @in number_of_slices = 3
            @out piechart = PlotData(; values = [], labels = [], plot = "pie")
            @onchangeany isready, number_of_slices begin
              piechart = PlotData(
                values = rand(1:100, number_of_slices),
                labels = [Faker.first_name() for _ in 1:number_of_slices],
                plot = "pie"
              )
            end
          end
          
          @page("/", "ui.jl")
          
          Server.isrunning() || Server.up()

ui.jl

                     row([
            cell(class="st-module", [
              h6("Number of slices")
              slider(1:1:20, :number_of_slices; label=true)
            ])
          ])
          
          row([
            cell(class="st-module", [
              h5("Pie chart")
              plot(:piechart)
            ])
          ])

hellopie.jl

        using Genie.Server
        using Stipple
        using Stipple.ModelStorage.Sessions
        using StippleUI
        using StipplePlotly
        using Faker
        
        using GenieAutoReload
        GenieAutoReload.autoreload(pwd())
        
        @reactive mutable struct HelloPie <: ReactiveModel
          number_of_slices::R{Int} = 3
          piechart::R{PlotData} = PlotData(; values = [], labels = [], plot = "pie")
        end
        
        function handlers(model::HelloPie)
          onany(model.isready, model.number_of_slices) do (_...)
            model.piechart[] = PlotData(
              values = rand(1:100, model.number_of_slices[]),
              labels = [Faker.first_name() for _ in 1:model.number_of_slices[]],
              plot = "pie"
            )
          end
        
          model
        end
        
        function ui(model::HelloPie)
          page(
            model,
            [
              heading("Hello pie!")
        
              row([
                cell(class="st-module", [
                  h6("Number of slices")
                  slider(1:1:20, :number_of_slices; label=true)
                ])
              ])
        
              row([
                cell(class="st-module", [
                  h5("Pie chart")
                  plot(:piechart)
                ])
              ])
            ],
            append = [
              Genie.Assets.channels_support()
              GenieAutoReload.assets()
            ]
          )
        end
        
        route("/") do
          HelloPie |> init |> handlers |> ui |> html
        end
        
        Server.isrunning() || Server.up()

Tutorials and support

To help you get started, we have written a new detailed tutorial for the example Iris Clustering app that can be found in this blog post.

If you need help or want to report issues, join our Discord or file an issue on GitHub. Lastly, we will soon bring you exciting news on Genie Builder. Stay tuned!

Go back to blog page