Lemoncode blog


Artículos, ideas, desarrollos, notas y mucho más

Integrando React en aplicaciones antiguas

La temida migración

Llegó el momento... 10 años desarrollando con nuestra querida tecnología web (ASP.NET Web Forms, PHP, ASP.NET MVC, Ruby...) y han venido del departamento de ventas con las siguientes quejas del sitio web que hay montado:

  • Hay clientes que quieren hacer sus transacciones tirados en el sofá y no pueden, les hace falta tener un portátil a mano.
  • Hay clientes que no pueden completar los pedidos.
  • El 30% de nuestros clientes tiene móviles baratos y no le tira nuestra web.
  • Cuando un cliente está en el campo no puede trabajar con nuestro sitio porque la conexión es muy mala.

En el nuestro:

  • Tenemos una web pobre, no responsiva, que no se adapta a los gestos y demás que podemos hacer con una tablet o un móvil.
  • Tenemos tanta lógica en sphaguetti JavaScript que es ingobernable, de ahí que nuestra aplicación tenga petes aleatorios.
  • Que nuestra aplicación tiene mucha dependencia con el servidor para cosas que se podrían gestionar en cliente.
  • Que nuestra aplicación es muy pesada y consume ancho de banda, batería de móvil y recursos.

Lo peor... que esto pasa hasta con elecciones no tan antiguas ¿Te acuerdas de Angular 1? ¿ Tienes problemas de rendimiento?

Ahora llega el momento de la elección, seguramente tu aplicación web sea un mamotreto enorme y no puedes cerrar las cortinas un par de años y migrarla por completo.

¿No habría forma de ir haciendo migraciones parciales? ¡React al rescate!

React

React es una librería ligera para manejar interfaz de usuario que tiene un rendimiento muy bueno, además nos permite componentizar nuestras páginas.

Una de las principales ventajas de React con respecto a otras tecnologías web es que nos permite ir reemplazando partes de una página y coexistir con librerías antiguas.

Veamos cómo.

Aproximaciones

Todos los ejemplos que van a ser mostrados se encuentran visibles de forma pública en el repositorio de GitHub de Lemoncode: integrate-react-legacy-apps.

1 Comment

¿ Por qué React se ha convertido en un estándar de facto?

Hace unos años que empezó React su andadura, cuando arrancó, recuerdo haberle echado un mal vistazo a la tecnología y haberla desechado. 

Lo que no entendía era como un equipo brillante de desarrolladores, podía haber parido esto y cómo más y más empresas que su negocio depende de tener un buen Front-End (Facebook, Netflix, Uber, Airbnb...) la estaban adoptando como estándar.

Tocaba volver a jugar con React y darle una mirada sin prejuicios.

Comment

Master Front End Lemon ¿ Qué tiene esto de especial?

Cuando toca elegir un máster uno empieza a buscar aquí y allá... y a comparar ofertas, si has llegado hasta aquí es que has escuchado hablar del Máster Front End Online Lemoncode, igual hasta le has echado un ojo al temario y has pensado "anda tiene buena pinta", y acto seguido te has preguntado: 

¿De verdad este es un máster en el que voy a aprender, y poder aplicarlo al mundo laboral? 

Aquí lo mejor es apoyarnos en las opiniones de antiguos alumnos.

¿Los profesores saben de lo que hablan?

En este máster, los profesores somos además consultores, nos metemos en buenos "charcos" y sacamos proyectos reales de envergadura hacia delante.

Estoy trabajando, ¿Cómo puedo seguirlo?

Ponemos todas las facilidades para que puedas cursarlo: lo impartimos los viernes por la tarde (de 19:00 a 22:00) y sábados por la mañana (10:00 a 13:00), además las sesiones se graban con lo que si no puedes asistir a una o necesitas repasar, siempre las tendrás a mano.

Cuentas también con tutorías online en vivo con los profesores, quedáis ambos el día y la hora que mejor os convenga.

Un máster en remoto suena a "buscate la vida" ¿Esto es así?

