¿Cómo crear una aplicación de SvelteKit? 

SvelteKit es un marco poderoso para crear aplicaciones web que combina la simplicidad y el rendimiento del marco Svelte con características adicionales. Es el marco oficial para crear aplicaciones con Svelte.

SvelteKit se basa en los principios de Svelte, un marco basado en componentes que compila el código de su aplicación en código JavaScript altamente eficiente durante el proceso de compilación.

SvelteKit lleva esto un paso más allá al proporcionar un marco de aplicación completo que ofrece características como enrutamiento, representación del lado del servidor (SSR) y división de código lista para usar.

En este artículo, explorará SvelteKit y creará una aplicación básica utilizando SvelteKit y Back4app.

Ventajas de SvelteKit

SvelteKit ofrece varias ventajas. Estas son algunas de las ventajas clave de SvelteKit:

Rendimiento

SvelteKit es conocido por su rendimiento excepcional. Tiene un tamaño de marco pequeño que conduce a cargas de página iniciales más rápidas.

SvelteKit también utiliza actualizaciones reactivas, que solo actualizan las partes del DOM que cambian. Esto da como resultado una aplicación de alto rendimiento que es reactiva y es fácil de usar.

SvelteKit compila el código de la aplicación durante el proceso de construcción, lo que da como resultado un código JavaScript altamente optimizado y eficiente.

Este enfoque elimina la necesidad de un marco de ejecución, lo que genera tiempos de carga más rápidos y un mejor rendimiento.

Tamaño de paquete pequeño

SvelteKit genera paquetes de tamaño pequeño en comparación con otros marcos. Lo logra incluyendo solo el código necesario para cada componente, lo que resulta en una sobrecarga mínima.

Esto es muy beneficioso para usuarios con conexiones a Internet más lentas o ancho de banda limitado.

El pequeño tamaño del paquete de SvelteKit mejora el rendimiento y mejora la experiencia del usuario en dispositivos móviles.

También permite la división eficiente del código y la carga diferida, lo que mejora la experiencia del desarrollador.

Rico ecosistema de componentes 

Un rico ecosistema de componentes es una ventaja significativa de SvelteKit. SvelteKit ofrece a los desarrolladores una amplia gama de componentes prediseñados y personalizables que pueden integrarse fácilmente en sus aplicaciones.

El rico ecosistema de componentes de SvelteKit puede acelerar el desarrollo, mejorar la coherencia de la interfaz de usuario y promover la reutilización del código.

También permite la creación rápida de prototipos y la extensión con otras bibliotecas y herramientas.

Representación del lado del servidor (SSR)

SvelteKit ofrece funcionalidad de renderizado del lado del servidor, lo que permite a los desarrolladores renderizar previamente páginas en el servidor antes de entregarlas al cliente.

Este enfoque mejora la velocidad de carga inicial de la página, optimiza la visibilidad del motor de búsqueda y mejora la experiencia general del usuario.

La renderización del lado del servidor en SvelteKit mejora el rendimiento general de la aplicación SvelteKit.

También permite el almacenamiento en caché, contenido dinámico, navegación fluida y uso compartido de código.

Enrutamiento incorporado

SvelteKit proporciona un sistema de enrutamiento integrado que simplifica la gestión de rutas de aplicaciones.

Permite a los desarrolladores definir rutas de forma declarativa. Los desarrolladores también pueden definir rutas con parámetros para crear páginas dinámicas.

El sistema de enrutamiento de SvelteKit ofrece navegación programática. Aquí es donde los desarrolladores pueden utilizar las funciones proporcionadas por SvelteKit para navegar a diferentes rutas mediante programación.

SvelteKit también proporciona funciones de protección de rutas y middleware, lo que permite a los desarrolladores implementar una lógica de enrutamiento avanzada.

Limitaciones de SvelteKit

Si bien SvelteKit ofrece muchas ventajas, también tiene algunas limitaciones que los desarrolladores deben conocer. Aquí hay algunos:

Curva de aprendizaje

SvelteKit es relativamente nuevo en comparación con otros marcos como React o Angular, por lo que es posible que haya menos recursos de aprendizaje disponibles.

