Libra Movilidad - Betabeers Pontevedra

@marcosesperon
Libra ERP
Módulo Movilidad
Betabeers Pontevedra
04 julio 2013

@marcosesperon
¿Quién soy?
MARCOS ESPERÓN
Oracle & Web Developer en EDISA
@marcosesperon
es.linkedin.com/in/marcosesperon/

@marcosesperon
LIBRA MOVILIDAD
Pero primero… ¿qué es Libra?

@marcosesperon
Libra
Libra es un ERP
desarrollado por EDISA
con tecnologías Oracle.
ERP son las siglas de
Enterprise Resource
Planning (planificación
de recursos
empresariales).
Sistema integrado que
combina los procesos
bajo un mismo
esquema que beneficia
a la organización.

@marcosesperon
Libra
•  Optimización de los procesos
empresariales.
•  Acceso a toda la información con
integridad de datos.
•  Compartir información entre todos
los componentes de la organización.
•  Reducir operaciones innecesarias.
•  Análisis global de la información.
Características de un ERP

@marcosesperon
Libra ERP
El punto fuerte de Libra es la personalización

@marcosesperon
Libra ERP
http://www.atlaslibra.com

@marcosesperon
LIBRA MOVILIDAD
Ahora que ya conocemos Libra…

@marcosesperon
Libra Movilidad
Necesitábamos consultar
información y realizar
determinados procesos
de Libra desde los
dispositivos móviles.

@marcosesperon
Libra Movilidad
Objective-C Java C#
Plataformas disponibles al comenzar el proyecto (2011)

@marcosesperon
Libra Movilidad
El módulo se ejecutará en cualquier dispositivo con navegador
web: equipos de sobremesa, smartphones, tablets, PDAs,
televisiones…
Plataformas disponibles al comenzar el proyecto (2011)

@marcosesperon
Esquema del módulo
LIBRA
B2B
APACHE
PHP JS

@marcosesperon
Estructura de la aplicación
mwl.js
assets/lov.js assets/ob/lista.js ...
modulo.js
app

@marcosesperon
Libra Movilidad
Escritorio: menú inicial

@marcosesperon
Libra Movilidad
Apariencia general de un módulo

@marcosesperon
Libra Movilidad
Menú Lateral

@marcosesperon
Libra Movilidad
Consultas

@marcosesperon
DEMO
Vista previa del módulo

@marcosesperon
OPTIMIZANDO EL MÓDULO
Vamos a la parte interesante…

@marcosesperon
Responder rápido a las peticiones

@marcosesperon
Mantener conexiones abiertas
HTTP Response
HTTP/1.1 200 OK
Content-Type: application/javascript
Connection: close
KeepAlive On
KeepAliveTimeout 15
MaxKeepAliveRequest 1000
* Fundamental para redes 3G.
Respuesta
Apache

@marcosesperon
Evitar peticiones a recursos externos
•  Imágenes
•  Frameworks y plugins de javascript
•  Fuentes
* Si es necesario, usar preferentemente CDN’s (Content Distribution Networks).
Almacenar los recursos en nuestro servidor

@marcosesperon
Comprimir las peticiones con GZIP
Minimizar los bytes descargados
GET / HTTP/1.1
Accept-Encoding: gzip, deflate
Petición
HTTP/1.1 200 OK
Content-Encoding: gzip
Respuesta
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
Apache: mod_deflate
$HTTP_ACCEPT_ENCODING;
ob_start("ob_gzhandler");
PHP: ob_gzhandler

