Gestión De Estado Simple En JavaScript Con Nanny State

Nanny State  es una pequeña biblioteca que escribí para facilitar la creación de aplicaciones web basadas en el estado con Vanilla JS. Es similar a React, pero con mucha menos sobrecarga y nueva sintaxis para aprender. También utiliza un solo objeto de estado para toda la aplicación en lugar de que cada componente individual tenga su propio estado. Fue inspirado por HyperApp y tiene muchas similitudes con Elm.

En esta publicación, explicaré cómo funciona Nanny State y luego demostraré lo que puede hacer con un par de ejemplos.

Flujo de datos unidireccional

Nanny State utiliza un modelo de flujo de datos unidireccional, compuesto por 3 partes:

• Estado  : un objeto que almacena todos los datos de la aplicación
• Ver  : una función que devuelve una cadena de HTML basada en el estado actual
• Actualizar  : una función que es la única forma de cambiar el estado y volver a renderizar la vista

En Nanny State, el estado lo es todo. El objeto de estado es la única fuente de verdad para su aplicación: cada bit de datos de la aplicación es una propiedad de este objeto. Incluso los controladores de eventos utilizados en la Vista son métodos del objeto de estado.

La Vista es una representación del estado como HTML. Cambia cada vez que cambia el estado y permite a los usuarios interactuar con la aplicación.

La función Actualizar es la única forma en que se puede cambiar el estado. Es un único punto de entrada para actualizar el estado y asegura que los cambios sean deterministas, consistentes y predecibles.

Estas 3 cosas son todo lo que necesita para crear una aplicación en Nanny State. De hecho, se puede resumir haciéndote las siguientes 3 preguntas:

1. ¿Qué datos necesito almacenar en mi aplicación? Esto compondrá las propiedades del  State objeto .
2. ¿Cómo quiero que se presenten los datos de la aplicación en la página? Esto te ayudará a crear la  View función.
3. ¿Cómo cambiarán los datos de la aplicación cuando el usuario interactúe con ella? La  Update función será necesaria para esto.

¡Hola Nanny State!

¡La forma más fácil de ver cómo funciona Nanny State es escribir algo de código! Comenzaremos con un ejemplo básico y luego intentaremos hacer algo un poco más complejo.

La forma más fácil de ejecutar el siguiente ejemplo es usar un editor de código en línea como CodePen, o puede ejecutarlo localmente instalando el  nanny-state paquete usando NodeJS.

Copie el siguiente código en la sección JS de CodePen:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`

const State = {
  name: "Nanny State",
  View
}

const Update = Nanny(State)

Esto muestra cómo las 3 partes de Nanny-State funcionan juntas. Echemos un vistazo de cerca a cada parte individualmente:

const View = state => html`<h1>Hello ${state.name}</h1>`

Nanny state usa  µhtml  para representar HTML. La  View función  siempre  acepta los objetos de estado como su  único  parámetro. A continuación, utiliza la  html función proporcionada por µhtml para crear HTML basado en el literal de la plantilla que se proporciona como argumento.

Usar un literal de plantilla significa que podemos usar la  ${variable} notación para insertar propiedades del estado en la vista. En este ejemplo lo estamos usando para insertar el valor de la  name propiedad dentro del  <h1> elemento.

const State = {
  name: "Nanny State",
  View
}

El  State objeto es donde   se almacenan todos los datos de la aplicación. Incluye cualquier propiedad y valor que se mostrará en el  View y que podría cambiar durante el ciclo de vida de la aplicación, como la  name propiedad en este ejemplo.

Tenga en cuenta que  View también es una propiedad de la  State notación abreviada de objeto de uso. Recuerde  que el estado lo es todo  : cada parte de la aplicación es propiedad del estado.

const Update = Nanny(State)

La línea final define la  Update función como el valor de retorno de la  Nanny función. Esto ahora se puede usar para actualizar el valor de cualquier propiedad del archivo  State. De hecho, es la  únicaState forma en que  se pueden actualizar  las propiedades de  . También realiza el renderizado inicial del  View basado en los valores proporcionados en el archivo  State. Esto significa que se mostrará un encabezado que dice "Hello Nanny State" como se puede ver en el CodePen a continuación:

 

Sin embargo, este ejemplo es básicamente una página estática. Hagámoslo dinámico agregando un cuadro de entrada que le permite al usuario ingresar un nombre al que desea saludar. Actualice el código para que se vea como lo siguiente:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`

const changeName = event => Update({name: event.target.value})

const State = {
  name: "Nanny State",
  changeName,
  View
}

const Update = Nanny(State)

En este ejemplo, hemos agregado un  <input> elemento al archivo  View. Los detectores de eventos se definen en línea en la vista, por lo que en este ejemplo tenemos un  oninput detector de eventos adjunto al  <input> elemento. Esto llamará al  changeName controlador de eventos, que es un método del objeto de estado, siempre que se detecte cualquier entrada. Este detector de eventos necesita definirse, así que echemos un vistazo más de cerca:

const changeName = event => Update({name: event.target.value})

Este es un controlador de eventos estándar escrito en Vanilla JS. Acepta un objeto de evento como parámetro como de costumbre y cuando se llama, queremos actualizar el  State objeto, por lo que usamos la  Update función, ya que esta es la única forma en que podemos actualizar el archivo  State.

El argumento que proporcionamos a la  Update función es un objeto que contiene las propiedades que queremos actualizar en el estado y los valores nuevos respectivos. En este caso, queremos actualizar la  name propiedad al valor que ingresó el usuario en el campo de entrada, que es parte del objeto de evento y al que se accede mediante  event.target.value. Esto actualizará el estado con el nuevo valor del campo de entrada y volverá a mostrar la página al instante. El uso de µhtml para renderizar significa que solo  View se actualizan las partes del que realmente han cambiado. Esto significa que volver a renderizar después de una State actualización es eficiente y increíblemente rápido.

Y eso es todo: ¡tu primera aplicación Nanny State! Intente escribir y verá qué tan rápido reacciona a la entrada del usuario... y todo con solo unas pocas líneas de código. Puede ver el código en CodePen a continuación:

 

