Skip to content

Commit

Permalink
Fixes obvious grammar errors
Browse files Browse the repository at this point in the history
  • Loading branch information
mks-h committed Dec 30, 2024
1 parent 3ea8be0 commit 8008638
Showing 1 changed file with 18 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: Slint Language
import Link from '/src/components/Link.astro';

The objective of the concepts section of the guide is to give you an overview of the language from a high level. If you want to
dive straight in then the details check out the the <Link type="slintFile" label="coding section"/> and language reference
dive straight in the details then check out the <Link type="slintFile" label="coding section"/> and the language reference
sections.

This section gives you an insight into the thinking behind the language and the core concepts it is made up from.
Expand Down Expand Up @@ -36,7 +36,7 @@ document.body.appendChild(button);

Take this simple web example. A button is created. Then a property to show 'Click me' text is text. At this point
technically the button exists, but it won't show up as its not attached to anything. So the final line
makes it a parent of the main view.
makes it a child of the main view.

```js
const buttonWithListener = document.createElement('button');
Expand All @@ -48,16 +48,16 @@ document.body.appendChild(buttonWithListener);
```

In this second example a button is created and an event listener is added. Within that is a callback
function to log out that the button is pressed. It's a lot of code to so simple things.
function to log out that the button is pressed. It's a lot of code to do simple things.

Its quite abstract. For example once a few more buttons and components are added its almost impossible
It's quite abstract. For example once a few more buttons and components are added its almost impossible
to be able to think how the real interface would look. It's hard to think about the design of a UI
using this kind of code.

It's also too complex to edit without understanding how to code. This means UI designers cannot work
hands on to ensure all their design intent is implemented. They are forced to use other tools and frameworks
to crate prototypes and design guides that may look or behave differently to the software used to implement
the production UI. It should not have to be this way.
to create prototypes and design guides that may look or behave differently to the software used to implement
the production UI. It doesn't have to be this way.

## Declarative Style

Expand Down Expand Up @@ -85,33 +85,33 @@ struct ContentView: View {
}
```

These languages take normal code and let it be used in a declarative way. But it's
still functions with arguments that act as properties. It is simpler and behavior
such as parent child relationships can be inferred.
These languages take normal code and let it be used in a declartive way. But it's
still functions with arguments that act as properties. It is simpler and behaviour
such as parent child relationships can be inferred.

For Slint instead of tweaking a normal language to be more declarative we instead
For Slint, instead of tweaking a normal language to be more declarative, we
created a pure declarative language from the ground up.


## The Business Logic Problem

One attempt to solve the problem of describing a UI in code has been to create a separate static markup language.
Platforms such as Android and [WPF](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/) have done this. The UI
is described in an XML like format. While the rest of the code is written in both a separate language and also
is described in an XML-like format. While the rest of the code is written in both a separate language and also
separate files. Known as a code behind file. The issue here is that XML, despite claims to the contrary, is not
human readable or editable. It's also too static and rigid and it can be frustrating to jump between the UI file
and the separate code behind file to describe the behavior of the UI.

Meanwhile the React web framework has solved this problem by using JSX. HTML, CSS and JavaScript can be mixed
together in a single file. On one hand this is great as it means you can use the same language to describe the UI
layout and behavior. On the other hand there is no limit to what code you can put in a JSX file. Logic for handling
network requests, processing data and pretty much anything quickly ends up mixed in with UI code. It leads to an
issue where it can be fast to create an initial application, but it becomes so hard to maintain that it's too
network requests, processing data and pretty much anything quickly ends up mixed in with UI code. It leads to the
issue where it can be fast to create an initial application, but it becomes so hard to maintain it that it's too
slow or costly to evolve the application.

## A True Declarative UI Language

Slint provides a declarative language to describe an applications user interface
Slint provides a declarative language to describe an application's user interface

```slint showLineNumbers=true no-test
Rectangle {
Expand All @@ -124,16 +124,16 @@ Rectangle {
}
```

If you can understand this Slint code you already have grasped a majority of how simple to use the language is.
If you can understand this Slint code you've already grasped a majority of how simple to use the language is.
On line 2 we declare a `Button`. On line 3 we set its `text` property to `"Click me!"` and on line 4
we set a callback to print out "Button clicked!" to the console via the built in `debug` function.

The Slint compiler will take this code and see it needs to generate a Rectangle that has a Button as a child.
The Slint compiler will take this code and see that it needs to generate a Rectangle that has a Button as a child.
Similarly, when the clicked callback activates, it will run the `debug` function. There is no need to think
about component and even listener life cycles.
about component and event listener life cycles.

With the Slint language you can think much more closely to how a user interface looks and behaves. Instead of
describing the 'how', the how should the details be implemented in traditional code, you instead "declare" how
describing the 'how', the how should the details be implemented in traditional code, you "declare" how
the interface should look and behave. Hence Slint being a 'declarative UI language'.

It's not only simpler for software developers to use, it's also now something designers can potentially edit or
Expand Down

0 comments on commit 8008638

Please sign in to comment.