Si ya trabajaste con Flutter o React Native, sabes lo práctico que es crear apps para varias plataformas. Con SwiftUI, puedes aprovechar lo que ya sabes para desarrollar apps nativas de iOS con mayor potencia y simplicidad.
¿Por qué aprender SwiftUI si ya haces apps cross-platform?
SwiftUI es perfecto si ya conoces frameworks declarativos como Flutter o React Native. No tendrás que aprender todo desde cero, y al mismo tiempo descubrirás las herramientas diseñadas exclusivamente para el ecosistema de Apple.
- Estructura declarativa: al conocer los frameworks para desarrollo cross-platform, SwiftUI te será muy familiar, ya que comparten la misma estructura.
- Optimización nativa: Como está hecho por Apple, el rendimiento y la integración no tienen comparación.
- Simplicidad y productividad: Con menos código puedes hacer más y en menos tiempo.
De Widgets a Views: dos formas de hacer lo mismo
Si ya usas Flutter, seguro estás acostumbrado a trabajar con Widgets. En SwiftUI pasa algo similar: lo que llamabas Widgets acá son Views. Ambos son la base de cualquier interfaz. La diferencia está en cómo se organizan y personalizan.
1. Vistas: La base de tu interfaz
En Flutter, todo comienza con Widgets, esos bloques que usas para construir cada pantalla. En SwiftUI, los Views hacen lo mismo, pero con una sintaxis mucho más directa.
En Flutter:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Flutter View")),
body: Center(child: Text("Hola desde Flutter")),
),
);
}
}
En SwiftUI:
struct ContentView: View {
var body: some View {
Text("Hola desde SwiftUI")
.font(.title)
.navigationTitle("SwiftUI View")
}
}
En el código de Flutter, puedes notar que para construir una vista básica necesitas wrappear todo dentro de un MaterialApp y luego usar un Scaffold para estructurar elementos como el AppBar y el body. Aunque funciona bien, esto puede sentirse como agregar varios pasos innecesarios especialmente si solo quieres una vista pequeña.
Por otro lado, en SwiftUI, el diseño es mucho más directo. Con unas cuantas líneas de código, defines un Text con su propio estilo y con un título en la navegación usando navigationTitle. No necesitas una estructura como Scaffold para manejar elementos básicos, lo que simplifica la lectura y escritura del código.
¿No te parece que con SwiftUI el desarrollo es mucho más rápido y simple?
2. Modifiers: personaliza tus vistas fácilmente
En Flutter, para personalizar un Widget, agregas propiedades o anidas otros Widgets. En SwiftUI, puedes usar Modifiers, los cuales te permiten aplicar estilos y comportamientos fácilmente. La idea es simple, cada Modifier agrega algo nuevo a tu View.
En Flutter:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text(
"Texto en Flutter",
style: TextStyle(fontSize: 24, color: Colors.blue),
),
),
),
);
}
}
En SwiftUI:
struct ContentView: View {
var body: some View {
Text("Texto en SwiftUI")
.font(.title)
.foregroundColor(.blue)
}
}
¿Notas cómo SwiftUI encadena los estilos? Esto hace que tu código sea más fácil de entender.
3. Manejo de estado: actualiza la interfaz en tiempo real
En Flutter, usas StatefulWidget para manejar los cambios en la interfaz. En SwiftUI, todo es más directo gracias a @State, que te permite actualizar la UI en tiempo real sin necesidad de estructuras adicionales.
En Flutter:
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Contador: $count"),
ElevatedButton(
onPressed: () {
setState(() {
count++;
});
},
child: Text("Incrementar"),
),
],
),
),
);
}
}
En SwiftUI:
struct ContentView: View {
@State private var count = 0
var body: some View {
VStack {
Text("Contador: \\(count)")
Button("Incrementar") {
count += 1
}
}
}
}
En Flutter, necesitas configurar un StatefulWidget y llamar explícitamente a setState cada vez que quieras actualizar la interfaz. A diferencia de SwiftUI, donde solo declaras tu variable con @State y la UI se actualiza automáticamente cuando cambias su valor.
¿No te parece que SwiftUI simplifica mucho el proceso? Con menos estructura y sin necesidad de llamadas adicionales, puedes centrarte más en el diseño y funcionalidad de tu app.
SwiftUI para React Native Developers
Si vienes de React Native, también te vas a sentir en casa. Ambos frameworks comparten una filosofía declarativa. Los Property Wrappers de SwiftUI, como @State y @Binding, funcionan igual que los Hooks de React, como useState.
1. Adiós Flexbox, hola Stacks: layouts en SwiftUI
Seguramente estás acostumbrado a usar Flexbox para manejar los layouts. Aunque es muy poderoso requiere bastante configuración, especialmente cuando necesitas combinar layouts horizontales y verticales. En SwiftUI, este proceso es mucho más simple gracias a los HStack, VStack y ZStack, que permiten organizar elementos con tan solo encapsularlos en Staks.
En React Native (Flexbox):
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>Hola</Text>
<View style={styles.vstack}>
<Text style={styles.text}>desde</Text>
<Text style={styles.text}>React Native</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row', // Layout horizontal
justifyContent: 'space-around', // Espaciado uniforme
alignItems: 'center', // Centrar verticalmente
},
vstack: {
flexDirection: 'column', // Layout vertical dentro del horizontal
alignItems: 'center', // Centrar los elementos verticalmente
},
text: {
fontSize: 20,
},
});
En SwiftUI (Stacks):
struct ContentView: View {
var body: some View {
HStack {
Text("Hola")
VStack {
Text("desde")
Text("SwiftUI")
}
}
.font(.title)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.gray.opacity(0.2))
}
}
En React Native, para combinar diseños horizontales y verticales, necesitas anidar View y configurar flexDirection varias veces, lo que puede ser tedioso. En SwiftUI, solo combinas un HStack con un VStack, y listo. Todo queda más limpio y fácil de manejar.
2. Binding vs props: simplifica la comunicación entre vistas
En React Native, normalmente pasas datos entre componentes usando props y si necesitas enviar actualizaciones, manejas eventos o funciones de callback. Esto puede volverse complicado cuando muchos componentes dependen de los mismos datos.
En SwiftUI, el enfoque es más directo gracias a @Binding que permite que un componente hijo pueda modificar datos del componente padre sin necesidad de callbacks o pasos adicionales. ¿El resultado? Un flujo de datos más claro y sencillo.
En React Native:
function Counter({ count, setCount }) {
return (
<View style={styles.counter}>
<Text style={styles.text}>Contador: {count}</Text>
<Button title="Incrementar" onPress={() => setCount(count + 1)} />
</View>
);
}
export default function App() {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Counter count={count} setCount={setCount} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
counter: {
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 20,
marginBottom: 10,
},
});
En SwiftUI:
struct Counter: View {
@Binding var count: Int
var body: some View {
VStack {
Text("Contador: \\(count)")
Button("Incrementar") {
count += 1
}
}
}
}
struct ContentView: View {
@State private var count = 0
var body: some View {
Counter(count: $count)
}
}
¿Te das cuenta de cómo SwiftUI simplifica el manejo de datos entre componentes? Con menos código y menos pasos, puedes lograr una interacción fluida y más intuitiva.
Ventajas de SwiftUI en el desarrollo nativo
Rendimiento y optimización
Aquí no hay capas intermedias. Con SwiftUI estás trabajando directamente con Apple. Esto se traduce en un rendimiento que realmente se nota, especialmente cuando usas funcionalidades como el Taptic Engine o animaciones fluidas.
Integración con UIKit
Si necesitas algo más personalizado, no te preocupes. SwiftUI y UIKit trabajan juntos. Esto significa que no tienes que sacrificar nada, puedes combinar lo mejor de ambos mundos.
¿Por qué migrar al desarrollo nativo con SwiftUI?
Cambiar a SwiftUI te da un montón de ventajas:
- Acceso completo al ecosistema Apple: Puedes integrar ARKit, CoreML, o cualquier otra tecnología avanzada sin complicaciones.
- Experiencias únicas: Gestos nativos, accesibilidad avanzada y animaciones que fluyen de manera natural.
- Más control sobre el rendimiento: Sin capas como JavaScript o Dart, tú tienes el mando.
Si ya estás haciendo apps cross-platform, dar el salto al desarrollo nativo con SwiftUI es la mejor forma de crear algo que realmente se sienta diseñado para iOS.
SwiftUI no es solo otro framework, es la herramienta que necesitas para destacar como desarrollador mobile. Si ya usas Flutter o React Native, dominar SwiftUI será un paso natural.
En Platzi te enseñaré a usar SwiftUI paso a paso. Descubre cómo hacer apps nativas increíbles y dale un giro a tu carrera con mi Curso de Desarrollo de Aplicaciones con SwiftUI.
Curso de Desarrollo de Aplicaciones con SwiftUI