SvelteKit presenta algunos conceptos y sintaxis únicos, que pueden resultar desafiantes para los nuevos desarrolladores.

A los desarrolladores que ya están familiarizados con Svelte les puede resultar más fácil hacer la transición a SvelteKit, pero aquellos nuevos en Svelte pueden necesitar invertir tiempo en aprender el marco.

Soporte comunitario limitado

Como SvelteKit aún está ganando popularidad, es posible que el apoyo de la comunidad no sea tan amplio como el de otros marcos.

El soporte comunitario limitado de SvelteKit puede dificultar que los desarrolladores aprendan, solucionen problemas y encuentren trabajo.

Sin embargo, la comunidad está creciendo y hay formas de mitigar el impacto de un apoyo limitado. Por ejemplo, los desarrolladores pueden interactuar con la comunidad Svelte existente a través de foros y plataformas de redes sociales.

Compatibilidad con bases de código existentes

Si tiene una base de código existente creada con un marco diferente, migrarla a SvelteKit puede requerir un esfuerzo significativo.

SvelteKit sigue un enfoque arquitectónico diferente, que requiere que usted reescriba toda la lógica del código base.

SvelteKit presenta su sistema de enrutamiento, que puede entrar en conflicto con los mecanismos de enrutamiento de la base de código existente.

Al migrar a SvelteKit, es posible que necesite aprender nuevos conceptos y adaptar sus conocimientos existentes.

Introducción al proyecto

Siguiendo este tutorial, creará una aplicación de comentarios básica utilizando el marco SvelteKit. La aplicación de comentarios proporcionará la funcionalidad CRUD (crear, leer, actualizar, eliminar, del inglés “create, read, update, delete”) y utilizará Back4app para el almacenamiento de datos.

Construyendo la aplicación SvelteKit

Para crear una aplicación Sveltekit, ejecute el siguiente comando en su terminal:

npm create svelte@latest feedback-application

Una vez que ejecute el código anterior, varias indicaciones lo guiarán a través de la configuración de su aplicación. Las indicaciones se verán así:

Después de configurar su aplicación, navegue hasta el directorio de la aplicación e instale las dependencias necesarias. Para hacer esto, ejecute el siguiente código en su terminal:

cd feedback-application
npm install

Ya ha creado con éxito la aplicación de comentarios e instalado las dependencias necesarias. Agregará algunas fuentes de Google a su aplicación para mejorar su apariencia.

Para hacer esto, necesita agregar los enlaces a las fuentes en su archivo app.html, que se encuentra en el directorio src. Los enlaces se pueden encontrar en el sitio web de Google Fonts.

Las fuentes que utilizará en su aplicación son las fuentes Comforter y Montserrat. Puede utilizar estas fuentes en su aplicación agregando el siguiente código a la etiqueta head de su archivo app.html.

<!-- app.html -->
<link href="<https://fonts.googleapis.com/css2?family=Montserrat&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Comforter&display=swap>" rel="stylesheet">

A continuación, agrega algunos estilos globales a la aplicación. Para hacer esto, navegue hasta el archivo global.css en la carpeta de style. Puede encontrar la carpeta style en el directorio src.

En el archivo global.css, escriba este código:

