CONCEPTOS BASICOSISIS 3710
Aplicaciones Web
ServidorCliente
Aplicaciones Web
ServidorCliente
Recurso: URI/URL
Aplicaciones Web
ServidorCliente
Localización/ generación recurso
Aplicaciones Web
ServidorCliente
Recurso: HTML/JS/ Imagen/PDF….
Aplicaciones Web
ServidorCliente
HTML/JS/ Imagen/PDF….
Aplicaciones Web
ServidorCliente
Web browser/cliente http
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
Componentes del lado del cliente: HTML, CSS, JS
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
Interfaz (UI)
Motor (browser engine)
Motor de render
Intérprete de JS
Backend de UI
Persistencia
Conectividad (Networking)
Web browser (componentes)
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Intérprete de JS Backend de UI
Persistencia
Conectividad (Networking)
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Intermediario entre la interfaz
y el motor de render
Intérprete de JS
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Pinta el recurso solicitado en la
interfaz (ej., interpreta HTML y CSS)
Intérprete de JS
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Hace las solicitudes a la red usando el protocolo HTTP
Intérprete de JS
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Interpreta y ejecuta código JS
Intérprete de JS
Interprete XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Analizador de sintaxis (parser)
XML
Intérprete de JS
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Pinta widgets (ej., combobox) usando
métodos del sistema operativo
Intérprete de JS
Analizador de XML
Web browser (componentes)
Interfaz (UI)
Motor (browser engine)
Motor de render
Backend de UI
Persistencia
Conectividad (Networking)
Almacenamiento local de datos (ej., cookies)
Intérprete de JS
Analizador de XML
Interfaz + XPFE
Browser/Rendering engines (Gecko)
Spider-Monkey
GTK/X11
Persistencia
Necko + NSS/PSM
Ejemplo: Firefox
Expat
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URL
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
pintarFuentes(página)
pintarWidgets(página)
Workflow (caso Chrome)
UI Motor Red Render UI backend (GDI+SKIA)
Página web básica (HTML + CSS) sin cache
URLmostrar(URL)
obtener(URL)
página
render(página)construir DOM
pintarFuentes(página)
pintarWidgets(página)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
pintarFuentes(página)
pintarWidgets(página)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Cambiar dimensión de browser
cambia tamaño de ventana
repintar(tamaño)
render(página)
pintarFuentes(página)
pintarWidgets(página)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URL
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página)
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
interpretar(js)
Workflow (caso Chrome)
UI Motor Render UI backend (GDI+SKIA)
Página web en cache con JS
URLmostrar(URL)
render(página) construir DOM
pintarFuentes(página)
pintarWidgets(página)
Intérprete JS
interpretar(js)
js interpretado
El motor de render
Internet explorer
Mozilla, Firefox, Galeon,SeaMonkey
Safari, Tizen, Chrome
Chrome (28+)/Opera (15+)
Trident
Gecko
Webkit
Blink (fork de webkit)
El motor de render (workflow)
HTML
Hojas de estilo
El motor de render (workflow)
HTML
Arbol de contenido
Hojas de estilo
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Hojas de estilo
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Arbol render + Layout
Hojas de estilo
El motor de render (workflow)
HTML
Arbol render
Arbol de contenido
Arbol render + Layout
Hojas de estilo
UIMotorBackend
El motor de render (workflow)
HTMLHtmlElement<html> <body>
<p> Hola mundo </p> <div> Chao mundo <div>
</body> </html>
HTMLBodyElement
HTMLParagraphElement
Text
HTMLDivElement
Text
HTML recibido Arbol DOM
HTML parser
• 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)
Documento HTML
Lexer
Parser
1. Análisis léxico
2. Análisis sintaxis
Arbol de contenido
El proceso de análisis es iterativo para ser tolerante a fallos
Tokenización (vocabulario HTML)
Cada token es agregado al árbol de acuerdo con las reglas de sintaxis
El motor de render (workflow)
Arbol render
<html> <body>
<p> Hola mundo </p> <div> Chao mundo <div>
</body> </html>
Estilo en el HTML recibido, y propiedades visuales • 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
Hojas de estilo externas
El motor de render (workflow)
HTMLHtmlElement
HTMLBodyElement
HTMLParagraphElement
Text
HTMLDivElement
Text
Arbol DOM
Block
Block
Block
Text
Block
Text
Arbol render
Scroll
Viewport
El motor de render (workflow)
Block
Block
Block
Text
Block
Text
Arbol render
Scroll
Viewport
Block
Block
Block
Text
Block
Text
Arbol render + layout
Scroll
Viewport
Coordenadas exactas
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
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
DIFERENCIAS ENTRE SERVIDOR WEB,
CONTENEDOR WEB, Y SERVIDOR DE
APLICACIONES?
http://www.freegreatpicture.com/other/question-mark-30511
Servidor vs. Contenedor
Servidor Web
Contenedor Web
Servidor de aplicaciones
Servidor de peticiones HTTP capaz de ejecutar CGIs, o scripts del lado del servidor
Servidor web que ejecuta código Java en el servidor
Contenedor web + contenedor de EJBS + otros servicios
Servidor Web
ServidorCliente
Recurso: URI/URL Core
Sistema Operativo
Módulos
Servidor de Aplicaciones
https://docs.oracle.com/cd/E19651-01/817-2144-10/
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
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
ServidorCliente
Web browser/cliente http Servidor/Contenedor web
Componentes del lado del cliente: HTML, CSS, JS
Componentes del lado del servidor: JSP, JSF, PHP, WS-REST
Aplicaciones Web
ServidorCliente
Web browser/cliente http Servidor de aplicaciones
Componentes del lado del cliente: HTML, CSS, JS
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/app-server-web-server-what-s-the-difference.html