[LEGACY] Robin - A Flutter-like Way To Create UI

Resources Community Resources
#1

The following was an attempt to create a UI library where you could instantiate objects with a Flutter-like syntax. However, simply creating UI is not enough, and therefore I am in the process of doing a full rewrite of Robin to include bindings, state, mappings, and such. A new topic will be created for the new release as it is a full rewrite & will most likely not be backwards-compatible.

About

Robin is a declarative UI library that allows you to programmatically create UI in a syntax much like Flutter (a Dart UI framework).

Docs

Expand

To Get A Component

local TextButton = Robin.Components['TextButton']

To Use Components (mounting)

local ScrollingFrame= Robin.Components['ScrollingFrame']
local TextButton = Robin.Components['TextButton']

Robin.mount(gui, ScrollingFrame{
	BackgroundColor3 = Color3.fromRGB(83, 255, 109),
	Children = {
		TextButton{
            -- Properties
			Text = "Click me!",
            -- Events
            [Robin.Events.MouseEnter] = function()
                print("Hello world!")
            end
		}
	}
})

Links

Roblox Model: https://www.roblox.com/library/9361405403/Robin
GitHub Repo: https://github.com/R0bl0x10501050/Robin

Example Usage

local Robin = require(9361405403)

local Players = game:GetService("Players")
local plr = Players.LocalPlayer
local gui = plr.PlayerGui:WaitForChild("PlayGui")

local ScrollingFrame = Robin.Components['ScrollingFrame']
local Frame = Robin.Components['Frame']
local TextLabel = Robin.Components['TextLabel']
local TextButton = Robin.Components['TextButton']

Robin.mount(gui, ScrollingFrame{
	BackgroundColor3 = Color3.fromRGB(83, 255, 109),
	Children = {
		Frame{
			BorderSizePixel = 5,
			Children = {
				TextLabel{
					Text = "Hello world!",
					[Robin.Events.MouseEnter] = function()
						print("Hovered!")
					end,
				}
			}
		},
		TextButton{
			Text = "Click me!"
		}
	}
})

Results:

image

image

Happy UI-making!

15 Likes
#2

This is cool but why use it over Roact?

2 Likes
#3

It could be useful in very lightweight applications, as it is 89 lines of code instead of Roact’s 9783 lines.

2 Likes
#4

Could we get a demonstration? Thanks for the resource!

1 Like
#6

I was litterally just thinking of Flutter.

I dont see how this is useful tho. This is just roact but worse. No states, refs, bindings, etc.

Why should I use this over Roact?

I personally won’t use this and wouldn’t recommend anyone do.

#7

Also, this is WAY MORE LIMITED!!! DO NOT USE THIS!!!

First off, you can only insert specific instances
image

You can also use specific events. Which means you can’t use stuff like .changed or .Activated.
image

There are also NO STATES OR COMPONENTS. Why go through using a framework when you can’t use states or components? You’d be better off using the Ui editor.

You can’t update Robin ui without forking the module. Unlike with roact. Use roact, dont use this joke of a “Ui Library”

TDLR; dont use this, it’s severely limited. Use roact instead of this.

3 Likes
#8

“flutter like way” more like “more limited way”

seriously though, make it support sll instances. i agree with this dude.

2 Likes
#9

and make it support states + components.

I doubt he’s going to add any of this tho. Seems like a poor attempt at trying to get forum hearts.

1 Like
#10

a heavy money bag is better than a light money bag as the heavy money bag has more money than the light one

did you even try this module yet? its so limited as heck.

2 Likes
#11

I appreciate your criticism, but you could make a PR to the repo with your suggestions in addition to your post.

To address your points, however:

This is a UI module. Therefore, you can only insert UI instances, like UICorners and Frames and such.

This is a mistake on my part, I’ll update this immediately.

This is meant to be a lightweight UI creation module and therefore I did not include state management (you can still directly query the instances if you feel the need to). Regarding components, I will admit I completely forgot to implement those.

In conclusion, I would like to state that this is not meant to compete with Roact. Both have their use cases, with Robin being a module you’d use for quick UI creation at runtime.

#12

This is absolutely BS. There’s no point in using this joke of a module when it doesn’t have state-management. No one should use this for anything, especially big projects. You can’t use “Lightweight” as an excuse.

Roact allows you to insert anything you want. This is just another poor excuse.