En este máster las sesiones y las tutorías son en vivo y en directo, interactúas con el profesor vía audio, compartiendo escritorio o por el chat abierto de la sesión.

Contamos con un canal de Slack en el que alumnos y profesores estamos muy activos.

Por otro lado los desarrollos y prácticas las realizamos en GitHub siguiendo el sistema de branch per feature y con pull requests, con lo que analizamos tu código, te damos feedback y propuestas de mejora.

¿Está el máster al día? ¿ Cómo seleccionáis el contenido?

El mundo del Front End avanza muy rápido y tenemos muchas opciones abiertas ¿Cómo hemos estructurado el  temario?

  • Impartimos una base (layout + ES6 + TypeScript).
  • Cubrimos bundling (en esta damos suma importancia a Webpack 2).
  • A nivel de frameworks: Nos centramos en dos tecnologías que estén bien fuertes y en uso (en esta edición React + Redux y Angular 2). Cubrimos en menor medida otras más antiguas (por ejemplo jQuery) , y tecnologías prometeredoras (Vue.js).
  • Nos centramos en Unit Testing + TDD (tenemos un módulo sólo dedicado a esto).
  • También damos suma importancia a acceso a capas REST.
  • Para finalizar impartimos un módulo de cloud, abriendo a varias alternativas: Amazon, Azure, Heroku.

Antes de arrancar cada edición revisamos y actualizamos temario, ¿Qué tiene de nuevo esta segunda edición?

  • Aprovechando que dentro de poco lo tendremos disponible en todos los navegadores modernos, introducimos el elemento Grid de HTML 5 para maquetación.
  • Introducimos una sesión de inmersión a UX.
  • Nos centramos en Webpack 2.
  • Añadimos Vue.js a la cartera de frameworks.
  • Ampliamos el módulo de testing cubriendo casos tanto con React + Redux como Angular 2.
  • En el modulo de acceso a capas REST / Servidor incluimos este año WebSockets.

Mi perfil es... (desarrollador Back End, Front End, ...) ¿Aprovecharé el máster?

En la primera edición del máster pasaron diferentes perfiles, desarrolladores C#, Java, Full Stack, de Front End puros, diseñadores que pilotaban de programación..., ¿cómo aprovecharon el máster?

  • A los desarrolladores de Back End, le pasamos un material previo de estudio para que entraran en harina. Trabajando, consiguieron pillar comba y aprovecharlo bien.
  • A los desarrolladores Full Stack, les vino bien porque siempre tocan el Front End de "puntillas" y es bueno tomar un poco de tiempo y profundizar.
  • A los desarrolladores Front End, normalmente están especializados en un framework o tecnología. Viene bien abrir abanico y ver otras alternativas.
  • A los diseñadores que programan, les abre un nuevo abanico, mezclar su potencial de diseño gráfico y mejorar sus capacidades de desarrollo es algo muy positivo.

Si quieres ver cómo les fue de primera mano.

¿En qué mejora mi Curriculum?

Además del valor que te añade cursar el máster, a lo largo del mismo te ofrecemos la posibilidad de participar en proyectos open source que publicamos en GitHub, esto te permite llevar contigo ejemplos reales de tu trabajo y código.  Ejemplos de proyectos en los que han contribuido los alumnos de la primera edición:

Por otro lado cooperarás en un trabajo de fin de máster, es un proyecto open source que tenemos publicado en GitHub con licencia MIT, en el que podrás aprender a trabajar en equipo, con branch per features, pull requests, y TDD.

Más información de este proyecto:

https://github.com/MasterLemon2016/LeanMood/wiki

El fuente del mismo:

https://github.com/MasterLemon2016/LeanMood

Si tienes claro un side project en el que quieres trabajar también puedes proponerlo como trabajo fin de máster y te daremos soporte para completarlo.

¿Y si tengo más ganas de aprender? ¿ Qué pasa después del máster?

