Editor war!

Javascript, Web

After to try some code text editors for my daily use, I decided to write a post about my opinion and conclusion. I have use Atom, Visual Code, Webstorm, Sublime text and Vim.

Atom, good design and a lot plugins

My experience with Atom was a little decompensated, because when I started to use it, I felt very happy, but little by little I can found some thing that my happiness was decreasing by following points:

  • When I began to develop in ES6, with the plugin for lint the syntax starting to print crashes by crashes without control to force close the editor.
  • When you need to open the node_modules folder, the editor is froze and you need to close it.
  • When you need to develop in several JS frameworks like AngularJS, ReactJS, it shuffle the syntax and shortcuts and you must to avoid that.
  • The Emmet plugin almost ever work fine. For work with Angular, React or Polymer, is imposible to type custom html tags.
  • You have not “Go to declaration” or “Go to method” if this method is not in the same file, otherwise is imposible, is better use shortcut to find text.

Is based in Html5 by Electron, for that, the time to load is very quickly. There are active community developing plugins and solutions for any case.

Price: Free / UI: excellent / Result: Uninstalled

Sublime Text, full custom design, a lot plugins

Sublime text was my first code text editor, when it came the famous version 2, I was super fan, and I had tried to convince to my friends to use Sublime instead of Webstorm. I used during 1 year about, but, for can be productive and avoid error in a job, the team always are use Webstorm, to can develop in PHP and JS to the same time and find the method, class or declaration quickly.

  • When you need to develop in several JS frameworks like AngularJS, ReactJS, it shuffle the syntax and shortcuts and you must to avoid that.
  • The Emmet plugin almost ever work fine. For work with Angular, React or Polymer, is imposible to type custom html tags.
  • You have not “Go to declaration” or “Go to method” if this method is not in the same file, otherwise is imposible, is better use shortcut to find text.

There are potencial community developing solutions. After two years finally it is in version 3.

Price: Free but unique optional purchase of 70$ / UI: 100% custom / I use some times

Webstorm, from Jetbrains empire, productivity and high qualities

I like webstorm, but the problem is the price, by subscription from 129€ by year. But I thinking to buy, because if you think about benefits, is a good investment. You have a good lint for a lot frameworks like Angular, Polymer, React and it has not problem with merge between them. Some times is a little slow when load a project, but worth it.

I have not complaints for webstorm, I considere that is a great editor with a lot features, I think that the only problem is that is not multi-language, the features for PHP (for example) you have not it, but if you profile is Frontend or FullStack with nodeJS, is a good choose.

VIM, the geek editor for heroes

VIm!!, the great geek editor, for some people is the best code editor of the world, and it is true, but the problem is the learning curve. Vim has a lot and awesome plugins, shortcuts, configurations and integrations as do you want, but the problem to learn to good level to feel productive is a little difficult.

Right now, for some mini project where only use small scripts, I use it, and more o less I have good control and I feel good develop with that, but when I need to work quickly in frontend… the things get complicated.

But there are devs that is awesome developing with vim. They are more productive that with any editor.

Price: Free / UI: 100% custom / I use it sometimes

Visual Studio code, simple, without plugins but with a interesting future

I hate microsoft products, for that, I use . But I must admit, from 2 years ago, they are doing good thing, like Visual Studio Code (Code from now). Although the increase is slow, Code is interesting and is more confortable for work than Atom or others.

Currently I develop AngularJS, Node, React … and I feel good and productive. It has recognition of files, you can access to methods, var, class or imports by click comfortably.

The design is goo, very quickly to load a project and, opposite of Atom, you can access to node_modules without problems. Also, it has some usability problems in tree navigator, but worth it.

Price: Free / UI: Excellent / I use it always

 

In conclusion, you can use any editor for work, but is important that you can feel comfortable and not lost time with configuration for each time to use.

PD: Now I will try to write in english with the one objetive to learn and improve. Sorry for mistakes!.

tags: , , , ,

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: , , , ,

Vetando a Jquery en tu proyecto AngularJS

AngularJS, Consejo, Javascript

Cualquier get started de un proyecto AngularJS, normalmente viene adjunta la librería JQuery para facilitarnos la vida a la hora de actuar en diferentes elementos, pero en el equipo donde trabajo, nos tomamos como reto/determinación, evitar usar JQuery y así no ensuciar el código mezclando librerías.

¿Y el por qué de esta decisión?, pues al fin y al cabo, Jquery para lo que normalmente lo usamos en Angular, es para trabajar de forma mas cómoda haciendo referencia a selectores html, pero si lo pensamos un poco, es algo que podemos evitar, y por ello, ahorrarnos la carga de otra librería extra innecesaria en nuestra aplicación.

