SciELO - Scientific Electronic Library Online

 
vol.8 número3Acceso, uso y aprendizaje con tecnologías digitales. Una comparación entre Italia y los demás países de la OCDE del área mediterráneaAlcances y limitaciones de una experiencia extensionista universitaria en un hospital neuropsiquiátrico de la provincia de Buenos Aires (Argentina) índice de autoresíndice de materiabúsqueda de artículos
Home Pagelista alfabética de revistas  

Servicios Personalizados

Revista

Articulo

Indicadores

Links relacionados

  • No hay artículos similaresSimilares en SciELO

Compartir


Dilemas contemporáneos: educación, política y valores

versión On-line ISSN 2007-7890

Dilemas contemp. educ. política valores vol.8 no.3 Toluca de Lerdo may./ago. 2021  Epub 11-Jun-2021

https://doi.org/10.46377/dilemas.v8i3.2644 

Artículos

Frameworks basados en typescript para el desarrollo de aplicaciones web interactivas

Typescript-based frameworks for the development of interactive web applications

Luis Antonio Llerena Ocaña1 

Gustavo Eduardo Fernández Villacres2 

Fausto Alberto Viscaino Naranjo3 

Freddy Patricio Baño Naranjo4 

1Doctor en Ciencias de la Educación. Docente de la Universidad Regional Autónoma de Los Andes, Ecuador. E-mail: ua.luisllerena@uniandes.edu.ec

2Doctor en Ciencias de la Educación. Docente de la Universidad Regional Autónoma de Los Andes, Ecuador. E-mail: ua.eduardofernandez@uniandes.edu.ec

3Magíster en Gerencia Informática con Mención en Desarrollo de Software y Redes. Docente de la Universidad Regional Autónoma de Los Andes, Ecuador. E-mail: ua.faustoviscaino@uniandes.edu.ec

4Magíster en Informática. Docente de la Universidad Regional Autónoma de Los Andes, Ecuador. E-mail: ua.freddybn@uniandes.edu.ec


Resumen:

Las aplicaciones web interactivas modernas tienen como objetivo proporcionar una experiencia de usuario altamente sensible al minimizar la latencia de la comunicación entre clientes y servidores. Si bien el modelo de solicitud-respuesta HTTP es suficiente para recuperar activos estáticos, aplicando el mismo enfoque de comunicación sin estado para interactiva. Los casos de uso (como los juegos multijugador en tiempo real) introducen la sobrecarga de rendimiento indeseable. Desde entonces, los desarrolladores han adoptado otras abstracciones de transporte de comunicación a través de conexiones HTTP. El protocolo de WebSockets para disfrutar de la comunicación de bajo-servidor de Duplex de baja latencia en sus aplicaciones a través de una sola conexión persistente.

Palabras claves: Diseño web; frameworks; Typescript; aplicaciones web

Abstract:

Modern interactive web applications aim to provide a highly responsive user experience by minimizing communication latency between clients and servers. While the HTTP request-response model is sufficient to retrieve static assets, applying the same stateless communication approach for interactive. Use cases (such as real-time multiplayer games) introduce undesirable performance overhead. Since then, developers have adopted other communication transport abstractions over HTTP connections. The WebSockets protocol to enjoy low-latency low-duplex server communication in your applications over a single persistent connection.

Key words: Web design; frameworks; Typescript; web applications

Introducción

Javascript comenzó como un pequeño lenguaje de scripting para el uso en Netscape Communicator en 1995 cuando la World Wide Web seguía siendo una fresca invención y el fenómeno moderno de la fatiga de JavaScript no era familiar. Los creadores del comunicador decidieron que la web tuvo que ser más dinámica, lo que llevó a la Desarrollo del idioma Mocha por Brendan Eich2. Mocha se basa en el esquema, que es un dialecto de Lisp, un lenguaje de programación funcional. Los requisitos para Mocha fueron manejables:

  • Dinámico.

  • Sintaxis 'fácil a comprender'.

  • Poderoso.

Poco después de su finalización en mayo de 1995, fue renombrado a Livienders para fines de marketing. Alrededor de seis meses después, un trato entre Netscape Communications y Sun llevó al nombre nal que se conoce a nivel mundial como JavaScript (Llerena Ocaña & González Hernández, 2020).

Hoy han pasado más de 20 años desde entonces. Hoy en día, JavaScript es el lenguaje de programación más utilizado en el mundo que se muestra recientemente en un estudio emitido por la pila del sitio web sobre OW que se muestra en Figura 1.