Nanny State hace que sea muy fácil escribir aplicaciones basadas en estados reactivos. Como puede ver, no se requiere mucho código para crear una aplicación dinámica basada en estado que reaccione a la interacción del usuario. Esta es la belleza de Nanny State.

Prueba de verdadero o falso

Ahora que hemos visto un ejemplo básico, intentemos hacer algo un poco más complejo. Usaremos Nanny State para construir un juego de preguntas de Verdadero o Falso. Abre un nuevo bolígrafo en CodePen y síguelo.

Empezaremos de la misma manera, importando la biblioteca Nanny State:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'

A continuación, crearemos el  State objeto y lo llenaremos con los valores de propiedad iniciales que usará el juego:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}

Este objeto contiene 3 propiedades:

• score – esto realiza un seguimiento de cuántas preguntas ha respondido correctamente el jugador y comienza en 0
• index – esto realiza un seguimiento de qué pregunta está haciendo el jugador y corresponde a la última propiedad, que es la  questions matriz.
• questions – Esta es una matriz de objetos con  question y  answer propiedades. La  question propiedad es una cadena y la  answer propiedad es un booleano

Ahora que hemos creado los datos, creemos el  View para visualizar esos datos:

const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.index].question}</p>
     <button onclick=${state.checkAnswer(true)}>TRUE</button>
     <button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`

Esto es un poco más complicado  View de lo que vimos en el ejemplo anterior, pero la mayor parte debería explicarse por sí mismo. Después del encabezado del título, mostramos la puntuación usando la  score propiedad del  State objeto. Luego usamos un operador ternario para bifurcar la vista. Debido a que la vista está escrita usando literales de plantilla, no puede usar  if-else declaraciones para bifurcar el código, por lo que debe usar declaraciones ternarias.

Esta declaración ternaria verifica si  questionNumber es menor que la longitud de la  questions matriz, que básicamente verifica si aún quedan preguntas por responder. Si los hay, la pregunta se muestra con dos botones, uno para VERDADERO y otro para FALSO. Si no quedan preguntas, mostramos un mensaje GAME OVER junto con la puntuación del jugador.

Una cosa a tener en cuenta al bifurcar el código de vista usando operadores ternarios es que necesita usar la  html función para cada bifurcación nueva.

Ambos botones tienen un  onclick detector de eventos en línea adjunto que llama al mismo controlador de eventos  checkAnswer y acepta un argumento de  true o  false dependiendo de qué botón se presionó. Escribamos este controlador de eventos ahora:

const checkAnswer = answer => event => Update(state => ({
    score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
    index: state.index + 1
}))

Este controlador de eventos acepta un argumento adicional de  answer , así como el  event objeto que aceptan todos los controladores de eventos, por lo que debe procesarse utilizando la notación de doble flecha que se ve arriba. Llama a la  Update función que usa un operador ternario para verificar si la respuesta proporcionada como argumento coincide con la respuesta a la pregunta actual, si es así, la  score propiedad aumenta en 1, si no, la puntuación permanece igual. También aumenta el valor de la  index propiedad, por lo que se mostrará la siguiente pregunta.

Este controlador de eventos ahora debe agregarse a  State, junto con  View. Podemos hacer esto usando la notación abreviada de objetos, siempre y cuando  checkAnswer y  View estén definidos antes  State:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
],
  checkAnswer,
  View
}

Ahora que todo es parte del  State, todo lo que queda por hacer es definir la  Update función llamando a la  Nanny función y proporcionando  State como argumento:

const Update = Nanny(State)

¡Y eso es! El cuestionario debería comenzar a ejecutarse de inmediato y debería poder responder cada pregunta y la puntuación cambiará según si la respuesta es correcta o no. Otro ejemplo de una aplicación interactiva que se crea rápidamente con una cantidad mínima de código. Intente responder las preguntas y vea cómo le va. Puede ver el código terminado en CodePen a continuación:

 

Una vez que te hayas divertido jugando y te hayas acostumbrado a cómo funciona Nanny State, aquí tienes algunas ideas para ampliar el juego:

• Añadir más preguntas
• Agregue los botones 'Comenzar' y 'Reproducir de nuevo' para permitir que los jugadores jueguen de nuevo
• Seleccionar preguntas al azar
• Mantenga un registro de la puntuación más alta
• Agregar preguntas con otras respuestas, excepto verdadero o falso
• Crear un cuestionario de opción múltiple

Nanny State incluye muchas más ventajas, como soporte integrado para usar almacenamiento y enrutamiento locales. Consulte  los documentos  para obtener más información o póngase en contacto si tiene alguna pregunta.

Me encantaría saber lo que piensas de Nanny State. ¿Considerarías usarlo para un proyecto? ¿Hay algo más que le gustaría saber al respecto? ¡Deja un comentario en nuestra comunidad!  

Fuente: https://www.sitepoint.com/simple-state-management-nanny-state/

#nanny  #javascript 

What is GEEK

Buddha Community

Gestión De Estado Simple En JavaScript Con Nanny State

Nanny State  es una pequeña biblioteca que escribí para facilitar la creación de aplicaciones web basadas en el estado con Vanilla JS. Es similar a React, pero con mucha menos sobrecarga y nueva sintaxis para aprender. También utiliza un solo objeto de estado para toda la aplicación en lugar de que cada componente individual tenga su propio estado. Fue inspirado por HyperApp y tiene muchas similitudes con Elm.

En esta publicación, explicaré cómo funciona Nanny State y luego demostraré lo que puede hacer con un par de ejemplos.

Flujo de datos unidireccional

Nanny State utiliza un modelo de flujo de datos unidireccional, compuesto por 3 partes:

• Estado  : un objeto que almacena todos los datos de la aplicación
• Ver  : una función que devuelve una cadena de HTML basada en el estado actual
• Actualizar  : una función que es la única forma de cambiar el estado y volver a renderizar la vista

En Nanny State, el estado lo es todo. El objeto de estado es la única fuente de verdad para su aplicación: cada bit de datos de la aplicación es una propiedad de este objeto. Incluso los controladores de eventos utilizados en la Vista son métodos del objeto de estado.

La Vista es una representación del estado como HTML. Cambia cada vez que cambia el estado y permite a los usuarios interactuar con la aplicación.

La función Actualizar es la única forma en que se puede cambiar el estado. Es un único punto de entrada para actualizar el estado y asegura que los cambios sean deterministas, consistentes y predecibles.

Estas 3 cosas son todo lo que necesita para crear una aplicación en Nanny State. De hecho, se puede resumir haciéndote las siguientes 3 preguntas:

1. ¿Qué datos necesito almacenar en mi aplicación? Esto compondrá las propiedades del  State objeto .
2. ¿Cómo quiero que se presenten los datos de la aplicación en la página? Esto te ayudará a crear la  View función.
3. ¿Cómo cambiarán los datos de la aplicación cuando el usuario interactúe con ella? La  Update función será necesaria para esto.

¡Hola Nanny State!

¡La forma más fácil de ver cómo funciona Nanny State es escribir algo de código! Comenzaremos con un ejemplo básico y luego intentaremos hacer algo un poco más complejo.

La forma más fácil de ejecutar el siguiente ejemplo es usar un editor de código en línea como CodePen, o puede ejecutarlo localmente instalando el  nanny-state paquete usando NodeJS.

Copie el siguiente código en la sección JS de CodePen:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`

