clojurescript

#clojurescri
pt
Tabla de contenido
Acerca de 1

Capítulo 1: Empezando con clojurescript 2

Observaciones 2

Examples 2

Instalación o configuración 2

Leiningen 2

Linux: 2

OS X: 2

Windows: 2

Conectando a un REPL 2

Iniciar un nuevo proyecto ClojureScript 3

Expresiones de gratitud 3

Capítulo 2: Empezando con Reactivo 4

Introducción 4

Examples 4

Átomos Reactivos 4

Interfaz de usuario usando Reactivo y Hipo 4

Capítulo 3: Eventos de JavaScript 6

Sintaxis 6

Observaciones 6

Examples 6

Agregar evento al botón usando la biblioteca de cierre 6

Utilizando JavaScript Interop 6

Capítulo 4: Gestión de estado con re-frame (https://github.com/Day8/re-frame) 8

Introducción 8

Examples 8

1. Evento simple de despacho 8

Capítulo 5: lein-cljsbuild 10

Observaciones 10
 Examples 10

Desarrollo y producción de ClojureScript. 10

Capítulo 6: Rueda de higo 12

Observaciones 12

Examples 12

Creando un Nuevo Proyecto 12

Creditos 13
Acerca de
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version
from: clojurescript

It is an unofficial and free clojurescript ebook created for educational purposes. All the content is
extracted from Stack Overflow Documentation, which is written by many hardworking individuals at
Stack Overflow. It is neither affiliated with Stack Overflow nor official clojurescript.

The content is released under Creative Commons BY-SA, and the list of contributors to each
chapter are provided in the credits section at the end of this book. Images may be copyright of
their respective owners unless otherwise specified. All trademarks and registered trademarks are
the property of their respective company owners.

Use the content presented in this book at your own risk; it is not guaranteed to be correct nor
accurate, please send your feedback and corrections to info@zzzprojects.com

https://riptutorial.com/es/home 1
Capítulo 1: Empezando con clojurescript
Observaciones
ClojureScript es una versión de Clojure que se compila en código javascript y se ejecuta en el
navegador.

Si bien es casi lo mismo que Clojure, hay algunas diferencias (principalmente, carece de algunas
llamadas de API que invocan funciones de Java que no están disponibles en JavaScript)

Examples
Instalación o configuración

Leiningen
Nota: Si va a utilizar Leiningen, primero debe descargar e instalar JDK 6 o más reciente.

La forma más fácil de comenzar con Clojure es descargar e instalar Leiningen, la herramienta
estándar de facto para administrar proyectos de Clojure.

Linux:

curl https://raw.githubusercontent.com/technomancy/leiningen/stable/bin/lein > ~/bin/lein

export PATH=$PATH:~/bin
chmod 755 ~/bin/lein
lein

OS X:
Siga los pasos de Linux arriba o

Instalar con [Homebrew]:

brew install leiningen

Windows:
Consulte https://github.com/technomancy/leiningen#installation .

Conectando a un REPL

https://riptutorial.com/es/home 2
Una vez que tengas instalado lein , ejecuta

lein repl

Iniciar un nuevo proyecto ClojureScript

lein new mies myproject

cd myproject
./scripts/build

Ahora abre index.html en un navegador web.

Presiona F12

Mire la consola y observe lo siguiente:

Hello world!

Expresiones de gratitud
• El extraordinario trabajo de David Nolen en ClojureScript.

Lea Empezando con clojurescript en línea:

https://riptutorial.com/es/clojurescript/topic/1198/empezando-con-clojurescript

https://riptutorial.com/es/home 3
Capítulo 2: Empezando con Reactivo
Introducción
Reagent es una biblioteca que implementa elementos de React.js en ClojureScript, como las
creaciones de "etiquetas" personalizadas, que se implementan en Reagent a través de funciones.

Examples
Átomos Reactivos

Los átomos de reactivos son esencialmente iguales a los átomos regulares en Clojure y
ClojureScript; son esencialmente variables que pueden alterarse. Esto es especialmente útil, ya
que los tipos de datos de Clojure (Script) son en su mayoría inmutables, lo que significa que para
cambiar el valor de una variable, la variable debe ser redeclarada.

Los átomos normales son incompatibles con el Reactivo, por lo que el Reactivo tiene el suyo
propio. Se declaran como variables normales, excepto con una función adicional envuelta
alrededor del valor:

(:require [reagent.core :as r])

(def num (r/atom 1))

Puedes obtener el valor de un átomo de dos maneras:

(deref num) ; => 1

@num ; => 1

Para cambiar el valor de un átomo, hay dos comandos, swap! y reset! .

• swap! se da comandos, cambia el valor del átomo en función del valor original del átomo en
sí
• reset! recibe un valor, y cambia el valor del átomo al valor dado, independientemente de lo
que el átomo fue originalmente

(swap! num inc) ; => (inc num) => num = 2

(reset! num 5) ; => num = 5

Interfaz de usuario usando Reactivo y Hipo

Reactivo es una interfaz entre ClojureScript y reacciona. Le permite definir componentes React
eficientes usando nada más que funciones y datos sencillos de ClojureScript, que describen su UI
utilizando una sintaxis similar a Hiccup.

Ejemplo:-

https://riptutorial.com/es/home 4
 (defn sample-component []
[:div
[:p "I am a component!"]
[:p.someclass
"I have " [:strong "bold"] "text."]])

Salida:

Soy un componente!

Tengo texto en negrita .

Lea Empezando con Reactivo en línea:

https://riptutorial.com/es/clojurescript/topic/8939/empezando-con-reactivo

https://riptutorial.com/es/home 5
Capítulo 3: Eventos de JavaScript
Sintaxis
• (goog.events dom-element event-type event-handler-function) ;; crea un detector de eventos
de Google Closure
• (.addEventListener dom-element load-event) ;; crea un detector de eventos de JavaScript
normal. Puede ser específico del navegador.

Observaciones
Todos los nombres de eventos de cierre se pueden encontrar en su documentación en la
enumeración de EventType .

Examples
Agregar evento al botón usando la biblioteca de cierre

(ns so-doc.events
(:require
[goog.dom :as dom]
[goog.events :as events]))

(defn handle-click [event] ;an event object is passed to all events

(js/alert "button pressed"))

(events/listen
(dom/getElement "button"); This is the dom element the event comes from
(.-CLICK events/EventType); This is a string or array of strings with the event names.
;;All event names can be found in the EventType enum
handle-click ;function that should handle the event
)

Google Closure no admite eventos de carga de página y considera que no son idiomáticos.
Recomiendan insertar scripts en línea tan pronto como el contenido al que acceden se haya
cargado.

Utilizando JavaScript Interop

(ns so-doc.events)

(enable-console-print!)

(defn click-event []
(println "Button clicked"))

(defn load-event []
(println "Page loaded!")

https://riptutorial.com/es/home 6
 (.addEventListener (.getElementById js/document "btn") "click" click-event false))

(.addEventListener js/window "load" load-event false)

Como el Javascript normal, este método requiere un manejo específico del navegador. Esto no
funcionará en Internet Explorer, por ejemplo.

A diferencia de Google Closure, JavaScript soporta fácilmente eventos de carga de página.

Lea Eventos de JavaScript en línea: https://riptutorial.com/es/clojurescript/topic/6653/eventos-de-

javascript

https://riptutorial.com/es/home 7
Capítulo 4: Gestión de estado con re-frame
(https://github.com/Day8/re-frame)
Introducción
Empieza a ser difícil cuando pensamos que clojurescript es un lenguaje funcionalmente puro, que
mantiene el estado de los componentes de la interfaz de usuario. Es simplemente imposible.

Sin embargo, es posible separar los componentes individuales así como sus estados. Podemos
hacerlo almacenando datos / estado en reactivo / átomo. Pero cuando hay muchos estados y
muchas dependencias, las cosas se vuelven confusas rápidamente y empezamos a desear una
solución inmediata para nuestra administración estatal. Aquí es donde entra el nuevo marco.

Examples
1. Evento simple de despacho

Veremos un evento de envío simple con el uso de ejemplo.

(ns myapp.events

(:require [re-frame.core :refer [reg-event-db]]))

(reg-event-db

:enable-feature-toggle

(fn [db [_ _]]

(assoc-in db [:global :enable-feature-toggle] true)))

Esto está creando un evento llamado :enable-feature-toggle que creará una entrada en db
{:global {:enable-feature-toggle true}} . Un db es como una tienda global para preservar los
resultados del evento. Luego, estos resultados se pueden suscribir y utilizar para modificar el
estado del elemento como veremos en el ejemplo de Evento de suscripción simple .

Después de crear el evento, realmente tenemos que enviar el evento a algún lugar de nuestro
código / componentes de la interfaz de usuario para hacer un uso del mismo. Por ejemplo, si
queremos realizar alguna acción al hacer clic en un div, podemos disparar un evento de clic.

(ns myapp.components.page-header

(:require [myapp.events]
[re-frame.core :refer [dispatch]]))

https://riptutorial.com/es/home 8
 (defn cljs-header []
[:div {:class "cljs-header"

:on-click #(dispatch [:enable-feature-toggle])} "Click Me"])

Tan pronto como hagamos clic en el div, se activará el evento: enable-feature-toggle y se

establecerá un nuevo valor en la db.

Lea Gestión de estado con re-frame (https://github.com/Day8/re-frame) en línea:

https://riptutorial.com/es/clojurescript/topic/9932/gestion-de-estado-con-re-frame--https---github-
com-day8-re-frame-

https://riptutorial.com/es/home 9
Capítulo 5: lein-cljsbuild
Observaciones
Más detalles sobre los parámetros para lein-clsjbuild se pueden encontrar en su proyecto de
ejemplo .

Examples
Desarrollo y producción de ClojureScript.

Agregue un nodo :cljsbuild como el siguiente a su archivo project.clj.

:cljsbuild {
:builds {
;;Different target goals should have different names.
;;We have the dev build here
:dev {
;;The ClojureScript code should reside in these directories
:source-paths ["src-cljs"]
:compiler {
;;This is the target output file
;;This will include none of the goog code.

:output-to "resources/public/js/main.js"
;;This stores the compilation files, including goog files.
;;When using this dev profile, you should add "<script
src="/js/goog/base.js>" to your html files.
;;That will load the goog dependency.
:output-dir "resources/public/js/out"
;;Having optimizations off is recommended for development
;;However this means you have to add the goog dependencies
yourself (see above)
:optimizations :none
;;With no optimizations, marking this true, means it adds
a source map so you can debug in browser
:source-map true
}
}
:prod {
:source-paths ["src-cljs"]
:compiler {
;;Outputs the javascript file to this path.
:output-to "resources/public/js/main.js"
;;Advanced optimizations make your code smaller.
;;They include the goog code in your main file.
;;No need to add an extra script tag.
:optimizations :advanced
:jar true
}
}
}
}

https://riptutorial.com/es/home 10
Para ejecutar estos comandos de compilación, use lein cljsbuild once . Puede especificar qué
perfil usar al agregar el nombre del perfil como el último argumento, por ejemplo, lein cljsbuild
once dev para compilar con los parámetros dev.

El uso de lein cljsbuild auto hará que cljsbuild actualice automáticamente los archivos
modificados.

Lea lein-cljsbuild en línea: https://riptutorial.com/es/clojurescript/topic/6093/lein-cljsbuild

https://riptutorial.com/es/home 11
Capítulo 6: Rueda de higo
Observaciones
Figwheel reconstruye automáticamente su código clojurescript cuando los archivos de origen
cambian y vuelve a cargar el código en el navegador. Recargar funciona sin actualizar la página y
puede preservar parte del estado de la aplicación entre recargas usando defonce .

Es una alternativa al desarrollo basado en REPL (aunque también incluye REPL). En lugar de
reevaluar las funciones modificadas en REPL, vuelve a cargar todo el código y puede usar println
para ver el resultado de la evaluación de expresiones en la consola js del navegador.

Examples
Creando un Nuevo Proyecto

Cree un nuevo proyecto con la plantilla de figwheel Leiningen:

lein new figwheel hello-world

Ejecutar Figwheel:

cd hello-world
lein figwheel

Después de un momento, se iniciará un servidor web de desarrollo y se abrirá la página en su

navegador.

También abre un REPL Clojurescript conectado al navegador. Intente ingresar (js/alert "Test") :
debería ver una alerta emergente en el navegador.

Intenta editar hello_world/core.cljs . Se actualizará automáticamente en su navegador cuando lo

guarde. Puede usar la funcionalidad de recarga de manera similar a la REPL agregando print y
viendo los resultados en la consola de Javascript.

Lea Rueda de higo en línea: https://riptutorial.com/es/clojurescript/topic/3963/rueda-de-higo

https://riptutorial.com/es/home 12
Creditos
S.
Capítulos Contributors
No

Empezando con
1 Community, hawkeye, Matt W-D, Zain Rizvi
clojurescript

2 Empezando con Reactivo Mrinal Saurabh, Qwerp-Derp, Supriya Gole

3 Eventos de JavaScript DonyorM

Gestión de estado con re-

frame
4 Mrinal Saurabh
(https://github.com/Day8/re-
frame)

5 lein-cljsbuild DonyorM

6 Rueda de higo kolen, porglezomp

https://riptutorial.com/es/home 13