Si eres de los que vas a tope y te gusta aprender, mientras seas alumno del máster te ofrecemos una política de "buffet libre de formación", es decir puedes asistir a coste cero a otros cursos que te invitemos (Git, ALM, ...).

Una vez terminado el máster, estás invitado a la siguiente edición del máster Front End para que puedas seguir al día, por otro lado te ofrecemos también formar parte del equipo del proyecto open source LeanMood.

Como resumen...

Este es un máster en el que puedes aprender mucho, trabajando duro puedes dar un salto cualitativo a tu perfil profesional. Si te animas a apuntarte puedes contactar con nosotros en la siguiente dirección: formacion@lemoncode.net

 

Comment

Curso de React: Preguntas de los alumnos

El proximo 25 de Febrero arranca el curso de react: un curso online en vivo (también contarás con la grabación), en el que aprenderemos los conceptos básicos de esta tecnología basándonos en el desarrollo de una aplicación desde cero.

Para poder dar la mayor utilidad posible a este curso les estamos pidiendo a los alumnos que se apuntan que nos comenten si tienen ya dudas, consultas, inquietudes, para poder cubrirlas en el curso o en futuros posts o webinar. La idea es que no se quede ninguna pregunta sin respuesta sea por un medio o por otro.

¿ Quieres añadir la tuya?

Escríbela en los comentarios del post o envianos un correo a formacion@lemoncode.net

Preguntas:

  • ¿Qué buenas prácticas podemos tomar en React?
  • ¿Cómo puedo estructurar mi proyecto para que sea mantenible y no se me vaya de las manos?
  • Se que Redux no entra en el temario del curso, pero ¿ Podríais comentar el concepto y que otros paquetes me hacen falta para poder trabajar bien con este patrón?
  • ¿ Cómo manejo el tema de la seguridad, sesión etc.. en React?
  • Si quiero utilizar React,  ¿ Tengo que empezar una aplicación de cero o puedo integrarlo en una aplicación antigua que este basada en por ejemplo JQuery?

 

 

Comment

Tú pregunta... no te cortes

A que esto te suena...

¡ Vaya este curso parece interesante! Pero... ¿ No me pasará como en otros en el que me apunto y al final no resuelven ciertas dudas e inquietudes antes de empezar la formación?

Esto es muy normal que ocurra, ya que un profesor lleva cierto temario preparado y cada uno tenemos nuestros problemas específicos.

Para evitar esto hemos decidido darle una vuelta de tuerca a los cursos que impartimos, antes de arrancarlos vamos a pediros que nos transmitáis dudas previas, consultas, ... lo que veáis interesante para vosotros sobre la tecnología que vamos a impartir.

Eso está muy bien ¿ Pero que vais a hacer? ¿ Os dará tiempo a contestar todas las preguntas en el curso? ¿ Y si son preguntas que no aplican al 100% al temario del curso? 

Aquí seguiremos la siguiente estrategia:

  • Las preguntas que podamos encajar dentro de la dinámica del curso irán en el mismo.
  • Las que no, sea por tiempo o temática, prepararemos respuestas que publicaremos en posts, o webinars o... lo que veamos adecuado para poder cubrirla. En algún caso si la respuesta es muy extensa, podemos darte orientaciones.

Tiene buena pinta, ¿ Cuando empieza esto y donde lanzo mis preguntas?

Vamos a arrancar esta iniciativa con el curso de React, tenemos publicado un post en el que puedes leer las preguntas que han planteado los alumnos, y en el que en la sección de comentarios puedes añadir las tuyas, o si lo prefieres nos las puedes enviar a formacion@lemoncode.net

¿ Qué te parece esta iniciativa?

 

Comment

Novedades Master Front End Lemoncode segunda edición

Una de las cosas más divertidas de montar un máster de desarrollo es el tenerlo siempre al día. La primera edición del máster arranco el 15 de Septiembre de 2016, y finalizo el 30 de Diciembre de 2016, en ese tiempo la tecnología ha evolucionado, y también hemos recibido un feedback muy valioso de los alumnos. Así que nos hemos arremangado y preparado una serie de mejoras y cambios para que el máster esté a la última.

