TRUCO VS #1: Encuentra cualquier cosa instantáneamente en Visual Studio

22/08/2017
Artículo original

Toda la vida usando Visual Studio y, de repente, un día descubres un detalle que no conocías. Algo tan tonto como un atajo de teclado o incluso una característica nueva que desconocías y que a partir de ese momento te simplifica la vida. Es lo que tiene manejar herramientas tan grandes y complejas.

Hoy inicio una serie de artículos que iré desarrollando poco a poco en las próximas semanas con pequeños trucos del día a día que te ayudarán a sacarle más partido a tu entorno de desarrollo de trabajo: Visual Studio, independientemente del lenguaje de programación que utilices: C#, Visual Basic, F#, C++, Phyton, Node.js... VS es muy flexible y permite programar con todos estos lenguajes y muchos más.

Algunos de los trucos puede que las conozcas, pero otras seguro que no, pero todos (creo que) son interesantes.

¡Vamos allá!

Localizar e ir a cualquier cosa de manera inmediata

Si estás trabajando en un proyecto grande con muchos archivos y clases, conseguir de manera rápida llegar justo a lo que estabas buscando se convierte en una odisea.

Visual Studio posee una característica muy interesante desde hace muchísimos años, que en cada versión han ido puliendo. Se llama "Ir a..." (antiguamente "Navegar a...") y puedes ir a ella pulsando Ctrl+, (sí, lo segundo es una coma) o Ctrl+T.

Esto abrirá un diálogo de búsqueda instantánea flotante a la derecha del entorno, que puedes usar para encontrar un archivo, una clase, un método, una propiedad etc... de manera inmediata y con muchas posibilidades de filtro:

Funcionalidad "Ir a..." básica

Como puedes comprobar en la grabación anterior, a medida que escribes localiza de manera instantánea cualquier elemento de nuestro proyecto que incluya esas letras: archivos, clases, métodos, variables, rutas... y a medida que nos movemos por el cursor sobre ellas nos muestra su código en la pestaña de vista previa. No distingue entre mayúsculas y minúsculas, lo cual es la opción más cómoda para esta funcionalidad.

Al pulsar Enter nos deja directamente en el archivo que le corresponda al elemento seleccionado.

Esto ya por si solo es muy potente, y lo usarás a todas horas. Pero además tiene otras opciones interesantes.

Por ejemplo, si escribes varias letras mayúsculas seguidas las interpreta como que estás buscando las iniciales de cada palabra que forma el nombre de un miembro o de una clase, ya que en .NET se suele utilizar la convención Pascal Case para nombrar estos elementos. Por ejemplo:

Búsqueda Pascal Case

En este ejemplo escribo RTF y localiza los elementos del proyecto cuyo nombre contenga esas letras en ese orden en cualquier posición, localizando en este caso dos métodos cuyo nombre contiene "readTextFrom" y que están en mi código (en mi caso 2). Así nos ahorramos escribirlo todo o sabernos el nombre exacto.

Lo sé, lo tengo con la "r" minúscula y no debiera: es la consecuencia de pasarse gran parte del tiempo pensando en JavaScript, que usa Camel Case).

Como vemos esta opción, un tanto oculta, es de lo más potente.

Restricciones de búsqueda

Por ejemplo, puedes restringir la búsqueda a solo cierto tipo de elementos usando algunos prefijos especiales. Si escribes una interrogación final (?) en el cuadro de búsqueda te los mostrará:

Opciones de restricción de búsqueda

Así, por ejemplo, si quieres ir directamente a una determinada línea del archivo actual que tengas abierto, basta con que escribas dos puntos y ese número de línea para ir de inmediato en cuanto pulses Enter:

Ir a una linea concreta

Todas estas opciones de prefijo se representan en la parte superior por sendos botones:

Botones para restricciones

por lo que no tienes ni que acordarte ni mirarlo: pulsas el botón que te convenga y listo.

Puedes buscar solamente un número de línea, archivos, clases, miembros o símbolos.

También puedes restringir la búsqueda al archivo que tengas abierto en ese momento e incluir en la búsqueda elementos externos al proyecto, como por ejemplo archivos dentro de la carpeta de dependencias del proyecto. Para eso son los dos botones a la derecha, entre los anteriores y el del engranaje de las opciones.

Opciones

Pulsando el engranaje entraremos en las opciones, que son tan solo 3:

opciones de "Ir a"

Si marcamos la opción de ver los detalles, cuando realicemos la búsqueda, junto con el nombre del elemento localizado nos mostrará también alguna información adicional, debajo, como la ruta en la que está, o el número de línea, entre otras cosas y dependiendo del tipo de recurso encontrado:

Detalles en la búsqueda

Si no te gusta que te abra la vista previa a medida que pasas por encima de cada resultado, desmarca la primera opción.

En resumen

Si no conocías esta opción de Visual Studio, una vez la pruebes se volverá indispensable en tu trabajo diario. Aprende a sacarle partido, prueba sus detalles y opciones, y tu productividad aumentará mucho si trabajas con proyectos medianos o grandes.

¡Espero que te resulte útil!

9 bibliotecas de animaciones y efectos con CSS y JavaScript que deberías tener siempre a mano

17/08/2017
Artículo original

Hubo un tiempo, no muy lejano, en el que las webs eran bloques monolíticos donde el concepto de animación no iba mucho más allá de las diabólicas etiquetas <blink>, <marquee> o los gifs animados. Luego aparecieron tímidamente las primeras bibliotecas JavaScript y lo que llamábamos DHTML, por no hablar de las (entonces omnipresentes y más o menos) sofisticadas animaciones Flash. Hasta llegar a la actualidad, donde la robustez del DOM y de los estándares nos permite hacer auténticas virguerías con CSS y JavaScript simplemente con un par de líneas de código.

Hoy en día nos podemos encontrar webs que son magníficas coreografías de elementos animados. Pero, ¡cuidado!, es muy fácil pasarse de la raya y acabar convirtiendo tu web en un circo.

En este post te recopilamos 9 bibliotecas de efectos y animaciones que te aportarán muchas ideas, aparte de ahorrarte trabajo a la hora de animar tu web. Úsalas con mesura y sabiduría ?

1- VelocityJS

http://velocityjs.org/

Creada Por Julian Saphiro, más que una biblioteca es un versátil motor de animación repleto de efectos en JavaScript, incluyendo (pero no solo) fade, scroll, slide, easing, stop o finish.

Tiene la virtud de mezclar lo mejor de jQuery con lo mejor de las transiciones CSS, y, aunque utiliza una API compatible con la de jQuery, puede funcionar sin necesidad de este.

A su favor también podemos decir que, a pesar de su potencia, es muy rápida,  no obstante la puedes encontrar en sitios como Tumblr, MailChimp, WhatsApp o Scribd. Vamos que está probada y requeteprobada.

2- Bounce.js

http://bouncejs.com/

Bounce.js es una biblioteca JavaScript que, tal y como su propio nombre indica, te permite crear divertidas animaciones donde priman los "rebotes" y las deformaciones. Viene de serie con 10 animaciones prefabricadas, todas ellas muy bien resueltas y perfectamente fluidas.

Te resultará muy útil si buscas animaciones muy específicas como las que ofrece, ya que, en contrapartida, su archivo apenas ocupa 16 kB.

3- AnimeJS

http://animejs.com/

