Aplicaciones Nativas
Hasta hace poco tiempo el desarrollo de aplicaciones para móviles y tablets implicaba tantos desarrollos paralelos como plataformas destino se quisiesen abarcar. Ello se debe a que cada plataforma tiene su propio sistema operativo y su propio lenguaje de programación:- iOS: Objective C
- Android: Java
- Windows: C# y Visual Basic .NET.
- BlackBerry 10: C++
El
desarrollo de una aplicación nativa en varios de estos sistemas
tiene una desventaja fundamenta, y es que es muy caro al precisarse
equipos de desarrollo expertos en cada plataforma. Por otro lado
tiene también ventajas, la ventaja de acceder directamente al
hardware del movil/tablet, acceder directamenet a sus librerías
gráficas, etc, que permite aplicaciones de alto rendimiento.
Aplicaciones Hibridas
Las aplicaciones
hibridas son ideales para el desarrollo de aplicaciones para móviles,
dado que:
- Se desarrollan 100% en HTML 5, CSS 3 y JavaScript (son páginas web).
- Se empaquetan (.apk, .iap, .xap) para cada plataforma específica con el lanzador (un trozo de código nativo) y los componentes específicos necesarios para cada plataforma.
- Se ejecutan en el WebView, que viene a ser un navegador interno incorporado en todas las plataformas.
Así
tendremos que una app híbrida funciona sin mas en varias
plataformas, con lo que se ahorran costes.
Si
nuestra aplicación no pudiese acceder a los dispositivos específicos
de nuestro movil/tablet (gps, brújula, acelerómetro, cámara,
conexión a internet, almacenamiento, etc) la aplicación quedaría
muy coja, ahí es donde entra Apache Cordova.
Apache Cordova es un framework que permite a las aplicaciones híbridas (HTML 5, CSS 3 y JavaScript) acceder a las funciones nativas de cada plataforma (movil/tablet) a través de un API JavaScript único. El framework está compuesto por multitud de plugins, que 'importaremos' según las necesidades de nuestra app.
Apache Cordova
Apache Cordova es un framework que permite a las aplicaciones híbridas (HTML 5, CSS 3 y JavaScript) acceder a las funciones nativas de cada plataforma (movil/tablet) a través de un API JavaScript único. El framework está compuesto por multitud de plugins, que 'importaremos' según las necesidades de nuestra app.
Apache
Cordova permite por tanto que nuestra apicación hibrida trabaje con
el 'hardware' de múltiples plataformas indistintamente, sin cambiar
una sola línea de código.
Las plataformas
soportadas por Apache Cordova son:
- Android.
- BlackBerry 10.
- iOS
- Ubuntu.
- Amazon Fire OS.
- Windows Phone 8 y 8.1
- Windows 8.1 y 10.
- Tizen.
Introducción a Ionic
Es
el framework con el que construimos el código fuente HTML 5, CSS 3 y
JavaScript que se ejecuta en el WebView. Tiene múltiples ventajas:
- Ionic utiliza Apache Cordova como wrapper o capa de abstracción del SO existente en el movil/tablet donde ejecutará el aplicativo.
- Ionic está pensado para la visualización en dispositivos móviles, no es una librería responsive tipo Bootstrap que se adapte a distintos tamaños de pantalla. Ionic incluye una completa librería de componentes, estilos y animaciones que simulan el aspecto nativo de las distintas plataformas. Estos componentes adoptarán automáticamente la apariencia nativa del dispositivo en el que si visualicen.
- Ionic utiliza Angular como framework JavaScript. A priori con Ionic podríamos crear una aplicación sin necesidad de escribir código JavaScript únicamente con HTML5 y CSS3, pero si queremos que nuestra aplicación tenga contenidos dinámicos, por ejemplo para mostrar una lista de clientes a partir de los datos descargados desde cierto servicio web tendríamos que usar JavaScript con AngularJS.
- Trabaja en conjunto con la tecnología conocida como Bower que funciona como repositorio de modulos JavaScript. Con este framework de dependencias JavaScript nos permite instalar módulos o plugins más facilmente para ser utilizados por AngularJS
Introducción a AngularJS
AngularJS
es un
framework JavaScript
para el desarrollo de aplicaciones web en el lado del cliente que
propone un
patrón MVC (Modelo, Vista, Controlador) que
nos permite estructurar el código JavaScript
de forma eficiente.
Algunas
de las características más interesantes del framework son:
- El servidor proporciona los contenidos estáticos (plantillas) y la información que se va a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con la plantilla para generar la vista.
- Podemos sincronizar el modelo y la vista automáticamente utilizando ciertas directives (ng-model en el ejemplo) del framework. Esta sincronización es bidireccional, es decir, la información se sincroniza tanto si cambia el valor en la vista como si lo hace el valor en el modelo.
- Podemos usar o definir 'directives' que son extensiones de la sintaxis de HTML5 que nos permiten crear o ajustar componentes. Por ejemplo podemos modificar el comportamiento de los elementos input para que cambien el color de fondo cuando obtiene o pierde el foco.
- Podemos crear filters nos permiten modificar el modo en el que se va a presentar la información al usuario.
- Podemos usar services que son los encargados de las comunicaciones con el servidor para subir/bajar datos.
- Podemos usar controllers para tratar los datos anteriores y mostrarlos adecuadamente en pantalla.
- Podemos crear aplicaciones SPA (Single Page Applications), que son aplicaciones que recargan una parte de la página dinámicamente, sin que se tenga que recargar toda la página. Esto permite hacer una aplicación web más rápido y fácil.
Introducción a Bower
Bower
por es un administrador de paquetes, que nos permite definir qué
frameworks de JavaScript y CSS necesita nuestra aplicación (Ionic,
Bootstrap, AngularJS, Node.js, NPM, GIT, etc) y bower se encarga de
gestionar las dependencias propias de éstos paquetes, averiguando la
versión necesaria para todos. Si aparecen conflictos, Bower genera
un aviso.
Mediante
el uso de Bower no tendremos que descargar y copiar a mano todas esas
dependencias en nuestros proyectos.
Bower
requiere NPM, el gestor de paquetes de Node.js. También
necesitaremos tener instalado GIT ya que generalmente las
dependencias las obtendremos directamente de este tipo de
repositorios, encontrándose muchas de ellas en GitHub.
Introducción a Node.js y NPM
Node.js
es tanto un framework de programación JavaScript orientado a
eventos, como un motor de ejecución basado en JavaScript V8 de
Google (el motor JavaScript de Google Chrome).
Node.js
implementa los protocolos de comunicaciones más habituales: HTTP,
DNS, TLS, SSL, etc. También implementa operaciones de entrada/salida
muy ligeras y potentes.
El
rendimiento de las aplicaciones basadas en Node.js es tan bueno que
está reemplazando a Apache como servidor web en entornos de alto
rendimiento, dado que minimiza el número de conexiones y el consumo
de memoria.
Apache
crea un nuevo thread por cada solicitud del usuario, cuando hay mucha
concurrencia el rendimiento se degrada porque hay muchos threads. Una
aplicación para Node.js trabaja con un único thread. Si en la
aplicación existe una operación bloqueante (I/O por ejemplo),
Node.js creará entonces otro hilo en segundo plano, pero no lo hará
sistemáticamente por cada conexión como haría Apache. En teoría
Node.js puede mantener tantas conexiones como número máximo de
archivos descriptores (sockets) soportados por el sistema.
Un problema de Node.js es que debido a su arquitectura de usar sólo un hilo también que sólo puede usar una CPU. Un método para usar múltiples núcleos sería iniciar múltiples instancias de Node en el servidor y poner un balanceador de carga delante de ellos.
La
potencia anteriormente comentada ha provocado que JavaScript empiece
a ser ampliamente usado en el lado del servidor, donde es
interpretado y ejecutado por el motor de Node.js.
Instalación de
Node.js
curl
-sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo
apt-get install -y nodejs |
Verificación de la
versión instalada de Node.js
| nodejs -v |
Ejemplo de un
servidor web 'miserver.js' con Node.js
//Inportamos
el módulo http
var
http = require("http");
//Definimos
una variable contador
var
contador=0;
//Instanciamos
el servidor y le pasamos por parametro
//la
función callback anónima que se invocará en cada
//petición
http.createServer(
function(request,
response) {
console.log("Nueva
solicitud");
contador++;
response.writeHead(200,
{"Content-Type": "text/html"});
response.write("<?xml
version='1.0' encoding='UTF-8'?>");
response.write("<!DOCTYPE
html>");
response.write("<html
lang='es' xmlns='http://www.w3.org/1999/xhtml'>");
response.write("<head>");
response.write("
<meta http-equiv='Content-type' content='text/html;
charset=UTF-8'/>");
response.write("
<meta name='language' content='es'/>");
response.write("</head>");
response.write("<body>");
response.write("
<h1>Hola, eres el visitante n\u00FAmero "+ contador
+".</h1>");
response.write("</body>");
response.end();
}).listen(8888);
//Mensaje
de aviso tras el arranque del servidor
console.log("Servidor
funcionando en http://localhost:8888"); |
Ejecutamos el
aplicativo JavaScript que implementa nuestro miniservidor
| nodejs miserver.js |
Probamos desde el
navegador mediante la URL: http://localhost:8888/
Nota. Necesitamos Node.js porque Ionic lo usa tanto en su
interfaz de comandos (CLI) como para construir tareas.
Introducción a GIT
Es el sistema de
control de versiones …. <PENDIENTE. Continuará...>
No hay comentarios:
Publicar un comentario