const State = {
  name: "Nanny State",
  View
}

const Update = Nanny(State)

Esto muestra cómo las 3 partes de Nanny-State funcionan juntas. Echemos un vistazo de cerca a cada parte individualmente:

const View = state => html`<h1>Hello ${state.name}</h1>`

Nanny state usa  µhtml  para representar HTML. La  View función  siempre  acepta los objetos de estado como su  único  parámetro. A continuación, utiliza la  html función proporcionada por µhtml para crear HTML basado en el literal de la plantilla que se proporciona como argumento.

Usar un literal de plantilla significa que podemos usar la  ${variable} notación para insertar propiedades del estado en la vista. En este ejemplo lo estamos usando para insertar el valor de la  name propiedad dentro del  <h1> elemento.

const State = {
  name: "Nanny State",
  View
}

El  State objeto es donde   se almacenan todos los datos de la aplicación. Incluye cualquier propiedad y valor que se mostrará en el  View y que podría cambiar durante el ciclo de vida de la aplicación, como la  name propiedad en este ejemplo.

Tenga en cuenta que  View también es una propiedad de la  State notación abreviada de objeto de uso. Recuerde  que el estado lo es todo  : cada parte de la aplicación es propiedad del estado.

const Update = Nanny(State)

La línea final define la  Update función como el valor de retorno de la  Nanny función. Esto ahora se puede usar para actualizar el valor de cualquier propiedad del archivo  State. De hecho, es la  únicaState forma en que  se pueden actualizar  las propiedades de  . También realiza el renderizado inicial del  View basado en los valores proporcionados en el archivo  State. Esto significa que se mostrará un encabezado que dice "Hello Nanny State" como se puede ver en el CodePen a continuación:

 

Sin embargo, este ejemplo es básicamente una página estática. Hagámoslo dinámico agregando un cuadro de entrada que le permite al usuario ingresar un nombre al que desea saludar. Actualice el código para que se vea como lo siguiente:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`

const changeName = event => Update({name: event.target.value})

const State = {
  name: "Nanny State",
  changeName,
  View
}

const Update = Nanny(State)

En este ejemplo, hemos agregado un  <input> elemento al archivo  View. Los detectores de eventos se definen en línea en la vista, por lo que en este ejemplo tenemos un  oninput detector de eventos adjunto al  <input> elemento. Esto llamará al  changeName controlador de eventos, que es un método del objeto de estado, siempre que se detecte cualquier entrada. Este detector de eventos necesita definirse, así que echemos un vistazo más de cerca:

const changeName = event => Update({name: event.target.value})

Este es un controlador de eventos estándar escrito en Vanilla JS. Acepta un objeto de evento como parámetro como de costumbre y cuando se llama, queremos actualizar el  State objeto, por lo que usamos la  Update función, ya que esta es la única forma en que podemos actualizar el archivo  State.

El argumento que proporcionamos a la  Update función es un objeto que contiene las propiedades que queremos actualizar en el estado y los valores nuevos respectivos. En este caso, queremos actualizar la  name propiedad al valor que ingresó el usuario en el campo de entrada, que es parte del objeto de evento y al que se accede mediante  event.target.value. Esto actualizará el estado con el nuevo valor del campo de entrada y volverá a mostrar la página al instante. El uso de µhtml para renderizar significa que solo  View se actualizan las partes del que realmente han cambiado. Esto significa que volver a renderizar después de una State actualización es eficiente y increíblemente rápido.

Y eso es todo: ¡tu primera aplicación Nanny State! Intente escribir y verá qué tan rápido reacciona a la entrada del usuario... y todo con solo unas pocas líneas de código. Puede ver el código en CodePen a continuación:

 

Nanny State hace que sea muy fácil escribir aplicaciones basadas en estados reactivos. Como puede ver, no se requiere mucho código para crear una aplicación dinámica basada en estado que reaccione a la interacción del usuario. Esta es la belleza de Nanny State.

Prueba de verdadero o falso

Ahora que hemos visto un ejemplo básico, intentemos hacer algo un poco más complejo. Usaremos Nanny State para construir un juego de preguntas de Verdadero o Falso. Abre un nuevo bolígrafo en CodePen y síguelo.

Empezaremos de la misma manera, importando la biblioteca Nanny State:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'

A continuación, crearemos el  State objeto y lo llenaremos con los valores de propiedad iniciales que usará el juego:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}

Este objeto contiene 3 propiedades:

• score – esto realiza un seguimiento de cuántas preguntas ha respondido correctamente el jugador y comienza en 0
• index – esto realiza un seguimiento de qué pregunta está haciendo el jugador y corresponde a la última propiedad, que es la  questions matriz.
• questions – Esta es una matriz de objetos con  question y  answer propiedades. La  question propiedad es una cadena y la  answer propiedad es un booleano

Ahora que hemos creado los datos, creemos el  View para visualizar esos datos:

const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.index].question}</p>
     <button onclick=${state.checkAnswer(true)}>TRUE</button>
     <button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`