/* global.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 40%;
    margin: auto;
    font-family: 'Montserrat', sans-serif;
    background-color: #f2f2f2;
}

input{
    border: none;
    border-radius: 12px;
    padding: 1rem;
    background-color: #FFFFFF;
    color: #808080;
    inline-size: 100%;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    color: #f2f2f2;
    background-color: #333333;
    font-family: 'Montserrat', sans-serif;
}

button:hover{
    background-color: #f2f2f2;
    color: #333333;
}

A continuación, crea el diseño de la aplicación. Usted define el diseño de su aplicación usando un archivo +layout.svelte. 

El archivo +layout.svelte es un archivo especial para crear componentes de diseño reutilizables que definen la estructura de sus diseños de página. Asegúrese de crear el archivo +layout.svelte en el directorio src/routes.

Defina el diseño de su aplicación así:

<!-- +layout.svelte -->
<script>
    import '../style/global.css'
</script>

<header>
    <h1>Feedback App</h1>
</header>
<slot></slot>

<style>

    h1{
        text-align: center;
        padding: 1rem 0;
        font-family: 'Comforter', cursive;
    }

</style>

El bloque de código anterior importa el archivo global.css y aplica estilos globales a su aplicación. También define un elemento header. Dentro del elemento del encabezado hay un elemento h1 con el texto “Aplicación de comentarios”.

El elemento slot define un marcador de posición para el contenido de la página. Cuando renderiza una página, la aplicación inserta su contenido en la ranura, haciéndolo visible dentro del diseño. En la sección style del bloque de código, le da estilo al elemento h1.

Ahora ha definido los estilos y el diseño de su aplicación. A continuación, creará la página de inicio de su aplicación. Para hacer esto, escriba el siguiente código en su archivo +page.svelte, ubicado en el directorio src/routes.

<!-- +page.svelte -->
<script lang="ts">
    let data = {
        feedback: '',
        rating: '',
    }

    const handleClick = (event: any) => {
        data.rating = event.target.value;
    }
</script>

<div class="page">
    <form>
        <input type="text" placeholder="Share your thought" name="feedback" bind:value={data.feedback}/>

        <div class="rating">
            <input type="button" value="1" class="button" on:click={handleClick}>
            <input type="button" value="2" class="button" on:click={handleClick}>
            <input type="button" value="3" class="button" on:click={handleClick}>
            <input type="button" value="4" class="button" on:click={handleClick}>
            <input type="button" value="5" class="button" on:click={handleClick}>
        </div>

        <button>Post</button>
    </form>
</div>

<style>
    form{
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }

    .button{
        border-radius: 100%;
        color: #333333;
        padding: 1rem 1.5rem;
        background-color:#ffffff;
    }

    .button:hover{
        background-color: #333333;
        color: #f2f2f2;
    }

    .rating{
        display: flex; 
        gap: 5rem;
    }
</style>

El bloque de código anterior crea un formulario de comentarios con un sistema de calificación simple. Puede ingresar sus pensamientos en un campo de texto y calificar su experiencia haciendo clic en los botones numerados. Luego, la aplicación almacena su entrada en el objetodata.

La función handleClick almacena su calificación en la propiedad data.rating y la directiva bind almacena sus comentarios en la propiedad data.feedback. La directiva bind le permite lograr un enlace de datos bidireccional entre los valores de entrada y los datos de su componente.

Ahora puede ver su aplicación en su navegador web. Para hacer esto, navegue hasta el directorio de su proyecto en su terminal y ejecute el siguiente comando:

npm run dev

Al ejecutar el comando anterior, obtendrá el enlace http://localhost:5173/. Navegue hasta este enlace en su navegador web y podrá ver su solicitud.

Si ha seguido el tutorial correctamente, su aplicación debería verse así:

Integrando Back4app con su aplicación

Back4App es una plataforma Backend-as-a-Service (BaaS) que proporciona herramientas e infraestructura para que usted cree y administre las funcionalidades backend de sus aplicaciones.

Con Back4App, puede concentrarse en crear excelentes funciones para su aplicación sin preocuparse por las complejidades de configurar y mantener un servidor backend.

Back4app ofrece muchas funciones excelentes, incluida la administración de bases de datos, autenticación de usuarios, alojamiento de API y mucho más.

Creando una cuenta de Back4app

Antes de poder utilizar las excelentes funciones que ofrece Back4app, debe tener una cuenta Back4app. Puede crear una siguiendo estos sencillos pasos:

1. Visite el sitio web de Back4app.
2. Haga clic en el botón “Registrarse”.
3. Complete el formulario de registro y envíelo.

Presentamos el complemento ChatGPT de Back4app

Siguiendo las tendencias recientes de utilizar IA para facilitar la vida de los desarrolladores, Back4app ha presentado su complemento ChatGPT.

Este complemento ayuda a los desarrolladores y entusiastas no técnicos a crear e interactuar con aplicaciones Back4app.

Con el complemento, puede convertir sus conversaciones con ChatGPT en aplicaciones reales. Esto significa que incluso si es nuevo en el desarrollo o en el uso de la plataforma Back4App, aún puede crear y personalizar una aplicación Back4App fácilmente.

Para poder utilizar los complementos en ChatGPT, asegúrese de estar suscrito a ChatGPT Plus. Después de suscribirse a ChatGPT Plus, si aún no está suscrito, haga clic en el botón “GPT-4” y aparecerá una ventana emergente con opciones.

Seleccione la opción de complementos, luego seleccione el complemento Back4app. Esto le permitirá utilizar el complemento ChatGPT de Back4app.

Cree una aplicación Back4app con el complemento

Con el complemento Back4app en ChatGPT, crear una aplicación Back4app es fácil. Simplemente dígale a ChatGPT qué tipo de aplicación desea crear y él hará el resto.

Por ejemplo:

Después de crear la aplicación, navegue hasta el sitio web de Back4app, inicie sesión y verifique sus aplicaciones para confirmar que se creó la aplicación.

Agregar datos a la aplicación Back4app

Puede agregar datos a su aplicación utilizando el complemento ChatGPT de Back4app. Aquí, le pedirá a ChatGPT que cree una clase de comentarios en la aplicación de comentarios y la complete con comentarios personalizados.

A continuación, se muestra un ejemplo de cómo hacer esto:

El complemento crea la clase Comentarios en la aplicación y solicita un ejemplo de los comentarios personalizados que desea agregar.

Después de dar un ejemplo de comentarios personalizados, el complemento genera los comentarios y una calificación que los acompañará en la aplicación. Puede agregar más comentarios y calificaciones a la aplicación enviándolos a ChatGPT.

Ahora puede confirmar que el complemento ha generado la clase de comentarios y los comentarios y calificaciones personalizados en su aplicación.

Conexión a Back4app

El siguiente paso es conectar su aplicación a la aplicación Back4app. Para hacer esto, necesita instalar el SDK de JavaScript de Parse. Puede instalarlo ejecutando el siguiente código en su terminal:

npm install parse

Una vez que haya terminado de instalar el SDK de JavaScript de Parse. Utilizará las credenciales Application ID y Javascript KEY. 

Puede encontrar estas credenciales en la sección Seguridad y claves en el panel de control de su aplicación Back4app. Guarde la Application ID y Javascript KEY de forma segura en su aplicación.

Importe la versión minimizada de Parse desde parse al archivo +page.svelte en el directorio src y llame al método de inicialización. Este método toma las credenciales Application ID y Javascript KEY como argumentos.

Por ejemplo:

//+page.svelte
import Parse from 'parse/dist/parse.min.js';
Parse.initialize(APPLICATION_ID, JAVASCRIPT_KEY);

Tenga en cuenta que debe agregar el bloque de código anterior dentro de la etiqueta script del archivo +page.svelte. Después de llamar al método de inicialización en Parse, el siguiente paso es establecer la propiedad serverURL en Parse en https://parseapi.back4app.com/.

De esta forma:

//+page.svelte
(Parse as any).serverURL = "<https://parseapi.back4app.com/>";

Obteniendo datos de Back4app

Antes de mostrar los datos que ya están en su aplicación Back4app, deberá recuperarlos. Para recuperar los datos, creará una función fetchFeedbacks. Esta función contendrá la lógica que recupera los comentarios y calificaciones de su aplicación.

Antes de crear la función, cree un componente card. El componente card determina la apariencia de sus comentarios.

Para crear el componente card, primero cree una carpeta de componentes en el directorio src. Luego, cree un archivo card.svelte en la carpeta components.

En el archivo card.svelte, escriba este código:

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
</script>

<div class="card">
	 <h5>{feedback}</h5>
	 <p>{rating} ratings</p>
</div>

<style>
	.card{
	    display: flex;
	    justify-content: space-between;
	    padding: 1rem;
	    background-color: #FFFFFF;
	    border-radius: 12px;
	    inline-size: 100%;
	    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

Este código define el componente card. En la etiqueta del script, el código exporta las variables de feedback y rating como accesorios.

Esto significa que los componentes que importan este componente pueden definir los valores de estos accesorios. El código inicializa la variable feedback en una cadena vacía y la variable rating en 0.

La etiqueta div representa la estructura principal del componente de la tarjeta y la etiqueta style contiene estilos CSS aplicados al componente de la tarjeta.

A continuación, en la etiqueta de secuencia de comandos de +page.svelte, importe el componente de la tarjeta y cree la función fetchFeedbacks.

De esta forma:

//+page.svelte
import Card from "../components/card.svelte";
import { onMount } from "svelte";

let feedbackData: any = [];

const fetchFeedbacks = async () => {
  try {
    const query = new Parse.Query("Feedback");
    const feedbacks = await query.find();
    feedbackData = feedbacks;
  } catch (error) {
    console.log(error);
  }
};

onMount(fetchFeedbacks);

Este código define la función fetchFeedbacks. También utiliza el enlace del ciclo de vida onMount para obtener comentarios de la base de datos llamando a la función fetchFeedbacks.

La función fetchFeedbacks utiliza el método Parse.Query() para buscar un objeto “Feedback” en la base de datos de su aplicación.

Luego devuelve una matriz de los resultados de la consulta llamando al método find() del SDK de Parse en el resultado de la llamada a Parse.Query(). Finalmente, asigna la matriz de resultados a la variable feedbackData.

Ahora, en la etiqueta div que contiene los elementos HTML del archivo +page.svelte, utiliza cada bloque de Svelte para representar los datos en la matriz feedbackData.

Por ejemplo:

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
	    <Card feedback={feedback.get('feedbackText')} rating={feedback.get('rating')}/>
	{/each}  
</div>

Dentro de la etiqueta div, cada bloque itera sobre la matriz feedbackData y asigna cada elemento a la variable feedback. Para cada feedback en la matriz, renderiza el componente card.

Los valores de feedbackText y rating se obtienen utilizando el método feedback de get(). Luego pasa los valores a los accesorios feedback y rating del componente card.

Diseñe la etiqueta div con los feedbacks de la clase agregando el siguiente bloque de código a la etiqueta style en el archivo +page.svelte:

/* +page.svelte */
.feedbacks{
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-block-start: 3rem;
	border: 2px #e2e2e2 solid;
	padding: 2rem;
	border-radius: 7px;
}