AnimeJS es muy ligera a pesar de ser extremadamente potente. Según sus propias palabras: puede trabajar con cualquier propiedad CSS, transformaciones CSS, SVG, atributos DOM u objetos JavaScript. Es una de las más novatas de la lista, pero echa un vistazo a su documentación, ya que es un espectáculo en sí misma.

4- CSShake

http://elrumordelaluz.github.io/csshake/

CSS Shake, como su propio nombre indica, sirve para agitar elementos. ¿Y por qué querríamos hacer esto? Bueno, digamos que se ha hecho bastante popular usarlo como respuesta a interacciones incorrectas del usuario. Este uso puede no ser muy accesible si no se acompaña de un mensaje de texto explicando el error, pero hay que reconocer que es visualmente muy espectacular. Para darse cuenta basta con revisar alguno de los ejemplos que esta biblioteca CSS nos ofrece.

 

5- AniJS

http://anijs.github.io/

Sin duda es la biblioteca más original de todas por su forma de implementación. Si cojeas en JavaScript, puede ser un buen apoyo a la hora de crear tus primeras animaciones combinadas de varios elementos a la vez. También te permite crear elementos de interfaz animados.

 

6- HoverCSS

http://ianlunn.github.io/Hover/

Una práctica y sencilla colección de efectos "Hover" de CSS3 listos para ser aplicados a enlaces, botones, logos, SVGs, imágenes y lo que se te ocurra. Muy fácil de aplicar a tus propios elementos, modificarlos o para usar simplemente como inspiración para tus propios efectos. Está disponible para ser usado tanto con CSS como con SASS y LESS.

7- Animate.css

https://daneden.github.io/animate.css/

Animate.css es una de las mejores opciones de esta lista, por no decir que es simplemente la mejor, no obstante tiene más de 4 años y sigue siendo de las bibliotecas más usadas. A su reducido tamaño (43kb) podemos añadir el amplio surtido de animaciones que te ofrece, pero que, además, son facilísimas de implementar: simplemente enlazas el archivo CSS y aplicas las clases oportunas al elemento a animar. Y si lo que quieres es dispararlos a partir de eventos, ya sabes, JavaScript o jQuery.

Si quieres tener a mano un abanico amplio de animaciones sin comprometer el rendimiento de tu web, no lo dudes, esta es la mejor elección.

 

8- Magic Animations

https://minimamente.com/example/magic_animations/

Una estupenda colección de efectos y animaciones, muchos de ellos prácticamente exclusivos de esta biblioteca. Vale la pena darle una oportunidad, o, como mínimo, echarle un vistazo a su galería de ejemplos por si encaja con tu proyecto.

 

9- DynCSS

http://www.vittoriozaccaria.net/dyn-css/

Un proyecto relativamente nuevo que tiene como peculiaridad que incluye animaciones de rotación con respecto al scroll. Esto lo hace muy interesante para usar junto con el efecto parallax, como bien se puede ver en el ejemplo de su web.

¿Qué te parecen? ¿Has encontrado ya tu biblioteca ideal?

10 consejos que deberías seguir para ser un gran programador

11/08/2017
Artículo original

Actualmente el perfil de "programador experto" es uno de los más demandados y a las empresas no siempre les resulta fácil cubrir estas vacantes.

Los cambios que se producen continuamente en la tecnología, hacen que tanto a principiantes como a veteranos les cueste mantener el dominio de una tecnología y al mismo tiempo progresar en su carrera profesional. Son muchas las personas que optan por aprender la tecnología o el lenguaje que en ese momento esté de moda para poder añadir otra "muesca" en su perfil de LinkedIn. Así nos encontramos con perfiles de 4 años de experiencia donde dicen dominar 4 lenguajes diferentes, 3 frameworks y 2 plataformas... produciendo un efecto contrario al deseado en el reclutador.

Para evitar este tipo de situaciones, aquí encontrarás 10 consejos para convertirte en un gran programador que te ayudarán a mejorar tus oportunidades de carrera.

1. Practica, practica y practica

Imagen ornamental - Persona agotada
Fotografía por Jessica Cross bajo la licencia CC BY 2.0

No hay excusas, no puedes ir a una entrevista de trabajo y decir que lo que más te gusta en el mundo es programar y sin embargo al mismo decir que ¡nunca has hecho nada relevante en programación! Invéntate tus propias aplicaciones, empieza mirando lo que hacen los demás, pero practica, practica y practica. Como indicaba Malcolm Gladwell en su libro titulado “Outliers. (Fueras de Serie, en castellano)”, para alcanzar la excelencia, se debe tener una acumulación de 10.000 horas de práctica.

Si estás empezando debes dedicarle muchas horas para mejorar tus habilidades de programación. No se trata sólo de aprender a usar algo y saber cómo funciona. Hay que profundizar más. Debes averiguar cómo y por qué se hace así. Comprender bien las cosas. Si te limitas a aprender cómo se usa, el día que te encuentres un problema complejo no sabrás resolverlo, pues te faltarán los conocimientos de base. Por eso nuestros cursos nunca dan simples recetas, sino que persiguen que de verdad comprendas lo que estudias, aunque sea más duro.

Puede utilizar GitHub para compartir públicamente los proyectos o ejercicios en los que estás trabajando (procura que sean útiles para los demás) y hacer que otros desarrolladores de la comunidad revisen tu código y te proporcionen comentarios sobre dónde puedes mejorar o cómo puedes abordar las cosas de manera diferente.

2. No te cases con nadie

Imagen ornamental - Mano con esposas y teclado

Todas las personas que programan por alguna extraña razón tienen un lenguaje favorito, con el que se sienten más cómodos trabajando. Sin embargo esto no quiere decir que deben estar con él “hasta que la muerte los separe”. De hecho, tal y como hemos comentado al inicio del artículo, la tecnología está en constante evolución, y se desarrollan nuevos lenguajes y plataformas constantemente. El lenguaje o la plataforma no deja de ser una herramienta más dentro de este trabajo, y como tal, es importante conocer y dominar de verdad más de uno, empleando el más adecuado en cada momento.

Con esto no estamos diciendo que debas conocer de forma exhaustiva tropecientos, pero solo uno es un poco limitante, ¿no crees?

3. Especialízate

Imagen ornamental - Bazar chino

Seguimos insistiendo en lo rápidos y profundos cambios que se producen en la tecnología. Es evidente que resulta imposible seguirles la pista a todos ellos, por eso te recomendamos que escojas un “pequeño” campo en el que centrarte: desarrollador front-end, desarrollador back-end (a estas alturas todos sabemos que el desarrollador full-stack "de verdad" es una quimera), de aplicaciones móviles, experto en administrador de bases de datos,…

Si estás buscando trabajo, un buen reclutador valorará más a un candidato experto en X que además es honesto al reconocer que desconoce Y, que a otro candidato que afirma conocer X, Y, Z, y no sé qué más pero no realmente no domina ninguno.

4. Tómate en serio la revisión de código

Revisar el código no es sólo una forma efectiva de detectar errores, sino que también es una gran manera de generar discusión y compartir conocimientos entre los miembros de un equipo.

A la hora de revisar el código puedes encontrarte en dos situaciones:

  • Recibes la crítica: en este caso debes tener una actitud receptiva, no debes tomártelo como una crítica negativa de tu trabajo. Debes aprovechar la experiencia del equipo del que formas parte para mejorar.
  • Revisas el código: hazlo de manera constructiva, como a ti te hubiera gustado que te lo dijeran. Aprovecha la oportunidad para difundir mejores prácticas, y por qué no, incluso puedes aprender algo nuevo del código que estás revisando.

