Refactorización de Formularios con ViewModel en Swift

Un View Model nos ayuda a separar la lógica de negocios de la vista. Esto resultará en un código más fácil de manejar y organizado. Empezaremos creando una estructura adecuada para nuestra aplicación.

¿Cómo estructurar el proyecto?

Primero que nada, debemos organizar nuestro proyecto adecuadamente. Sigamos los pasos:

1. Crear carpeta: comienza creando una nueva carpeta dentro de views llamada NCreateNote.
2. Mover archivos: mueve NCreateNoteView a esta nueva carpeta.
3. Crear un View Model: dentro de la carpeta, crea un archivo Swift llamado NCreateNoteViewModel.

Con esta estructura, garantizamos que cada componente de nuestra aplicación tenga su propio espacio y responsabilidad, lo cual simplifica el mantenimiento del proyecto.

¿Cómo crear un View Model?

El siguiente paso es crear y configurar nuestro View Model:

1. Definición de la clase: añadimos una clase llamada NCreateViewModel que será de tipo ObservableObject.

   class NCreateViewModel: ObservableObject {
       @Published var title: String = ""
       @Published var text: String = ""
       @Published var size: String = "Pequeño"
       @Published var isFavorite: Bool = false
   }
   

2. Uso de @Published: Cambiamos nuestros estados a variables @Published para que la vista observe automáticamente cualquier cambio en ellas.

3. Función createNote: Creamos una función que generará la nota a partir de estos valores.

   func createNote() -> NCard {
       return NCard(title: title, text: text, size: size, isFavorite: isFavorite)
   }
   

Esta práctica nos ayuda a mantener todas nuestras variables y lógica de creación de una nota en un solo lugar, alejadas de la vista.

¿Cómo integrar el View Model con la vista?

Ahora integremos el View Model con la vista existente:

1. Sustituye los estados locales: reemplaza los estados locales en nCreateNoteView por la instancia del View Model.

   @StateObject private var viewModel = NCreateViewModel()
   

2. Actualizar referencias: asegúrate de que en toda la vista, las referencias sean a través del viewModel.

   var body: some View {
       TextField("Título", text: $viewModel.title)
       // Continúa con las otras propiedades...
   }
   

3. Utilizar función desde el View Model: cambia la creación del card para que lo haga mediante viewModel.createNote().

Con estos cambios, el código del formulario se ve más limpio y mantiene una clara separación entre la lógica de negocio y la interfaz de usuario.

¿Por qué usar @StateObject?

Finalmente, es importante entender por qué se utiliza @StateObject y no @State. Cuando se observa un conjunto de datos o un modelo más complejo, se necesita @StateObject. Esto es crucial para administrar la vida útil del objeto y garantizar que la vista tenga acceso a datos reactivos y bien manejados a medida que cambian.

Aprovechando este proceso de refactorización, incorporamos mejoras como isFavorite al modelo NCard, permitiendo mayor flexibilidad y capacidad para futuras actualizaciones.

Prueba de funcionalidad

Al probar el formulario, deberías ver que, al guardar una nota, el print en la consola mostrará los elementos del NCard correctamente reflejados con atributos como isFavorite. Esta refactorización refuerza un enfoque modular y mantenible, esencial para el desarrollo profesional en Swift.

¡Continúa aprendiendo y aplicando buenas prácticas en tus futuros desarrollos!