Esto es un poco más complicado  View de lo que vimos en el ejemplo anterior, pero la mayor parte debería explicarse por sí mismo. Después del encabezado del título, mostramos la puntuación usando la  score propiedad del  State objeto. Luego usamos un operador ternario para bifurcar la vista. Debido a que la vista está escrita usando literales de plantilla, no puede usar  if-else declaraciones para bifurcar el código, por lo que debe usar declaraciones ternarias.

Esta declaración ternaria verifica si  questionNumber es menor que la longitud de la  questions matriz, que básicamente verifica si aún quedan preguntas por responder. Si los hay, la pregunta se muestra con dos botones, uno para VERDADERO y otro para FALSO. Si no quedan preguntas, mostramos un mensaje GAME OVER junto con la puntuación del jugador.

Una cosa a tener en cuenta al bifurcar el código de vista usando operadores ternarios es que necesita usar la  html función para cada bifurcación nueva.

Ambos botones tienen un  onclick detector de eventos en línea adjunto que llama al mismo controlador de eventos  checkAnswer y acepta un argumento de  true o  false dependiendo de qué botón se presionó. Escribamos este controlador de eventos ahora:

const checkAnswer = answer => event => Update(state => ({
    score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
    index: state.index + 1
}))

Este controlador de eventos acepta un argumento adicional de  answer , así como el  event objeto que aceptan todos los controladores de eventos, por lo que debe procesarse utilizando la notación de doble flecha que se ve arriba. Llama a la  Update función que usa un operador ternario para verificar si la respuesta proporcionada como argumento coincide con la respuesta a la pregunta actual, si es así, la  score propiedad aumenta en 1, si no, la puntuación permanece igual. También aumenta el valor de la  index propiedad, por lo que se mostrará la siguiente pregunta.

Este controlador de eventos ahora debe agregarse a  State, junto con  View. Podemos hacer esto usando la notación abreviada de objetos, siempre y cuando  checkAnswer y  View estén definidos antes  State:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
],
  checkAnswer,
  View
}

Ahora que todo es parte del  State, todo lo que queda por hacer es definir la  Update función llamando a la  Nanny función y proporcionando  State como argumento:

const Update = Nanny(State)

¡Y eso es! El cuestionario debería comenzar a ejecutarse de inmediato y debería poder responder cada pregunta y la puntuación cambiará según si la respuesta es correcta o no. Otro ejemplo de una aplicación interactiva que se crea rápidamente con una cantidad mínima de código. Intente responder las preguntas y vea cómo le va. Puede ver el código terminado en CodePen a continuación:

 

Una vez que te hayas divertido jugando y te hayas acostumbrado a cómo funciona Nanny State, aquí tienes algunas ideas para ampliar el juego:

• Añadir más preguntas
• Agregue los botones 'Comenzar' y 'Reproducir de nuevo' para permitir que los jugadores jueguen de nuevo
• Seleccionar preguntas al azar
• Mantenga un registro de la puntuación más alta
• Agregar preguntas con otras respuestas, excepto verdadero o falso
• Crear un cuestionario de opción múltiple

Nanny State incluye muchas más ventajas, como soporte integrado para usar almacenamiento y enrutamiento locales. Consulte  los documentos  para obtener más información o póngase en contacto si tiene alguna pregunta.

Me encantaría saber lo que piensas de Nanny State. ¿Considerarías usarlo para un proyecto? ¿Hay algo más que le gustaría saber al respecto? ¡Deja un comentario en nuestra comunidad!  

Fuente: https://www.sitepoint.com/simple-state-management-nanny-state/

#nanny  #javascript 

Gestion D'état Simple En JavaScript Avec Nanny State

Nanny State  est une petite bibliothèque que j'ai écrite pour faciliter la création d'applications Web basées sur l'état à l'aide de Vanilla JS. C'est similaire à React, mais avec beaucoup moins de frais généraux et une nouvelle syntaxe à apprendre. Il utilise également un seul objet d'état à l'échelle de l'application au lieu que chaque composant individuel ait son propre état. Il a été inspiré par HyperApp et présente de nombreuses similitudes avec Elm.

Dans cet article, je vais expliquer comment fonctionne Nanny State, puis démontrer ce qu'il peut faire avec quelques exemples.

Flux de données à sens unique

Nanny State utilise un modèle de flux de données à sens unique, composé de 3 parties :

• État  - un objet qui stocke toutes les données de l'application
• Afficher  - une fonction qui renvoie une chaîne de caractères HTML en fonction de l'état actuel
• Mettre à jour  - une fonction qui est le seul moyen de changer l'état et de restituer la vue

Dans Nanny State, l'État est tout. L'objet d'état est la seule source de vérité pour votre application - chaque bit de données d'application est une propriété de cet objet. Même les gestionnaires d'événements utilisés dans la vue sont des méthodes de l'objet d'état.

La vue est une représentation de l'état au format HTML. Il change chaque fois que l'état change et permet aux utilisateurs d'interagir avec l'application.

La fonction de mise à jour est le seul moyen de modifier l'état. Il s'agit d'un point d'entrée unique pour la mise à jour de l'état et garantit que les changements sont déterministes, cohérents et prévisibles.

Ces 3 choses sont tout ce dont vous avez besoin pour créer une application dans Nanny State. En fait, cela peut se résumer en se posant les 3 questions suivantes :

1. Quelles données dois-je stocker dans mon application ? Cela constituera les propriétés de l'  State objet
2. Comment est-ce que je veux que les données de l'application soient présentées sur la page ? Cela vous aidera à créer la  View fonction
3. Comment les données de l'application changent-elles lorsque l'utilisateur interagit avec ? La  Update fonction sera nécessaire pour cela

Bonjour Nanny State !

La façon la plus simple de voir comment fonctionne Nanny State est d'écrire du code ! Nous allons commencer par un exemple de base, puis essayer de rendre quelque chose d'un peu plus complexe.

Le moyen le plus simple d'exécuter l'exemple suivant consiste à utiliser un éditeur de code en ligne tel que CodePen, ou vous pouvez l'exécuter localement en installant le  nanny-state package à l'aide de NodeJS.

