Análisis profundo de Mirage JS: comprensión de los modelos y asociaciones de Mirage JS (Parte 1)

 

 

 

  • Behavioral Design Workshop, with Susan and Guthrie Weinschenk
  • Smart Interface Design Patterns, 10h video + UX training

  • Índice
    1. Modelos
    2. ¿Qué son los modelos?
    3. Creando modelos en Mirage JS
    4. Creando entradas
    5. Acceso a propiedades y relaciones
    6. Encontrar una instancia
    7. Más propiedades de instancia de modelo
      1. associations
    8. atributos
    9. Métodos
      1. destruir()
      2. es nuevo()
      3. está guardado()
      4. recargar()
      5. ahorrar()
      6. Encadenar()
      7. actualizar()
    10. Asociaciones
    11. pertenece a()
      1. Ayudantes de importación
    12. tiene muchas()
    13. Conclusión

    En esta primera parte de la serie Mirage JS Deep Dive, analizaremos los modelos y asociaciones de Mirage JS. Analizaremos más de cerca qué son y los roles que desempeñan en la creación de un frontend listo para producción sin un backend real con Mirage JS.

     

    Mirage JS ayuda a simplificar el desarrollo front-end moderno al brindar a los ingenieros de front-end la capacidad de crear aplicaciones sin depender de un servicio back-end real. En este artículo, adoptaré un enfoque independiente del marco para mostrarle los modelos y asociaciones de Mirage JS. Si no ha oído hablar de Mirage JS, puede leer mi artículo anterior en el que lo presento y también lo integro con el marco progresivo Vue.js.

    Nota: Estas series detalladas son independientes del marco, lo que significa que analizaríamos Mirage JS en sí y no la integración en ningún marco de front-end.

    • Parte 1: Comprensión de los modelos y asociaciones de Mirage JS
    • Parte 2 : Comprensión de las fábricas, accesorios y serializadores
    • Parte 3 : Comprender el momento, la respuesta y la transferencia
    • Parte 4 : Uso de Mirage JS y Cypress para pruebas de UI

    Modelos

    Mirage JS tomó prestados algunos términos y conceptos que son muy familiares para los desarrolladores de back-end; sin embargo, dado que la biblioteca sería utilizada principalmente por equipos de front-end, es apropiado aprender cuáles son estos términos y conceptos. Comencemos con qué son los modelos.

    ¿Qué son los modelos?

    Los modelos son clases que definen las propiedades de un dato particular que se almacenará en una base de datos. Por ejemplo, si tenemos un modelo de usuario, definiríamos las propiedades de un usuario para nuestra aplicación, como nombre, correo electrónico, etc. Entonces, cada vez que queremos crear un nuevo usuario, usamos el modelo de usuario que hemos definido.

    Creando modelos en Mirage JS

    Aunque Mirage JS le permitiría simular datos manualmente, usar la clase Mirage Model le brindaría una experiencia de desarrollo increíble porque tendría a su alcance la persistencia de datos.

    Los modelos envuelven tu base de datos y te permiten crear relaciones que son realmente útiles para devolver diferentes colecciones de datos a tu aplicación.

    Mirage utiliza una base de datos en memoria para almacenar las entradas que realiza utilizando su modelo. Además, sin modelos, no tendrás acceso a las asociaciones que veremos más adelante.

    Entonces, para crear un modelo en Mirage JS, primero debe importar la clase Modelo desde Mirage JS de esta manera:

    import { Server, Model } from ‘miragejs’

    Luego, en nuestras opciones de 'Servidor' lo usamos de la siguiente manera:

    let server = new Server({ models: { user: Model, }

    Nota : si no sabe qué es el servidor Mirage JS, así es como Mirage JS intercepta las solicitudes de red. Lo expliqué en detalle en mi artículo anterior .

    De lo anterior, puede ver que estamos creando una instancia de modelo de usuario. Hacerlo nos permite conservar las entradas para dicho modelo.

     

    Creando entradas

    Para crear nuevas entradas para nuestro modelo de usuario, debe usar la clase de esquema así:

    let user = schema.users.create({name: “Harry Potter”})

    Nota : Mirage JS pluraliza automáticamente sus modelos para formar el esquema. También puede ver que no estamos describiendo explícitamente de antemano las propiedades que tendría la instancia del modelo de usuario. Este enfoque permite la creación rápida de entradas y flexibilidad para agregar campos para dichas entradas.

    Lo más probable es que estés creando instancias de tu modelo en el seeds()método de tu instancia de servidor, por lo que en ese escenario crearías una nueva instancia de usuario usando el create()método del serverobjeto de esta manera:

    let server = new Server({ models: { user: Model }, seeds(server) { server.create("user", { name: "Harry Potter" });});

    En el código anterior, agregué de forma redundante el fragmento tanto para la creación del servidor como del modelo para establecer algún contexto.

    Para ver un servidor Mirage JS en pleno funcionamiento, consulte mi artículo anterior sobre el mismo tema o consulte este repositorio .

    Acceso a propiedades y relaciones

    Puede acceder a las propiedades o campos de una instancia de modelo utilizando notación de puntos. Entonces, si queremos crear una nueva instancia de usuario para el modelo de usuario, use esto:

    let user = schema.users.create({name: “Hermione Granger”})

    También podemos acceder al nombre del usuario simplemente usando lo siguiente:

    user.name// Hermione Granger

    Además, si la instancia creada tiene una relación llamada 'publicaciones', por ejemplo, podemos acceder a ella usando:

    user.posts// Returns all posts belonging to the user 

    Encontrar una instancia

    Digamos que ha creado tres instancias del modelo de usuario y desea encontrar la primera. Simplemente puede usar el esquema en ese modelo de esta manera: Mejores Páginas de Contactos | Opiniones y Análisis 2023

    let firstUser = schema.users.find(1)// Returns the first user

    Más propiedades de instancia de modelo

    Mirage expone un par de propiedades útiles en instancias de modelo. Echemos un vistazo más de cerca.

    associations

    Podrías obtener las asociaciones de una instancia particular usando la associationspropiedad.

    let harry = schema.users.create({name: “Harry Potter”})user.associations// would return associations of this instance if any

    Según los documentos de Mirage JS, lo anterior devolvería un hash de relaciones pertenecientes a esa instancia.

    atributos

    También podemos obtener todos los campos o atributos de una instancia particular usando la propiedad attrs de una instancia de modelo de esta manera:

    harry.attrs// { name: “Harry Potter” }

    Métodos

    destruir()

    Este método elimina las instancias a las que se invoca desde la base de datos de Mirage JS.

    harry.destroy()

    es nuevo()

    Este método devuelve verdadero si el modelo aún no se ha conservado en la base de datos. El uso del createmétodo del esquema siempre guardaría una instancia en la base de datos de Mirage JS, por lo que isNew()siempre devolvería falso. Sin embargo, si usa el nuevo método para crear una nueva instancia y no save()lo ha invocado, isNew()devolverá verdadero.

     

    He aquí un ejemplo:

    let ron = schema.users.new({name: “Ronald Weasley”})ron.isNew()// trueron.save()ron.isNew()// false

    está guardado()

    Esto es todo lo contrario del isNew()método. Puede usarlo para verificar si una instancia se ha guardado en la base de datos. Devuelve verdadero si la instancia se ha guardado o falso si no se ha guardado.

    recargar()

    Este método recarga una instancia de la base de datos de Mirage Js. Tenga en cuenta que solo funciona si esa instancia se ha guardado en la base de datos. Es útil obtener los atributos reales en la base de datos y sus valores si ha cambiado alguno anteriormente. Por ejemplo:

    let headmaster = schema.users.create({name: “Albus Dumbledore”})headmaster.attrs// {id: 1, name: “Albus Dumbledore”}headmaster.name = “Severus Snape”headmaster.name// Severus Snapeheadmaster.reload()headmaster.name// Albus Dumbledore

    ahorrar()

    Este método hace lo que dice, es decir, guarda o crea un nuevo registro en la base de datos. Solo necesitarás usarlo si creaste una instancia sin usar el create()método. Veámoslo en acción.

    let headmaster = schema.users.new({name: “Albus Dumbledore”})headmaster.id// nullheadmaster.save()headmaster.name = “Severus Snape”// Database has not yet been updated to reflect the new nameheadmaster.save()// database has been updatedheadmaster.name// Severus Snape

    Encadenar()

    Este método devuelve una representación de cadena simple del modelo y la identificación de esa instancia en particular. Usando nuestra instancia de director anterior del modelo de usuario, cuando llamamos:

    headmaster.toString()

    Obtenemos:

    // “model:user:1”

    actualizar()

    Este método actualiza una instancia particular en la base de datos. Un ejemplo sería:

    let headmaster = schema.users.find(1)headmaster.update(“name”, “Rubeus Harris”)

    Nota : toma update()dos argumentos. La primera es la clave, que es una cadena y el segundo argumento es el nuevo valor con el que desea actualizarlo.

    Asociaciones

    Como ya conocemos bien los modelos y cómo los usamos en Mirage JS, veamos su contraparte: las asociaciones.

    Las asociaciones son simplemente relaciones entre sus modelos. La relación puede ser uno a uno o uno a muchos.

    Las asociaciones son muy comunes en el desarrollo backend y son poderosas para obtener un modelo y sus modelos relacionados, por ejemplo, digamos que queremos un usuario y todas sus publicaciones, las asociaciones se utilizan en tales escenarios. Veamos cómo configuramos eso en Mirage JS.

    Una vez que haya definido sus modelos, puede crear relaciones entre ellos utilizando los asistentes de asociación de Mirage JS.

    Mirage tiene las siguientes asociaciones de ayudantes.

    • hasMany()
      utilizar para definir relaciones de muchos
    • belongsTo()
      utilizar para definir relaciones uno a uno

    Cuando utiliza cualquiera de los ayudantes anteriores, Mirage JS inyecta algunas propiedades y métodos útiles en la instancia del modelo. Veamos un escenario típico de publicaciones, autores y comentarios. Se podría inferir que un autor en particular puede tener más de una publicación de blog y además una publicación en particular puede tener comentarios asociados. Entonces, veamos cómo podemos simular estas relaciones con los ayudantes de la asociación Mirage JS:

     

    pertenece a()

    Ayudantes de importación

    Primero importe el pertenece a

    import { Server, Model, belongsTo } from 'miragejs'

    A continuación creamos nuestros modelos y usamos el método extender para agregar nuestras relaciones así.

    new Server({ models: { post: Model.extend({ author: belongsTo(), }), author: Model, },})

    Lo anterior define una relación uno a uno desde el modelo de publicación hasta un modelo de autor. Al hacerlo, el asistente de pertenece a agrega varias propiedades y métodos a los modelos afectados. Por lo tanto ahora podemos hacer lo siguiente:

    post.authorId // returns the author id of the postpost.author // Author instancepost.author = anotherAuthorpost.newAuthor(attrs) // creates a new author without saving to databasepost.createAuthor(attrs) // creates a new author and save to database

    tiene muchas()

    Este ayudante, al igual que su contraparte pertenece a, debe importarse desde Mirage JS antes de su uso, por lo que:

    import { Server, Model, hasMany } from 'miragejs'

    Luego podemos continuar creando nuestras relaciones de muchos:

     models: { post: Model.extend({ comments: hasMany(), }), comment: Model, },})

    Al igual que pertenece a(), el asistente hasMany() también agrega varias propiedades y métodos automáticamente a los modelos afectados:

    post.commentIds // [1, 2, 3]post.commentIds = [2, 3] // updates the relationshippost.comments // array of related commentspost.comments = [comment1, comment2] // updates the relationshippost.newComment(attrs) // new unsaved commentpost.createComment(attrs) // new saved comment (comment.postId is set)

    El fragmento anterior está adaptado de la documentación bien escrita de Mirage JS.

    Conclusión

    Mirage JS está diseñado para hacer que burlarse de nuestro back-end sea muy fácil en el desarrollo front-end moderno. En esta primera parte de la serie, analizamos modelos y asociaciones/relaciones y cómo utilizarlos en Mirage JS.

    • Parte 1: Comprensión de los modelos y asociaciones de Mirage JS
    • Parte 2 : Comprensión de las fábricas, accesorios y serializadores
    • Parte 3 : Comprender el momento, la respuesta y la transferencia
    • Parte 4 : Uso de Mirage JS y Cypress para pruebas de UI

    (dm, ra, il)Explora más en

    • API
    • vista
    • javascript





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Análisis profundo de Mirage JS: comprensión de los modelos y asociaciones de Mirage JS (Parte 1)

    Análisis profundo de Mirage JS: comprensión de los modelos y asociaciones de Mirage JS (Parte 1)

    Behavioral Design Workshop, with Susan and Guthrie Weinschenk Smart Interface Design Patterns, 10h video + UX training Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-analisis-profundo-de-mirage-js-comprension-de-los-modelos-y-asociaciones-de-mirage-js-parte-1-1024-0.jpg

    2024-05-21

     

    Análisis profundo de Mirage JS: comprensión de los modelos y asociaciones de Mirage JS (Parte 1)
    Análisis profundo de Mirage JS: comprensión de los modelos y asociaciones de Mirage JS (Parte 1)

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20