---
# System prepended metadata

title: Understanding Marko 6

---

# Understanding Marko 6

## The Language

### Templating
- Tags
- Text + Placeholders
    - Escaped/Unescaped placeholders
- Attributes
    - Attributes are JavaScript values
    - Default `value` Attribute
        - Syntax Precedent: [BBCode](https://en.wikipedia.org/wiki/BBCode)'s parameterized tags (e.g.`[url=]`)
- Tag Variables
- Tag Parameters
    - [Syntax Precedent](https://twitter.com/MarkoDevTeam/status/1540362487039762434?s=20): Rust's Closure Parameters, Ruby's Block Arguments, Handlebars' Block Parameters

### Components

### 

### Client-side Code

- `<script>`

### State, Events, & Lifecycle

- Assigning to tag variables
![](https://i.imgur.com/pTculgp.png)


### Async Data

### Context

## The Compiler

- Parser
  - defining the syntax in context free grammar
  - iterates over the source string character by character
  - emits events which are used to build an ast
  - an ast is a tree of pojos that represent the syntactic structure of the code
  - see in the playground (todo)
  - only has a surface-level understanding of JavaScript expressions
  - passes those expression strings to babel to get ast nodes for the JavaScriptdoesn't 
- Migrator
- Transformers
- Translator
- Generator

## The Runtime

Marko's runtime is not directly interacted with, but it can be helpful to understand the code your template compiles to.

https://hackmd.io/3kot0iwbQmGufWAQYMc5sQ

### Browser

#### Signals

##### Types
- basic
  - source
      - the entry points into the reactive graph
      - notifies subscribers when the value changes
  - derivation
      - knows how to derive its own value
  - receiver 
      - a derived value that receives its next value from its provider
      - used at the boundary of components
      - can only have one provider
      - kindof like a mix between computations and sources
  - subscription
      - the sinks in the reactive graph
      - 
- other
  - closure
  - receiverDispatch
  - dynamicSubscribers


#### Helpers
#### Templates & Cloning
#### Scope

Rather than relying on closures, all functions are hoisted to the module level and read data from a shared scope array. Each component operates on a subsection of the scope array. Components read/write from/to known indexes in the array (relative to the offset of their subsection). There is a scope array created for the root and every dynamic part of the component tree (<if>, <for>).
    
### Server
    
### Resuming