Copiez le code suivant dans la section JS de CodePen :

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`

const State = {
  name: "Nanny State",
  View
}

const Update = Nanny(State)

Cela montre comment les 3 parties de Nanny-State fonctionnent ensemble. Examinons de près chaque partie individuellement :

const View = state => html`<h1>Hello ${state.name}</h1>`

L' état Nanny utilise  µhtml  pour afficher le HTML. La  View fonction   accepte  toujours les objets d'état comme seul  paramètre. Il utilise ensuite la  html fonction fournie par µhtml pour créer du code HTML basé sur le modèle littéral qui lui est fourni en tant qu'argument.

L'utilisation d'un modèle littéral signifie que nous pouvons utiliser la  ${variable} notation pour insérer les propriétés de l'état dans la vue. Dans cet exemple, nous l'utilisons pour insérer la valeur de la  name propriété à l'intérieur de l'  <h1> élément.

const State = {
  name: "Nanny State",
  View
}

L'  State objet est l'endroit où  toutes  les données de l'application sont stockées. Il inclut toutes les propriétés et valeurs qui seront affichées dans  View et qui pourraient changer au cours du cycle de vie de l'application, comme la  name propriété dans cet exemple.

Notez que  View c'est aussi une propriété de la  State notation abrégée d'objet using. N'oubliez pas  que l'État est tout  - chaque partie de l'application est la propriété de l'État.

const Update = Nanny(State)

La dernière ligne définit la  Update fonction comme la valeur de retour de la  Nanny fonction. Cela peut maintenant être utilisé pour mettre à jour la valeur de toutes les propriétés du fichier  State. En fait, c'est le  seul  moyen de  State mettre à jour les propriétés du . Il effectue également le rendu initial du  View basé sur les valeurs fournies dans le  State. Cela signifie qu'un titre sera affiché indiquant "Hello Nanny State" comme on peut le voir dans le CodePen ci-dessous :

 

Cet exemple est fondamentalement juste une page statique cependant. Rendons-le dynamique en ajoutant une zone de saisie qui permet à l'utilisateur d'entrer un nom à qui il veut dire bonjour. Mettez à jour le code pour qu'il ressemble à ceci :

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`

const changeName = event => Update({name: event.target.value})

const State = {
  name: "Nanny State",
  changeName,
  View
}

const Update = Nanny(State)

Dans cet exemple, nous avons ajouté un  <input> élément au fichier  View. Les écouteurs d'événement sont définis en ligne dans la vue, donc dans cet exemple, nous avons un  oninput écouteur d'événement attaché à l'  <input> élément. Cela appellera le  changeName gestionnaire d'événements, qui est une méthode de l'objet d'état, chaque fois qu'une entrée est détectée. Cet écouteur d'événement doit être défini, alors examinons-le de plus près :

const changeName = event => Update({name: event.target.value})

Il s'agit d'un gestionnaire d'événements standard écrit en Vanilla JS. Il accepte un objet événement comme paramètre comme d'habitude et lorsqu'il est appelé, nous voulons mettre à jour l'  State objet, nous utilisons donc la  Update fonction, car c'est la seule façon de mettre à jour le  State.

L'argument que nous fournissons à la  Update fonction est un objet qui contient toutes les propriétés que nous voulons mettre à jour dans l'état et les nouvelles valeurs respectives. Dans ce cas, nous voulons mettre à jour la  name propriété à la valeur qui a été saisie par l'utilisateur dans le champ de saisie, qui fait partie de l'objet événement et accessible à l'aide de  event.target.value. Cela mettra à jour l'état avec la nouvelle valeur du champ de saisie et restituera instantanément la page. L'utilisation de µhtml pour le rendu signifie que seules les parties de  View qui ont réellement changé sont mises à jour. Cela signifie que le nouveau rendu après une mise à State jour est à la fois efficace et incroyablement rapide.

Et c'est tout - votre première application Nanny State ! Essayez de taper et vous verrez à quelle vitesse il réagit aux entrées de l'utilisateur… et tout cela avec seulement quelques lignes de code. Vous pouvez voir le code dans le CodePen ci-dessous :

 

Nanny State facilite l'écriture d'applications réactives basées sur l'état. Comme vous pouvez le voir, il n'y a pas beaucoup de code requis pour créer une application dynamique basée sur l'état qui réagit à l'interaction de l'utilisateur. C'est la beauté de Nanny State.

Questionnaire vrai ou faux

Maintenant que nous avons vu un exemple de base, essayons de rendre quelque chose d'un peu plus complexe. Nous utiliserons Nanny State pour créer un jeu-questionnaire Vrai ou Faux. Ouvrez un nouveau stylet sur CodePen et suivez.

On va commencer de la même manière, en important la librairie Nanny State :

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'

Ensuite, nous allons créer l'  State objet et le remplir avec les valeurs de propriété initiales que le jeu utilisera :

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}

Cet objet contient 3 propriétés :

• score - cela garde une trace du nombre de questions auxquelles le joueur a répondu correctement et commence à 0
• index - cela garde une trace de la question à laquelle le joueur est en train de répondre et correspond à la dernière propriété qui est le  questions tableau.
• questions – Il s'agit d'un tableau d'objets avec des  propriétés question et  answer . La  question propriété est une chaîne et la  answer propriété est un booléen

Maintenant que nous avons créé les données, créons le  View pour visualiser ces données :