@marcosesperon
Ofrecer contenido cacheable
$_SERVER['HTTP_IF_MODIFIED_SINCE']
...
$mtime = filemtime($_SERVER['SCRIPT_FILENAME']);
$gmdate_mod = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';
if ($if_modified_since == $gmdate_mod) {
header("HTTP/1.0 304 Not Modified");
exit;
}
header("Last-Modified: $gmdate_mod");
header('Content-type: text/css');
header('Expires: ' . date('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT');

@marcosesperon
CSS y JS empaquetado
<!doctype html>
<html>
<head>
<title>EDISA</title>
<link rel="stylesheet" href=”css.php?p=menu" />
</head>
<body>
…
...
<script src=”js.php?p=menu"></script>
</body>
</html>
Una única llamada por CSS y JS que devuelve lo necesario para cada módulo.
En ocasiones solamente se utiliza el 10% del código CSS

@marcosesperon
Cachear los recursos en el cliente
APP
CACHE
SERVIDORHTTP
CACHE MANIFEST
# v.130704-1
CACHE:
img/logo.png
img/menu/bg.png
css/fonts/fontawesome-webfont.eot
css/fonts/fontawesome-webfont.svg
css/fonts/fontawesome-webfont.ttf
css/fonts/fontawesome-webfont.woff
js/jquery.js
FALLBACK:
/ utils/offline.html
NETWORK:
*
offline.manifest

@marcosesperon
Estandarizar el código
<img src="botoncerrar.png" alt="Cerrar" />
<img src="botonCerrar.png" alt="Cerrar" />
<img src=”BotonCerrar.png" alt="Cerrar" />
botoncerrar.png
* Si nuestro servidor es Windows,

@marcosesperon
Las cookies son kilos de más
Puede que sean texto plano de pocos bytes, pero cada vez que se hace una
petición el navegador envía la información de las cookies que coincida con el
dominio solicitante.
SERVIDOR HTTP
•  Eliminar cookies que no sean necesarias
•  Reducir el tamaño de las cookies al mínimo
posible

@marcosesperon
Controlar los elementos del DOM
Generar un etiquetado eficiente
DOC
HTML
BODY
ELEM
ELEM ELEM
ELEM
ELEM ELEM
Es recomendable no superar los 1.000 elementos en el DOM
document.getElementsByTagName('*').length

@marcosesperon
Declarar el CSS en el head
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
...
</body>
<html>
El pintado de la página se bloquea hasta que se procesa el CSS.
Evitar los estilos en línea en el HTML.

@marcosesperon
Declarar el JS al final del body
<!doctype html>
<html>
<head>
</head>
<body>
…
<script src="app.js"></script>
</body>
</html>
En el HEAD bloquea la petición hasta que procesa el JS.
Evitar los scripts en línea en el HTML.

@marcosesperon
Usar sprites para las imágenes
menu-libra.png
menu-libra-1.png
menu-libra-2.png
menu-libra-3.png
menu-libra-4.png
…
16 imágenes
16 conexiones
143 KB
1 imagen
1 conexión
30 KB
Optimizar los recursos utilizados

@marcosesperon
Usar webfonts para los iconos
http://fortawesome.github.io/Font-Awesome/

@marcosesperon
Reemplazar imágenes por CSS3
linear-gradient(to bottom, #feccb1 0%,#f17432 41%,#ea5507 65%,#fb955e 100%)

@marcosesperon
DataURI’s para imágenes de poco peso
data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbW
FnZVJlYWR5ccllPAAAA1RJREFUeNq8V0tIVGEU/
u6d0ZlrDxxdWPSgpNC0B5YLh7CCDIKoNkatetHLjYFthIIKSmdhEq20jSaRGkptqk1ElCCKlkqZUKmp1Fg6M2rN6z7+zj93HK3V3
MG5Fw73cf57/u8/5zvnP7/AGEM8lyAIi19TLrgaBxgTcnUdhu5XntpOj/LiQXHZ5oPikX8mr24cau8YZDMqY9NBxppf9bGL1Q
+GuM6obRHGrzQIYs5e5xZ0jyno
+DKHgq35IIg5zkMn1hg1lgiAVO6Pga4e1NfcxuScjEBYhbTcgc5nLQEeESPGrAkAELjrCp2FKF2Rh9k5PxyShdypxTyfbA/
w4EJWAE1VI3GU1cQmTxgAzwiN/hSsqWTBCllDwldiHhBF9HS9R2tDPVSbA2EQEEE0DwAjnuU6C/
Dk82WUPRSQFhwBEywmAqBIh+getOg0DmkpYDDRA5wDKqIJRxYUVYmUQ1MBvHnRGwu7QtkgmEpCikHRwV2Uh/
orT0dzs4AirigLSa9qChJ1QWIAeB3gP0cnVRSTPcA58Lzlpc47gQNQ6CaYy4GSYyWxEGg8BGZ6QK//
C5VfUTWzQyBGXD8fAlWRza0DIrGvpa5Vjzp5QTW7Dsi0Fx8+fRxqmF5IQkE/
paJmCoCUc1UNffmb12NHBmC71gycf4yCnbuxaW0mSNf/f1+4lE2p5eyNupq7ba
+Zlz50UTPqL1vJmMvBvo4OMg994zoac4ePTUZTarfapCtH9hej8zsgtV+FlDFL5PMi
+OEROieAo6Sz2qUKPjYZIZDs9lTMqCJmPAHkPq1C6DfVAD+Q138LU9SO+kgH3VtSMppSTn588yiUdiS0eC1NX4FI0/
FMHPPIVJ4FQwszRMJQWMavKQ8CgoT+A+WwTtIK3MC77HJoIRk/
p7y0RRvjtREPaF73RNPwp76T2duK0LvHhe59tZFiaKV8TJUDIB287vEmxDbqOHv8ODegZXTbeMnV8DY9c3X6qg35sNp0r
imhINyjH+Gb/
uGrqzxTTJ9GSP7EY9sIAJ5aGRxEafnNiqx12cdFiyXWkEyOD7e23bteG53cw9uEpQaAaJFJJ8kicfBjWlTNa6KXhFgB3/
wpORkAEC0y9miqzTOOx5yfC4N85UaO538FGACcGdhVhFsFYQAAAABJRU5ErkJggg==

@marcosesperon
Obtener el JS bajo demanda
if(typeof calculadora == 'undefined') {
load('calculadora.js').thenRun(function () {
var c = new app.calculadora();
});
} else {
var c = new app.calculadora();
};
https://github.com/chriso/load.js

@marcosesperon
Optimizar nuestro Javascript
Reducir interacciones con el DOM
for(i = 0; i < array.length; i++) {
document.getElementById('test').innerHTML += array[i];
};
v_arts = document.querySelectorAll('.articulo');
Cachear elementos del DOM
var f = $('.filas');
var f = document.querySelectorAll('.filas');
Usar métodos nativos
No quedarse en jQuery

@marcosesperon
Resultado final
Inspector de red del menú inicial

@marcosesperon
PREGUNTAS
Dudas, sugerencias…

Libra Movilidad - Betabeers Pontevedra

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (18)

Ähnlich wie Libra Movilidad - Betabeers Pontevedra

Ähnlich wie Libra Movilidad - Betabeers Pontevedra (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Libra Movilidad - Betabeers Pontevedra