Agregar datos a Back4app desde la aplicación

Inicialmente, agregó datos a su aplicación Back4app usando el complemento ChatGPT de Back4app, pero los usuarios de su aplicación no podrán hacerlo.

Para permitir a los usuarios la posibilidad de agregar datos desde su aplicación, creará una función que agregue nuevos comentarios y calificaciones a la base de datos de su aplicación Back4app.

De esta forma:

// +page.svelte
const handleSubmit = () => {
  try {
    const Feedback = new Parse.Object("Feedback");
    Feedback.set("feedbackText", data.feedback);
    Feedback.set("rating", +data.rating);
    Feedback.save().then(() => {
      console.log("New Feedback added successfully");
    });
  } catch (error) {
    console.log(error);
  }

  fetchFeedbacks();
};

Agregue el bloque de código anterior a la etiqueta script del archivo +page.svelte. La función handleSubmit()crea un nuevo objeto Parse “Feedback” y establece sus propiedades feedbackText y rating en los valores de data.feedback y data.rating. 

Luego guarda el objeto en el servidor Parse utilizando el método save().Finalmente, la función llama a la función fetchFeedbacks().

Ahora vincule la función handleSubmit al formulario en el archivo +page.svelte mediante el enlace de eventos. Vincula la función al evento on:submit para que cada vez que un usuario envíe el formulario, la función se ejecute.