5. Trabaja en otro proyecto en paralelo

Si tu trabajo te resulta la mayoría de las veces estresante, pensar en abordar otro proyecto en paralelo intimida a cualquiera, de hecho creerás que más que un consejo es una locura. Sin embargo, en contra de lo que pueda parecer, programar algo que realmente te guste es fundamental para tu desarrollo profesional. Cuando llevas a cabo un proyecto con el único objetivo de divertirte y aprender, te sorprende lo que eres capaz de hacer por ti mismo.

No hace falta inventar la rueda, puedes intentar aprender un nuevo lenguaje de programación, hacer una aplicación para pulir tus conocimientos y mejorar tus habilidades a la hora de llevar a cabo un desarrollo, también puedes contribuir un algún proyecto que ya esté en marcha. Por ejemplo en GitHub puedes encontrar cientos de pequeños y grandes proyectos en los que todas las contribuciones son bienvenidas.

6. Aporta tu granito a la comunidad

Únete al grupo de usuarios que tengas más cerca y participa en los eventos que se celebren de forma activa. Al principio, serás “un parásito” que intentará chupar el máximo conocimiento de los que más saben, pero con el tiempo tú también podrás compartir tu experiencia y conocimiento con los demás. ¡Quién sabe si te convertirás en un gurú de la programación!

También hay muchas comunidades online muy activas, las más conocidas son las comunidades de cada tecnología (por ejemplo, Java, React,…) y la comunidad por excelencia, Stack Overflow. Si no conoces Stack Overflow ya estás tardando; y si lo utilizas como la gran mayoría para resolver problemas de tu trabajo, pero no contribuyes, también estás tardando en aportar tu granito de arena.

Otra forma de ayudar a la comunidad es escribir de forma regular en un blog, puede ser en uno propio o puedes hacer contribuciones explicando cosas interesantes en blogs que ya están en funcionamiento.

Todo esto será un catalizador para avanzar tu carrera.

7. Pule tus cualidades no-técnicas

En general las personas que llevan a cabo trabajos técnicos cualificados acaban por descuidar otras cualidades, quizás más personales, que también afectan a su trabajo pero que normalmente no forman parte de las asignaturas impartidas en las escuelas técnicas a las que han asistido. Sin embargo, a la hora de escoger entre dos personas con parecido bagaje técnico lo único que las va a diferenciar son sus cualidades personales.

A medida que creces profesionalmente las habilidades interpersonales que exigidas van cambiando. Así por ejemplo, cuanta mayor sea tu responsabilidad, mejor debe ser tu capacidad de comunicación, valorándose especialmente la habilidad de hacer de puente entre programadores y personal no-técnico dado no hablan el mismo idioma.

8. Aprende el negocio

Tu trabajo técnico será mejor cuánto mejor conozcas el sector para el cual trabajas. Evidentemente no es lo mismo trabajar para el sector de los seguros, que para una empresa logística o para una plataforma de anuncios online.

Si además de los requisitos que debe cumplir tu aplicación conoces por ejemplo: los objetivos a largo plazo de tu empresa (parece una obviedad pero no todo el mundo sabe responder a esta pregunta), quiénes son tus clientes y qué esperan, quién es la competencia y cómo lo hace; esta información te ayudará a dar un nuevo enfoque a tu trabajo y quizás comprendas cómo tus aportaciones impactan  directamente sobre los resultados de la empresa.

9. Lee todo lo que caiga en tus manos...

O casi... pues todos sabemos que ciertas lecturas tan sólo matan neuronas, además de nuestros queridos árboles.

En este punto no nos vamos a extender, pues ya hemos dedicado todo un artículo a los libros que todo buen programador debería leer a lo largo de su vida.

10. Persevera, no te rindas

Puedes decirlo como quieras... ”el que algo quiere algo le cuesta...”, “no hay atajo sin trabajo”, “no se pescan truchas a bragas enjutas”, “no se puede hacer el carro sin pisar el barro”... la conclusión es la misma. ¿Necesitas más pistas?

Mapbox: el SDK de mapas abierto

10/08/2017
Artículo original

Washington

A la hora de integrar mapas en una aplicación móvil tenemos varias alternativas a nuestro alcance. Actualmente, las opciones más usadas, sobretodo en el desarrollo móvil, son la API de Google Maps, el SDK de Mapbox y el framework MapKit de Apple. Así que, si estás pensando en incluir mapas en tu aplicación, conviene hacer la mejor elección desde un principio.

Tras trabajar con todas estas opciones durante un tiempo, sin duda, considero que la mejor alternativa es tirar por la solución que nos ofrece Mapbox, por su simplicidad y flexibilidad. En este artículo vamos a explicar por qué Mapbox, además de ver cómo implementar algunas de las funcionalidades más potentes analizando un par de sencillos ejemplos.

¿Qué tiene Mapbox que no tienen los demás?

  • Todo es 100% personalizable. Desde cualquier color hasta mostrar/ocultar capas en el mapa. Hay una serie de estilos disponibles por defecto (Dark, Light, etc.) pero también tienes la posibilidad de diseñar/crear tus propios estilos por completo a través de la herramienta Mapbox Studio. Recientemente se lanzó Cartogram, que te genera un estilo automáticamente a partir de una imagen. Los estilos se integran en las aplicaciones añadiendo una sola línea de código. Como puedes imaginar, todo ello te permite generar mapas acordes con el branding de tu app y así ofrecer una mejor experiencia a tus usuarios.

  • Open source. Todo el código está abierto y basado en estándares abiertos. Mapbox dispone de más de 500 repositorios en Github. Esto te permite ver las funcionalidades que están en desarrollo, reportar cualquier tipo de problema que puedas tener o incluso contribuir mandando PRs. Mapbox es una plataforma hecha por desarrolladores para desarrolladores.

  • No importa para qué plataforma desarrolles porque hay SDKs disponibles para prácticamente todas. Entre las cuales están Android, iOS, Web, Qt, Unity y MacOS. Además, todas las funcionalidades están accesibles desde cada uno de ellos, ya que comparten una misma base.

  • In-app. Todo ocurre en tu app. No hay necesidad de tener que saltar a otra aplicación para nada (Mapbox no tiene apps para usuarios así que no tiene interés en competir con sus desarrolladores). Esto es especialmente útil si estás desarrollando una app de navegación, ya que, a diferencia de otros SDKs, puedes proveer una experiencia de navegación completa, sin perder a tus usuarios en ningún momento. Otro ejemplo es la posibilidad de guardar mapas offline sin salir de tu app.

  • El core está basado en mapas vectoriales implementados en C++, de forma que únicamente se mandan los datos necesarios al dispositivo y se interpretan en tiempo real, lo que se traduce en mapas muy rápidos y en visualizaciones mucho más ligeras.

  • Tanto el SDK de Android como el de iOS tienen una API similar a la de Google Maps y MapKit respectivamente. Por lo que todo el conocimiento que ya tuvieras te seguirá siendo útil y además migrar a Mapbox no te costará nada. Para hacer el cambio basta con hacer un Reemplazar todos a través del IDE y listo.

Talk is cheap. Show me the code

