Curso Aplicaciones Web Angular CFP 401 Instructor: Jose Eyler 2019 Curso Aplicaciones Web Angular ¿Qué conocemos? ◦ ◦ ◦ ◦ ◦ HTML Javascript CSS Java Microservicios Curso Aplicaciones Web Angular HTML ◦ Lenguaje interpretado por navegadores ◦ Sólo sirve para indicar como va ordenado el contenido de una página web ◦ Marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags ◦ Existe desde 1989 y 1993 se estandariza por W3C, Nace Netscape, incorpora JS (HTML 2), se incorpora CSS (HTML 3), Luego botones e iframes (HTML 4) y con nuevas definiciones como canvas y secciones nace HTML5 Curso Aplicaciones Web Angular JAVASCRIPT ◦ Lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, débilmente tipado. ◦ Se ejecuta en el cliente ◦ Problema: Cada Navegador tiene su interpretador propio Soluciones Apis JS (jQuery, Prototype) Certificación de Navegador Código Duplicado Curso Aplicaciones Web Angular CSS •Hojas de estilo en cascada •Es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado (No solo HTML) •Separación del contenido del documento y la forma de presentación Curso Aplicaciones Web Angular JAVA •Lenguaje interpretado* •Orientado a Objetos •Independiza el entorno • Uno de los lenguajes de programación más populares en uso, particularmente para aplicaciones de cliente-servidor •SERVLET Curso Aplicaciones Web Angular Microservicios •Arquitectura que consiste en construir una aplicación como un conjunto de pequeños servicios. •Se comunican con mecanismos ligeros (REST) •Cada servicio se encarga de implementar una funcionalidad completa del negocio • Productos no Proyectos Curso Aplicaciones Web Angular Que es Angular •Framework de desarrollo para JavaScript creado por Google •Desarrollo de aplicaciones web SPA •Herramientas para trabajar con los elementos de una web de una manera más sencilla y optima •Brinda separación completa entre el front-end y el back-end •Orientada a componentes reutilizables •Angular JS evoluciona a Angular 2 Curso Aplicaciones Web Angular Sin soporte para mobile Soporte para mobile Javascript puro Typescript, Dart, Javascript puro Controladores y Scope Componentes Directivas especiales para los tags (ngref, ng-click) Directivas asociadas a propiedades y eventos de tags (click) Dependencias de tipo scope Inyección de dependencias estilo clases Ruteo en JS Combina ruteo en html y Typescript Carga JS completo Provee Lazy Loading Curso Aplicaciones Web Angular SPA desarrollada con Angular •Web de una sola página •La navegación entre secciones y páginas de la aplicación, así como la carga de datos, se realiza de manera dinámica •Los datos se cargan asíncronamente haciendo llamadas al servidor (backend con un API REST) •Son reactivas y no recargan el navegador Curso Aplicaciones Web Angular Responsive Web Design •Aplicaciones adaptables a móviles •Crecimiento del uso de móviles para acceder a internet •Bootstrap provee funcionalidad para ser responsive Curso Aplicaciones Web Angular PWA (Progressive Web Apps) •Toma muchísima fuerza en el mundo del desarrollo web •Angular, permite iniciar una aplicación con PWA de forma rápida y fácil •Manifiesto de la aplicación: Se refiere a un Manifiesto hecho en un archivo con formato JSON, que describe la aplicación, sus iconos, la pantalla de inicio, etc. •Service Workers: El uso de Service Workers nos permite mejorar el tiempo de carga al hacer caching de nuestros archivos e incluso de API requests. •Shell de aplicación: Se refiere al HTML, CSS y JavaScript requeridos para activar la interfaz de usuario y pueden ser almacenados en caché sin conexión, para asegurar un rendimiento instantáneo y de alta confiabilidad.