Category Archives: Javascript

My experience with Angular2 – (project and npm package)

Angular2, AngularJS, Javascript

I have about 2 year with Angular, with the first version, and I have a some repos with that about a little experiments for specifics ideas.

Here, my last repo: https://github.com/dimaslz/angular1.x-es6-webpack

And now, from some months ago, I have started to test with Angular2, the new tendency :). As you can know, now Angular2 is  oriented by components, like ReactJS. You can see that all files are like “directives”, and the control into this class is the controller. I will talk about only some differences and curiosities, I will not enter in deep how to work with Angular2.

Now, in your template, you and use the component like  <app></app>,<div app></div>,<div class="app"></div> in the html as previous version. Is not necessary add ng-app, ng-controller like Angular1.x.

The component that you want use in html (app for example), should be have this code:

Other thing that has changed, is the service, provider and factory not exist, only Service.

Ran out the doubts about if we should use service, provider or factory to do a service.

And other thing important for me, is that now is very easy to do a load lazy a component, you have not use libs like ocLazyLoad

Finally, Angular2 is very very easy to learn, the transition from Angular1.x it has been confortable, only you need to dedicate time to search and try thing to understand.

During my learning, I tried to do a component and also I published it for know how to do a library and install it in other project, and was born the following npm package:

And I did the component ng2-notify

This component is for show a notification in the UI when you do some action. You can see a demo in following url: http://dimaslz.github.io/ng2-notify/ ( https://github.com/dimaslz/ng2-notify ) Now, it is a 1.3.o version with Angular2 Beta 9.
Please!! if yo have some doubt, find some bug or you want a feature, let me know and open a Pull Request about.

 

So, it is all, if you want show a little project, I did (I am doing fix and improvements little by little) a little project http://todoapp.dimaslz.io/#/tasks/allhttps://github.com/dimaslz/todoApp-angular2 ) with gulp, nodeJS + MongoDB for API, SASS (compass).

Thanks for read me, I hope that my experience that helped you.

tags: , , , ,

Use uncss, rid of unnecessary css and tips

Javascript

Hi, other thing to share about my experience. This time, I talk about a plugin uncss to delete all css unused in own project.

For use that, you have a extension plugin for the commons task runners like gulp (gulp-uncss) and grunt (grunt-uncss). To write examples, I will use gulp!.

The code is simple, only are some lines into a task:

You can see that before to use uncss, if you use sass, you should to compile sass before to apply uncss. This plugin only find css tags into html files, but, there are a good practice (learned thanks to my friend Frank Parejo) that is add a naming “js-…) to all css that is executed or created into any javascript files, and into param “ignore” add all css with “js-…” to avoid to remove it. Get a look to uncss to learn more about.

This practice is very recommended. Always I use bootstrap to build my web projects, because is opensource, has a big support by twitter team and is very simple to learn, and you can down about 75% the weight of your css files when you are using a css framework like bootstrap/fundation.

For webpack, there are a famous solution called PurifyCss that also you can use with gulp and grunt

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