Para empezar a usar los servicios de Mapbox en tus aplicaciones tan sólo necesitas el típico token de acceso, que se consigue fácilmente tras darse de alta (usar Mapbox es gratis para tus primeros 50,000 usuarios activos). Hay guías rápidas de instalación, tanto para Android como para iOS. Tras completar la guía de la plataforma para la que estés desarrollando, ya estarás listo para empezar a programar.

A continuación, mostraremos cómo trabajar con dos de las funcionalidades más potentes del SDK, Data Driven Styling, Offline y 3D Extrusions. Los ejemplos están escritos en Java para Android. Aún así, como ya se ha mencionado antes, se pueden implementar en cualquiera de las otras plataformas disponibles (y Kotlin, claro).

En primer lugar, tenemos que configurar el token de acceso:


@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  // Mapbox access token is configured here. This needs to be called either in your application object or in the same activity which contains the mapview.
  // Line must go before the layout XML files loaded
  Mapbox.getInstance(this, getString(R.string.access_token));

  setContentView(R.layout.activity_style_zoom_dependent_fill_color);
  // ...
}


A continuación, ya podemos incluir un mapa de la siguiente forma:


private MapView mapView;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  Mapbox.getInstance(this, getString(R.string.access_token));
  // This contains the MapView in XML and needs to be called after the access token is configured.
  setContentView(R.layout.activity_style_zoom_dependent_fill_color);  
  
  mapView = (MapView) findViewById(R.id.mapView);
  mapView.onCreate(savedInstanceState);
  // ...
}

// Add required Lifecycle methods

activity_style_zoom_dependent_fill_color.xml:




  



Para garantizar un correcto manejo entre el ciclo de vida de OpenGL y el de Android, MapView define su propio ciclo de vida. Es por ello, que tenemos que sobreescribir los métodos del ciclo de vida de la Activity de la siguiente forma:


@Override
protected void onStart() {
  super.onStart();
  mapView.onStart();
}

Los métodos que tenemos que sobre escribir para que todo funcione correctamente son los siguientes (Mapbox provee implementación para todos ellos):



onCreate();
onStart();
onResume();
onPause();
onStop();
onSaveInstanceState();
onLowMemory();
onDestroy();


Por último, una vez declarado y asignado el MapView, hay que llamar a MapView#getMapAsync para crear un objeto MapboxMap, necesario para interactuar con el mapa (como ves, muy parecido a Google Maps API en Android):



@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  
  Mapbox.getInstance(this, getString(R.string.access_token));
  setContentView(R.layout.activity_style_zoom_dependent_fill_color);  
  
  mapView = (MapView) findViewById(R.id.mapView);
  mapView.onCreate(savedInstanceState);
 
  mapView.getMapAsync(new OnMapReadyCallback() {
  @Override
  public void onMapReady(MapboxMap mapboxMap) {
      // Interact with the map using mapboxMap here
      // Customize map with markers, polylines, etc.
  }
});

Data Driven Styling

  • Cambiar el color del agua en función del zoom:


mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(final MapboxMap mapboxMap) {
        FillLayer layer = mapboxMap.getLayerAs("water");
        if (layer == null) {
          return;
        }

        // Set a zoom function to update the color of the water
        layer.setProperties(fillColor(Function.zoom(exponential(
                Stop.stop(1f, fillColor(Color.GREEN)),
                Stop.stop(8.5f, fillColor(Color.BLUE)),
                Stop.stop(10f, fillColor(Color.RED)),
                Stop.stop(18f, fillColor(Color.YELLOW))
        ))));

        mapboxMap.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(40.73581, -73.99155), 12), 12000);
      }
});


Zoom Mapbox

Offline

  • Descargar un mapa offline:

mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(final MapboxMap mapboxMap) {
        String minZoom = map.getStyleUrl();
        double minZoom = map.getCameraPosition().zoom;
        double maxZoom = map.getMaxZoom();
        float pixelRatio = this.getResources().getDisplayMetrics().density;
        
        OfflineTilePyramidRegionDefinition definition = new OfflineTilePyramidRegionDefinition(styleURL, bounds, minZoom, maxZoom, pixelRatio);
        
        byte[] metadata = name.getBytes(CHARSET);
        
        offlineManager.createOfflineRegion(definition, metadata, new OfflineManager.CreateOfflineRegionCallback() {
          @Override
          public void onCreate(OfflineRegion offlineRegion) {
            offlineRegion.setDownloadState(OfflineRegion.STATE_ACTIVE);
          }

          @Override
          public void onError(String error) {
          }
        });
      }
});

3D Extrusions (Building plugin)

  • Usando mapbox-android-plugin-building, mostrar edificios en 3D es tan sencillo como:

mapView.getMapAsync(new OnMapReadyCallback() {
      @Override
      public void onMapReady(@NonNull final MapboxMap map) {
        BuildingPlugin buildingPlugin = new BuildingPlugin(mapView, mapboxMap);
        buildingPlugin.setVisibility(true);
      }
});

Building 50

Conclusión

Como has podido ver, Mapbox trae muchas funcionalidades que no nos ofrecen otros frameworks. Y esto tan solo es una pequeña muestra de lo que podemos hacer, ya que aparte del SDK de mapas, tenemos disponibles el Mapbox Services SDK (APIs de Geocoding, Map Matching, Directions, etc.), el Navigation SDK o los Mapbox Plugins.

Y tú, ¿conocías Mapbox? ¿Cúales son tus casos de uso al trabajar con mapas? Te animo a que le eches un vistazo a la última versión (Android/iOS) y nos digas qué te parece. En próximos artículos, hablaremos de cómo implementar otras funcionalides y trabajar con el resto de SDKs. Mientras tanto, si tienes cualquier duda, la sección de comentarios es tuya.

Documentación Mapbox Android SDK, Mapbox iOS SDK, Github

También te recomendamos

Amazon prepara una API para ofrecer mapas en las aplicaciones móviles de Android

La sandía es la fruta del verano: del watermelon dress a los cócteles más refrescantes

Publicada la versión 3.2 del SDK de Android

-
La noticia Mapbox: el SDK de mapas abierto fue publicada originalmente en Genbeta Dev por Pablo Guardiola .

Mantén tu proyecto de LaTeX limpio con este simple script

09/08/2017
Artículo original

Este artículo es una colaboración de Luis Liñan.

En esta entrada del blog utilizaremos un script simple que nos permitirá actualizar automáticamente nuestro documento pdf (a partir del fichero tex) y devolverlo al directorio de trabajo manteniendolo totalmente limpio.

Estructura del directorio

Siguiendo la estructura ya comentada en otro artículo del blog tendremos lo siguiente en nuestro directorio de trabajo:

