Lynx, A Simple to use UI Framework

What is Lynx?


Lynx is a simple Declarative UI Framework with it’s own simple State Management system.

Why Should I use this over other Frameworks?

Lynx is easier to use than other Frameworks due to its approach to creating User Interfaces. Lynx Splits Components (User Interfaces) into two distinctive types, Static & Stateful. Similar to Flutter’s Stateless & Stateful Widgets.


Static vs Stateful

Static Components

Components that are Static are considered read-only/constant. Static Components can never change during the component’s lifetime after being constructed. Due to this limitation, they don’t have access to Listeners or States.

Stateful Components

Components that are Stateful are considered dynamic. Stateful Components can change during the component’s lifetime after being constructed, as-well as having access to Listeners and States.


States

What are States?

States are a way to save data and update Components without accessing the Instance or Component itself.

How to use them with Lynx?

  local Lynx = require(path.to.Lynx)
  
  local foo = Lynx.CreateState("bar")
  local ui = Lynx.createStatefulComponent("TextLabel",
  {
    Text = foo
  })

  foo:Update("foobar") -- Function to change the state

  ui:Dispose() -- Disposes of the Component and it's Children

Documentation

This will be moved to a documentation site in the beta stages of Lynx.

Lynx

Properties

_VERSION → string

  • Lynx UI’s Build version

ClassName → string

  • A read-only string representing the class

Methods

CreateState(initValue: any?) → State

  • Creates a State Object that can only be used in Stateful Components

CreateStaticComponent<T>(Element: string, Props: {T}, Children: { StaticComponent<T> | StatefulComponent<T> }) → StaticComponent<T>

  • Creates a StaticComponent Object

CreateStatefulComponent<U>(Element: string, Props: {U}, Children: { StaticComponent<U> | StatefulComponent<U> }) → StatefulComponent<U>

  • Creates a StatefulComponent Object

GlobalDispose<T>( … : StatefulComponent<T> | StaticComponent<T>) → void

  • Disposes of the given Component objects

ImportComponent<V>(GuiObject: V) → StatefulComponent<V>

  • Unimplemented

State

Properties

ClassName → string

  • A read-only string representing the class

Methods

Update(self: State, newValue: any?) → void

  • Sets the State’s value to the give value and updates all Components linked to the state object

GetValue(self: State) → any?

  • Returns a copy of the stored value in the state object

StaticComponent<T>

Properties

ClassName → string

  • A read-only string representing the class

Children → { StaticComponent<T> | StatefulComponent<T> }

  • A HashMap of the Component’s Children

Methods

GetProps(self: StaticComponent<T>, … : string) → any?

  • Returns a copy of the property of the Component’s Instance

Dispose(self: StaticComponent<T>) → void

  • Disposes of the Component and it’s children

StatefulComponent<T>

Properties

ClassName → string

  • A read-only string representing the class

Children → { StatefulComponent<T> | StaticComponent<T> }

  • A HashMap of the Component’s Children

Methods

GetProps(self: StatefulComponent<T>, … : string) → any?

  • Returns a copy of the property of the Component’s Instance

SetProp(self: StatefulComponent<T>, prop: string, value: any?) → void

  • Sets the given Property into the given value for the Component’s Instance

Dispose(self: StatefulComponent<T>) → void

  • Disposes of the Component and it’s children

Installation

Wally

lynx = "loomiquu/lynx@0.1.4"

GitHub

GitHub Repo

Release

3 Likes

Hello, thank you for creating this module.

What is your motivation for creating this module? It seems like you put a lot of effort into creating this module, however the code doesn’t seem advanced enough to compete with Roact, or even a less advanced framework, Fusion.

The explanation of why someone should use Lynx over other frameworks doesn’t make sense to me. Just because it is similar to Flutter doesn’t make it better, when seperating component types in fact creates extra boilerplate code. Looking at your code, it doesn’t make sense as to why you need to seperate the types, as it doesn’t provide any benefit (as long as you aren’t changing the state in a “stateful” component, it’s the same thing), when the main appeal in Flutter would be performance. I’m also not sure why this would be easier to create User Interfaces with as it, in fact, it further complicates things by not directly returning an Instance.

7 Likes

How could you even call this a framework? It honestly looks like you just compiled a bunch of types together called it day.

1 Like

Lynx is in it’s pre-release stages so its being worked on and features are still expected to be implemented

1 Like

That still doesn’t excuse the fact that you practically released this “library” half-baked.

2 Likes

I’d suggest optimizing your code, along with making actual event keys such as [Lynx.Event.MouseLeave] = function() end.

Even if it is pre-release, you uploaded this to Community Resources for other developers to use, not to give feedback on. Considering how bare-bones this is right now, I’d consider moving it to Creations Feedback.

Even still, pre-release modules should still have a purpose to it, and the creator should have a motivation to developing the module. Like, “I don’t like how Roact does x, so in my new library, I’ll change how it does x.” There isn’t really an apparent purpose to this that even has one specific feature that makes it worth it, so I wouldn’t really even consider this to be ready for public review.

3 Likes

Why should I use this over Roact or Fusion? Roact and Fusion practically already have all the same functionality but better.

1 Like