Figura 1: Tecnologías más populares en 2021. 

Los marcos y las bibliotecas de UI (interfaz de usuario) de JavaScript trabajan en ciclos. Cada seis meses más o menos, uno nuevo aparece, afirmando que ha revolucionado el desarrollo de la UI. Miles de desarrolladores lo adoptan en sus nuevos proyectos, se escriben las publicaciones de blogs, se hacen y responde a la pila sobre las preguntas de OW, y luego se encapsula dentro de un marco más nuevo (y aún más revolucionario) una versión mejorada sería el entendimiento (Cervantes & Porreta, 2013).

Marco de trabajo en comparación con las bibliotecas, los marcos de hecho es una pila completa de funciones útiles y asume la responsabilidad de las decisiones, que de lo contrario, el desarrollador tendría que hacer antes de escribir el código de la solicitud. Esto incluye estrategias para el enrutamiento en la aplicación de rutas de URL, gestión estatal, agrupación y otros. Además, los marcos proporcionan mejoras en los trabajos que incluyen las mejores prácticas para aspectos básicos de desarrollo, como la estructura general de una aplicación o el código.

La mayoría de los marcos en el mundo de MVC están basados en componentes. La lógica detrás del concepto de componentes es importante porque solo describen la interfaz de usuario. Cuando se producen cambios a los datos subyacentes, el marco escribe el componente UI completo. Los datos mostrados deben estar actualizados en cualquier momento. Este enfoque se puede resumir como 'UI como función' (Heino, Dietzold, Martin, & Auer, 2009).

Del mismo modo, aparece Bootstrap como un marco de trabajo basado en diseño web que también se usa para diseño móvil, este no es el único, pero si el más usado en la actualidad. Al hablar de marco de trabajo basado en TypeScript se describe un amplio mundo de desarrollo tanto para aplicaciones web como aplicaciones móviles y no pueden quedar de lado las aplicaciones de escritorio y en todas estas hay que destacar que la UI para un correcto uso y que sea apreciado por el mercado influye directamente, es aquí donde ingresa las hojas de estilo en cascada que en una versión mejorar ficheros con lenguaje JavaScript para realizar efectos y acciones, aquí tenemos dos versiones SASS y LESS, este último puede ser compilado (Kirk & Macdonald, 1998).

Desarrollo

Métodos

La investigación buscó investigar la naturaleza de un entorno de aprendizaje diseñado a propósito basado en el aprendizaje situado y explorar en profundidad las percepciones de los estudiantes sobre el entorno de aprendizaje.

El uso de una metodología mixta se consideró más adecuado para este propósito por su compatibilidad con el marco teórico y la naturaleza de los objetivos de la investigación. La metodología se basa por los principios de la investigación interpretativa esbozados por investigadores como (Loyola, 2019) y (Llerena & Hernández, 2019).

El trabajo se distribuyó durante 16 semanas y dentro de estas, evaluaciones progresivas sobre el nivel de aprendizaje en cada marco de trabajo basado en TypeScript y el modo de calificación se tuvo en 1 (fácil) y 10 (complejo).

Los participantes

Los nueve estudiantes pertenecientes a octavo semestre de la carrera de Sistemas fue la muestra que se dedujo, ya que las bases conceptuales deben partir de un cierto conocimiento, y se centró en el "caso típico" seleccionado por el conferenciante habitual.

Los estudiantes con base en los conocimientos adquiridos durante su vida académica establecieron grupos para este desarrollo, es necesario indicar que en este nivel existen dos asignaturas dependientes de CSS, ya que cada docente usa su IDE para enforcarse en la asignatura. El estudio se llevó a cabo con el investigador en el rol de "observador-como-participante" (Gold, & Rabiner, 969), la recolección de datos fue realizada en cada proyecto que los grupos de los estudiantes entregaron como tareas a más de responder cuestionarios basados en este aprendizaje, siguiendo los contenidos establecidos por la institución, además de mejoras académicas presentadas por graduados de la propia carrera.

Procedimiento

El estudio se realizó dentro de un ciclo normal de clases en la universidad, el profesor presentó el tema de la evaluación, todos los grupos usaron los métodos enseñados en curso anteriores para la creación de páginas web y que radican en lenguaje de manipulación de datos como es HTML y para mejorar el diseño usaron hojas de estilo en cascada para completar la actividad durante un período de 5 horas (Semana 1) (Heino, Dietzold, Martin, & Auer, 2009).

