Aplicaciones SPA vs MPA ¿Qué son y cual elegir?

Actualmente el crear aplicaciones web se pueden dividir en dos categorías, aplicaciones de Single Page Applications (SPA) y Multi-Page Applications (MPA), tambien a veces referidas como frameworks web de Template rendering, entendiendo este concepto puedes darte una idea de porque hay distintos frameworks para crear aplicaciones web, ya sea usando lenguajes de servidor como Django (Python), Laravel (Laravel), Express(Nodejs), .NET (C#), Ruby on Rayks; o solo usando Frameworks y bibliotecas de Frontend de Javascript como React, Angular, Vue, Svelte.
Articulo del video:
faztweb.com/co...
🎥 Videos Recomendados:
Curso de Python ➜ • Curso Python para Prin...
Curso de Django ➜ • Django, Curso de Djang...
Excalidraw (Herramienta de dibujo) ➜ • Excalidraw, Mi Herrami...
Curso de Nodejs ➜ • Nodejs Curso Práctico ...
Curso de Express ➜ • Express Framework de N...
Curso de JSON ➜ • JSON (Javascript Objec...
Curso de Git ➜ • Git y Github | Curso P...
Variables de entorno Nodejs ➜ • Variables de Entorno e...
HTML ➜ • Curso HTML para Princi...
CSS ➜ • Curso CSS para Princip...
Javascript Orientado a Objetos ➜ • Curso de Javascript Or...
Arrays en Javascript ➜ • Javascript Arrays - Me...
ES Modules ➜ • Import y Export en Jav...
👨‍💻 ¿Qué servicios y productos utilizo?
Ledger (Hardware Wallet) ➞ bit.ly/3ijsVNW
SiteGround ➞ bit.ly/31u9ZEk
DigitalOcean ➞ m.do.co/c/8ef2...
Expo ➞ bit.ly/2WpYKtx
Cloudinary ➞ bit.ly/3ohNlJ7
Notion ➞ notion.grsm.io...
#desarrolloweb #javascript #frameworks

[@yangenmanuel2659]

Tus videos siempre llegan en el mejor momento. Justo estaba iniciando una aplicacion web con react y no sabia las diferencias entre los temas que expones en el video. Todo queda muy claro. Eres como la documentacion universal sencilla de leer para todos xd

[@jimmygreycijimenezcerron7568]

React no mano, mejor angular

[@yangenmanuel2659]

@@jimmygreycijimenezcerron7568 el codigo en react me es mas facil de leer y la biblioteca es muy popular. Me gusta el tema de typescript pero me encariñe con mi prmer framework de forntend xd

[@rlyehdate]

@@jimmygreycijimenezcerron7568 ¿y por qué mo ambos? Xd

[@leonardohidalgo5127]

@@jimmygreycijimenezcerron7568 angular es mejor estructurado y no requiere biblioteca de terceros para la comunicación de componentes, pero react tiene su fuerte en que es sencillo y fácil de codear. No por ser mejor significa que debas usar angular en todo, si el proyecto va a hacer uso de su estructura es una cosa, pero si esto no es necesario en el proyecto react ofrece una alternativa muy práctica y versátil en compatibilidad de frameworks.

[@luiseduardorodriguezflores210]

Te recomiendo angular bro, al principio podría ser más difícil pero creeme al final será mejor pero tú decides

[@nicolasrivera3422]

Increíble su forma de transmitir conocimientos, aprendí mas en 7 minutos con éste video , que en 3 meses de estudio formal. Gracias !

[@hdezcOmar]

Tengo interés por empezar a programar y este video aclaro muchas dudas sobre la programación web. Creo que no he visto a nadie que lo explicara tan bien como ud. lo hizo. Se gano mi like y suscripción. 👍

[@lucianomatiasplazasilva410]

TRE MEN DO!! Fazt sos oro respecto a información y crecimiento, este video tienen que verlo muchos más por las bases que simplificas en 7 minutos. Espero con ansias el video de SSR

[@gabyScript]

Excelente explicacion. Cada dia aprendo mas con tus videos

[@valenciaDev]

El mejor canal de programación!

[@mrdominguez]

Fazt otro dato interesante es que las MPA consumen más ancho de banda porque el servidor constantemente está respondiendo con HTML que es mucho más verboso que un JSON como sería el caso de una SPA, esa es una desventaja para los usuarios que navegan con paquetes de datos que es lo que suelen ofrecer las telefonías/ISP a los dispositivos móviles para conexiones 3G/4G/5G etc, entonces el paquete les duraría mucho menos afectando económicamente a esos usuarios, no así a los que tiene una conexión full sin límites de descargas.

[@astrixwr5662]

No habia pensado en ese enfoque a los móviles :0

[@andresmauro17]

Espectacular tu explicación.

[@letoniel006]

recién aprendiendo angular y llega este video, muchas gracias amigo

[@oswaldogerardino]

me gustan mucho este tipo de videos informativos. Hoy dia hay demasiados tutoriales en youtube, ense#ando como usar las tecnologias y sus tools, pero pocos ense#an donde usarlos, cuando o porque. Genial, mas videos asi

[@nocivescience707]

Gracias Fazt por compartir tu conocimiento, y si alguna vez quieres conquistar el mundo, todos lo que te estamos agradecidos con gusto te ayudaremos.

[@alvaro_diaz]

Hola, soy nuevo, vengo de TikTok.. sé que me servirá mucho tu videos...

[@emmanuelareiza9699]

Fazt Parce , Muchísimas gracias enserio , QUE MOTIVACIÓN TAN GRANDE PARCE MUCHAS MUCHAS MUCHAS GRACIAS Enserio que cambias vidas

[@Dun_Dev]

Fazt eres genial. Todo están transparente como el agua

[@skyblack7040]

Muchas gracias por fin pude entenderle todo sobre MPA y SPA.

[@3triada]

Siempre calidad,gracias por la asesoría. Éxitos. Vere tu siguiente video.

[@cleidysbrooks]

Muy interesante. Excelente explicacion. Gracias Fazt.

[@alex1726i]

Estaba buscando este video, en mi proyecto de desarrollo web Integrado hicimos una aplicación basada en MPA y me preguntaba si existía otra forma de implementarlo.

[@Daker11Gamer]

Dios! Super interesante este contenido, me encantó no entendía bien estos terminos, pero después de ver el vídeo me quedaron super claros, en lo personal las SPA, considero son el futuro porque es mucho más hermoso y amigable con el usuario que la página no se este cargando apenas oprimes un botón, super interesante el vídeo desde que soy estudiante me encanta tu contenido muchas gracias por traerlo a esta hermosa comunidad tuya en KZbin

[@sebastianrios4433]

Genio, menos no puedo decir. Muchas gracias por tu gran aporte.

[@SonGoku-pc7jl]

fantásticamente explicado para diluir dudas :)

[@agustinpalmam2923]

este video es oro puro, muchas gracias Tio Fazt Code 😃

Excelente video Fazt, muy clara la esplicación. gracias. Me dás la tranquilidad de saber que voy por buen camino. Si bien Svelte es CSR, puede ser que Routify Svelte sea del tipo que mencionas al final? Server Side Rrendering

[@FaztTech]

Svelte es CSR, pero ese modulo que menciona veo que ofrece tanto CSR como SSR. Aunque tambien esta Sveltekit que añade SSR para la carga inicial de paginas

[@amaurypalacios9079]

Excelente vídeo, siempre los veo todos, gracias por los aportes. HELP, casualmente éste tema muy oportuno, ya que estoy haciendo una app tipo SPA pero en algunas páginas deben ser SSR para poder mostrar publicidad de Adsense de forma correcta sin poner en riesgo mi cuenta, aún no sé cómo sería la mejor manera combinar eso. Mi backend es Golang. Cualquier orientación se los agradecería mucho. Saludos.

[@WILLL859]

Gracias Fazt siempre tuve esa duda

[@max_unch]

Excelente explicación! Muchas gracias por tus videos! ♥

[@thenowrock3427]

Buen video parce , que elegancia aprender cositas nuevas con lo que comentas. Aunque uno sea ingeniero no deja de seguir recordando y aprendiendo nuevas cosas !!, las mejores developers metanle ganas al code y mucha actidud , So cool coding :).

