CONCEPTOS BASICOS ISIS 3710 Aplicaciones Web Cliente Servidor Aplicaciones Web Recurso: URI/URL Cliente Servidor Aplicaciones Web Localización/ generación recurso Cliente Servidor Aplicaciones Web Cliente Recurso: HTML/JS/ Imagen/PDF…. Servidor Aplicaciones Web HTML/JS/ Imagen/PDF…. Cliente Servidor Aplicaciones Web Web browser/cliente http Cliente Servidor Aplicaciones Web Web browser/cliente http Cliente Servidor/Contenedor web Servidor Aplicaciones Web Web browser/cliente http Cliente Componentes del lado del cliente: HTML, CSS, JS Servidor/Contenedor web Servidor Componentes del lado del servidor: JSP, JSF, PHP, EJBs Web browser Cliente - Operaciones sobre recursos usando el protocolo HTTP (GET, POST, PUT, DELETE) - Analizador de sintaxis de HTML y XML - Visualizador de archivos: imágenes - Visualización de archivos no soportados vía plugins (ej., PDF) Web browser Ejemplo tomado de: “Head First Servlets and JSP”. O'Reilly Media Web browser Ejemplo tomado de: “Head First Servlets and JSP”. O'Reilly Media Web browser http://gs.statcounter.com/ QUE COMPONENTES DEBERIA TENER UN WEB BROWSER? http://www.freegreatpicture.com/other/question-mark-30511 Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Motor de render Conectividad (Networking) Intérprete de JS Analizador de XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Motor de render Conectividad (Networking) Intérprete de JS Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Intermediario entre la interfaz y el motor de render Motor (browser engine) Motor de render Conectividad (Networking) Intérprete de JS Analizador de XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Pinta el recurso solicitado en la interfaz (ej., interpreta HTML y CSS) Conectividad (Networking) Motor (browser engine) Motor de render Intérprete de JS Analizador de XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Hace las solicitudes a la red usando el protocolo HTTP Conectividad (Networking) Motor de render Intérprete de JS Analizador de XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Interpreta y ejecuta código JS Conectividad (Networking) Motor de render Intérprete de JS Interprete XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Analizador de sintaxis (parser) XML Conectividad (Networking) Motor de render Intérprete de JS Analizador de XML Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Motor (browser engine) Motor de render Conectividad (Networking) Intérprete de JS Analizador de XML Pinta widgets (ej., combobox) usando métodos del sistema operativo Backend de UI Web browser (componentes) Interfaz (UI) Persistencia Almacenamiento local de datos (ej., cookies) Conectividad (Networking) Motor (browser engine) Motor de render Intérprete de JS Analizador de XML Backend de UI Ejemplo: Firefox Interfaz + XPFE Persistencia Browser/Rendering engines (Gecko) Necko + NSS/PSM SpiderMonkey Expat GTK/X11 Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI URL Motor Red Render UI backend (GDI+SKIA) Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor URL mostrar(URL) Red Render UI backend (GDI+SKIA) Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor Red URL mostrar(URL) obtener(URL) página Render UI backend (GDI+SKIA) Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor Red Render URL mostrar(URL) obtener(URL) página render(página) UI backend (GDI+SKIA) Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor Red Render UI backend (GDI+SKIA) URL mostrar(URL) obtener(URL) página render(página) construir DOM Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor Red Render UI backend (GDI+SKIA) URL mostrar(URL) obtener(URL) página render(página) construir DOM pintarFuentes(página) pintarWidgets(página) Workflow (caso Chrome) Página web básica (HTML + CSS) sin cache UI Motor Red Render UI backend (GDI+SKIA) URL mostrar(URL) obtener(URL) página render(página) construir DOM pintarFuentes(página) pintarWidgets(página) Workflow (caso Chrome) Cambiar dimensión de browser UI cambia tamaño de ventana Motor Render UI backend (GDI+SKIA) Workflow (caso Chrome) Cambiar dimensión de browser UI Motor cambia tamaño de ventana repintar(tamaño) Render UI backend (GDI+SKIA) Workflow (caso Chrome) Cambiar dimensión de browser UI Motor Render cambia tamaño de ventana repintar(tamaño) render(página) UI backend (GDI+SKIA) Workflow (caso Chrome) Cambiar dimensión de browser UI Motor Render UI backend (GDI+SKIA) cambia tamaño de ventana repintar(tamaño) render(página) pintarFuentes(página) pintarWidgets(página) Workflow (caso Chrome) Cambiar dimensión de browser UI Motor Render UI backend (GDI+SKIA) cambia tamaño de ventana repintar(tamaño) render(página) pintarFuentes(página) pintarWidgets(página) Workflow (caso Chrome) Página web en cache con JS UI URL Motor Render UI backend (GDI+SKIA) Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor URL mostrar(URL) Render UI backend (GDI+SKIA) Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor Render URL mostrar(URL) render(página) UI backend (GDI+SKIA) Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor Render UI backend (GDI+SKIA) URL mostrar(URL) render(página) construir DOM Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor Render UI backend (GDI+SKIA) URL mostrar(URL) render(página) construir DOM pintarFuentes(página) pintarWidgets(página) Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor Render UI backend (GDI+SKIA) URL mostrar(URL) render(página) construir DOM pintarFuentes(página) pintarWidgets(página) Intérprete JS Workflow (caso Chrome) Página web en cache con JS UI Motor Render UI backend (GDI+SKIA) Intérprete JS URL mostrar(URL) render(página) construir DOM pintarFuentes(página) pintarWidgets(página) interpretar(js) Workflow (caso Chrome) Página web en cache con JS UI Motor Render UI backend (GDI+SKIA) Intérprete JS URL mostrar(URL) render(página) construir DOM pintarFuentes(página) pintarWidgets(página) interpretar(js) js interpretado El motor de render Internet explorer Trident Mozilla, Firefox, Galeon,SeaMonkey Gecko Safari, Tizen, Chrome Webkit Chrome (28+)/Opera (15+) Blink (fork de webkit) El motor de render (workflow) HTML Hojas de estilo El motor de render (workflow) Arbol de contenido HTML Hojas de estilo El motor de render (workflow) Arbol de contenido HTML Arbol render Hojas de estilo El motor de render (workflow) Arbol de contenido HTML Arbol render Hojas de estilo Arbol render + Layout El motor de render (workflow) Arbol de contenido HTML Backend Arbol render Hojas de estilo Motor Arbol render + Layout UI El motor de render (workflow) Arbol DOM HTML recibido <html> <body> <p> Hola mundo </p> <div> Chao mundo <div> </body> </html> • • • HTMLHtmlElement HTML parser HTMLBodyElement HTMLParagraphElement HTMLDivElement Text Text Cada elemento en el HTML es convertido a un nodo DOM DOM es la representation en objetos del HTML DOM es la interfaz de interacción entre JS y los elementos HTML El motor de render (workflow) El proceso de análisis es iterativo para ser tolerante a fallos Documento HTML 1. Análisis léxico 2. Análisis sintaxis Arbol de contenido Lexer Parser Tokenización (vocabulario HTML) Cada token es agregado al árbol de acuerdo con las reglas de sintaxis El motor de render (workflow) Estilo en el HTML recibido, y propiedades visuales <html> <body> <p> Hola mundo </p> <div> Chao mundo <div> </body> </html> Hojas de estilo externas Arbol render • Elementos visuales en el orden en que deben ser pintados • Cada nodo es un área rectangular: anchura, altura, posición, color • Elementos visuales del árbol DOM El motor de render (workflow) Arbol render Arbol DOM Viewport HTMLHtmlElement Scroll Block HTMLBodyElement Block HTMLParagraphElement HTMLDivElement Text Text Block Block Text Text El motor de render (workflow) Arbol render Arbol render + layout Viewport Viewport Scroll Scroll Coordenadas exactas Block Block Block Block Block Block Block Block Text Text Text Text QUE POLITICAS DEBERIA USAR EL MOTOR DE RENDER PARA ANALIZAR/ PINTAR LOS ELEMENTOS HTML? http://www.freegreatpicture.com/other/question-mark-30511 Mecanismo de pintado - El proceso de análisis es gradual - El proceso de análisis de HTML es tolerante a fallos - HTML parser: gramática no libre de contexto - XML parser: gramática libre de contexto - Los elementos son pintados tan rápido como es posible Aplicaciones Web Servidor/Contenedor web - Responde a peticiones HTTP - En el caso de contenido estático, envía el contenido solicitado en un mensaje HTTP - En el caso de un recurso dinámico (ej, JSP), este se compila y ejecuta para generar HTML Servidor DIFERENCIAS ENTRE SERVIDOR WEB, CONTENEDOR WEB, Y SERVIDOR DE APLICACIONES? http://www.freegreatpicture.com/other/question-mark-30511 Servidor vs. Contenedor Servidor Web Servidor de peticiones HTTP capaz de ejecutar CGIs, o scripts del lado del servidor Contenedor Web Servidor web que ejecuta código Java en el servidor Servidor de aplicaciones Contenedor web + contenedor de EJBS + otros servicios Servidor Web Recurso: URI/URL Core Módulos Cliente Servidor Sistema Operativo Servidor de Aplicaciones https://docs.oracle.com/cd/E19651-01/817-2144-10/ Servidor de Aplicaciones Servidor de aplicaciones - Clustering Tolerancia a fallas Balanceo de cargas Ejecución de objetos de negocio Otros protocolos diferentes a HTTP Seguridad Transacciones distribuidas Publicación y orquestación de servicios Servidor de Aplicaciones - Glassfish Application Server (Open source/Oracle) Weblogic server (Oracle) Oracle Application Server (Oracle) JBoss (Red Hat) Internet Information Services (Microsoft) Oracle OC4J (Oracle) Apache Geronimo (Apache) WebSphere Application Server (IBM) Sybase Enterprise Applicacion Server (Sybase) Aplicaciones Web Web browser/cliente http Cliente Componentes del lado del cliente: HTML, CSS, JS Servidor/Contenedor web Servidor Componentes del lado del servidor: JSP, JSF, PHP, WS-REST Aplicaciones Web Web browser/cliente http Cliente Componentes del lado del cliente: HTML, CSS, JS Servidor de aplicaciones Servidor Componentes del lado del servidor que no usan HTTP: EJBs Bibliografía - Grosskurth, Alan. A Reference Architecture for Web Browsers. http://grosskurth.ca/papers/browser-refarch.pdf - Garsiel, T., Irish, P. How Browsers Work: Behind the scenes of modern web browsers. http://www.html5rocks.com/en/ tutorials/internals/howbrowserswork/ - Webkit, Open Source Web Browser Engine. https://webkit.org/ - http://www.javaworld.com/article/2077354/learn-java/appserver-web-server-what-s-the-difference.html