.
|-- figures
|   |-- figure_1.pdf
|   `-- ...
|-- main.pdf
|-- main.tex
|-- ref.bib
|-- style.sty
`-- metafiles
    |-- main.aux
    |-- main.bbl
    |-- main.blg
    |-- main.fdb_latexmk
    |-- main.fls
    |-- main.lof
    |-- main.log
    |-- main.lot
    |-- main.out
    |-- main.pdf
    `-- main.toc

Ejecución del script

#!/bin/bash

# Help function
function help {
  echo "$0 <metafiles_directory>"
}

# Check correct execution of the script
if [ "$#" -ne 1 ]; then
  help
  exit 1
fi

# Create directory if it doesn't exist
if [ ! -d $1 ]; then
  mkdir $1
fi

# Copy the pdf from the temporal directory to the parent directory
function listen_pdf_update {
  pdf_substring='(.*[.]pdf.*)'
  while true; do
    change=$(inotifywait -e close_write $1)
    if [[ $change =~ $pdf_substring ]]; then
      cp $1/*.pdf ./
      echo "============> iNotify <============"
      echo "==>   Updated parent pdf file   <=="
      echo "==================================="
    fi
  done
}

# Set up listener for the target PDF file
listen_pdf_update $1 &

# Set up latex listener for changes in the directory
latexmk -shell-escape -silent -bibtex -view=pdf -xelatex -pdf -pvc -output-directory=$1

# Kill all processes created in this script
kill -9 -$$

Lo único que hay que hacer es ejecutar el script desde el directorio de trabajo pasando como argumento el directorio donde irán los outputs de la compilación:

$ /PATH/TO/SCRIPT/updatePdfLatex.sh <metafiles_directory>

Para más información sobre el script, vea el repositorio del script.

Referencias

Nueva y útil funcionalidad en Chrome 60: identificadores de terceras empresas

08/08/2017
Artículo original

En la actualidad es extremadamente raro encontrarse una página cuyo contenido esté albergado en su totalidad en el dominio original. Basta con que se use Google Analytics, un vídeo embebido de YouTube o cualquier otra utilidad de terceros (sin mencionar a las redes de anuncios), para que tengamos código HTML, CSS y JavaScript que puede salir de varios sitios de terceras empresas.

Hasta ahora las herramientas del desarrollador de Chrome permitían ordenar y filtrar por dominio, pero en Chrome 60 han incorporado una funcionalidad más interesante que consiste en mostrar de manera visual, con unos identificadores (badges en inglés) de dónde vienen ciertas peticiones y códigos, cuando provienen de servicios reconocidos por el navegador. Esto nos ayuda a identificar de manera más sencilla y visual el impacto real que puede tener incluir un servicio externo en la página, tanto en tiempos y "peso" de las descargas, como en rendimiento a la hora de renderizar la página y procesar JavaScript.

Por defecto la característica viene deactivada, por lo que debemos activarla ex-profeso. Para ello vete a las herramientas del desarrollador (F12 o CTRL+MAYS+I) y pulsa CTRL+SHFT+P para sacar el menú de comandos de Chrome. Una vez aparezca busca la funcionalidad escribiendo, por ejemplo "Badges", así:

Una vez activada, cuando hagas una traza de tráfico en la pestaña "Network", verás que muchas de las peticiones aparecen con una pequeña etiqueta de colores al lado, con iniciales:

Ahora podemos encontrar de un golpe de vista qué peticiones se realizan a terceros sitios webs, diferentes del que estamos analizando, identificando además a dónde nos conectamos (por cierto, en la captura anterior se puede ver la enorme cantidad de porquería que meten las páginas comerciales, como un periódico, que era el caso, y a dónde "se comunican").

Más interesante todavía es la posibilidad de ver en qué medida influye en la carga y renderizado de la página cada uno de estos terceros sitios identificados.

Para verlo en acción vamos a la pestaña "Performance" y comenzamos un análisis de carga pulsando CTRL+MAYS+E (para refrescar la página actual y analizar su rendimiento):

Al terminar de cargar la página, paramos el análisis y esperamos a que carguen los datos (dependiendo de la cantidad de tiempo y la complejidad del mismo puede llegar a tardar minutos en cargar, así que paciencia):

Para verlo por "producto" (es decir, por código de cada servidor involucrado) es necesario elegir agrupar por producto en el desplegable de cualquiera de las pestañas que analizan las llamadas. Deesta froam vemos en qué medida contribuye cada uno de estos sitios de terceros a la carga y renderizado de la página, ya que este análisis tiene en cuenta no solo la descarga del código sino el tiempo empelado en cada uno de los procesos que conducen a que se vea la página: renderizado del HTML, renderizado del CSS, ejecución de JavaScript... pudiendo ver exacgamente qué es lo que está ralentizando la página y así poder tomar decisiones:

Puedes encontrar una explicación más detallada de cómo usar el analizador de rendimiento en la documentación oficial de Google (en inglés).

En resumen

Esta es una de esas pequeñas contribuciones que en cada versión de Chrome convierten a sus herramientas del desarrollador en algo tan útil. En este caso es muy probable que pase inadvertida para la mayoría ya que viene desactivada y no hay un menú directo para ponerla en funcionamiento. En este breve post he repasado para qué sirve y cómo activarla. Espero que le puedas sacar partido.

Qué diferencias hay entre Entity Framework 6 "tradicional" y Entity Framework Core

08/08/2017
Artículo original

EF o Entity Framework es el ORM oficial de Microsoft, creado, desarrollado y mantenido por el gigante informático dentro de su plataforma .NET.

Un ORM (Object Relational Mapping) es un tipo de biblioteca de acceso a datos que intenta hacer que esta tarea sea más natural para los desarrolladores. Así, a la hora de acceder a datos, en lugar de utilizar otro lenguaje (generalmente SQL), un ORM permite que puedas utilizar los paradigmas habituales de la programación orientada a objetos: clases y objetos. En lugar de pensar en tablas y relaciones, piensas en objetos y propiedades.

De manera simplificada podemos decir que Entity Framework, como cualquier ORM, permite acceder a una base de datos utilizando clases que representan cada una de las entidades de ésta, pudiendo realizar cualquier operación sobre los datos simplemente llamando a métodos de estas clases.

EF 6.0 "clásico"

EF lleva casi una década entre nosotros. Su primera versión, la 1.0, se lanzó en verano de 2008, y ha ido evolucionando para adaptarse a las necesidades que iban surgiendo.

El versionamiento de EF siempre ha sido un tanto "especial", saltando en 2010 de la versión 1.0 a la 4.0 (para hacerla coincidir con .NET 4.0), y luego dando saltos "extraños" cada cierto tiempo: 4.1, 4.3.1, la 5.0 (que salió con .NET 4.5) hasta llegar a la 6.0, lanzada nada menos que en Octubre de 2013. Desde entonces solo han liberado pequeñas actualizaciones y la última ha sido la 6.1.3 que salió en marzo de 2015, o sea, hace ya más de dos años a la hora de escribir esto (Agosto de 2017). Al principio formaba parte de la propia plataforma .NET, pero cuando se hizo pública la versión 6.0 decidieron separarlo para poder lanzar actualizaciones independientes (las llamadas out-of-band updates) y se instala como un paquete NuGet (el más popular de todos, de hecho).

Por cierto que EF es una tecnología Open Source en la que todo el mundo puede ver su código fuente e incluso contribuir con mejoras y aladidos.

Todas estas versiones se pueden considerar Entity Framework "clásico", a partir de ahora EF6.

Lo bueno de EF 6 es que es una plataforma muy probada en mil batallas, muy estable y con las características y capacidades muy definidas. Si la aprendes sabes que vas a poder crear aplicaciones de acceso a datos sin problemas técnicos (si la usas bien, claro). Además, aunque la siguen manteniendo y corrigen bugs, no va a evolucionar mucho más, por lo que lo que aprendas va a ser muy estable.

Lo malo de EF6 es que solamente funciona en Windows y con la plataforma .NET "clásica". Eso no tiene por qué ser un problema en absoluto. Todo depende del tipo de aplicaciones que crees.

EF Core 1.0 - La nueva generación

Como seguramente sabes si no has estado incomunicado el último año, Microsoft lanzó en verano de 2016 una nueva versión de su plataforma de desarrollo .NET: .NET Core.

.NET Core es una versión más ligera y modular de .NET, con menos capacidades pero con mayor rendimiento, menor consumo de recursos y además multiplataforma: capaz de ejecutarse en Windows, Linux o Mac. Hoy por hoy se utiliza para crear aplicaciones Web multi-plataforma, así como utilidades de línea de comandos. No es una versión nueva de lo anterior, sino que es una nueva plataforma, creada desde cero en paralelo, por lo que va mucho más allá y no debe confundirse.

Si no tienes claro qué es .NET Core y qué diferencias tiene con .NET, mejor que leas este artículo antes de continuar.

Junto con .NET Core se han desarrollado del mismo modo algunas tecnologías relacionadas, entre ellas por supuesto una nueva Entity Framework. Tras dar muchos bandazos con el nombre, finalmente su primera versión se bautizó, con muy buen criterio, como Entity Framework Core 1.0 o simplemente EF Core.

Por cierto, EF Core también es de código abierto, claro.

Por lo tanto EF Core es una versión ligera, extensible y multi-plataforma de Entity Framework.

Al igual que .NET Core, EF Core no es una nueva versión sino que ha sido creada desde cero a partir de lo que Microsoft aprendió creando la EF "clásica". Por ello no se trata de una edición mejorada de EF 6 sino que es una nueva tecnología, que comparte muchos conceptos con la anterior, añade algunas novedades, pero también carece de muchas de las características que tenía la EF tradicional.

Por ejemplo, EF Core no tiene la capacidad de hacer carga diferida de datos (lazy loading), manejo de datos espaciales, mapeado de procedimientos almacenados o la posibilidad de hacer agrupamientos en el servidor, entre otras muchas cosas que sí tiene EF 6. Sin embargo posee características propias que no están en la versión tradicional como propiedades shadow, generación de claves en el lado cliente, consultas SQL generadas mucho más legibles o la posibilidad de lanzar instrucciones en batch.

En la documentación oficial tienes una completísima tabla que compara las características de EF 6 y EF Core 1.

Aunque EF Core se parece mucho externamente y en espíritu a EF 6, y si conoces la versión "clásica" enseguida te encontrarás cómodo con la versión "Core", no debes dejarte engañar: es un tipo diferente de animal y, el infierno está en los detalles, por lo que requiere su propio aprendizaje y sus buenas dosis de "pegarse" con ella para aprender a sacarle partido.

La propia Microsoft dice que EF Core es "fundamentalmente un producto v1", es decir, traduciendo: que puedes esperar que le falten cosas importantes y que tenga fallos tontos todavía. Eso se solucionará en gran parte cuando salga la versión 2.0, que se espera para finales de este año 2017.

Tampoco recomiendan migrar aplicaciones de EF 6 a EF Core, puesto que no hay una manera sencilla y directa de hacerlo. Si no te queda más remedio puedes intentarlo (¡buena suerte!) y aquí te dan algunas indicaciones y pistas.

¿Cuál debo aprender? ¿Cuál debo utilizar?

Bueno, lo ideal y recomendable sería que aprendieses ambas bibliotecas, empezando por EF 6 y luego pasando a EF Core. Dado que se parecen bastante "por fuera", sería la forma más natural de realizarlo.

Aprender ambas tiene sus ventajas ya que en la práctica te vas a encontrar con muchísimos proyectos (la mayoría) creados con EF 6. Pero a medida que .NET Core se adopte y sobre todo si vas a empezar nuevos proyectos, EF Core va a formar parte de tu día a día como desarrollador .NET en el medio plazo.

Si vas a crear aplicaciones para la plataforma universal de Windows (UWP, para Windows 10, Windows Mobile, XBox e incluso Hololens) o si son aplicaciones Web multi-plataforma con ASP.NET Core, no te quedará más remedio que utilizar EF Core, ya que éstas solo trabajan con .NET Core.

En resumen

  • EF 6 es la versión tradicional, estable y con todo tipo de funcionalidades del ORM de Microsoft, atado a Windows y soportado por Microsoft pero no desarrollado activamente.
  • EF Core es un nuevo ORM, basado en la filosofía del anterior, ligero, multi-plataforma y todavía un poco verde y falto de características, pero capaz de crear muchas aplicaciones, especialmente de tipo Web con ASP.NET Core. Además, es multi-plataforma.
  • EF 6 es indispensable aprenderla puesto que está en uso en miles y miles de aplicaciones en todo el mundo y te lo vas a encontrar quieras o no si trabajas con .NET.
  • Por otro lado EF Core es claramente el futuro de la tecnología a medio/largo plazo por lo que conviene aprenderla incluso aunque no vayamos a usarlo de manera inmediata.

FRIKADAS: El traje de batman real que rompe todos los records

04/08/2017
Artículo original

En las convenciones de comics que hay por todo el mundo se llega a ver de todo. Pero nada como lo de este "friki" irlandés llamado Julian Checkley que ha creado el mejor traje de batman real que existe, obteniendo de paso un record para el libro Guinness.

Su traje de Batman es tan realista que incluye 23 gadgets totalmente operativos:

  1. Respirador de capucha
  2. Micrófono de laringe para cambiar la voz
  3. Radio para comunicación bidireccional
  4. Bat-cámara
  5. Lámpara de visión infrarroja
  6. Pantallas de vídeo en los guantes
  7. Linterna integrada en los guantes
  8. Bat-Emisor de localización, para hacer seguimiento de objetivos
  9. Lanzador de bolas de fuego
  10. Lanzador de ganchos
  11. Lanzador neumático de dardos tranquilizantes
  12. Batarang plegable
  13. Bat-shurikens (estrellas ninja con forma de murciélago, 4)
  14. Kit de primeros auxilios
  15. Pack de baterías
  16. Apuntador con láser
  17. Pistola aturdidora estroboscópica
  18. Difusor de gases
  19. Bombas de humo (2)
  20. Granadas lanzadoras de bolitas de acero (2)
  21. Dispositivo anti-perros por ultrasonidos
  22. La bat-petaca (por si le entra sed o necesita un trago, suponemos)
  23. Proyector de Bat-señal

Julian trabaja en la industria de los efectos especiales. Eso explica muchas cosas. Aun así, el trabajo es increíble.

El traje, inspirado en el del video-juego "Batman: Arkham Origins", lo moldeó con poliuretano a partir de piezas que primero imprimió en 3D una a una, montándolas en una armadura interior que las sujeta, hecha a la medida exacta de su cuerpo. Le llevó incontables horas crear todo esto.

Con perdón: acojonante...

Puedes verlo en imagen real en funcionamiento en el vídeo oficial del libro Guinnes:

[youtube:otCDg8kmVs4]

El libro Guinnes de los Records lo ha incluído en su edición de 2017 con el título "La mayor cantidad de gadgets funcionales en un traje Cosplay". En ese enlace tienes más detalles.

Cómo instalar varias versiones de Node.js al mismo tiempo en Windows

02/08/2017
Artículo original

Si programas con Node.js, es posible que necesites probar tu aplicación con varias versiones de la plataforma. Por ejemplo, si estás desarrollando con la versión actual con soporte a largo plazo (LTS) pero quieres asegurarte de que va a funcionar con las versiones más modernas y menos estables. O justo al contrario: desarrollas con la versión más actual disponible pero quieres asegurarte de que funciona con la LTS. O quieres probarlo con una más antigua que sabes que vas a tener en algunos servidores... Las razones pueden ser múltiples.

Imagen ornamental - Versiones de Node.js

Una opción (muy mala) de conseguirlo sería estar instalando y desinstalando las diversas versiones según las vayas necesitando para probar. O bien usar varias máquinas virtuales con diferentes versiones instaladas. Pero cualquiera de estas opciones no es operativa en absoluto, ni muchas veces factible siquiera.

Para ayudarnos en este empeño surge una interesante herramienta llamada NVM (Node Version Manager).

Esta utilidad te permite instalar y gestionar diversas versiones de la plataforma Node.js en tu equipo y que coexistan sin entrar en conflicto. Su instalación es muy sencilla y se explica en la página principal del enlace anterior.

El problema es que esta herramienta está pensada para ser utilizada tan solo en sistemas basados en UNIX, como Linux o Mac OS X, por lo que excluye por completo a los programadores de Windows. Si estás en Windows no te servirá.

Cómo instalarlo en Windows

Te remito a las instrucciones de la página oficial anterior para instalarlo en Linux o Mac. Si estás en Windows tienes que recurrir a una herramienta adicional llamada nvm for Windows, creada por Corey Butler, autor también de otros estupendos y conocidos proyectos Open Source.

Lo primero que debes hacer es ir a la parte de "Releases" de la herramienta y descargar la última versión, y más en concreto si quieres la mayor facilidad, el ZIP que se llama nvm-setup.zip:

Archivos de NVM-Windows

Al descomprimirlo verás un ejecutable que es un instalador normal y corriente de los de darle a "Siguiente" todo el tiempo, así que la dificultad de instalación es nula.

Si ya tienes instalada alguna versión de Node, el instalador las detectará y te preguntará si las quieres incluir bajo su control, lo cual te recomiendo. Si no tienes instalado Node, en cuanto termine la instalación de NVM, lo podrás instalar ya usando la propia herramienta en lugar del paquete de instalación normal.

Como no se cansa de repetir Corey en la documentación de la herramienta, este proyecto no es NVM, sino una herramienta diferente. Ahora bien, es perfectamente compatible con la de Linux/Mac, por lo que a efectos prácticos te dará lo mismo.

OJO: dado que para instalarlo necesitas permisos de administrador y la herramienta se instala en el perfil móvil del usuario (en la carpeta "Appdata\Roaming" del perfil de éste, vamos), para poder utilizarlo tendrás que abrir la línea de comandos como administador o no reconocerá el comando cuando lo quieras usar. Si esto te supone un problema, entonces es mejor que descargues el paquete sin instalación y lo copies en alguna carpeta que esté en tu PATH, para que sea accesible siempre.

Ahora que lo tenemos instalado, vamos a ver cómo funciona.

Gestionando las versiones de Node.js en tu equipo

Podemos ver las versiones de Node instaladas en nuestro equipo escribiendo nvm list:

Lista de versiones de mi equipo

Se marca con un asterisco la versión que estás utilizando actualmente si llamas a algún comando de Node o ejecutas algún programa desde la línea de comandos.

Nota: en el NVM original para UNIX este parámetro es ls en lugar de list.

Puedes ver todas las versiones disponibles para descarga escribiendo:

nvm list available

Lista de versiones de Node.js disponibles

Si quieres instalar alguna versión concreta puedes usar el paráemtro install:

nvm install 8.2.0

o para instalar la más reciente disponible:

nvm install latest

Instalar una versión concreta de Node.js

Si no indicamos nada, se instala la arquitectura apropiada para nuestro sistema, es decir, 32 o 64 bits (normalmente esta última), pero podemos instalar una concreta indicándolo a continuación con un 32 o un 64, o incluso ambas a la vez si ponemos all.

Una vez instalada, podemos cambiar de una versión a otra simplemente con el parámetro use:

Cambio de versión de node

Como vemos, primero veo qué versiones tengo disponibles, viendo que la actualmente en uso es la 7.10.0 (la que tiene el asterisco). Lo compruebo mostrando la versión actual del ejecutable por pantalla. Cambio a la versión 8.2.1 (la última en el momento de escribir esto), lo cual se efectúa de manera inmediata, y si compruebo de nuevo la versión, veo que en efecto el cambio se ha producido. ¡Súper útil!

Puedo desinstalar una versión concreta usando el parámetro uninstall, por ejemplo:

nvm uninstall 8.2.0

Por defecto, todas las versiones de Node.js que se van descargando se almacenan en la carpeta nvm de tu perfil móvil, es decir, en la carpeta: C:\Users\<usuario>\AppData\Roaming\nvm. Puedes verlo escribiendo el comando:

nvm root

Si quieres cambiarlo para que se almacenen en otro sitio, puedes especificar la nueva ruta como parámetro de nvm root:

nvm root "F:\Nodejs\Versiones"

Un último detalle importante: los paquetes globales que instales con npm -g no se comparten entre versiones de node.js. Por ello, si cambias de versión y quieres usar un determinado paquete global, debes instalarlo de nuevo. Si solo es para usar paquetes locales, entonces no tienes problema.

¡Espero que te sea útil!

¿Tiene sentido Yarn ahora que tenemos npm 5?

02/08/2017
Artículo original

npm vs Yarn

npm es el gestor de paquetes de Node.js, y con el tiempo se ha convertido en la herramienta indispensable de casi todos los programadores, y desde luego de los desarrolladores web Front-End, pues ya hace mucho que dejó de ser coto exclusivo de los que trabajan con Node.js.

npm te permite gestionar dependencias de tus proyectos, tanto para desarrollo como para producción, y también se ha convertido en el task runner más utilizado, desplazando a herramientas como Grunt (casi desaparecido en combate) y Gulp (aunque este resiste mejor el embate).

Aún así no está exento de problemas, fundamentalmente dos: es lento, y el orden de instalación de las dependencias no es predecible. Estos no son realmente problemas importantes en proyectos pequeños, pero sí lo son cuando manejas proyectos de gran tamaño entre muchas personas.

Yarn al rescate

Por este motivo Facebook lanzó Yarn el año pasado: para solventar estos dos problemas con sus propios proyectos, algunos de los cuales son muy grandes. Esto hacía que el uso de npm ralentizara enormemente la puesta en marcha y además provocase algunos conflictos debido a la falta de predictibilidad a la hora de instalar paquetes.

La falta de predictibilidad es importante puesto que la estructura de archivos que hay en la carpeta donde se guardan los paquetes (node_modules) puede variar a medida que aparecen dependencias duplicadas y se añaden sobre las existentes, sobre todo si es el mismo paquete pero con diferentes versiones. Como npm instala las dependencias de forma "no determinista", es decir, que en cada instalación el orden de cada paquete y sus dependencias puede ser diferente, esto puede provocar que dos desarrolladores del mismo proyecto, haciendo un npm install sobre el mismo archivo package.json, obtengan dos carpetas node_modules diferentes. En ciertos casos esto puede provocar que un mismo código funcione en la máquina de un programador pero no en la de otro, y localizar el motivo es algo muy difícil en estos casos.

Yarn ofrecía varias ventajas sobre npm:

  • Eliminaba esa falta de predictibilidad, para lo cual generaba en la primera instalación un archivo yarn.lock que determinaba para el resto de los desarrolladores el orden apropiado de la instalación.
  • Es mucho más rápido a la hora de instalar los paquetes, incluso sin caché. Estamos hablando del orden de 2 a 3 veces más rápido en promedio. A veces más. Muy interesante y motivo por el cual muchos lo utilizamos.
  • Ofrece opciones por defecto más sensatas: por ejemplo, en npm si te olvidas de especificar la opción --save o --save-dev al instalar un paquete, éste se copia pero no queda guardado en modo alguno dentro de package.json. Por lo tanto la instalación no te vale de mucho, puesto que otros programadores de tu equipo no tienen forma de saber que ese paquete se ha instalado. Y tú puede que tardes mucho en darte cuenta de que te falta la referencia ya que la tienes instalada en local :-S Con Yarn esto no pasa. Cuando haces un yarn add nombre_paquete no te hace falta indicar que estás instalando ni que debes guardarlo: es el comportamiento por defecto, lo cual tiene todo el sentido del mundo.

A mi Yarn me enamoró inmediatamente. Al ser 100% compatible con npm pero con mejores características, utilizarlo es una decisión muy sencilla.

npm se ha puesto las pilas

Fíjate en que en la lista anterior, algunos de los elementos están en tiempo pasado. Esto es así porque Yarn supuso un revulsivo para el equipo de npm, puesto que les marcó el camino a seguir y, por eso, el pasado 25 de mayo lanzaron npm v5. Esta nueva versión sigue la estela marcada por Yarn para solucionar la mayor parte de estos problemas.

Determinismo

A partir de la versión 5 de npm, se ha añadido un archivo package-lock.json que hace la misma función que el de Yarn, es decir: conseguir instalaciones de paquetes "reproducibles". De este modo todos los programadores que se bajen el proyecto y ejecuten npm install para descargar los paquetes referenciados en package.json, obtendrán exactamente los mismos.

Ahora bien, la estrategia para conseguir el determinismo es diferente en ambas herramientas. En el caso de Yarn se necesitan tanto el archivo package.json como el yarn.lock para reproducir la instalación, mientras que en npm llega tan solo con el package-lock.json.

Los formatos de archivo son también diferentes, pues Yarn usa un archivo de texto plano y npm, como se deduce de la extensión, utiliza JSON estándar.

Nota: si te estás preguntando si los archivos de lock, tanto de Yarn como de npm, es necesario almacenarlos en los repositorios de código... la repuesta está implícita en lo que acabamos de explicar y es lógicamente un rotundo sí. Son necesarios para conseguir esta reproductibilidad a la hora de instalar los paquetes.

Otro punto importante a tener en cuenta es que Yarn reproduce la instalación de los paquetes si todos los programadores están usando exactamente la misma versión de Yarn. En el caso de npm, mientras sea posterior a la 5.0.0, da igual que no todos tengan la más actualizada y siempre lo reproducirá bien.

En este sentido, npm 5 ha superado a Yarn.

Puedes ver los detalles en un post que lanzó Facebook sobre este tema unos días después.

Ganador: npm

Velocidad

La versión 5 de npm ha acelerado mucho la descarga e instalación de paquetes, pero no rivaliza todavía con Yarn.

Para comprobarlo he hecho una prueba sencilla para instalar los siguientes paquetes:

  • babel-core
  • babel-loader
  • babel-plugin-syntax-dynamic-import
  • babel-preset-es2015
  • css-loader
  • extract-text-webpack-plugin
  • file-loader
  • jquery
  • purecss
  • rimraf
  • style-loader
  • uglify-js
  • url-loader
  • webpack
  • webpack-dev-server

que con sus dependencias suman 739 paquetes con un tamaño total de 40,9 MB. Vamos, una configuración bastante convencional de paquetes para trabajar con Webpack.

He instalado los paquetes desde cero (sin tener nada en caché y sin haber archivos de lock ni de Yarn ni de npm), para ver cuánto tardaban en instalarlos. Luego he repetido la prueba dejando ya la caché pero borrando los archivos de lock. Y finalmente con todo: caché y archivos de lock.

  npm 5.3.0 Yarn 0.27.5
Sin caché, desde cero 82.779s 38.62s
Con caché, sin arch. lock 78.094s 31.17s
Con caché, con arch. lock 53.402s 23.88s

 

Los resultados no son muy científicos porque los tiempos varían un poco de una ejecución a otra, y debería repetirlos varias veces, pero nos dan una idea grosso modo de las diferencias, en grandes números.

Pero, como podemos comprobar, Yarn sigue siendo bastante más rápido (más del doble) incluso con las mejoras de npm y su completa reescritura de la caché, gracias a la forma de procesar los paquetes que tiene Yarn, por fases y en paralelo.

Ganador: Yarn

Parámetros por defecto

Ahora npm instala los paquetes con la opción --save por defecto, es decir, que sin indicar nada nos lo guarda en package.json como una dependencia de la aplicación. Eso ya lo hacía Yarn antes y personalmente era una de las cosas que más me gustaba... Hoy en día con Webpack no es tan útil puesto que con esta herramienta casi todas tus dependencias son de tiempo de desarrollo, por lo que en ambos casos debes especificar --save-dev al instalar de todos modos. O, como me gusta más a mí y uso siempre, con la opción abreviada -D, que es más corta (y soy vago).

Ganador: empate

Cosas que tiene uno que no tiene el otro

Yarn tiene algunos comandos de los que no dispone npm, y que a mí personalmente me gustan mucho.

Por ejemplo, si ves las cientos de subcarpetas de tu carpeta nodemodules y quieres saber por qué exactamente uno de esos paquetes está ahí, en Yarn puedes escribir:

yarn why nombrePaquete

y te lo dirá inmediatamente:

Ejemplo de yarn why

Otro muy útil es:

yarn licenses generate-disclaimer > Licencias.txt

que genera de manera automática un texto con todas las licencias que estemos utilizando en nuestro proyecto.

y por fin:

yarn upgrade-interactive

que nos permite actualizar paquetes escogiendo qué queremos hacer con cada uno, no todos o uno por uno como ocurre en npm.

Ganador: yarn

Conclusiones

Como acabamos de ver npm ha pegado un salto muy importante en la dirección adecuada con el lanzamiento de su versión 5.x, con todas las mejoras que hemos visto. La mayoría se han hecho precisamente para responder a Yarn y tratar de resolver los problemas existentes sin que los usuarios tengan que recurrir a otra herramienta.

Aún así, en mi opinión, Yarn sigue siendo una estupenda opción. De hecho en la mayor parte de los proyectos no habrá demasiada diferencia entre usar uno u otro. No obstante, y dado que Yarn es más rápido y tiene algunos detalles de los que carece de momento npm, yo sigo usando Yarn, y me consta que muchos programadores de todo el mundo también. Otra cosa que personalmente me gusta más y me hace preferirlo, es que su salida por la consola es mucho más limpia, usando barras de progreso y no miles de nombres de archivos que pasan a toda velocidad.

Al final, ahora es casi una opción de gusto personal.

Eso sí, uses uno u otro no te olvides de actualizar npm a la última versión. Para ello, si estás en Windows, recuerda que la mejor manera de hacerlo si no quieres problemas es la siguiente.

¡Espero que te sea útil!

Página Siguiente