Este documento presenta sobre arquitectura de aplicaciones móviles. Explica que las aplicaciones móviles pueden ser nativas o web, y cada una tiene ventajas y desventajas. También describe componentes clave de una arquitectura de aplicación web móvil incluyendo servidores, servicios web, bases de datos, y tecnologías del lado del cliente como HTML5, CSS3 y JavaScript. Además, cubre estrategias para el back-end, front-end y presentación multiplataforma. Finalmente, presenta un caso de éxito de una

1. Aplicaciones «Móviles»
Arquitectura de Software

2. ¿Quien soy?
Sergio Castillo Yrizales
Líder de Proyectos CCR
Expositor de la comunidad JSPeru
4 años de experiencia en soluciones web
3 años en soluciones móviles
2

3. ¿Que es Arquitectura?
3

4. ¿Por que móvil?
Uno de cada diez peruanos ya tiene un smartphone.
El 86% de los peruanos se conecta a internet.
Fuente:
Ipsos Apoyo 2011
4

5. Alguno de ustedes a hecho una
aplicación móvil?
5

6. Alguno de ustedes a hecho una
pagina web?
6

7. Alguno de ustedes a hecho una
aplicación web?
7

8. Soluciones Móviles
Dos tipos:
Aplicaciones nativas (IOS, Android, Windows
Phone, etc.)
Aplicaciones Web???
8

9. Aplicaciones Nativas
Ventajas
Más Rápidas
Mejores Gráficos
Desventajas
Muchas tecnologías por aprender (Objective-
C, Java, Silverlight, Flex…)
Diferentes Mercados (AppStore, Google Play, Windows
MarketPlace…)
9

10. Aplicaciones Web
Ventajas
Un solo grupo de tecnologías (HTML+CSS+JS)
Compatibles en todos los Mercados
(PhoneGap, Titanium…)
Menor costo de Desarrollo
Menor Curva de aprendizaje
Desventajas
Rápidas…
10

11. ¿Y cual elijo?
Depende de tu aplicación:
Aplicaciones nativas
Juegos
Acceso a sensores, cámara, etc.
Aplicaciones web móviles
Varios objetivos
Objetivo principal: consumo de información.
Accesibilidad
Mercado variado que incluye PCs, Macs y Smartphones
11

12. Preguntas?
12

13. Arquitectura de App Web
Componentes:
Servidor
SOAP
REST
Cliente
HTML5
CSS3
Javascript
13

14. Servidor
Servicios Web:
SOAP
REST
Base de Datos
DLLs
14

15. Cliente
HTML5
Accesibilidad (Navegadores de PCs y de Smartphones)
Standard by W3C
Ahora incluye la posibilidad de tener Video y Audio
15

16. Cliente
CSS3
Uso de una gran cantidad de colores
Transiciones 3D
Agregar nuevas fuentes (@font-face)
Muchos efectos mas
16

17. Cliente
Javascript
Respuesta a Eventos
Acceso a datos y consumo de Servicios Web
Manejo de DOM
17

18. ¿Y la Arquitectura?
18

19. Estrategias
Estrategia de Construcción de BackEnd
Estrategia de Organización de Código FrontEnd
Estrategia de Presentación Multiplataforma
19

20. Estrategia BackEnd
Servicios Web REST
Flexibilidad de Desarrollo
Uso adecuado de los verbos HTTP GET, POST, PUT y
DELETE
Buena estrategia de manejo de Cache
Diversas tecnologías: .NET(WCF), JAVA(Jersey, RESTlet)
20

21. Estrategia FrontEnd
Patron MVC
Modelos para comunicarse con los servicios
Controladoras que responden a la interacción de los
usuarios
Vistas que permiten separar el diseño de la
programación
Tecnologías: Backbone, AngularJS, etc…
21

22. Estrategia de Presentación
Muchas veces pasada por alto
Muy importante para maximizar la satisfacción del
usuario
Dos estrategias:
Responsive Design
Framework UI: Jquery Mobile, SenchaTouch, etc…
22

23. Preguntas?
23

24. Caso de Éxito
CCRSYS - Supervisión
24

25. Problema (Req. Técnicos)
Se necesita una aplicación que pueda ser usada en
nuestros equipos Windows Mobile
Asi mismo se debe poder accesar a la misma desde las
PCs de la empresa
Y en el futuro debe poder accesarse desde
dispositivos Android
25

26. Estrategia FrontEnd
Patrón MV* mediante Backbone
Modelos que manejas la data
Vistas que responden a eventos y construyen el DOM
Rutas que controlan el flujo de la aplicación
26

27. Estrategia BackEnd
Servicios REST con WCF
Integración con la BD MS SQL Server
Flexibilidad en formatos de Respuesta (JSON)
Buen IDE (Visual Studio)
27

28. Estrategia de Presentación
Framework: Jquery Mobile
Compatibilidad con la mayor cantidad de dispositivos:
Windows Phone, IOS, Android, Blackberry 10, Windows
Mobile.
Desarrollo Amigable
28

29. Vista en Smartphone
29

30. Vista en PC
30

31. Más preguntas?
Twitter: @scyrizales
31