Scritto da Andrea Manzini
Karax è un web framework che sfrutta il target javascript di Nim e un po’ come i software più famosi come React, Vue o Angular, ci permette di creare SPA (Single Page Applications) con il nostro linguaggio preferito, programmando quindi applicazioni web direttamente in Nim. La peculiarità di queste applicazioni è che vengono eseguite totalmente lato browser, per cui possono essere servite da un semplice file HTML statico. Se invece utilizziamo Nim lato server, ad esempio in accoppiata con un framework backend, ad esempio Jester o Prologue possiamo gestire un completo full-stack per lo sviluppo web sempre usando lo stesso linguaggio.
Il Nim Playground e il Nim Forum ad esempio sono scritti completamente in Nim.
L’installazione di Karax è molto semplice, basta un
nimble install karax
che, oltre alla libreria, ci mette anche a disposizione un comodo eseguibile per provare i nostri progetti, chiamato ‘karun’.
Questa semplice pagina non vuole essere una documentazione esaustiva ma un invito a provare questa tecnologia e contribuire con idee e lavori.
include karax/prelude # scorciatoia per importare alcuni moduli karax tutti insieme
proc createDom(): VNode = # definisce una funzione che ritorna un nodo HTML
buildHtml(p): # crea un elemento di tipo "paragrafo"
text "Ciao da Karax!" # setta il testo nell'elemento paragrafo
setRenderer createDom # indica a Karax quale funzione usare per renderizzare la pagina
salviamo il file come index.nim
e lanciamo il comando
karun -r index.nim
il sorgente sarà compilato in javascript, inserito automaticamente in una pagina HTML che verrà servita da un piccolo webserver provvisorio. Contestualmente si aprirà la pagina web sul browser predefinito.
la funzione che viene invocata è codice Nim a tutti gli effetti, e quindi abbiamo a disposizione tutti i costrutti del linguaggio. Il DSL di Karax rende molto semplice scrivere cicli su collezioni e sequenze
include karax/prelude
var list = @[kstring"Mela", "Arancia", "Banana"]
proc createDom(): VNode =
buildHtml(tdiv):
for fruit in list:
p:
text fruit
text " è un frutto"
setRenderer createDom
Una SPA necessita di essere interattiva, reagendo agli input dell’utente senza dover contattare il server e ricaricare tutto quanto ma solamente gli elementi che vengono modificati; Karax implementa un Virtual Dom per tenere traccia di cosa va ridisegnato. Come in javascript, possiamo associare codice da eseguire al verificarsi di un evento.
include karax/prelude
import algorithm
var message = "Messaggio di prova"
proc createDom(): VNode =
buildHtml(tdiv):
p:
text message
button:
text "Clicca per rovesciare!"
proc onclick =
message.reverse()
setRenderer createDom
In questo esempio vediamo l’utilizzo del tipo kstring ; quando si compila con target js, è sinonimo di cstring, mentre con target nativo diventa string. Questo accorgimento è necessario perchè nei due linguaggi i tipi stringa sono diversi
include karax/prelude
var message = kstring"Karax funziona"
proc createDom(): VNode =
buildHtml(tdiv):
tdiv:
p:
text message
input(value = message):
proc oninput(e: Event, n: VNode) =
message = n.value
setRenderer createDom
osserviamo anche che per creare un elemento <DIV>
dobbiamo usare tdiv
perchè in nim la parola div
è riservata all’operatore di divisione.
Nella prossima parte vedremo come rendere modulare lo sviluppo sfruttando la possibilità di creare dei componenti autonomi e riusabili.