En cuanto a materia:

  • En cuanto al módulo de Layout:
    • Hemos añadido una sesión adicional, y hablaremos también de como maquetar utilizando Grid.
    • Hemos añadido una sesión de inmersión a UX. Este área, seguramente genere material para un módulo propio en siguientes ediciones.
  • En cuanto a lenguajes:
    • Nos adaptamos a los nuevos cambios introducidos en TypeScript.
  • De bundling:
    • Hemos visto como Grunt y Gulp pierden fuelle (se cubrira un básico en la introducción), pero nos centramos en el que se está convirtiendo en estandar de factor Webpack 1.x y 2.x
  • Hablando de frameworks y librerías:
    • Añadimos al set de React / Redux las librerías Normalizr y Reselect.
    • Si bien en este máster nos centramos en Angular 2 y React, no nos podemos olvidar de los cientos de librerías nuevas que están saliendo, hemos elegido la que parece más atractiva para tener una sesión introductoria: vuejs. Seguiremos tomando el pulso en siguientes ediciones del máster y ampliando / actualizando temario en esta area.
  • En cuanto unit tests:
    • Además de los conceptos generales y las pruebas unitarias en el stack de React y Redux, añadimos una sesión de pruebas con Angular 2.
  • De acceso a datos:
    • Además de cubrir HTTP, REST y seguridad, haremos una introducción a websockets.

En cuanto a profesores:

Partiendo de la base de profesores con la que contamos, hemos ampliado con unos compañeros estupendos:

 

Carmel Hassan

Sesión de UX.

Después de cinco años dedicada a la industria IT sanitaria, trabaja como Senior UX Specialist en ITRS liderando el diseño para la UX de productos para la visualización de información y análisis de datos en tiempo real construidos sobre Valo.

 

Jesús Rodríguez

Sesiones de Webpack 2 y Testing Angular 2.

Desarrollador Front-End y escritor técnico. Ha aprendido muchas tecnologías a lo largo de su carrera y las ha ido documentando en diferentes blogs. Actualmente escribe la documentación oficial de Angular 2.

 

Daniel Sánchez

Sesión de VueJS

Desarrollador Lemoncoder, especializado en Front-End (React + AngularJS) con experiencia en diversos proyectos de gestión web (LOB). Amante de las nuevas tecnologías y siempre en estado de renovación continua.

 

Comment

Git, ramas, pull requests, eso no aplica en mi empresa

En los últimos años seguro que habéis escuchado hablar de: Git, rama por caso, pull requests, integración continua... Sobre estos términos comunes se han desarrollado los pilares de populares proyectos open source. 

Si esto es tan maravilloso ¿Por qué hay tanta reticencia en el mundo empresarial?

 

Comment

Front-End, un framework nuevo cada minuto

Hace unos años se consideraba lo que corría en un navegador web como algo “limitado”, si querías desarrollar algo más avanzado tenías que llevarte procesado a servidor o utilizar plugins de tipo Flash / Flex / Silverlight (guardemos un minuto de silencio por todos aquellos a los que nos “vendieron la moto” diciendo que esa era la tecnología definitiva)...

Comment

Master Lemoncode opiniones de los alumnos

David Moreno - Perfil Front-End

... No lo dudes: ¡Apúntate! Recomendable 100%."

 

Antonio Tobajas - Perfil desarrollador desktop

...'Si has perdido el paso y quieres ponerte al día, sigue leyendo...', hace un resumen fantástico de lo que te dan. No lo dudes y apúntate."

 

Bernardo Rumbado - Perfil desarrollador backend

... "lo bueno de este máster es que independientemente de tu nivel en desarrollo Front-End puedes sacar todo lo que desees, desde una primera aproximación hasta llegar a un manejo profundo, sólo depende de tus ganas de aprender"

 

 

Flexbox a base de ejemplos