2 Likes
#13

you shouldnt rush modules then. thats like releasing a very early game which is so boring and so limited.

look, lightweight dosent mean better

as long as its useful and not this limited then it would be “good”

i personally find it faster to make uis in roact

2 Likes
#14

You & @commitblue evidently did not grasp the point of this module. This is a very simple and quick way to create UIs at runtime with a Flutter-like syntax and is not intended for big projects, although it can very well be used in them. The selling point of this module is the syntax, not how it can perform better than Roact. Regardless, if you are comfortable with Roact and it’s syntax, then move on - you are not the target audience of this module.

I have no intent of further arguing over this pointless debate. If, however, you would like to continue to voice your opinions about this module, you can message me your complaints and I will take them into consideration as I rewrite parts of the module.

1 Like
#15

Who exactly does this help…? Fusion has a very similar syntax, is lightweight, and is much more robust.

2 Likes
#16

Anyone who is familiar with Flutter and it’s syntax. With Fusion, you type New "<instance>" {<props>}; with Robin, since it is meant to be like Flutter, you type <instance> {<props>}.

As I’ve said prior, this is not meant to compete with more robust frameworks like Roact or even Fusion.

#17

Yup, screenshots of the example usage have been added to the post.

1 Like
#18

You can technically do similar things by writing functions to create the base components… like

local function Frame(props: { [any]: any }?): Frame
  return New("Frame")(props or {})
end

local frameA = Frame { BackgroundTransparency = 1 }

I am not very sure what’s your aim here, I know you are not creating it as an alternative for existing robust UI libraries but to replicate the similar syntax taste in Flutter. However… existing libraries exist?

1 Like
#19

Yeah, I understood that it’s not trying to compete with Roact or similar libraries, but I still think it’s interesting to look into a tiny UI module like this, even if it’s just to see how it works.

A big library such as Roact can be difficult to fully comprehend its inner workings, both due to its size and due to how much extra processing and updating the library does in the background. In comparison, Robin is much smaller and simpler, and after using it for a short period of time, I was able to understand how it handles events, and how it creates and applies properties to UI instances.
I can see how this could help someone to gain a better understanding of more complex libraries, as on the surface, UI libraries like these all accomplish the same goal; to convert Luau UI code into UI elements, although the extra features included and behind-the-scenes management differs greatly between systems.

I think Robin is a cool library so far, and I’m interested in seeing the rewrite when it releases.

(update jan 2023: i still secretly think this library is cool and might even extend it myself, i have a really niche use case which it may be perfect for)


(update mar 2024: i don’t care if this thread is dead, here’s an update.

Approximately 2 years after the original version of this library, I’m now maintaining a codebase of close to 30k lines of Luau (not Roblox-related, compiled to Lua), a significant portion of which deals with UI creation and state management. We attempted using nearly every UI library under the sun, many of which didn’t work for a few reasons:

  • The size of the library was simply too large
  • The difficulty of heavily modifying the library to support our specific use cases
  • Cases of behaviour occurring which was simply just “strange”, like random glitches, issues with state not storing correctly, or updates not issuing, all with incomprehensible causes
  • Basically, give me the name of any Lua/Luau UI library and I’ll give you a laundry list of reasons why we found out it wasn’t suitable.

Most of the code needs to be sent over the network very often and duplicated code couldn’t be stored in shared modules, so size was a big concern. The total unminified size of the codebase was ~700kb, and adding a large UI library like Roact or Fusion would have brought this to upwards of 1Mb (and react-lua itself would be larger than our entire codebase)! Efforts to create our own UI framework or library resulted in us simply reinventing Robin, so why not just go with that?

Pretty much all of our code that deals with UI is now written in a much-modified (but no larger) version of Robin, and with the help of it and some minification, the size of the codebase was brought to below 400kb, resulting in a real-world increase in loading times of 30-40% for end users. We also ended up porting and modifying a version of Fusion for the project, though it’s only provided as a module for users and isn’t used for any of our internal code due to the impracticalities mentioned above.)

1 Like
#20

but, its still limited. so its not some replacement for roact lmao

ok

1 Like
#21

you still shouldn’t use it.

I dont see the appeal between “light weight” modules. Like cool? Your module has less capability. Bloated modules are always better since you have more features. Light Weight modules usually are a no go for me.