Category Archives: Web

Aplicaciones de escritorio con Electron

Javascript, Web

Como ya sabrás, Javascript (de ahora en adelante JS) es el lenguaje que se propone dominar el mundo. Si antes para el desarrollo de una web trabajabas con JS o algún framework que otro contados como JQuery, Mootools, Prototype,  (me refiero los mas comunes) hoy día el mundo del Frontend se a vuelto un tanto complejo a la hora de decidir una solución. Es inconcebible pensar en el desarrollo web obviando el uso de el gestor de paquetes Node NPM, un task runner como Gulp o Grunt, o usar JS del lado del servidor como con Nodejs o IO.

Además, la multitud de frameworks va creciendo cada día, como AngularJS, ReactJS, EmberJS, Backbone, quedando los nombrados anteriormente a la altura del betún, siendo usados como librerías terceras para usos específicos.

Hace años que llevamos viendo que en los móviles, también tenemos soluciones en Javascript en los móviles, apostando por aplicaciones híbridas, aprovechando conocimiento y un solo esfuerzo de desarrollo para una aplicación sea multiplataforma gracias a Phonegap/Cordova.

Pues un paso mas que da JS, es meterse en darnos facilidades en el desarrollo de aplicaciones de escritorio con tecnologías web. Esto es algo que ya lleva tiempo usándose por grandes compañías, pero no es hasta que comienza la  apuesta de las grandes marcas para que despierte nuestra curiosidad.

Con todo esto, os quiero hablar de Electron, un proyecto de la gente de Github, con el que desarrollaron el IDE Atom. La idea es tal cual como se presenta en móvil con las aplicaciones híbridas, es decir, presentar un webview, un chromium en este caso, para pintar nuestro software y dar la apariencia de aplicación nativa.

Esto lo puedes comprobar por ejemplo, abriendo tu IDE Atom, Visual Studio Code o Slack si lo usas, y abriendo el inspector de elementos pulsando Alt + CMD + i (en MAC)

Screenshot Atom Inspector

*Con Visual Studio Code o Slack no pude hacer lo mismo, parece que lo tienen capado, pero está hecho con la misma idea.