¿Que vamos a ver?

"En éste artículo, introduciremos una aproximación distinta a la hora de maquetar, que nos va a permitir, solventar los problemas citados anteriormente, de una manera más sencilla y limpia.  Y para tal fin utilizaremos Flexbox ..."

 

Desarrollador senior javascript

Un cliente nos ha pedido que le ayudemos a buscar un desarrollador senior javascript (ES5 / ES6)  para incorporar en plantilla.

Lo que piden como requisito:

  • Que tengas conocimientos sólidos de ECMASCRIPT 5 y 6.
  • Que conozcas: Revealing Module Pattern, Closure, manejo de espacio de nombres...
  • Que tengas experiencia armando entornos para pruebas unitarias e implementándolas (jasmine, karma, mocha chai, sinon...).
  • Que tengas buen conocimiento de maquetación, CSS y SASS.
  • Que estes familiarizado con el concepto de promesas y consumir capas REST.
  • Que tengas buen conocimiento de programación funcional y orientada a objetos.
  • Que te guste trabajar con revisiones de código y en equipo.
  • Que tengas buen nivel de inglés a nivel conversacíon (el español se valora, pero es opcional).

El trabajo es en Málaga (no se permite remoto), y las condiciones son bastante buenas (buen salario, horario flexible, e integrarte en un equipo profesional: integración continua, tdd, pull requests, ...).

Si estás interasado puedes contactar con nosotros y te contamos más detalle (si nos adjuntas tu CV en inglés mejor que mejor), nuestro correo: formacion@lemoncode.net

 

Share

 

Desarrollador Senior Angular 1.x

Un cliente nos ha pedido que le ayudemos a buscar un desarrollador senior con Angular 1.x para incorporar en plantilla.

Lo que piden como requisito:

  • Que tengas muy buen conocimiento de Angular 1.x: controladores, componentes, directivas, filtros, ui-router, ....
  • Que tengas experiencia armando entornos para pruebas unitarias e implementándolas (jasmine, karma, mocha chai, sinon...).
  • Que tengas buen conocimiento de javascript (ES5 y ES6).
  • Que entiendas CSS y SASS (no hace falta que seas un super maquetador, pero si defenderte con hojas de estilo).
  • Que estes familiarizado con el concepto de promesas y consumir capas REST.
  • Que te guste trabajar con revisiones de código y en equipo.
  • Que tengas buen nivel de inglés a nivel conversacíon (el español se valora, pero es opcional).

El trabajo es en Málaga (no se permite remoto), y las condiciones son bastante buenas (buen salario, horario flexible, e integrarte en un equipo profesional: integración continua, tdd, pull requests, ...).

 

Si estás interasado puedes contactar con nosotros y te contamos más detalle (si nos adjuntas tu CV en inglés mejor que mejor), nuestro correo: formacion@lemoncode.net

Plugins de Atom que no te puedes perder

Atom es un editor ligero con un ecosistema de plugins enorme, tan grande que se hace complicado elegir los más útiles y más estables.

El otro día lo presentamos en el Máster Front-End Lemoncode como uno de los editores que vamos a usar (Atom y Visual Studio Code), en cuanto lo comentamos uno de los alumnos rápidamente creó en Slack un canal sobre plugins y todos empezaron a recomendar y comentar los que veían más útiles, quedó una lista tan interesante que pensamos que sería muy buena idea compartirla en un post.

Aquí tenéis la lista de plugins elegidos...

Super Curso: Application Lifecycle Management con Visual Studio

En junio arrancamos con la publicación de webinars gratuitos, y ya llevamos 4, en los que hemos cubierto temas tales como Docker, React, Git, Integración continua… Estamos muy contentos con vuestra acogida, y nos anima a planificar un otoño calentito con más webinars (el 8 de septiembre React Native vs Xamarin, y pronto publicaremos el tema a tratar en octubre).