Durante el aprendizaje inicial sobre el uso de TypeScript, se debe destacar la participación de los estudiantes con base en nuevas herramientas de desarrollo, hablando en términos de optimizar tiempo en el desarrollo (Lujan, 2016).

TypeScript como lenguaje de programación, enfoca mucho el uso de términos que normalmente son usados en JavaScript, es por eso que se menciona como una evolución del lenguaje, al crear un servidor web basado en TypeScript, las líneas de código usadas para este trabajo son relativamente cortas; los estudiantes reaccionaron de una manera muy apreciada al reducir la carga de trabajo (Figura 2) dado que en tan poco tiempo se ejecutó un servidor web para publicar páginas que usan HTML y css (Semana 2).

Figura 2: Reducción de carga de trabajo (Líneas de código). 

Al enfrentar directamente con una UI dentro de un marco de trabajo (Angular), se enfrentaron a que el modelo de desarrollo MVC (Modelo - Vista - Controlador) está directamente relacionado además que dentro de la explicación sobre este marco de trabajo. Es así como los estudiantes relacionan sus conocimientos anteriores al crear componentes, servicios o modelos con los aprendido con anterioridad; Ionic es un marco de trabajo establecido para trabajo en dispositivos móviles y es en donde los estudiantes ya tienen un primer acercamiento al desarrollo con TypeScript (Llerena & Hernández, 2019).

La implementación de Angular con Bootstrap mejora la UI, ya que reduce el tiempo de diseño debido al código basado en CSS, SASS y LESS que este trae, su aplicación dentro de páginas HTML y el uso de archivos ts reduce su curva de aprendizaje notablemente (Figura 3) (Semana 3).

Figura 3: Diseño de UI. 

La interacción con servicios web en línea, es el primer paso para modificar datos de tipo Json y transformarlos para mostrar en un UI que sea entendible por el usuario, al usar aplicaciones desarrolladas por terceros es fácil manipular el contenido al mismo tiempo que se usa marcos de trabajo enfocados al diseño (Semana 4).

Al utilizar una metodología de enseñanza basada en problemas, resulta fácil que los estudiantes apliquen los conocimientos adquiridos (Corno, 1993), dicho de otro modo, al interactuar con una metodología de desarrollo de software podemos obtener un modelo a 3 capas lo que detalla la base de datos como capa1, reglas del negocio como capa 2 y la UI como capa 3.

Dentro de estos ejercicios de uso .Net Core para crear servicios web y MySql como base datos, lo que resultó muy llamativo para los estudiantes (Figura 4 y 5).

Figura 4: Lenguaje de Programación. 

Figura 5: Base de Datos. 

El consumo de datos estable una clara diferencia con el uso de lenguajes tradicionales, eso lo demuestra en la Figura 6, debido a que al consumir un Json estructurado por modelos, es mucho más fácil manejar en la UI (Semana 5).

Figura 6: Complejidad entre Ejercicios. 

Todos los complementos para generar una interfaz gráfica adecuada en cuanto a las reglas del negocio se implementaron en la semana 6, el uso de objetos de selección, cajas de selección, cajas de textos, etiquetas, entre otros; la simplicidad con el uso del lenguaje dentro de HTML, así como los componentes (archivos.ts) demostraron que la curva de aprendizaje para Angular es más pequeña que los lenguajes tradicionales (Lujan, 2016).

En una primera instancia se evaluó el contenido teórico que presenta Angular para luego entregar un ejercicio práctico, el cual resolverían en los grupos propuestos, demostrando que el tiempo que el tiempo de desarrollo se redujo en un 25% con respecto al ejercicio propuesto en la semana 1 (Semana 7).

En la semana 8, se elevó la complejidad de los ejercicios dado, que según el cronograma de actividades, esta es la semana de evaluaciones, de tal modo que los estudiantes al interactuar con problemas reales tuvieron problemas en base al tiempo que tuvieron para resolver el ejercicio, de tal modo que se contrastó con las evaluaciones anteriores, como muestra la Figura 6.

