RIA

Desarrollo con Tecnologas Open

Source
Diego F. Quiroga diegoq@unsl.edu.ar
Tecnologas de la Informacin Universidad Nacional de San Luis
http://goo.gl/zhFJ7
Introduccin
as nue!as tecnologas " est#ndares como $J$%& 'T()
" potentes motores Ja!a*cript est#n popularizando el
desarrollo de +I$ " resultan cada !ez m#s atracti!as&
mientras que los enfoques de desarrollo cl#sicos !an
quedando o,soletos " en desuso. -o o,stante& los
,eneficios de estas aplicaciones traen apare.ada cierta
dificultad en su desarrollo& de,ido a la cantidad de
conceptos " tecnologas que in!olucran.
Introduccin
Ric Internet Application !RIA"
/
Ja!a*cript
/
$J$%
/
'T()
RIA !Ric Internet Application"
/
0na +I$ es una aplicacin 123 que incorpora caractersticas
similares a las de las aplicaciones de escritorio.
/
3usca me.orar la e4periencia " producti!idad del usuario&
manteniendo las !enta.as de la 5e, 6despliegue&
disponi,ilidad& independencia de la plataforma& escala,ilidad&
etc7.
$plicaciones
de 2scritorio
$plicaciones
123
Tecnologas de
8omunicacin
RIA
RIA !Ric Internet Application"
$plicaciones
de 2scritorio
$plicaciones
123
Tecnologas de
8omunicacin
RIA
RIA
#$e%plos& '%ail
RIA
#$e%plos
RIA
#$e%plos& Trello
(aractersticas de una RIA
/
Interfaces r#pidas 6one page apps7& atracti!as " no
)lo*ueantes.
/
8omunicaciones asncronas.
/
9ueden tener caractersticas real ti%e.
/
(ane.o de estado& lgica " presentacin en el cliente
6state+ull7.
/
8lara distincin entre la capa cliente 6+rontend7 " ser!idor
6)ac,end7.
Ar*uitectura tradicional vs
RIA
RIA - Desventa$as
/
$umenta la comple.idad en el dise:o " el desarrollo
6m#s capas " tecnologa in!olucrada7.
/
2l asincronismo complica el flu.o de la aplicacin&
dificulta detectar errores " situaciones no deseadas.
/
'a" que dedicar un esfuerzo adicional a la
comunicacin " entendimiento entre el ,ac;end " el
frontend.
/
(e.or e4periencia del usuario 60%7.
/
(enos tr#fico en la red.
/
(enos carga " uso de recursos en el ser!idor.
/
a programacin del ,ac;end es m#s simple.
/
2l ,ac;end se puede con!ertir en un $9I " ser!ir distintas
aplicaciones.
/
2l lengua.e " la tecnologa utilizada en el ,ac;end es
independiente de la del frontend.
/
2l ,ac;end " el frontend se pueden desarrollar por
separado.
RIA - .enta$as
RIA
Situacin previa !UNSL"
/
24periencia en desarrollo 5e, tradicional.
/
(ane.o de Apace " /0/ en entorno linu4.
/
<esarrollo (=8 con el frame5or; (a,e/0/.
/
<3 engine INFOR1I2 6,ases mas importantes7.
/
Implementacin de algunos ser!icios remotos so,re %(>
+98 6en 9'97.
/
(e.ora de algunas aplicaciones incorporando $Quer3
.?uer"0I " A4A2.
/
$pro4imacin 6no mu" satisfactoria7 a la programacion +I$
con Ja!a*cript " .?uer".
RIA
/ri%eras luces desde Trello
Frontend !(liente"
/
Ja!ascript > $J$% / J*@-
/
2structura de la aplicacion .a!ascript
6patrn (=87
/
(ane.o de templates 6'T(7
/
9ersistencia de <atos
/
ToolAit Br#fico 6la"outs& controles& css7
para la interface de usuario.
5ac,end !Server"
/
'TT9 *er!er
/
J*@-
/
8a;e9'9C& -ode.J*C
RIA
#leccin de 0erra%ientas
Frontend !(liente"
/
Ja!ascript > $J$% / J*@-
/
2structura de la aplicacion .a!ascript
6patrn (=87
/
(ane.o de templates 6'T(7
/
9ersistencia de <atos
/
ToolAit Br#fico 6la"outs& controles& css7
5ac,end !Server"
/
'TT9 *er!er
/
J*@-
/
8a;e9'9C& -ode.J*C
Spine
frame5or; (=8 .a!ascript
5ootstrapfr
ontend frame5or;
Apace 6 (a,e/0/
6+2*T ser!er7
4Quer3
RIA
$Quer3
i,rera mu" potente& !ers#til " ampliamente difundida que simplifica la
programacin en .a!ascript. Tiene muchas utilidades& " e4tensiones en
forma de plugins que la con!ierten en una herramienta mu" potente "
e4tremadamente Dtil.
Lo ms importante:
/
(ross-5ro7ser: permite a,straernos de los detalles de cada
na!egador.
/
a facilidad que da para recorrer " manipular el DO1 6el 'T(7.
/
2l soporte para el mane.o de eventos.
/
2l soporte para A4A2.
http://.quer".com
RIA
$Quer3 !e$e%plos"
http://.ash;enas.githu,.io/coffee>script
"Un pequeo lenguaje que compila a JavaScript"
/
<isponi,le como mdulo de -ode..s
/
*inta4is clara& legi,le 6similar a ru,"7
/
9or ser EJa!a*criptE se puede usar cualquier li,rera .a!ascript 6.?uer"&
etc7 ... " !ice!ersa.
/
8larifica " simplifica significati!amente la programacin orientada a
o,.etos.

RIA
(o++eeScript
RIA
(o++eeScript !e$e%plo /OO (S vs 4S"
RIA
Spine
http://555.spine.s.com/
Simple, liviano, documentado ... funciona "out of the o!"
RIA
Spine !lo i%portante"
/
Inclu"e mdulos para Node.$s que nos ,rindan un entorno de
desarrollo " deplo" integrados 6'em& *pine$pp7.SpineApp&
utilidades para crear controladores& modelos " modelos de
test.0e%& compila coffeescript& less& " los integra en un unico
archi!o 6application..s " application.css7. $dem#s arma un ser!idor
para desarrollo que !a compilando en tiempo real.
/
E@ut of the ,o4E: inclu"e lo necesario para integrar estructura&
persistencia& mane.o de templates& sin tener que instalar e4tras.
/
2scrito en 8offee*cript: permite desarrollar en 8offee*cript o J*.
RIA
Spine !estructura"
RIA
Spine !e$e%plos"
2structura de directorios
de una app *pine
(ontroladores
1odelos
RIA
Inter+ace de usuario
ttp&88t7itter.gitu).co%8)ootstrap
RIA
5ootstrap
3ootstrap !iene equipado con una ,uena !ariedad de estilos&
co%ponentes " plugins que cu,ren la ma"ora de las necesidades de
una aplicacin 5e,.
/
3otones " grupos de ,otones
/
<ropdo5ns
/
3arras de na!egacin
/
(enDs " su,menDs.
/
Ta,s& istas
/
2tiquetas& tooltips& alertas.
/
$ccordions
/
8arousel
/
<i#logos
/
3arras de progreso&
/
etc.
F lo m#s importante& se pueden e%pe9ar a
usar desde el %ar,up sin escri)ir ni una
lnea de 4avaScript.
RIA
5ootstrap !e$e%plo"
9rogress,ar desde el mar;up: classGEprogressE
RIA
5ootstrap !responsive"
*oporte para adaptarse al !ie5port de tres tipos de
dispositi!os mostrando u ocultando elementos de la
pantalla.
/( de #scritorio - Ta)let - Tel:+ono
RIA
5ootstrap !grid s3ste%"
/
*istema de grillado en filas " columnas.
/
a"out de ancho fi.o: HIJ p4 en KL columnas.
/
$ncho fi.o adaptati!o: 7LI a KK7J p4 en KL columnas.
/
a"out fludo: porcenta.es en lugar de pi4els.
RIA
5ac,end
/
+est M Json
/
8a;e9'9 6con soporte Informi47
/
$pache
RIA
Un prototipo de prue)a
RIA
Un prototipo de prue)a
RIA
(onclusiones
/
2l desarrollo de una +I$ puede ser una tarea comple.a " difcil de
a,ordar. 2ncontrar la com,inacin de herramientas adecuadas es un
paso sumamente importante para iniciarse en el desarrollo.
/
a com,inacin planteada 68offee*cript M *pine M 3ootstrap7
fa!orece un inicio relati!amente r#pido permitiendo o,tener
resultados tempranos sin un esfuerzo desmedido.
/
<esarrollar este tipo de aplicaciones& incenti!a el desarrollo de
ser!icios 6,ac;end7 que se pueden e4tender para dar disponi,ilidad
de los datos a distintas aplicaciones.
/
Tendremos ma"or disponi,ilidad de la informacin 6incluso entre
aplicaciones7.
/
Tendremos usuarios m#s contentos 6aplicaciones mas modernas "
amiga,les7
LISTO/
https://,it,uc;et.org/unsl/listop
/
'erramienta para estadsticas.
/
Benera listados de datos " permite com,inarlos.
/
9ermite incorporar datos e4ternos 624cel7.
/
8onsultas generales so,re *I0 Buaran 6I-F@+(I%7.
LISTO/
(onsultas 3 listados
LISTO/
(o%)inacin de listados
RIA
;1ucas 'racias<
Diego F. Quiroga diegoq@unsl.edu.ar
Tecnologas de la Informacin Universidad Nacional de San Luis
http://goo.gl/zhFJ7