<form on:submit={handleSubmit}>
	<input 
	type="text" 
	placeholder="Share your thought" 
	name="feedback" 
	bind:value={data.feedback}
	/>
	
	<div class="rating">
	    <input type="button" value="1" class="button" on:click={handleClick}>
	    <input type="button" value="2" class="button" on:click={handleClick}>
	    <input type="button" value="3" class="button" on:click={handleClick}>
	    <input type="button" value="4" class="button" on:click={handleClick}>
	    <input type="button" value="5" class="button" on:click={handleClick}>
	</div>
	
	<button>Post</button>
 </form>

Eliminar datos de Back4app

Puede eliminar datos de Back4app utilizando el método de destrucción para eliminar los registros correspondientes de su base de datos.

Cree una función deleteFeedback que contenga la lógica para eliminar comentarios de la base de datos de su aplicación en función de una ID determinada.

Antes de crear la función deleteFeedback, actualice el componente card agregando un accesorio deleteFeedback y un elemento de botón que vincule al accesorio deleteFeedback mediante el evento on:click.Reemplace el código en su archivo card.svelte con el bloque de código a continuación.

<!-- card.svelte -->
<script lang="ts">
	export let feedback: string = '';
	export let rating: number = 0;
	export let deleteFeedback: any = '';
</script>