El proyecto se llama Electron (http://electron.atom.io/), anteriormente conocido como Atom Shell. He estado usándolo un poco para intentar hacer una app con ReactJS, pero aun no la tengo acabada como para ponerla de ejemplo. Pero si buscas un poco, tienes varios ejemplos para poder empezar como los Boilerplate’s:

https://github.com/szwacz/electron-boilerplate (básico)
– https://github.com/JimLiu/electron-boilerplate-react (para hacer una app con reactJS)

Una gran ventaja, es que puedes usar looooo que quieras para desarrollar tu app, cualquier framework o solución web del lado del cliente.

Y por no ser repetitivo, no voy a explicar lo que ya se comenta en la web a la par que los boilerplate que os he pasado anteriormente, y previamente ejecutando:

Si eres desarrollador web, es algo a mirarse, ya que para aquellas herramientas que nos ayudan a hacer productivos en nuestro trabajo, hay alguna que quizás nos interese tenerla como aplicación de escritorio, pues Electron es una solución notablemente aceptable para usar.

Yo sigo jugando con el, a ver si pronto puedo compartir un Boilerplate propio y alguna app util.

tags: , , , ,

Gestionando el localStorage desde AngularJS

AngularJS, Javascript, Web

Lo mas normal, que en nuestros proyectos, necesitemos tener de forma fácilmente accesible algunos datos como puede ser un token de seguridad o el nombre del usuario, roles, permisos, email, foto y demás datos que nos eviten peticiones innecesarias a la API para obtener una información estática.

De primeras, tenemos la posibilidad de usar el nativo localStorage.setItem(key, value)  y localStorage.getItem(key) . Pero según lo que se guarde, tenemos que hacer su conversión a string, y al hacer get su conversión a Objeto bla bla bla. Para evitarnos este trabajo, si queremos, nos lo podemos  picar nosotros mismos un plugin angular, ya que la lógica es bastante fácil, setters y getters con sus respectivas conversiones de tipos por detrás.

Pero ya hay una solución bastante sencilla y que podemos usar, como Angular Local Storage (https://github.com/grevory/angular-local-storage). Si veis el código es muy sencillo, pero ¿para que complicarnos rehaciendo la rueda? Lo he estado usando para unos proyectos y simplifica bastante el uso de localStorage a la par que te inicia un indice cuando comienza la aplicación.

Por lo que en vuestro local storage tendréis almacenada la información a partir del prefijo que hayáis definido y no tenéis que preocuparos de el en cada setter o getter. Otra cosa que comenta en su documentación, es que si no es soportado el localStorage en el navegador, automáticamente guarda la información en cookies.

No voy a poner ejemplos, ya que en su documentación de Github está muy bien explicado y no me gustaría ser redundante.

Angular Local Storage (https://github.com/grevory/angular-local-storage)

tags: , ,

WordPress: Solución para sites de calidad

Web, Wordpress

Wordpress Logo

A estas alturas muchos ya sabéis que es WordPress. Después de mucho años en el mercado, se ha convertido en una buena decisión a la hora de dar solución a sites corporativos. En mi opinión, es  una herramienta mucho mas eficaz que Joomla, principalmente por su multitud de plugins gracias a la gran comunidad.

En la anterior empresa en la que trabajé, había muchos proyectos en los cuales, la mejor opción era adaptar un CMS WordPress a las necesidades del cliente. Yo no era consciente del gran potencial que tenía hasta entonces. Pero adaptar, no quiere decir que sea fácil, tan solo te quita gran parte del desarrollo del panel de administración y la arquitectura (que ya es bastante), pero luego, hay que crear tus propias funciones que para según que cosas, ya hay tela que cortar.

Como por ejemplo, usar bien las funciones que nos facilitan, ya que aunque sea un software el cual utilizamos, debemos seguir siendo fieles a hacer un buen código.

Mucha gente es muy  crítica en cuanto a la arquitectura de WordPress se refiere, pero hay que valorar que nos permite una gran facilidad de  avance, antes que estar haciendo nuestro propio Core ( un blog, una web corporativa comercial ).

Wordpress mobile example

WordPress dispone de una gran comunidad a la par de un manual llamado CODEX. A la par, tenemos los Plugins,  donde encontramos solución casi para cualquier idea que se nos presente (WYSYWY, distribución de sites por idioma, servicios de caché, integración con redes sociales, …).

Cada plugin es muy fácil de instalar. De echo, tan solo basta con un copia y pega la carpeta del plugin dentro del mismo directorio de WordPress, ir al panel de control de gestión de los mismos y activarlo. Algunos tienen como parte adicional, ciertos parámetros que configurar, pero claro está, que un plugin nos ayuda a ciertas funcionalidades, pero no nos hacen todo solo.

Quizás podamos tener claro que WordPress nos ayuda a saltarnos ciertos desarrollos, pero lo que también hay que tener claro, es que no es una herramienta que sirva para todo. Digo esto, por que recuerdo una vez que me comentaros, que habían hecho una red social bajo WordPress, que tenía una media de 60-80 plugins y me pedían consejo de como portar esta solución a una plataforma desarrollada con Symfony2, pero sin perder los datos… (cerebro explotando en 3, 2, 1…). Esto, por muy optimizado que lo tengas, no es una solución factible.

No digo que no pueda llegar a ser un buen producto, pero creo que no solo dependemos demasiado del framework, si no también de la especial arquitectura de base de datos que presenta. Muchos objetivos, no tienen cabida, ya que, si no lo sabéis, todos los contenidos son un post y van a la misma tabla, se le añaden columnas según requisitos, por lo que termina siendo enorrrrrme.

Así que cuando se trate de proyectos en los cuales, en un futuro se requiera escalar, puedes empezar con WordPress ( como con prestashop para tiendas ) si quieres tener la idea en marcha, pero no te olvides de que mejor es desarrollar la idea bajo una arquitectura que se ajuste dinámicamente a las necesidades y no dependa solo de plugins.

 

tags:

Egghead.io, aprendamos AngularJS desde 0

Web

angularjsBueno, hace unos días que abrí el blog y ya toca empezar a darle fuelle a esto.

Este post no sé si puede ser muy de mucha ayuda, pero como creo que de lo que se trata un blog es intentar compartir lo que cada uno encuentra positivo en la red. pues aquí os dejo esto.

Últimamente, en charlas con compañeros del gremio, cuando hablamos de proyectos, salta el tema AngularJS, en base a un gran proyecto que desarrollamos en mi trabajo (focusonemotions.com), tuvimos que decantarnos por un framework JS y lo hicimos por AngularJS, por lo que tuvimos que aprender desde 0 como funcionaba este y dedicamos 1 semana de prueba y error para ver, de que mejor forma, desarrollábamos las funcionalidades para cumplir los requisitos planteados.

Y bueno, siempre que salta este tema, recomiendo encarecidamente Egghead.io, que mas que una web de tutoriales, para mi fue (y es) una biblia. Cuando, con mis compañeros empezamos ha hacer los tutoriales de este site, tan solo tenía unos 30 videos, practicamente era una web mas que te daba videos gratuitos para aprender AngularJS, eso si, cada video de media unos 3 a 5 minutos, pero con las palabras justas, explicaciones concisas y ejemplos muy claros.

Hoy día, sigue igual, con la misma idea, pero ahora puedes encontrar todo lo que puedas complementar con un proyecto en AngularJS, con mas de 100 vídeos, que algunos requieren suscripción de pago, pero creo, que haciendo los tutoriales gratuitos, probando y dándole un par de vueltas, aprendes mucho, aunque teniendo la confianza de estos, veo una buena inversión gastar un poco para acceder a los vídeos PRO y ver que mas nos puede contar.

tags: ,