const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.index].question}</p>
     <button onclick=${state.checkAnswer(true)}>TRUE</button>
     <button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`

C'est un peu plus compliqué  View que ce que nous avons vu dans l'exemple précédent, mais la plupart devraient être assez explicites. Après l'en-tête du titre, nous affichons le score en utilisant la  score propriété de l'  State objet. Ensuite, nous utilisons un opérateur ternaire pour bifurquer la vue. Étant donné que la vue est écrite à l'aide de littéraux de modèle, vous ne pouvez pas utiliser  if-else d'instructions pour bifurquer le code, vous devez donc utiliser des instructions ternaires.

Cette instruction ternaire vérifie si  questionNumber est inférieur à la longueur du  questions tableau, ce qui consiste essentiellement à vérifier s'il reste des questions à répondre. S'il y en a, la question est affichée avec deux boutons, un pour VRAI et un pour FAUX. S'il n'y a plus de questions, nous affichons un message GAME OVER avec le score du joueur.

Une chose à noter lors du fork du code de vue à l'aide d'opérateurs ternaires est que vous devez utiliser la  html fonction pour chaque nouveau fork.

Les boutons ont tous deux un  onclick écouteur d'événements en ligne qui leur est attaché qui appelle le même gestionnaire d'événements  checkAnswer et accepte un argument de  true ou  false selon le bouton sur lequel vous avez appuyé. Écrivons maintenant ce gestionnaire d'événements :

const checkAnswer = answer => event => Update(state => ({
    score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
    index: state.index + 1
}))

Ce gestionnaire d'événements accepte un argument supplémentaire de  answer ainsi que l'  event objet que tous les gestionnaires d'événements acceptent, il doit donc être curry en utilisant la notation à double flèche vue ci-dessus. Il appelle la  Update fonction qui utilise un opérateur ternaire pour vérifier si la réponse fournie en argument correspond à la réponse à la question actuelle, si c'est le cas, la  score propriété est augmentée de 1, sinon le score reste le même. Cela augmente également la valeur de la  index propriété, de sorte que la question suivante sera affichée.

Ce gestionnaire d'événements doit maintenant être ajouté au  State, avec le  View. Nous pouvons le faire en utilisant la notation abrégée d'objet, tant que  checkAnswer et  View sont définis avant  State:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
],
  checkAnswer,
  View
}

Maintenant que tout fait partie du  State, il ne reste plus qu'à définir la  Update fonction en appelant la  Nanny fonction et en fournissant  State comme argument :

const Update = Nanny(State)

Et c'est tout! Le quiz devrait commencer immédiatement et vous devriez pouvoir répondre à chaque question et le score changera selon que la réponse est bonne ou non. Un autre exemple d'application interactive rapide à créer avec une quantité minimale de code. Essayez de répondre aux questions et voyez comment vous vous en sortez. Vous pouvez voir le code fini dans le CodePen ci-dessous :

 

Une fois que vous vous êtes amusé à jouer et que vous vous êtes habitué au fonctionnement de Nanny State, voici quelques idées pour étendre le jeu :

• Ajouter d'autres questions
• Ajoutez des boutons "Démarrer" et "Rejouer" pour permettre aux joueurs de rejouer
• Sélectionnez des questions au hasard
• Gardez une trace du score le plus élevé
• Ajouter des questions avec d'autres réponses, sauf vrai ou faux
• Créer un quiz à choix multiples

Nanny State inclut beaucoup plus d'autres avantages tels que la prise en charge intégrée de l'utilisation du stockage et du routage locaux. Consultez  la documentation  pour plus d'informations ou contactez-nous si vous avez des questions.

J'aimerais savoir ce que vous pensez de Nanny State. Envisageriez-vous de l'utiliser pour un projet ? Y a-t-il autre chose que vous aimeriez savoir à ce sujet ? Laissez un commentaire dans notre communauté !  

Source : https://www.sitepoint.com/simple-state-management-nanny-state/

#nanny  #javascript 

Gerenciamento De Estado Simples Em JavaScript Com Nanny State

Nanny State  é uma pequena biblioteca que escrevi para ajudar a criar aplicativos da Web baseados em estado usando Vanilla JS. É semelhante ao React, mas com muito menos sobrecarga e nova sintaxe para aprender. Ele também usa um único objeto de estado em todo o aplicativo em vez de cada componente individual ter seu próprio estado. Foi inspirado no HyperApp e tem muitas semelhanças com o Elm.

Neste post, vou explicar como o Nanny State funciona e, em seguida, demonstrar o que ele pode fazer com alguns exemplos.

Fluxo de dados unidirecional

Nanny State usa um modelo de fluxo de dados unidirecional, composto de 3 partes:

• State  – um objeto que armazena todos os dados do aplicativo
• View  – uma função que retorna uma string de HTML com base no estado atual
• Update  – uma função que é a única maneira de alterar o estado e renderizar novamente a exibição

Em Nanny State, o estado é tudo. O objeto de estado é a única fonte de verdade para seu aplicativo – cada bit de dados do aplicativo é uma propriedade desse objeto. Até mesmo os manipuladores de eventos usados ​​na View são métodos do objeto de estado.

A View é uma representação do estado como HTML. Ele muda sempre que o estado muda e permite que os usuários interajam com o aplicativo.

A função Update é a única maneira de alterar o estado. É um único ponto de entrada para atualizar o estado e garante que as mudanças sejam determinísticas, consistentes e previsíveis.

Essas 3 coisas são tudo o que você precisa para criar um aplicativo no Nanny State. Na verdade, isso pode ser resumido fazendo a si mesmo as seguintes 3 perguntas:

1. Quais dados preciso armazenar no meu aplicativo? Isto irá compor as propriedades do  State objeto
2. Como quero que os dados do aplicativo sejam apresentados na página? Isso irá ajudá-lo a criar a  View função
3. Como os dados do aplicativo mudarão quando o usuário interagir com ele? A  Update função será necessária para isso

Olá Nanny State!

A maneira mais fácil de ver como o Nanny State funciona é escrever algum código! Começaremos com um exemplo básico e depois tentaremos fazer algo um pouco mais complexo.

A maneira mais fácil de executar o exemplo a seguir é usar um editor de código online, como o CodePen, ou você pode executá-lo localmente instalando o  nanny-state pacote usando o NodeJS.

Copie o seguinte código na seção JS do CodePen:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1>`

const State = {
  name: "Nanny State",
  View
}

const Update = Nanny(State)

Isso mostra como as 3 partes do Nanny-State funcionam juntas. Vamos dar uma olhada em cada parte individualmente:

const View = state => html`<h1>Hello ${state.name}</h1>`

O estado Nanny usa  µhtml  para renderizar HTML. A  View função  sempre  aceita os objetos de estado como seu  único  parâmetro. Em seguida, ele usa a  html função fornecida por µhtml para criar HTML com base no modelo literal fornecido como argumento.