<div class="card">
	<div style="display: flex; flex-direction: column; gap: 1rem; ">
	<h5>{feedback}</h5>
	<button on:click={deleteFeedback}>Delete</button>
	</div>
	<p>{rating} ratings</p>
</div>

<style>
	.card{
	  display: flex;
	  justify-content: space-between;
	  padding: 1rem;
	  background-color: #FFFFFF;
	  border-radius: 12px;
	  inline-size: 100%;
	  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
	}
</style>

Cree la función deleteFeedback en el archivo +page.svelte:

// +page.svelte
const deleteFeedback = async (id: string) => {
  try {
    const Feedback = Parse.Object.extend("Feedback");
    const feedback = new Feedback();
    feedback.id = id;
    await feedback.destroy();
    const newData = feedbackData.filter((item: any) => item.id !== id);
    feedbackData = newData;
  } catch (error) {
    console.log(error);
  }
};

La función deleteFeedback crea un nuevo objeto “Feedback” utilizando el método Parse.Object.extend. Luego establece la propiedad id del objeto en el parámetro id pasado a la función.

A continuación, llama al método asincrónico destroy del objeto “Feedback” para eliminar el elemento de comentarios con el ID proporcionado de Back4app.

Luego, la función filtra la matriz feedbackData utilizando el método feedbackData.filter. Filtra el elemento de comentarios con la id dada, creando una nueva matriz que no tiene el elemento de comentarios eliminado. Luego, la función asigna la nueva matriz a feedbackData.

Ahora pase la función deleteFeedback al accesorio deleteFeedback del componente card. De esta manera, cada vez que un usuario haga clic en el elemento del botón en el componente card, se ejecutará la función deleteFeedback.

De esta forma:

<!-- +page.svelte -->
<div class="feedbacks">
	{#each feedbackData as feedback}
		<Card 
		feedback={feedback.get('feedbackText')} 
		rating={feedback.get('rating')} 
		deleteFeedback={() => deleteFeedback(feedback.id)}
		/>
	{/each}  
</div>

Probar la aplicación

Ha terminado de crear la aplicación; el siguiente paso es probarlo. Para probar la aplicación, navegue hasta el directorio de aplicaciones en su terminal y ejecute el servidor de desarrollo.

Después de ejecutar el servidor de desarrollo, abra su navegador y vaya al siguiente enlace: http://localhost:5173/. La aplicación debería verse como la imagen a continuación.

Para agregar un comentario, escriba “Realmente me encanta la aplicación” en el campo de entrada, luego haga clic en el botón con el texto “4” para calificarla. Finalmente, haga clic en “Publicar” para enviar sus comentarios.

Para confirmar que ha agregado un nuevo comentario, aparecerá una nueva tarjeta debajo de las tarjetas anteriores con el texto “Realmente amo la aplicación” y una calificación de 4. También puede navegar al panel de su aplicación en Back4app para confirmar.

Para eliminar un comentario simplemente haga clic en el botón eliminar. Para confirmar esto, elimine el comentario “La aplicación fue increíble”.

Conclusión

SvelteKit es un marco para desarrollar aplicaciones web robustas y de alto rendimiento utilizando Svelte. Es un meta marco, lo que significa que proporciona un conjunto de herramientas y abstracciones que se pueden utilizar para crear cualquier tipo de aplicación web.

La integración de SvelteKit con Back4app permite a los desarrolladores centrarse en desarrollar sus aplicaciones frontend mientras Back4app se encarga del backend. Back4app reduce la complejidad del desarrollo backend, facilitando a los desarrolladores la creación de aplicaciones web full-stack.