Muchos asistentes nos han pedido profundizar más en los temas que se tratan en las sesiones. La mayoría de vosotros sois desarrolladores individuales a los que os apasiona esta profesión, y tenéis muchas ganas de aprender. Hemos estado dándole vueltas y creemos que hemos encontrado una fórmula que puede ser interesante:

  • Convocatorias de cursos online en vivo.
  • Con los mejores docentes.
  • 3 sesiones de 2 horas.
  • En un horario que os venga bien (de 19:00 a 21:00 horas).
  • Proporcionándoos de la grabación del curso una vez finalizado.
  • Con un precio de solo 29 € por alumno.

Para la primera convocatoria tenemos nada más y nada menos que a Bruno Capuano (MVP Visual Studio, @elbruno), que impartirá el curso titulado “Application Lifecycle Management con Visual Studio” los días 27, 28 y 29 de septiembre. Para comprar tu entrada o ver más detalles acerca del mismo puedes pinchar en este enlace.

Typings 1.X y Unable to Find "react"

Hace poco que actualizamos a la versión 1.X de Typings y nos encontramos con una sorpresa, lo que antes funcionaba sin problemas:


typings install react --ambient --save

Nos da ahora un mensaje de error bien feo Unable to find "react" ("npm") in the registry

Después de buscar un poco encontramos varias pistas:

  • En este post nos explica que tenemos que indicar ahora el origen del paquete.
  • En el breaking changes de typings nos comentan cambios en los parametros de la línea de comandos...

Integración continua con Travis

Una de las ventajas de trabajar en un Proyecto web open source con nodejs es lo fácil que puedes montar integración continua. 

En nuestro caso necesitábamos un servidor de integración continua para nuestra librería de validaciones de formularios (lcformValidation), los pasos que hemos dado:

  • Partimos de que teníamos configurado karma para lanzar los tests (para el proyecto web utilizamos webpack como herramienta de bundling).

  • Hemos instalado Phantomjs (un browser sin interfaz de usuario) para que ejecute los tests travis.

  • Hemos configurado una entrada en el package.json “npm test”.

  • Nos hemos creado una cuenta en travis y seleccionado el proyecto lcFormValidation.

  • Hemos definido un fichero .yml indicando que es un proyecto node, y la llamada a npm test.

  • Para finalizar hemos añadido el ”badge” en nuestro proyecto que muestra que la build ha tenido éxito.

Configurando tsconfig en Atom y VS Code

Una de las cosas más apasionantes en el mundo del Front-end es lo rápido que está evolucionando, hace unos meses estábamos usando bower y tags “script” en el html de nuestros sitios web y ahora nos encontramos utilizando “imports” y dejando que una herramienta de bundling nos lo resuelva todo.

Otro tema apasionante es el abanico de herramientas que tenemos disponibles, de utilizar Eclipse o Visual Studio, pasamos a tener una cantidad de opciones muy interesantes: Sublime, Atom, Webstorm, Visual Studio Code…

Ahora viene la parte negativa ¿Cómo narices haces que todo esto funcione bien en los diferentes editores?

Por nuestra parte nos hemos esforzado en que nuestros proyectos publicados se abran correctamente con Atom y Visual Studio Code (nos comentan que con Webstorm también va la cosa bien). En este post vamos a resumir los “tortazos” que nos hemos dado y las soluciones que hemos aplicado, espero que os sea de utilidad...

Desarrollador SQL (Ms Sql Server)

Nos han pedido ayuda para buscar un desarrollador senior SQL, que pilote bien de Microsoft SQL Server, lo que piden:

  • Bueno nivel de T-SQL.
  • Haber trabajado con base de datos grandes.
  • Buen conocimiento optimizando / tuneando bases de datos.
  • Si estás también a la última con MS SQL Server 2012 / 2014, mejor que mejor.
  • Buen nivel de inglés (nivel conversación, la entrevista será en inglés).

El puesto de trabajo es en Málaga, las condiciones son muy buenas.

Si lo ves interesante envíanos tu CV a: formacion@lemoncode.net