[@hasancarmona6282]

Que buena explicacion!!

[@estebanaguirre4550]

esperando el próximo video!

[@renzoosoriovaldez3378]

Muy buena tu explicación Fazt, gracias por el contenido

[@oshoosho4604]

uso cualquiera de los enfoques, pero si de mí dependiera, no hay nada q el objeto de javascript vanilla o puro llamado xmlHttpRequest no pueda hacer. con él hice cantidad de SPA. los frameworks de javascript me tocó aprenderlos por cuestiones laborales, no porq realmente resulevan algo q antes no se pudiera. de hecho más fácil era como se hacía antes

[@diegojuchani3754]

ajsja estaba necesitando esto que casualidad

[@danefss]

Definitivamente muy util. Muy buen contenido.

[@clasesdefazt2193]

Excelente explicacion Fazt !!

[@jeremiasgarcia4578]

Muchas gracias por el contenido, actualmente ando desarrollando MPA, espero que nos des un ejemplo de Server Side Rendering. Saludos, nuevo sub.

[@davidjss]

Hola Fazt saludos desde Perú, gracias por compartir tus videos, caen en el momento indicado, te queria consultar lo siguiente, que programas usas para editar tus video y para hacer las animaciones que hiciste, por ejemplo la del "cliente-servidor".

[@icabanah]

Según su acento, diría que Fazt tmb es peruano.

[@LeninGonzalezMec]

Gran explicacion! muchas gracias.

[@Pool-Petter-Hijuela]

Hola Fazt, gracias por tu contenido. Una consulta donde encuentro la app del minuto 04:22, me gustaría verla.

[@sebastianalejandrovelasque8618]

Gracias por el video Fazt

[@SanchayanPackiyanathan]

Gracias amigo, saludos.

[@MatiasUzumy]

Sr Fazt me ayudo mucho cuando me empezo a interezar la programacion y le queria pedir un favor ,ultimamente me esta interezando la ciberseguridad y me preguntaba si me puede recomendar por donde puedo empezar ,se que no es parte del contenido avitual pero confio mucho siempre en sus recomendaciones .Desde ya muchas gracias,

[@RAFALAMAO_]

Tio Fazt, por favor, activa el botón para poder apoyarte con mas que me gusta y compartir. Gracias a tí, muchos tenemos trabajo :3

[@Roku8500]

Tendrás un vídeo de explicar spring boot? Excelente explicación la necesaria para entender la web actual

[@BryanSanudoGarcia]

contenido 10/10

[@angelbelaunde9704]

Genial el vídeo. Una duda cual es la mejor librería para generar reportes? Estoy usando react para un proyecto y estoy usando jsPDF pero es sumamente complejo hacer un reporte complejo con esta librería ya que los datos que debe procesar son dinámicos y cambian según la la información ingresada por el usuario.

[@edgardomolinagonzalez3121]

React y Angular ahora quieren usar el SSR... Significa esto que Django podría estar a la par o ser mejor?

[@matitk]

La gran duda que tengo hace tiempo: Con node/express o cualquier otro back se puede servir archivos estaticos y hacer server side rendering de manera facil con un template engine o con un simple string generado al momento de tocar un endpoint, cual seria la diferencia de hacerlo asi en comparacion con algo como nextjs? Hay alguna alternativa mas optima que no implique meter un framework muy pesado?

[@gabobaxx]

Si has hecho una aplicación con express de server side o solamente montado un servidor web, sabes que tienes que configurar un montón de cosas (que eso está bien si estás aprendiendo sobre la web) pero en el caso real, tu cómo programador tienes que intentar ahorrarte tiempo y complejidades que ya se han implementado y de una manera más óptima y mejor como lo son los framework. Con eso tenemos que la principal diferencia de Nextjs es que te facilita el trabajo donde solo tienes que pensar en la experiencia de usuario o el diseño de tu aplicación y no en el sistema de enrutamientos, configuraciones con template engine, etc. Obviamente hay más diferencia y tienen sus pros y contras pero creo que para un caso de la vida real, un framework te facilita muchísimo las cosas.

[@leonarzb5705]

Tengo entendido que las SPA tardan más en cargar inicialmente aún siendo pwa pues descargan todo al iniciar mientras que las otras sólo la página que necesitas

[@selienyorbandi]

En las spa puedes usar lazy loading con las diferentes "páginas", y la app carga lo que necesita nomás

[@FaztTech]

Es cierto que por lo general, se crea un bundle final bastante grande, pero hay forma de optimizarlos dividiendo un archivo en multiples partes (Code Spliting) y cargarlos solo cuando se necesiten (Lazy Loading), de hecho hace unos meses tambien comparti un framework de frontend con esta idea: kzbin.info/www/bejne/oYWQimRtoqqIkNU

[@kodosensei]

Contenido de calidad !!!🤠

[@ferxas4560]

Excelente video, Fazt.

[@FaztTech]

Gracias Ferxas :)

[@aventurasenmoto7367]

Hola Fazt hay forma que puedas asesorarme en temas puntuales de Flask por favor, hay cosas que se me están complicando. Agradezco tu respuesta.

[@andersonpineda8875]

hola estimado, y que opinas de inertia js?

[@pedronndong5682]

Tanks Fazt 👋👋

[@jodacame]

Actualmente puedes hacer MPA con tecnologías modernas como Vuejs usando Nuxt y hacer uso de lo mejor de los 2 mundos (Client side rendering and server side rendering), hacer uso de solo client side rendering puede ser fatal para algunos proyectos que necesitan SEO (ejemplo: un e-commerce).

[@Niconelli12]

Seguramente lo explicas en los siguientes videos Fazt, pero hablar actualmente de Server-Side Rendering NO equivale a hablar de Multiple Page Application dependientemente, es decir, puedes tener tanto un sistema con SSR que sea multiple page asi como puedes tener un sistema SSR que sea single page application. De lo que depende si será SPA o MPA es de la tecnología a utilizar. Inclusive el mismísimo React.js vanilla en sus ultimas updates está ofreciendo features para hacer uso de SSR para hacer SPAs

[@mildredzaragoza5802]

Lo dijo al final del video.

[@andyrosebeats2858]

Fazt!! ¿Cómo se puede procesar un pago de bitcoin directamente desde nuestra app sin utilizar una API de una plataforma como la coinbase? Me refiero a hacerlo de forma directa con la blockchain escaneando los estados de la transacción y dándole manejo a cada estado (payment pending, payment completed) desde nuestra app en Nodejs... He buscado en tus dos canales y no encuentro algo similar... Podrías hacer este video para nosotros?

[@07cesarjoelgonzalezoliva31]

Una duda. Como funcionan los sitios web que tienen muchos html. ¿Crean cada uno? O hay una forma de hacerlo automaticamente?

[@FaztTech]

Hay una forma bastante común estos días de generar archivos html automáticamente usando los llamados “generadores de sitios estáticos”. Dejo un video del tema: ¿Que es un Generador de Sitio Estático? - Static Site generator (SSG) kzbin.info/www/bejne/paS6l3iql7WSqc0

[@07cesarjoelgonzalezoliva31]

@@FaztTech Muchas graciaaaas. 👌🏻😁

[@pablolusarreta]

Por comentar .. tu micro tiene unos picos en 135 hz que son muy molestos en mis monitores de estudio .. quizás en otros monitores no se aprecie, pero hacen tu voz muy monótona, valga la redundancia! Con atenuar esa frecuencia con un ecualizador VST en OBS si usas este programa estaría! Por lo demás todo perfecto! sigue asi!!

[@pedrocabana9062]

Muy buen contenido felicidades... Podría hacer algo de flutter y si combiene profundizarlo

[@YODA5919]

Buen video saludos

[@louistejeda]

Excelente video!!

[@adj32nj]

Haz un video de ese nuevo proyecto para Python, donde intentan hacer que solo usando Python se pueda hacer paginas ya no solo del lado del server, si no también crear la interfaz del cliente, se llama reflex.

[@cerm88]

Excelente explciación pero Jinja2 es el template de flask.

[@jimmypedraza433]

Cada vez se aprende mas... muchas gracias Fazt

[@Jimmy-zt5io]

Uno empieza con html css y javascript y despues te sale el universo entero

[@xavicode3436]

gracias bro

[@yeisonbone9138]

Hola, amigo confiezo que soy nuevo en programación, en realidad son Contador pero me encanta la programación, en fin quiero crear aplicaciones contables y de verdad quisiera que me guíen en que debo aprender, al momento tengo bases en HTML, CSS, Javascrip, SQL y algo de Pyton, por favor en base a esto que debo aprender para crear mi aplicación web de contabilidad, gracias y escucho opiniones de todos.

