As a programmer, I dislike having to use visual interfaces to make UI, and would much prefer a clean syntax to do it programmatically. Hence, I’ve started development on a system for developing UIs in a similar way to the SwiftUI library for Apple devices. I tend to write most Roblox code in TypeScript, but using the library I’ve made in Lua is still pretty nice and fluent.
This TypeScript code:
new Frame(
new HStack(0,
new Text("Title Here")
.Font(Enum.Font.GothamBold)
.Color(255, 255, 255)
.FontSize(20),
new Spacer(),
new Frame(
new Frame()
.Background(255, 255, 255)
.Center().Corner(8)
.Size(9, 3).Rotate(45),
new Frame()
.Background(255, 255, 255)
.Center().Corner(8)
.Size(9, 3).Rotate(-45)
)
.Background(200, 0, 0)
.Corner(90)
.Size(16, 16)
)
)
.Center()
.Background(15, 15, 15)
.Corner(8)
.Size(500, 300)
.Padding(10)
It’s only a basic start at this point, but I’m looking to continue integrating all UI objects and a state system which should make creating UIs much faster for people like me. Furthermore, it simplifies the UIListLayout using vertical and horizontal stacks as well as spacers to dynamically space content. I plan on releasing this when finished - or at least when I’ve made more progress - but felt like sharing it to get any opinions/ideas.
Wow… this is just amazing, seriously. The elegant syntax is so nice to look at, and generally, simplifies it alot. I hope you make this a resource when you feel comfortable to do so, nice work.
It really is the syntax and simplicity in all honesty. I’ve not worked with Roact before, however I have worked with React and Redux, as well as SwiftUI, and the experience as a programmer was so much nicer with SwiftUI in my opinion.
That said, I’d argue there’s potentially a use case for both. When I complete the project with the features necessary for a functional UI framework, it’ll be really handy for programmers who aren’t UI designers; it’ll be fast and efficient to create UI - even if just a mockup. Furthermore, even with the features I plan to add, it’s still fairly lightweight. I know Roact is an incredibly useful, built-up framework, however I feel that for a small project using Roact and Rodux may take more time than it’s actually worth; that’s where this comes in.
I don’t think I’d say this should always be used over Roact, I’d say this could provide an alternative for potentially smaller projects that don’t require the extensive feature set provided in Roact/Redux.
Wow! I never expected to see this ever implemented into Roblox. This is pretty cool.
I have been using SwiftUI in Xcode for quite a while now, and I really enjoy how simple it is to use. It’s easy to read, easy to understand, and all that. But in all honesty, I don’t really see myself using this on Roblox because of only one reason. There is no live preview.
The main reason I enjoy SwiftUI is because I can see my changes right away, I never have to build and run my project. Remember, this isn’t me disliking your creation, it’s only my current opinion.
I believe your creation has potential to be very good and can improve UI Designer’s experiences.
