mirror of
https://github.com/centau/vide.git
synced 2026-08-20 14:41:37 +00:00
Try improve crash course
This commit is contained in:
parent
c288cb92c4
commit
338c66ed57
11 changed files with 223 additions and 102 deletions
|
|
@ -1,45 +1,25 @@
|
|||
# Introduction
|
||||
|
||||
This is a brief tutorial designed to give you a quick run through the usage of
|
||||
Vide.
|
||||
This is a tutorial that introduces the concepts and usage of Vide.
|
||||
|
||||
Vide is heavily inspired by [Solid](https://www.solidjs.com/).
|
||||
|
||||
This tutorial assumes familiarity with Luau and Roblox GUI.
|
||||
This tutorial assumes familiarity with Luau and Roblox UI.
|
||||
|
||||
## Why Vide?
|
||||
|
||||
Creating UI is a slow and tedious process. The purpose of Vide is to make UI
|
||||
declarative and concise, making it faster to create and more importantly easier
|
||||
to maintain. Vide achieves this using a reactive style of programming which
|
||||
allows you to focus on the flow of data through your application without
|
||||
worrying about manually updating UI instances.
|
||||
Creating UI is complicated, slow, and tedious.
|
||||
|
||||
Vide tries to simplify and speed up this process by providing a declarative and
|
||||
reactive of style programming, which lets you focus more on designing the UI
|
||||
itself and not having to manually update or reparent UI instances.
|
||||
|
||||
Some of the main focuses behind Vide's design choices:
|
||||
|
||||
- Concise syntax.
|
||||
- Being completely typecheckable.
|
||||
- Independence from instance lifetimes.
|
||||
- Real reactivity.
|
||||
- Minimal syntax.
|
||||
- Complete typechecking
|
||||
- Independence from instances.
|
||||
|
||||
## Structure Of A Vide App
|
||||
|
||||
The entry point for all Vide apps is the `mount()` function. This function
|
||||
sets up Vide's reactivity system. It takes and calls a function that should
|
||||
create your entire app, and will apply its result to a target.
|
||||
|
||||
In Vide, your app should be composed of functions, each function creates a
|
||||
specific part of your app, and can be reused if needed. These functions are
|
||||
called *components*.
|
||||
|
||||
```lua
|
||||
local function App()
|
||||
return {
|
||||
PlayerStats(),
|
||||
Inventory(),
|
||||
Settings()
|
||||
}
|
||||
end
|
||||
|
||||
mount(App, game.StarterGui)
|
||||
```
|
||||
As with most declarative libraries, there is an initial learning curve to
|
||||
understand the concepts and usage. This tutorial tries to comprehensively
|
||||
cover these concepts and usage, more so than you need just to use it.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue