{"id":1558,"date":"2023-03-14T03:34:00","date_gmt":"2023-03-14T02:34:00","guid":{"rendered":"https:\/\/blog.joppy.me\/?p=1558"},"modified":"2023-03-29T10:41:13","modified_gmt":"2023-03-29T08:41:13","slug":"proyecto-frontend-web-joppy","status":"publish","type":"post","link":"https:\/\/blog.joppy.me\/es\/proyecto-frontend-web-joppy\/","title":{"rendered":"La web de Joppy: un proyecto frontend con Next.js"},"content":{"rendered":"\n

Un proyecto frontend con Next.js que empez\u00f3 como una idea personal pero se ha materializado en la nueva web de Joppy. Un front end developer que sabe que una web no solo se construye con HTML y CSS… y aprovecha la oportunidad para aprender sobre nuevos elementos y frameworks de JavaScript. Una web a la altura de lo que esperamos en 2023.<\/em><\/em><\/em><\/h4>\n\n\n\n

Las tecnolog\u00edas avanzan r\u00e1pidamente<\/strong>, a veces demasiado desde el punto de vista de los desarrolladores, tanto que una p\u00e1gina web por muy bien hecha que est\u00e9 puede quedar desfasada en pocos a\u00f1os.<\/p>\n\n\n\n

En el caso de Joppy<\/a><\/strong>, su p\u00e1gina web hab\u00eda sido creada hac\u00eda aproximadamente 5 a\u00f1os. En aquel momento se utilizaron las tecnolog\u00edas y el dise\u00f1o que correspond\u00eda a la \u00e9poca pero todo el equipo est\u00e1bamos de acuerdo en que se acercaba el momento de hacerla de nuevo.<\/p>\n\n\n\n

\"Pantallazo<\/figure>\n\n\n\n

Como surgi\u00f3 la idea de empezar por mi cuenta el proyecto<\/strong><\/strong><\/h2>\n\n\n\n

Hace unos meses empec\u00e9 a investigar y leer documentaci\u00f3n m\u00e1s en profundidad sobre Next.js<\/strong>. Estuve unos d\u00edas conociendo su funcionamiento y aprendiendo la teor\u00eda pero pronto me di cuenta de que necesitaba iniciar un proyecto a modo de pr\u00e1ctica (que luego podr\u00eda ser un proyecto real o no) para entender mejor el funcionamiento del framework.<\/p>\n\n\n\n

Decid\u00ed comenzar una web personal, una especie de portfolio\/cv hablando sobre mis trabajos y mis habilidades como programador. Unas horas despu\u00e9s ya me hab\u00eda dado cuenta de que no era buena idea, odio hablar de mi, buscar fotos m\u00edas para el proyecto y todo lo relacionado con generarme una marca personal como est\u00e1 de moda ahora. As\u00ed que dej\u00e9 aparcada la idea de momento.<\/p>\n\n\n\n

Al poco tiempo escuch\u00e9 en la oficina de Joppy comentar precisamente la necesidad de dar prioridad al proyecto de la nueva web de la compa\u00f1\u00eda<\/strong>. Tambi\u00e9n comentaban que ser\u00eda complicado por falta de tiempo.<\/p>\n\n\n\n

Fue entonces cuando pens\u00e9 que ya ten\u00eda un proyecto perfecto para empezar a practicar con Next.js, la nueva web de Joppy. As\u00ed que me puse manos a la obra.<\/p>\n\n\n\n

\"\"<\/figure>
\"\"<\/figure><\/div>
\"\"<\/figure>
\"\"<\/figure><\/div>
\"Androides<\/figure><\/div><\/div><\/div><\/div>\n\n\n\n

Stack tecnol\u00f3gico utilizado<\/h2>\n\n\n\n

Ten\u00eda claro el framework en el que se basar\u00eda pero necesitaba concretar m\u00e1s las herramientas que iba a utilizar.<\/p>\n\n\n\n

Typescript<\/strong><\/h3>\n\n\n\n

Decid\u00ed que programar\u00eda todo en Typescript<\/strong> para darle m\u00e1s solidez al proyecto, disminuir la cantidad de errores y facilitarme a m\u00ed mismo el trabajo.<\/p>\n\n\n\n

\u2705 TypeScript puede utilizarse en cualquier proyecto creado con Javascript<\/p>\n\n\n\n

\u274c No se recomienda para proyectos peque\u00f1os, pues no ser\u00eda eficiente en tiempo<\/p>\n\n\n\n

\u2705 Se detectan antes los errores gracias al editor (sin necesidad de compilar)<\/p>\n\n\n\n

\u274c A\u00fan as\u00ed, requiere de compilaci\u00f3n (JS no lo necesita)<\/p>\n\n\n\n

Next.js<\/strong><\/h3>\n\n\n\n

\u2705 Tiempo de carga muy eficiente<\/p>\n\n\n\n

\u2705 Herramienta con mucho soporte de otros desarrolladores<\/p>\n\n\n\n

\u2705 SEO friendly y UX friendly<\/p>\n\n\n\n

\u274c Muchos se quejan de su forma de enrutar<\/p>\n\n\n\n

Tailwind<\/strong><\/h3>\n\n\n\n

Para el CSS opt\u00e9 por Tailwind<\/strong> ya que me permitir\u00eda aprender una nueva herramienta, al parecer combinaba muy bien con Next.js<\/strong> y en teor\u00eda me ahorrar\u00eda tiempo para la parte de maquetaci\u00f3n y dise\u00f1o.<\/p>\n\n\n\n

\u2705 Da libertad en el estilo ( y lo hace r\u00e1pido)<\/p>\n\n\n\n

\u274c Mezcla reglas de estilo con los archivos HTML<\/p>\n\n\n\n

\u274c Le falta documentaci\u00f3n y soporte<\/p>\n\n\n\n

Framer Motion<\/strong><\/h3>\n\n\n\n

Ya ten\u00eda casi todas las herramientas definidas pero como quer\u00eda una web moderna y adaptada a los tiempos que corren, en el ultimo momento, decid\u00ed que usar\u00eda Framer Motion<\/strong> para a\u00f1adir animaciones css y darle a la web un toque din\u00e1mico y profesional que encajar\u00eda con las tendencias actuales.<\/p>\n\n\n\n

El mayor aprendizaje: CSR vs SSR vs SSG<\/h2>\n\n\n\n
\"\"
Fuente: https:\/\/tsh.io\/blog\/ssr-vs-ssg-in-nextjs\/<\/a><\/figcaption><\/figure>\n\n\n\n

Cuando empec\u00e9 este proyecto ten\u00eda por delante varios aprendizajes. Pero en el que m\u00e1s me quer\u00eda enfocar fue en diferenciar y entender los tipos de renderizados que existen a al hora de desarrollar una SPA <\/strong>y la combinaci\u00f3n de varios de ellos seg\u00fan las necesidades.<\/p>\n\n\n\n

Para alguien como yo que ha estado mucho tiempo focalizado en el backend<\/a> todos estos conceptos sonaban un poco confusos.<\/p>\n\n\n\n

En la nueva web de Joppy he usado tres de ellos (CSR,SSR y SSG) y voy a tratar de explicarlos de manera simple:<\/p>\n\n\n\n