# View

There are 2 major way to write views in sauron.
The first one is using the `node!` macro which allows you to write an html like syntax.
The second one is using function call. They have no difference in performance.


Listing 1: Building the view method using `node!` macro.
```rust
impl App{
    fn view(&self) -> Node<Msg>{
        node!{
            <div id="app" class="container">
                <ul class="list">
                    <li>"item 1"</li>
                    <li>"item 2"</li>
                    <li>"item 3"</li>
                </ul>
            </div>
        }
    }
    // --snip--
}
```
The first listing very closely resembles html code.

Listing 2: Building the view using function calls.
```rust
impl App{
    fn view(&self) -> Node<Msg>{
        div([id("app"), class("container")], [
            ul([class("list")],[
                li([], [text("item 1")]),
                li([], [text("item 2")]),
                li([], [text("item 3")]),
            ])
        ])
    }
    // --snip--
}
```
The second listing is a normal function call to build a DOM tree using the pattern.
```rust

<tag_name>([<attributes>], [children_node])

```
The function name is the tag of the html. The first argument is an array/vec of attributes.
The second argument is an array/vec of child nodes.

Attributes can be created using the pattern.
```rust

<attribute_name>(value)

```
The function name is the attribute name and the first argument is the attribute value.

I personally prefer the 2nd option for 2 reasons.
- `cargo fmt` for free, and aligns your code nicely.
- The code is a bit shorter than using the macro syntax.