Ionic para javascript haters

Estos días necesite probar ionic framework para ver que tan buena solución es para hacer un app que en un 95% es mostrar y modificar datos. Debo decir que siempre me a gustado cordova/phonegap  como solución para hacer apps. Pero esta vez fue mi primer acercamiento con un framework que controla las pantallas por mi. Siempre que inicio algo nuevo  me topo con que odios los tutoriales, tengo mas de 10 años programando (sobre todo backend) no quiero  iniciar un lenguaje de 0, solo quiero saber el equivalente en este nuevo framework a mi  lenguaje principal python/django.

Siempre e pensado que html5 es el futuro del desarrollo móvil, pero los celulares aun no lo saben.

-author de este blog en una peda con programadores

Estas son mis notas, probablemente las separe en una o dos entradas mas… Así que comencemos con el index.html y los archivos javascript  apps.js, controllers.js, services.js

index.html

En ionic el index.html vale pa pura verga no sirve para nada… solo carga los archivos javascript, los archivos css, y  los archivos de cordova y ionic.  Tal vez tengamos que agregar (si nuestro proyecto lo necesita) mas archivos javascript para google charts por ejemplo.

Después de esto, lo único importante es agregar  las tags que posteriormente serán rendereadas por ionic. en body por ejemplo tendremos que agregar.

las templates las explicare en otro post,  pero a grandes rasgos  dentro de esta etiqueta ionic intenta renderea el codigo de cada plantilla que le declaremos en app.js

js/app.js

Pos aquí se mapean los vistas(pantallas pa los no iniciados) de  la app, y también puedes hacer otras cosas como declarar constantes… pero lo importante es declarar vistas. la forma de declarar vistas es muy sencilla, los siguientes códigos son ejemplos de como se colocan.. y donde se colocan es bastante obvio (no, este no es un tutorial, son solo mis notas)

 

js/controller.js

bueno, como vimos en párrafos anteriores  app.js mapea una plantilla a un controlador…  que podemos decir de los controladores?  bueno, que si no estas nada familiarizado con javascript y angular son el demonio…  de verdad, estas mierdas son mágicas… y me refiero a mágicas mal pedo.  Cuando eres un programador backend  dentro de  un controlador (o vista si vienes de django) esperas que al final de tu método controlador se  haga un return que rendere tu plantilla con todo lo procesado.

pero no,  javascript, angular, o ionic tiene ganas de hacer las cosas de forma magicamente asyncronica:

lo anterior fue un controlador… y cada linea de este se esta ejecutando al “mismo tiempo” (tomen en cuenta las comillas malditos puristas de la programación)  lo mas importante de ionic en el nivel del controlador es el  el objeto $scope   dicho objeto es algo asi como omnipotente y omnipresente. Tu puedes meterles valores y funciones  y cambiarle valores y funciones y este va a modificar los valores en la interfaz.  El $scope es tan importante que se merece su propio post… o tal vez no. Por ahora dejemoslo en que el $scope mapea a la plantilla. Por ejemplo, si nuestra plantilla dice algo así como:

en la app corriendo se vera asi:

y cuando le des click a “clikeame” cambiara el texto a

/js/services.js

los servicios de forma simplificada tienen la función de sacar código de tu controlador para que no tengas una porquería de código;  Por ejemplo si necesitas hacer llamadas a una webapi (lo cual es de lo mas normal en estos días  y no comprendo por que el puto tutorial de ionic no tiene esto al principio). En fin, un servicio se vera algo así:

Hay algo muy relevante en el código del servicio (de ese tipo de cosas que dices, pero que demonios!!!! pero pos es javascript D: )  y es que las funciones del servicio se escriben en el return y no dentro del “.factory”  el por que no lo se, y la verdad es que a esta altura no me importa.. pero pos es así y nos jodemos todos los que nos duele ver código raro.

en fin, para tener acceso a un servicio se le pasa  el nombre del servicio como parámetro al controlador de esta forma:

en el siguiente post explicare a grandes rasgos los tan preciados:  $http,  $state, $scope y del maldito promise

Martin Quinta

Crecí con una computadora desde el kinder. Empece a programar a los 14 y hoy, mas de una década después… realmente odio estar frente a una computadora. Pero programar es en lo que soy bueno, por lo tanto me desahogo en este blog mientras bebo cerveza artesanal y pienso en un mundo bonito donde Java no existe.

Facebook Twitter LinkedIn  

Entradas relacionadas:

2 comentarios en: “Ionic para javascript haters

  1. Buen post, ya cada vez me paso más por aquí… Efectivamente es un dolor de cabeza que no halla un return, te obliga a trabajar muy lineal y hay asuntos que de plano no te deja hacer. Es bastante útil para su velocidad y también apoyo los servicios, no soy muy experimentado pero cuando descubrí todo el poder de los servicios de angular/ionic no entendí porque no le dan importancia en los tutoriales como buenas practicas. En realidad yo no pensé en buenas prácticas, solo en facilitarme la vida.

  2. “Siempre e pensado que html5 es el futuro del desarrollo móvil, pero los celulares aun no lo saben.”
    Si lo saben, pero no se logro el cometido con firefoxOS, y se siguió con lo ya establecido $$$.
    Saludos.

Leave a Reply

Your email address will not be published. Required fields are marked *