¡Nuevo Lanzamiento! 👋 Bienvenido SwiftUI Views

Hoy en SwiftBeta te presento la primera web de recursos de SwiftUI. Es un MVP/Experimento que te va a permitir ahorrar muchísimo tiempo para crear las pantallas de tu aplicación en SwiftUI. La he creado completamente desde 0 y se llama SwiftUI Views. Más adelante en el video te muestro qué tecnologías he usado, pero primero vamos a ver cómo funciona, por ejemplo, ¿hay una vista de SwiftUI Views que te gusta? entra, cópiala y pegála en Xcode, y ya está.

La idea es seguir creando vistas que me van a servir incluso a mi para mis propias aplicaciones, por ejemplo, pantalla de Login, Onboarding, Ajustes de la app, Pay Wall con suscripciones etc. Al final todas acaban siendo muy parecidas.

La user Experience de SwiftUI Views la he reducido al máximo para que sea lo más fácil posible de usar.

¿Qué es SwiftUI Views?

La web ayuda a encontrar diseños y recursos que queremos aplicar en nuestra aplicación, todos los diseños están pensados para no utilizar ninguna dependencia externa, lo que ves es lo que verás reflejado en el código de cada vista.

Desde la pantalla principal, puede ver de un simple vistazo todas las vistas, y qué subvistas tiene cada vista, si pulsas en uno de los tags te filtra todas las pantallas que usan esa vista en SwiftUI, de esta manera puedes ver diferentes ejemplos de uso.

Al momento de crear este video, encontrarás varios ejemplos ya creados:

• Vistas foundation, ¿qué significa esto? estas vistas son las más atómicas que podemos encontrar en SwiftUI, es decir, no están compuestas por otras vistas. Hay ejemplos de Image, Stacks, ProgressView, etc. Muy útil para los developers que está empezando en el mundo de SwiftUI y quiere entender como funcionan estas vistas por separado (es más, siendo sincero he aprendido un par de vistas que no sabía que existían en SwiftUI, así que en realidad sirve para developers de todo tipo).
• Por otro lado, también podemos encontrar Vistas compuestas, aquí encontrarás desde formularios de login, onboardings, pantalla de settings, incluso algún clon de alguna app conocida como Spotify, la app de Notas de Apple, o Instagram (poco a poco se irán subiendo nuevos diseños).

¿Qué puedes encontrar en el MVP/Experimento?

La web SwiftUI Views está pensada para ser lo más sencilla posible. Tiene un buscador que te saca un listado de recomendaciones, es decir puedes buscar una vista, y te muestra una serie de sugerencias a escoger. Si pulsas las flechas del teclado arriba y abajo, puedes ver los diferentes diseños en una vista que aparece justo a la izquierda.

También podemos buscar por el menú de la izquierda, haciendo un click en cualquier opción es lo mismo que pulsar en los tags de cada vista. Se genera un filtrado para solo mostrar las vistas que usan esa subvista.

Al entrar dentro de una vista, podemos ver su código, y podemos copiarlo rápidamente con el button que aparece arriba a la derecha. Y abajo del todo aparece una pequeña descripción. Sí, está todo en inglés ya que esta nueva web está pensada para abarcar el máximo de scope posible.

¿Qué tecnologías he usado?

He usado varias tecnologías para crear la web, algunas de ellas son:

• NextJS con Typescript y Tailwindcss. He creado el frontend y backend usando Typescript. Y para el diseño del frontend he usado Tailwindcss (un framework super potente que me permite crear la interfaz de mi web)
• También he usado una base de datos para el tema de Autenticación de usuarios, y guardar toda la información de cada Vista que aparece en SwiftUI Views. He optimizado las queries para solo pedir la información necesaria en cada llamada.
• Otro tema super interesante es, ¿dónde se alojan las imágenes y gifs? Estoy usando un servicio llamado S3 de Amazon Web Services para alojar todos estos recursos. Y para mejorar la latencia de entrega estos recursos, utilizo otro servicio de CDN.
• He aprendido muchísimas más herramientas como deploy a producción, tema de caches, componentes de servidor y cliente, frameworks de UI con componentes ya creados y listos para usarse, tema de SEO importantísimo, tema del favicon, etc grandes y pequeños detalles de una web. Y sobretodo he aprendido de muchos errores que me han llevado hasta aquí.

Conclusión

En definitiva, ha sido una experiencia muy buena el crear esta web desde 0, y todavía falta trabajo y muchas cosas que aprender. Es por eso que cualquier feedback es bienvenido, y de los miembros del canal que me dieron feedback hace unos días, ya he añadido un par de cambios. Por ejemplo, estos últimos días añadí las sugerencias del buscador para dar más feedback al user que use la web, de esta manera también se puede visualizar el componenet sin necesidad de finalizar la búsqueda.

Y si quieres ayudar puedes hacerlo! si detectas algún error puedes contactar conmigo para que lo arregle lo antes posible. Como siempre gracias por formar parte de SwiftBeta! 🙌

¿Qué te parece? ¿Qué cambiarías? Añádelos en los comentarios del video!

Y hasta aquí el video de hoy