Получите удовольствие от создания веб-приложений в реальном времени

Забавное отображение состояния на пользовательский интерфейс во многом похоже на PHP — с помощью шаблонов и логики, отображающей данные в HTML Для приложений, которые обновляются без обновления — PHP, Python и Ruby не имеют очень простого метода для достижения этой синхронизации состояния в реальном времени, но Fun делает. Обычно требуется слой JavaScript, который выполняет длинные / короткие опросы сервера и обновляет DOM во время событий изменения состояния.

Сравните этот простой список задач PHP
…

// This is PHP code, to contrast with the Fun code below
<h1>These are your tasks matey</h1>
<?php
$myTasks = sqlQueryGetMyTasks();
for ($i = 0; $i < sizeof($myTasks); $i++) {
    $task = $myTasks[$i];
    $divClass = "task" . ($task->urgent ? " urgent" : "");
    echo "<div class=\"$divClass\">"
        . "<span class=\"title\">" . $task->title . "</span>"
        ."</div>";
}
?>

… с простым списком задач, написанным на Fun

// Fun code
let user = Session.User
let myTasks = Query({ type: "task", owner: user.id })

<h1>"Hello " user.name ", these are your tasks matey:"</h1>
for (task in myTasks) {
    <div class="task" + (task.urgent ? " urgent")>
        <input data=task.title />
        if (task.completed) {
            <span class="status">"Completed!"</span>
        } else {
            <button clickHandler=markComplete(task)/>"Mark as completed"</button>
        }
    </div>
}

let markComplete = handler(task) {
    task.completed = true
}

<h3>"Create a new task"</h3>
<input data=Local.newTaskTitle />
<button clickHandler=createNewTask />

let createNewTask = handler() {
    let title = Local.newTaskTitle
    Local.newTaskTitle = ""
    Global.create({ owner: user.id, type: "task", title: title })
}

В Fun «Hello» user.name »означает« отобразить здесь значение user.name, а если имя user.name изменилось, обновите пользовательский интерфейс ». Поэтому, когда кто-то редактирует свое имя, изменения обновляются в режиме реального времени, нажатие клавиши выполняется нажатие клавиши. Никакого кода не требуется для работы в сети, обработки событий, синхронизации состояния или манипулирования DOM. Синхронизация состояния в реальном времени работает и для списков.  

Основная роль Fun — излучать HTML. Никаких «echo» или «emit» нет. необходимо, потому что любой оператор с одним литеральным значением неявно испускает это значение. Fun поддерживает XML вместо того, чтобы пытаться обрабатывать строки с HTML. Fun также декларативен.

Вот компоненты
стека Fun .

• Парсер: грамматика Fun написана в PEG.js , генераторе парсера, написанном на javascript, который выводит парсеры, также написанные на javascript.

• Компилятор: Компилятор Fun написан на javascript и преобразует абстрактные синтаксические деревья, сгенерированные синтаксическим анализатором, в код javascript, который запускается как на стороне сервера, так и на стороне клиента.

• В реальном времени: сгенерированный JavaScript использует fin для синхронизации данных между браузерами. Fin — это хранилище ключей / значений в реальном времени, написанное на javascript. Плавник состоит из

  • Плавник API , который работает как в браузерах и на серверах.

  • js.io для модуляции кода и работы в реальном времени

  • node.js для веб-сервера

  • Redis для сохранения структур данных и публикации изменений данных