Usar um literal de modelo significa que podemos usar a  ${variable} notação para inserir propriedades do estado na exibição. Neste exemplo estamos usando para inserir o valor da  name propriedade dentro do  <h1> elemento.

const State = {
  name: "Nanny State",
  View
}

O  State objeto é onde  todos  os dados do aplicativo são armazenados. Ele inclui quaisquer propriedades e valores que serão exibidos no  View e podem mudar ao longo do ciclo de vida do aplicativo, como a  name propriedade neste exemplo.

Observe que  View também é uma propriedade da  State notação abreviada do objeto using. Lembre  -se de que o estado é tudo  – cada parte do aplicativo é propriedade do estado.

const Update = Nanny(State)

A linha final define a  Update função como o valor de retorno da  Nanny função. Isso agora pode ser usado para atualizar o valor de qualquer propriedade do  State. Na verdade, é a  única  maneira que qualquer propriedade do  State pode ser atualizada. Ele também executa a renderização inicial do  View com base nos valores fornecidos no arquivo  State. Isso significa que será exibido um título que diz “Hello Nanny State” como pode ser visto no CodePen abaixo:

 

Este exemplo é basicamente apenas uma página estática. Vamos torná-lo dinâmico adicionando uma caixa de entrada que permite ao usuário inserir um nome para o qual deseja dizer olá. Atualize o código para que fique assim:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state';

const View = state => html`<h1>Hello ${state.name}</h1><input oninput=${state.changeName}>`

const changeName = event => Update({name: event.target.value})

const State = {
  name: "Nanny State",
  changeName,
  View
}

const Update = Nanny(State)

Neste exemplo, adicionamos um  <input> elemento ao arquivo  View. Os ouvintes de eventos são definidos em linha na exibição, portanto, neste exemplo, temos um  oninput ouvinte de eventos anexado ao  <input> elemento. Isso chamará o  changeName manipulador de eventos, que é um método do objeto de estado, sempre que qualquer entrada for detectada. Este ouvinte de evento precisa ser definido, então vamos dar uma olhada mais de perto:

const changeName = event => Update({name: event.target.value})

Este é um manipulador de eventos padrão escrito em Vanilla JS. Ele aceita um objeto de evento como um parâmetro como de costume e quando é chamado, queremos atualizar o  State objeto, então usamos a  Update função, pois esta é a única maneira de atualizar o arquivo  State.

O argumento que fornecemos para a  Update função é um objeto que contém todas as propriedades que queremos atualizar no estado e os respectivos novos valores. Nesse caso, queremos atualizar a  name propriedade para o valor que foi inserido pelo usuário no campo de entrada, que faz parte do objeto de evento e acessado usando  event.target.value. Isso atualizará o estado com o novo valor do campo de entrada e renderizará instantaneamente a página. Usar µhtml para renderização significa que apenas as partes do  View que realmente mudaram são atualizadas. Isso significa que a renderização após uma State atualização é eficiente e incrivelmente rápida.

E é isso - seu primeiro aplicativo Nanny State! Tente digitar e você verá o quão rápido ele reage à entrada do usuário... e tudo com apenas algumas linhas de código. Você pode ver o código no CodePen abaixo:

 

O Nanny State torna super fácil escrever aplicativos baseados em estado reativos. Como você pode ver, não há muito código necessário para construir um aplicativo dinâmico baseado em estado que reaja à interação do usuário. Esta é a beleza de Nanny State.

Teste de Verdadeiro ou Falso

Agora que vimos um exemplo básico, vamos tentar fazer algo um pouco mais complexo. Usaremos Nanny State para construir um jogo de perguntas Verdadeiro ou Falso. Abra uma nova caneta no CodePen e acompanhe.

Começaremos da mesma forma, importando a biblioteca Nanny State:

import { Nanny,html } from 'https://cdn.skypack.dev/nanny-state'

Em seguida, vamos criar o  State objeto e preenchê-lo com os valores iniciais da propriedade que o jogo usará:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
]
}

Este objeto contém 3 propriedades:

• score - isso mantém o controle de quantas perguntas o jogador respondeu corretamente e começa em 0
• index – isso mantém o controle de qual pergunta o jogador está fazendo e corresponde à última propriedade que é a  questions matriz.
• questions – Este é um array de objetos com  question e  answer propriedades. A  question propriedade é uma string e a  answer propriedade é um booleano

Agora que criamos os dados, vamos criar o  View para visualizar esses dados:

const View = state => html`
<h1>True or False?</h1>
<h2>Score: ${state.score}</h2>
${state.index < state.questions.length ?
html`<p>${index + 1}) ${state.questions[state.index].question}</p>
     <button onclick=${state.checkAnswer(true)}>TRUE</button>
     <button onclick=${state.checkAnswer(false)}>FALSE</button>`
:
html`<h2>Game Over, you scored ${state.score}</h2>`
}`

Isso é um pouco mais complicado  View do que vimos no exemplo anterior, mas a maior parte deve ser bastante autoexplicativa. Após o título do título, exibimos a partitura usando a  score propriedade do  State objeto. Em seguida, usamos um operador ternário para bifurcar a visão. Como a exibição é escrita usando literais de modelo, você não pode usar  if-else instruções para bifurcar o código, portanto, é necessário usar instruções ternárias.

Essa instrução ternária verifica se  questionNumber é menor que o comprimento da  questions matriz, que é basicamente verificar se ainda há perguntas a serem respondidas. Se houver, a pergunta será exibida com dois botões, um para VERDADEIRO e outro para FALSO. Se não houver mais perguntas, mostramos uma mensagem GAME OVER junto com a pontuação do jogador.

Uma coisa a notar ao bifurcar o código de visualização usando operadores ternários é que você precisa usar a  html função para cada nova bifurcação.

Ambos os botões têm um  onclick ouvinte de eventos embutido anexado a eles que chama o mesmo manipulador de eventos  checkAnswer e aceita um argumento de  true ou  false dependendo de qual botão foi pressionado. Vamos escrever este manipulador de eventos agora:

