Bueno, pues continúo este proyecto que empecé hace 2 años. Como estoy en el pueblo no tengo acceso al código que llegué a desarrollar en aquella época, y ahora se me ocurren más opciones para el proyecto.

Las bases siguen siendo las mismas (code first, .NET Core 3.0 con EF, inyección de dependencias, front end y DB separada). En esta ocasión he querido abarcar un poco más y no solo me centraré en Angular, también en React y Vue.

He destinado el fin de semana del 4 y 5 de septiembre de 2021 a desarrollar todo el proyecto.

Empecé haciendo la API en .NET Core 3.0 con code first y Entity Framework. Primero usé una base de datos en memoria para pruebas. Luego cambié a sql server en local y por último intenté usar MySQL remoto para alojar la base de datos en alguna de mis webs wordpress, pero no se permite MySQL remoto, así que hice una cuenta en remotemysql.com, para probar usé postman. Muy útil el code first y el scaffolding del controlador a partir del DbContext y el Modelo. Empecé ese mismo día 4 con un proyecto base de Angular TS, pero era demasiado tarde y lo dejé para el 5.

El día 5 hice proyectos base de Angular TS, React y Vue, luego los adapté para consumir mi Api de VideogamesDB, un simple CRUD con GET, PUT, POST y DELETE.

Angular TS con HTTPClient

A primera vista me abrumó la cantidad de archivos, porque siempre intento entenderlo todo, pero al final resultó ser agradable y muy parecido a lo que ya conocía. Destaco la organización con templates HTML, servicios TS y componentes TS. Es fácil encontrar documentación y es muy rápido.

React con Fetch

Más complicado que Angular con HTTPClient. Tuve que bindear métodos para tener «this» accesible, también setear cosas en state porque no eran accesibles desde la response del fetch. Con fetch tuve que especificar las configuraciones para algunos verbos. Tuve que recoger los elementos del DOM porque no parece tener data-binding. Tampoco hay «if» para evitar el renderizado de componentes. Lo más grave fue un bug cuando mapeaba los LI de un UL, dentro tenía un evento onClick que se ejecutaba en el propio mapping (solucionado con arrow function).

Vue con Axios

Más fácil que React. Me encanta el model binding (mejor que los otros). También tuve que setear cosas en data como el state de React. Axios parece ser más rápido que fetch, al menos con Vue, aunque tiene prácticamente la misma velocidad, el que gana con diferencia es Angular con HTTPClient.

Trabajo futuro

Si sigo con este proyecto, me gustaría hacer algunos tests de velocidad, quizás probar HTTPClient, axios y fetch en los 3 frameworks frontend.