[Windows Phone 7.5] Desarrollo nativo vs PhoneGap.
Hola a todos!
DISCLAIMER:
Este artículo solo representa mi opinión.
Dicho esto, si sigues leyendo es porque te interesa saber porqué llego a esta conclusión. Hasta ahora me había alejado todo lo posible de javascript y html, los lenguajes del futuro que salvarán al mundo de la crisis y harán que el sol luzca más y la lluvia moje menos. Pero esta semana he tenido que trabajar en un proyecto en PhoneGap, la verdad es que me apetecía probar como funcionaba y como era la experiencia tanto del lado del desarrollador como del lado del usuario. Y tras unos días realmente sorprendentes, aquí van mis conclusiones y algo de código y ejemplos para probarlas.
PhoneGap, javascript, html…
La verdad es que todo aquel que me conozca sabrá que no me caracterizo por mi amor a javascript o html, pero debo reconocer que el trabajar con ellos esta semana ha sido menos doloroso de lo que me esperaba. En gran parte gracias a la ayuda de mi compañero Gerard López, un auténtico crack de PhoneGap, javascript y demás hierbas. En parte por el stack que el mismo ha escogido, formado por knockout.js, jquery mobile y PhoneGap, que realmente facilita mucho la vida del desarrollador. Lo reconozco, me lo he pasado muy bien con javascript… es algo que no me esperaba jejejeje
Pero aunque el lado del desarrollador me ha sorprendido gratamente, me ha decepcionado mucho el lado de usuario. Me explico, por lo que he visto, el rendimiento de las aplicaciones, al menos en Windows Phone, no es ni de lejos el mismo y después de verlo por mis propios ojos no creo que se pueda llegar a ofrecer una buena experiencia de usuario con PhoneGap en Windows Phone. Pero las palabras se las lleva el viento, vamos a ver varios ejemplos de ello.
Mapas y más mapas
Para empezar veamos un ejemplo de uso de mapas, el objetivo del ejercicio es tener un mapa en pantalla centrado en unas coordenadas específicas (el centro del mundo) y con un zoom de nivel 8.
En PhoneGap, añadimos una referencia al api javascript de google:
Api google
- <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
En nuestro <BODY> incluimos un <DIV> llamado “map”:
Body
- <body onload="load()">
- <div id="map" style="Height:100%; width:100%;"></div>
- </body>
Y en el evento onload del <BODY> cargamos el mapa de google en nuestro <DIV>:
función load
- function load() {
- var latlng = new google.maps.LatLng(43.409038, -3.159943);
- var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
- var map = new google.maps.Map(document.getElementById("map"), myOptions);
- }
Nadie en su sano juicio puede pensar que este código es complicado, de hecho está copiado de la página de google sobre como usar el api de google maps.
¿El resultado?
Voilá! Con solo tres líneas de javascript tenemos un mapa de google totalmente funcional.
¿Y Silverlight? Bueno, empezaremos por añadir a nuestro proyecto una referencia al ensamblado Microsoft.Phone.Controls.Map y a continuación añadiremos una referencia en nuestra página:
Referencia al control map
- xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
A continuación, solo tenemos que insertar el control en nuestra página y establecer sus propiedades ZoomLevel y Center:
Control map
- <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
- <map:Map ZoomLevel="8" Center="43.409038, -3.159943"></map:Map>
- </Grid>
Y listo, ejecutamos y obtenemos el siguiente resultado:
Así a primera vista, salvo que en PhoneGap usamos Google maps y en Silverlight usamos Bing maps, no podemos decir que haya existido una complejidad mucho mayor en uno u otro caso, y las diferencias visuales son anecdóticas… ¿Cual es el problema entonces? Mejor lo vemos en un vídeo:
Como podemos observar en el vídeo hay una gran diferencia de rendimiento en la aplicación de PhoneGap con respecto a la aplicación de Windows Phone escrita en Silverlight. También el arranque de la aplicación se ve más lento en PhoneGap, aunque esto es más debido a que se trata el primer inicio y está pasando nuestro código html y todas las dependencias al isolated storage de la aplicación para poder acceder a ellas.
Conclusión
Creo que el modo de desarrollo con javascript y html ha mejorado muchísimo, cosas como knockout.js o jquery hacen que sea mucho más sencillo trabajar, pero también creo que el rendimiento que ofrece javascript y html, al menos en Windows Phone, es horrible y justifica de sobra desarrollar en nativo. ¿Tendremos una sorpresa en cuanto a rendimiento en Windows Phone 8? Quizás, pero si no es así, no creo que puedas crear una aplicación de calidad para Windows Phone con PhoneGap. Aquí os dejo como siempre el proyecto de ejemplo, que contiene las dos aplicaciones con el mapa para que se vea que no hay trampa. Para poder usar PhoneGap os podéis descargar la última versión y encontrar instrucciones sobre como instalarlo aquí.
Un saludo y Happy Coding!