Tras la evaluación resulto fácil obtener el nivel de conocimientos adquiridos en base al marco de trabajo Angular; por tal motivo, se cambió de por el uso de ReacJs, otro marco de trabajo basado en TypeScritp con las mismas características de Angular con una marcada diferencia, el código está escrito directamente sobre el HTML, pero usa el mismo lenguaje para el código escrito en TypeScript. Resulta interesante conocer que la curva de aprendizaje a relación de Angular debido a que al ser el mismo lenguaje resulto mucha más fácil, tanto que se inició consumiendo dantos de los anteriores servicios web creados (Semana 9).

Para el uso de los objetos que se mencionaron con anterioridad, se usó estándares enfocados a los métodos de producción empresariales, lo cual radica en usar variables estandarizadas para mejorar la compresión en caso de modificaciones en el código, al igual que el uso de comentarios con el mismo propósito (Semana 10).

Con un ejercicio complejo, la reducción de tiempo con el uso de ReacJs (Miu, Ferreira, Yoshida, & Zhou, 2020) se redujo aún más, el denominador común entre los ejercicios se estableció con resolver entre 6 y 7 tablas de base de datos; las reglas de negocio dentro de estos ejercicios son complejas en un cierto grado, el problema encontrado aquí fue la complejidad de las consultas a nivel de base de datos debido a que se usó Linq, la Figura 7 muestra la complejidad del uso del lenguaje estructurado de datos (SQL) y Linq (Semana 11).

Figura 7: Complejidad entre Sql y Linq. 

Con el ejercicio planteado se evaluó la curva de aprendizaje de ReactJs y se reforzó los problemas de aprendizaje de los estudiantes (Semana 12).

Cuando se obtuvo los mejores resultados en cuanto al aprendizaje, se cambió de marco de desarrollo a Vue, aquí los estudiantes demostraron que el con lo aprendido con los otros marcos de desarrollo resultó fácil comprender la forma de trabajo de este framework, para lo cual se usó uno de los servicios web desarrollados con anterioridad (Semana 13) (Miu, Ferreira, Yoshida, & Zhou, 2020).

La semana siguiente se profundizó sobre el uso de este marco de trabajo con ejercicios y se realizaron ejercicios con los dos marcos de trabajo a la vez, teniendo en cuenta que la curva de aprendizaje fue relativamente corta.

Para la semana 15 se realizó una evaluación de conocimientos en base al framework Vue para obtener el nivel de aprendizaje recibido por los estudiantes y en la semana 16 se realizó una evaluación con ejercicio complejo para determinar si está completa la curva de aprendizaje, con una diferencia, cada grupo deberá elegir el marco de trabajo en el que desea desarrollar el ejercicio.

Tabla No 1 ramework de Desarrollo elegido por grupo. 

Angular React Vue
Grupo 1 x
Grupo 2 x
Grupo 3 x
Grupo 4 x

Resultados

Los estudiantes mencionaron que la carga de trabajo a relación de líneas de código fuente ya al usar un modelo MVC la propia abstracción de la base de datos en consumida por los modelos y las reglas del negocio se embeben en los controladores, los frameworks con sus propios ORM reducen el trabajo.

Al contar con código ya desarrollado el uso de marco de diseño como Bootstrap se reduce considerablemente.

El lenguaje de programación es otro de los beneficios a considerar, ya que TypeScript se considera la evolución de Javascript y al igual que otros lenguajes de programación este proviene de Java, que debido a su similitud con C# no causó problemas a los estudiantes, ya que durante su vida en la universidad, se enseña diferentes lenguajes.

La interfaz gráfica que usa MySql en el paquete XAMPP provee una interfaz sencilla para su usa a la vez el método de instalación es fácil y no necesita configuración alguna.

Los ejercicios propuestos presentan un mayor grado de dificultad con base en los avances de aprendizaje de los estudiantes, es claro notar que con base en los ejercicios propuestos los estudiantes al iniciar su proceso de aprendizaje con TypeScript tuvieron un mayor grado de dificultad.

Con el uso de .Net Core provee su propio lenguaje de consulta de datos al usar Linq, ya que los estudiantes están acostumbrados a usar un lenguaje estructurado de datos (Sql), de tal modo, podemos apreciar la complejidad en todos los grupos que el uso de Linq complica la curva de aprendizaje en cuanto a .Net Core.

Conclusiones

Existe mucha información sobre los marcos de desarrollo desarrollados en TypeScript, lo que favorece a mejorar el aprendizaje de los estudiantes al igual que buscar las soluciones para determinados problemas.