const checkAnswer = answer => event => Update(state => ({
    score: answer === state.questions[state.index].answer ? state.score + 1 : state.score,
    index: state.index + 1
}))

Este manipulador de eventos aceita um argumento extra  answer , bem como o  event objeto que todos os manipuladores de eventos aceitam, então ele precisa ser curry usando a notação de seta dupla vista acima. Ele chama a  Update função que usa um operador ternário para verificar se a resposta fornecida como argumento corresponde à resposta da pergunta atual, se corresponder, a  score propriedade é aumentada em 1, caso contrário, a pontuação permanece a mesma. Também aumenta o valor da  index propriedade, então a próxima pergunta será exibida.

Este manipulador de eventos agora precisa ser adicionado ao  State, junto com o  View. Podemos fazer isso usando a notação abreviada de objeto, desde que  checkAnswer e  View sejam definidos antes  de State:

const State = {
  score: 0,
  index: 0,
  questions: [
    {question: "A Nanny State is a country where nannies are employed by the state", answer: false},
    {question: "Nanny State is also the name of a beer", answer: true},
    {question: "Mila Kunis and Ashton Kutcher employ 16 nannies to help raise their children", answer: false},
    {question: "The Nanny McPhee films are based on the Nurse Matilda books", answer: true},
    {question: "Nanny State uses the µhtml library for rendering", answer: true},
],
  checkAnswer,
  View
}

Agora que tudo faz parte do  State, tudo o que resta a fazer é definir a  Update função chamando a  Nanny função e fornecendo  State como argumento:

const Update = Nanny(State)

E é isso! O questionário deve começar a ser executado imediatamente e você deve ser capaz de responder a cada pergunta e a pontuação mudará com base se a resposta estiver certa ou não. Outro exemplo de um aplicativo interativo que é rápido de construir com uma quantidade mínima de código. Tente responder as perguntas e veja como você se sai. Você pode ver o código finalizado no CodePen abaixo:

 

Depois de se divertir jogando e se acostumar com o funcionamento do Nanny State, aqui estão algumas ideias para estender o jogo:

• Adicionar mais perguntas
• Adicione os botões 'Iniciar' e 'Jogar novamente' para permitir que os jogadores joguem novamente
• Selecione as perguntas aleatoriamente
• Acompanhe a pontuação mais alta
• Adicione perguntas com outras respostas, exceto verdadeiro ou falso
• Criar um teste de múltipla escolha

O Nanny State inclui muitos outros recursos, como suporte integrado para o uso de armazenamento e roteamento local. Consulte  os documentos  para obter mais informações ou entre em contato se tiver alguma dúvida.

Eu adoraria ouvir o que você pensa de Nanny State. Você consideraria usá-lo para um projeto? Tem mais alguma coisa que você gostaria de saber sobre isso? Deixe um comentário em nossa comunidade!  

Fonte: https://www.sitepoint.com/simple-state-management-nanny-state/ 

#nanny  #javascript 

JavaScript Snake Game Tutorial - Develop a Simple Snake Game

Work on real-time JavaScript Snake game project and become a pro

Snake game is an interesting JavaScript project for beginners. Snake game is a single-player game, which we’ve been playing for a very long time. The game mainly consists of two components – snake and fruit. And we just need to take our snake to the food so that it can eat and grow faster and as the number of fruits eaten increases, the length of snake increases which makes the game more interesting. While moving if the snake eats its own body, then the snake dies and the game ends. Now let’s see how we can create this.

JavaScript Project Prerequisites

To implement the snake game in JavaScript you should have basic knowledge of:

1. Basic concepts of JavaScript

2. HTML

3. CSS

Download Project Code

Before proceeding ahead please download source code of Snake Game: Snake Game in JavaScript

Steps to Build the Project – JavaScript Snake game

1. Create Html file

HTML builds the basic structure. This file contains some basic HTML tags like div, h1, title, etc. also we’ve used bootstrap (CDN is already included).

index.html:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataFlair Snake game</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="static/style.css">
</head>
<body>
    <div class="container">
        <div class ="Jumbotron">
        <h1>DataFlair Snake game using vanilla JavaScript</h1>

            <h2 class="btn btn-info"> 
                Score:   0 
            </h2>

            <div class="containerCanvas">
                <canvas id="canvas" width="500" height="500" class="canvasmain"> </canvas>
            </div>
        </div>
    </div>
    <script src="static/fruit.js"></script>
    <script src="static/snake.js"></script>
    <script src="static/draw.js"></script>
</body>
</html>

We have used simple HTML tags except tag. This new tag was introduced in HTML5, which is used to draw graphics, via JavaScript. It is nothing without JavaScript so we will use it in our JavaScript file to actually draw the board and the objects required. We’ll see its implementation in JS files.

#javascript tutorial #javascript project #javascript snake game #simple snake game #javascript

JavaScript compound assignment operators

JavaScript is unarguablly one of the most common things you’ll learn when you start programming for the web. Here’s a small post on JavaScript compound assignment operators and how we use them.

The compound assignment operators consist of a binary operator and the simple assignment operator.

The binary operators, work with two operands. For example a+b where + is the operator and the a, b are operands. Simple assignment operator is used to assign values to a variable(s).

It’s quite common to modify values stored in variables. To make this process a little quicker, we use compound assignment operators.

They are:

• +=
• -+
• *=
• /=

You can also check my video tutorial compound assignment operators.

Let’s consider an example. Suppose price = 5 and we want to add ten more to it.

var price = 5;
price = price + 10;

We added ten to price. Look at the repetitive price variable. We could easily use a compound += to reduce this. We do this instead.

price += 5;

Awesome. Isn’t it? What’s the value of price now? Practice and comment below. If you don’t know how to practice check these lessons.

Lets bring down the price by 5 again and display it.
We use console.log command to display what is stored in the variable. It is very help for debugging.
Debugging let’s you find errors or bugs in your code. More on this later.

price -= 5;
console.log(price);

Lets multiply price and show it.

price *=5;
console.log(price);

and finally we will divide it.

price /=5;
console.log(price);

If you have any doubts, comment below.

#javascript #javascript compound assignment operators #javascript binary operators #javascript simple assignment operator #doers javascript