[@gilbertorodriguezdelacruz1184]

Diría que te enfoques en programación e indagues más en Bases de datos. Al tener bases de Python, puedes usar el framework Django para crear tu aplicación, sin embargo debes de tener un poco de conocimiento en programación orientada a objetos y entender cómo funciona el patrón de diseño MVC pues esto es lo que usa Django. Creo que eso sería para involucrarte en el mundo de las aplicaciones web.

[@juliocefe1807]

Please habla de HTMX, tengo esperanzas en esa librería y la estoy usando. No le veo nada de malo renderizar html, en vez de tener que crear rest apis que solo retornan json. Creo que para la mayoría de los casos htmx es suficiente, lo malo es que mucha gente aún no lo conoce, creo que tiene bastante potencial

[@guillermonarvay8247]

Hace un tiempo vengo leyendo sobre htmx, que está en la misma línea que hotwire turbo y unpoly, pero aún no la implemente en ningún proyecto. ¿Qué pasa con las rutas, te permite variar la url o esta se mantiene inalterable?

[@juliocefe1807]

@@guillermonarvay8247 interesante pregunta, por el momento solo he implementado htmx en modulos independientes, aun no he tenido esa necesidad que mencionas, pero si lo hacen con react router no creo que no se pueda hacer con htmx. Todavia tengo mucho que aprender, visita el video 'DjangoCon 2022 | From React to htmx' esta bueno.

[@guillermonarvay8247]

Justamente busco algo como un react router, poder usar htmx como una single page aplication pero con rutas

[@Myglobalsounds]

Tkm Fazt, cuando el video de vitest. Tkm bye.

[@emanuelkevinsamaniegocalde1626]

Con Blazor solo con C# ya puedes usar para Front y Back End

[@flussen0]

y con muchas otras tecnologías también, no solo lo hace c#, son herramientas dependiendo del enfoque. yo también soy backend haha

[@jmizraimcm7585]

Una API REST es una arquitectura como el MVC?

[@FaztTech]

Una API Rest seria basicamente un backend que solo envia datos en formato JSON, es decir no enviar archivos HTML. Mientras que MVC es una forma de ordenar tus archivos (por asi decirlo) en un proyecto, dividiendolos en modelos (esquemas), vistas (html, interfaces) y controladores (funciones)

[@juanagustinmarti9699]

que raro me pareció que en ningún momento nombraste a next??

[@FaztTech]

Next estaria en la sección SPA, pero lo dejo afuera por que si usas next solo para SPA, es básicamente React, su fuerte de Next esta su Server Side Rendering, peor eso lo mencionaŕe en uno de los siguientes videos de Server Side Rendering :)

[@miguelsirna]

que paso con hey coders? e.e

[@alexdevorigin1]

Jamstack ?

[@cerm88]

Exelnte explciación pero Jinja2 es el template de flask.

[@diarioparaemprendedores]

Wow mi mente explotó

[@puveil2294]

Tengo 17 años, a los 14 empecé a desarrollar un framework de frontend de javascript que está inspirado en JQuery y React, llevo 3 años de desarrollo. Utiliza la sintaxis JSX compilada con babel, y el manejo del DOM, se hace con métodos que fusionan lo mejor de React y lo mejor de JQuery, por ahora no lo tengo en github. Espero que este proyecto funcione. Ahora estoy desarrollando todo el tema de los componentes y las funcionalidades para hacer que la pagina se actualice por secciones en lugar de que se cargue de nuevo la página. Luego solo me quedará implementar un sistema parecido a ajax y perfeccionar y optimizar el código, que por ahora tiene bastante código basura y malas prácticas a nivel de sintaxis, pero en un futuro, espero que sea completamente funcional.

[@kelvinfelix4588]

bien

[@icedev8078]

Ummm creo que faltaría NextJS que si tiene SEO c:

[@germanbaena6579]

Por Dios! duré acelerado como una hora seguida después de ver este vídeo, que horror, no pude ni parpadear.

[@camarosss2]

Entendi en 7 minutos lo que no entendi en 5 años de la U

[@geraldmc1939]

Ya veo No entiendo nada No no mentira Muchas gracias!!

[@kevinmc24]

Mmmm pal seo no spa xd

[@naide3143]

[@gober4662]

Muy buena explicación. Gracias.