El código dentro de los frameworks es fácilmente adaptable y moldeable dentro de los aspectos básicos del aprendizaje para mejorar las interfases ayudados de css, sass y less.

La curva de aprendizaje con Angular es mucho más amplia que con otros marcos de desarrollo, pero una vez aprendido resulta muy fácil su aplicación para cualquier framework.

Los estudiantes aceptaron todos los conocimientos transmitidos, basados en los resultados de los ejercicios, pero, aparecieron deficiencias que deben complementarse, ya que este experimento se basó en el frontend, no se tomó en cuenta los aspectos complementarios del desarrollo de software.

El uso de técnicas de normalización ayudó a que los estudiantes mejoren la calidad de código fuente para poder acoplarse con mayor facilidad en un trabajo o un freelance.

Referencias bibliográficas

1. Cervantes, C. M., & Porretta, D. L. (2013). Impact of after school programming on physical activity among adolescents with visual impairments. Adapted Physical Activity Quarterly,30(2), 127-146. [ Links ]

2. Corno, L. (1993). The best-laid plans: Modern conceptions of volition and educational research. Educational researcher, 22(2), 14-22. [ Links ]

3. Gold, B., & Rabiner, L. (1969). Parallel processing techniques for estimating pitch periods of speech in the time domain. The Journal of the Acoustical Society of America, 46(2B), 442-448. [ Links ]

4. Heino, N., Dietzold, S., Martin, M., & Auer, S. (2009). Developing semantic web applications with the ontowiki framework. In Networked Knowledge-Networked Media(pp. 61-77). Springer, Berlin, Heidelberg. [ Links ]

5. Kirk, D., & Macdonald, D. (1998). Situated learning in physical education. Journal of Teaching in Physical education, 17(3), 376-387. [ Links ]

6. Llerena Ocaña, L. A., & González Hernández, W. (2020). Formación de la competencia «desarrollar sistemas web en los espacios virtuales de aprendizaje». Revista Cubana de Educación Superior, 39(1), 1-16. [ Links ]

7. Llerena, L. A., & Hernández, W. G. (2019). Sistema de cursos virtuales para la formación de la competencia profesional desarrollar sistemas web en la carrera de sistemas de la Universidad Regional Autónoma de los Andes UNIANDES. Certiuni Journal, (5), 39-55. [ Links ]

8. Loyola, H. (2019). El revisionismo de Eisner. A Contracorriente: una revista de estudios latinoamericanos, 16(2), 285-290. [ Links ]

9. Lujan, J. D. (2016). HTML 5, CSS y JAVASCRIPT crea tu web y apps con el estándar de desarrollo. Colombia: Alfaomega Colombia. [ Links ]

10. Miu, A., Ferreira, F., Yoshida, N., & Zhou, F. (2020). Generating Interactive WebSocket Applications in TypeScript. arXiv preprint arXiv: 2004.01321. [ Links ]

Bibliografía

1. Aderinola, O. S., Laoye, A. A., & Akinade, A. I. (2020). Multimodal Traveller Information System using both Web-Based Design Program and Traffic Analysis for Akure Metropolis. European Journal of Engineering Research and Science, 5(7), 807-812. [ Links ]

2. Brown, J. S., Collins, A., & Duguid, P. (2019). Situated cognition and the culture of learning. Educational researcher, 18(1), 32-42. [ Links ]

3. Griffin, M. L. (2017). Using critical incidents to promote and assess reflective thinking in preservice teachers. Reflective practice, 4(2), 207-220. [ Links ]

4. Hummel, R. E., Morrone, A., Ludwig, M., & Chang, S. S. (1993). On the origin of photoluminescence in spark‐eroded (porous) silicon. Applied physics letters, 63(20), 2771-2773. [ Links ]

5. McLellan, A. T., Kushner, H., Metzger, D., Peters, R., Smith, I., Grissom, G., & Argeriou, M. (2019). The fifth edition of the Addiction Severity Index. Journal of substance abuse treatment, 9(3), 199-213. [ Links ]

6. Reis, R., Mendonça, A., Ferreira, D. L., Peixoto, H., & Machado, J. (2019). Business Intelligence for Nutrition Therapy. Healthcare Policy and Reform: Concepts, Methodologies, Tools, and Applications, 459-474. [ Links ]

Recibido: 04 de Abril de 2021; Aprobado: 22 de Abril de 2021

Creative Commons License Este es un artículo publicado en acceso abierto bajo una licencia Creative Commons