Por ejemplo, para hacer click en un elemento en la web, ya tenemos el “ng-click” y declaramos un método en el “scope”, no es necesario irnos a Jquery y usar el “$(‘selector’).on(‘click’, function() {});”, podemos usar:

y esto lo podemos llamar en el html como  <div ng-click="methodName()">Content to click</div>

Una alternativa propia de Javascript, para trabajar con selectores, es el  document.querySelector(".example");  que con JQuery es lo mismo que hacer: $(".example");. Y sí, escribimos unos cuantos caracteres mas, pero nos seguimos ahorrando miles de lineas de una librería extra.

Una web, por pocos KB que nos ahorremos, siempre es positivo. Si es cierto que hoy día con las buena velocidades de conexión y métodos de caché, optimizamos mucho las cargas de archivos, pero aun así, si podemos seguir rascando KB, pues mejorará nuestro tiempo de carga y performance en la aplicación.

Considero una mala práctica/costumbre muchos ejemplos que hay por internet, que a la hora de hacer un mínimo autocomplete, utilizan Angular + JQuery, cosa que pensando 5 minutos mas, usando directivas, consigues el mismo resultado. Quizás un aporte positivo, que con JQuery no genera watchers en la aplicación, pero hay muchos métodos y buenas prácticas para llevar a cabo el mismo resultado y con una performance optima.

La última versión de Angular que hay disponible cuando estoy escribiendo este post, son unos 126KB minificados, y si ahora en un proyecto, añadimos JQuery son 84KB minificados, es decir, mas del 60% extra  en una librería que la usamos puntualmente para ciertas cosas.

Espero que esto sirva como un punto de vista diferente a plantear las cosas 😉

tags: , , ,

Componente AngularJS – Ejecutando callback al dejar de actuar en un elemento

AngularJS, Javascript

Lo que quiero compartir hoy, es una pequeña directiva que actúa como componente, para el control de una acción, después de actuar en un elemento.

En un ejemplo práctico, la idea sería de tener el mismo control que con el evento “onblur” que podemos disponer en un input cualquiera, pero en este caso, se me dio la necesidad de tener el comportamiento “onblur” en un elemento cualquiera.

Por ejemplo, imaginemos que tenemos un texto en un DIV, y queremos que al hacer click en ese texto, se convierta en un select (en este caso un dropdown de bootstrap). Ahora, tenemos 2 posibles acciones: Hacer click en el Dropdown, desplegar opciones y elegir una o cancelar la operación y que todo vuelva al estado por defecto y aparezca el texto inicial. Pues este segundo caso, no sabía como controlar el ejecutar un método, al hacer click fuera del elemento el cual quería resetear. Después de darle vueltas y no encontrar una solución a esto, decidí hacer una directiva que se encargara de ello, inspirándome en este artículo: http://vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/.

La idea es facil. Capturamos con un Listener de Javascript los eventos “click” de body y del elemento que contenga nuestro atributo “outClick”. Por lo que ahora podemos decir: Cuando yo hago click en el elemento donde tengo la directiva, es que estoy usando ese elemento, pero si hago click en cualquier punto de la web “body”, quiero que se resetee a su estado inicial.

A continuación os dejo un Fiddle con el ejemplo en marcha.

tags: , , , , ,

Request HTTP con Volley (Android)

Sin categoría

Siempre que he hecho algo con Android, para hacer peticiones HTTP, me creaba mi propia clase que gestionaba los diferentes Asynctask que tenía creado para cada caso. Esto también no lo hacia por masoquismo, mas bien por aprender desde abajo como hacer este tipo de tareas.

Pues en el siguiente que he empezado me parecía un poco tanto volver a depender todo de Asynctask, y como siempre intento meter algo nuevo para aprender, me decanté por Volley.

Volley es una librería de la mano del gigante Google, que te permite crear peticiones HTTP de forma muy fácil.  A continuación un ejemplo:

Fácil no?, pues ya puedes olvidarte de estar trabajando con engorrosos Asynctask. Y te explicaría todo como funciona y te daría diferentes ejemplos, pero creo que sería repetir lo que ya está escrito, por lo que a continuación te daré una serie de referencias de donde he podido aprender.

http://www.hermosaprogramacion.com/2015/02/android-volley-peticiones-http/ : Un excelente artículo escrito hace muy poco donde aprendí todo y si tengo alguna consulta, acudo a él.
http://www.androidhive.info/2014/05/android-working-with-volley-library-1/ : Este es otro sensacional blog de Android, donde también hay un buen artículo sobre volley. Este con 1 año de antigüedad pero es igualmente válido.
https://developer.android.com/training/volley/simple.html : Y como no, el punto de referencia oficial

tags: