CONCEPTOS BASICOS

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