Presentación del webinar Iniciación a React para desarrollo de interfaces de usuario, en el que hemos profundizado en la librería React, que permite desarrollar interfaces de usuario y aplicaciones frontend basadas en JavaScript: características, herramientas disponibles, desarrollo de componentes, etc..
Vídeo íntegro del webinar disponible en https://www.youtube.com/user/Arsys
Más información en https://www.arsys.es/blog
Durante el lanzamiento de Facebook Developer Circle Santiago el pasado 28 de Junio de 2017 Daniel Ochoa realizó la charla sobre "React en la vida real", mostrándonos ejemplos de uso de React y parte su experiencia como desarrollador FullStack.
Puedes revisar la presentación desde aquí:
https://youtu.be/-R4qCpsJaos
No olvides unirte a nuestro grupo de Facebook Developer Circle Santiago y estar al tanto de todas nuestras actividades, artículos, tutoriales y videotutoriales.
Se parte de DevC Santiago!
https://www.facebook.com/groups/DevCSantiago/
En este webinar profundizamos en el framework Javascript Angular, una de las alternativas más poderosas para crear aplicaciones frontend modernas y progressive web apps.
Vistazo a React (la librería JavaScript para UI), la arquitectura Flux y React Native. Se cuentan los fundamentos del "One Direction Data Flow": Como pensar como React y Flux y una introducción a React Native: la versión de React que permite crear aplicaciones Android y iOS usando JavaScript
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
Slides de la charla "Carrera de fondo: la continuada lucha de AngularJS" realizada en el CodeMotion 2015 (Madrid). En ella se hace una introducción al desarrollo frontend, librerías más utilizadas y panorama actual.
Después de una breve introducción al funcionamiento de Backbone se realiza el desarrollo y la exposición de los conceptos del framework a nivel básico y medio.
Los ejemplos desarrollados para esta charla están alojados en github: https://github.com/semagarcia/angularjs-codemotion-2015
Cómo integrar AngularJS con una instalación de Drupal 7 a través de views y services o cómo agregarle a una web estándar las características de una aplicación HTML5.
Durante el lanzamiento de Facebook Developer Circle Santiago el pasado 28 de Junio de 2017 Daniel Ochoa realizó la charla sobre "React en la vida real", mostrándonos ejemplos de uso de React y parte su experiencia como desarrollador FullStack.
Puedes revisar la presentación desde aquí:
https://youtu.be/-R4qCpsJaos
No olvides unirte a nuestro grupo de Facebook Developer Circle Santiago y estar al tanto de todas nuestras actividades, artículos, tutoriales y videotutoriales.
Se parte de DevC Santiago!
https://www.facebook.com/groups/DevCSantiago/
En este webinar profundizamos en el framework Javascript Angular, una de las alternativas más poderosas para crear aplicaciones frontend modernas y progressive web apps.
Vistazo a React (la librería JavaScript para UI), la arquitectura Flux y React Native. Se cuentan los fundamentos del "One Direction Data Flow": Como pensar como React y Flux y una introducción a React Native: la versión de React que permite crear aplicaciones Android y iOS usando JavaScript
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
Slides de la charla "Carrera de fondo: la continuada lucha de AngularJS" realizada en el CodeMotion 2015 (Madrid). En ella se hace una introducción al desarrollo frontend, librerías más utilizadas y panorama actual.
Después de una breve introducción al funcionamiento de Backbone se realiza el desarrollo y la exposición de los conceptos del framework a nivel básico y medio.
Los ejemplos desarrollados para esta charla están alojados en github: https://github.com/semagarcia/angularjs-codemotion-2015
Cómo integrar AngularJS con una instalación de Drupal 7 a través de views y services o cómo agregarle a una web estándar las características de una aplicación HTML5.
Una introducción rápida al framework de JavaScript VueJS. Se da un ligero repaso a los frameworks de JavasCript, señalando las ventajas de VueJS, su funcionamiento interno y algunas de sus características.
Transparencias de la charla del 12 de Septiembre de 2017 en el Madrid International Lab para el Meetup VueJS Madrid.
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
ASP .NET MVC: Desarrollo web con el patrón MVCriojadotnet
prende a desarrollar aplicaciones web utilizando un framework gratuito.
Descubre todo lo que ofrece ASP .NET.
Conoce el patrón MVC (modelo-vista-controlador).
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.
Una introducción rápida al framework de JavaScript VueJS. Se da un ligero repaso a los frameworks de JavasCript, señalando las ventajas de VueJS, su funcionamiento interno y algunas de sus características.
Transparencias de la charla del 12 de Septiembre de 2017 en el Madrid International Lab para el Meetup VueJS Madrid.
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
ASP .NET MVC: Desarrollo web con el patrón MVCriojadotnet
prende a desarrollar aplicaciones web utilizando un framework gratuito.
Descubre todo lo que ofrece ASP .NET.
Conoce el patrón MVC (modelo-vista-controlador).
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.
Cross development - React para desarrolladores de asp.netAlberto Diaz Martin
En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.
A la hora de desarrollar aplicaciones con Xamarin.Forms el rendimiento suele ser un factor a tener en cuenta. En Xamarin.Forms, ¿sabes el ciclo de vida de un Layout?, ¿qué opciones de Layout son más óptimas?, ¿cómo afectan los Bindings al rendimiento y como tratarlos?, ¿qué debemos hacer para optimizar el trabajo con imágenes?, ¿ListView o CollectionView?, ¿y qué ocurre con Shell? A estas y otras preguntas habituales de rendimiento daremos solución, con datos y pruebas en forma de sencillos consejos a tener en cuenta a la hora de desarrollar una aplicación con Xamarin.Forms.
DotNet 2019 | Javier Suarez - Optimizando Apps con Xamarin FormsPlain Concepts
A la hora de desarrollar aplicaciones con Xamarin.Forms el rendimiento suele ser un factor a tener en cuenta. En Xamarin.Forms, ¿sabes el ciclo de vida de un Layout?, ¿qué opciones de Layout son más óptimas?, ¿cómo afectan los Bindings al rendimiento y como tratarlos?, ¿qué debemos hacer para optimizar el trabajo con imágenes?, ¿ListView o CollectionView?, ¿y qué ocurre con Shell? A estas y otras preguntas habituales de rendimiento daremos solución, con datos y pruebas en forma de sencillos consejos a tener en cuenta a la hora de desarrollar una aplicación con Xamarin.Forms.
Whitepaper Arsys - Cómo reducir el consumo energético de un data centerArsys
El consumo de electricidad es uno de los principales costes a vigilar en un datacenter. No hablamos tan solo del consumo de las instalaciones, sino también de la energía que hay que producir para mantener el equipamiento IT en las mejores condiciones. Por ejemplo, en cuestiones tan importantes como la climatización. En este whitepaper vamos a centrarnos en una serie de buenas prácticas para ser más eficientes y reducir la huella de carbono asociada a los centros de datos.
Whitepaper: La importancia del Delegado de Protección de Datos en una empresa...Arsys
El Delegado de Protección de datos se convierte en una
figura clave en una empresa de cierto tamaño. Explicamos todo acerca de él, su regulación en el RGPD, qué empresa está obligada a tener este Delegado o quién es el responsable de los datos.
Contenedores y protección de datos empresariales | WhitepaperArsys
Los contenedores hacen posible que la informática y el almacenamiento se estén trasladando rápidamente al Cloud. Y gracias a ellos, las empresas también pueden acelerar su estrategia de protección de datos.
Cómo elegir un software CRM adecuado a las necesidades de la organizaciónArsys
Elegir un CRM es vital para gestionar toda la información
de tus clientes y las oportunidades de venta.
Te contamos los criterios a tener en cuenta para seleccionar el CRM más adecuado a tu negocio y te ponemos algunos ejemplos.
Webinar - eCommerce: ¿Cómo puedo vender en Amazon?Arsys
En este curso explica cómo combinar y hacer convivir tu propio eCommerce con las posibilidades que nos ofrece Amazon. Y si todavía no tienes una Tienda Online, te damos más información en arsys.es/crear/tienda
Webinar- Requisitos legales para crear una Tienda OnlineArsys
En este webinar se han abordado 4 temas:
- El cumplimiento normativo en los negocios que venden por Internet
- Las obligaciones legales para los negocios digitales
- La regulación del marketing online
- Brechas de seguridad, infracciones y sanciones.
El Cloud Computing es la base sobre la que se construye la transformación digital. En esta guía veremos los principales conceptos asociados al Cloud, los tipos principales de infraestructura y los modelos de servicio más extendidos
Analiza Google Analytics, la mejor herramienta para disponer y analizar los datos básicos de lo que hacen nuestros clientes al entrar en nuestra web.
Más información en arsys.es
Las herramientas GRC ayudan a las organizaciones en actividades habitualmente desempeñadas por aquellos departamentos que realizan auditorías internas, especialmente el jurídico, de riesgos, IT, finanzas o RR.HH. En esta guía encontrarás aquellos pasos que permiten automatizar las herramientas GRC en una empresa.
Whitepaper-Cómo gestionar tu WordPress por medio de la línea de comandosdArsys
Gestionar un proyecto web con WordPress es muy sencillo si utilizas una herramienta wp-admin que es muy intuitiva y amigable. Sin embargo, existen otras formas de interactuar con WordPress que nos permiten realizar otro tipo de tareas que no se ven. Entre ellas destaca la línea de comandos a través de WP-CLI, que facilita el uso de comandos para acciones que no se pueden hacer en el administrador de WordPress. Tienes una lista de todos los comandos posibles aquí y toda la información para instalar y actualizar wp-cli en la web oficial del proyecto.
Whitepaper - Elige el servicio de hosting más indicado para tu proyectoArsys
¿Tienes dudas sobre qué alojamiento escoger? Te
contamos las características de cada tipo de alojamiento para que elijas el que más se ajuste a tu proyecto: Hosting, Cloud, Servidores dedicados, alojamiento compartido, Hosting WordPress...
Whitepaper - Como mejorar el Business Intelligence de la empresa a través de ...Arsys
Cómo mejora nuestro Business Intelligence cuando se plantea una migración de datos que lleva a un nivel de conocimiento mayor y más usable. La checklist completa del proceso de migración de un almacén de datos
2. Qué veremos hoy
▪ Índice
o Qué es React
o Iniciar un proyecto React
o Desarrollo de componentes con React
• Propiedades
• Eventos
o Gestión del estado
• Qué es el estado
• Componentes sin estado
• Componentes con estado
o Ciclo de vida de los componentes
4. Qué es React
Librería Javascript para el desarrollo de interfaces de usuario, de código libre, creada
por originalmente por Facebook.
- Basada en componentes
- Alto rendimiento
- Fácil de usar
React
5. Qué es React
Un componente es una pieza reutilizable que tiene encapsulada:
- Una presentación
- Una funcionalidad
Unos componentes se basan en otros y colaboran entre sí para resolver las necesidades
de las aplicaciones.
Componentes
https://unsplash.com/
6. Qué es React
React implementa un flujo de datos unidireccional.
- Al actualizarse el estado del componente se actualizan automáticamente las
vistas.
- Los datos pueden viajar desde los componentes padres hacia los hijos
Flujo de datos
7. Alto rendimiento
Virtual DOM
Una de las principales características de
React es su velocidad. En parte lo
consigue gracias al Virtual DOM.
Jerarquía DOM. Wikipedia
Virtual DOM (en memoria) DOM real (en el navegador)
12. Primeros pasos
Podemos cargar datos en los componentes por medio de sus propiedades.
Propiedades
Al implementar el componente puedo usar el valor de las propiedades seteadas
14. Primeros pasos
Podemos asociar manejadores de eventos de manera declarativa
Eventos
Los manejadores son métodos del propio componente
15. Primeros pasos
Podemos asociar manejadores de eventos de manera declarativa
Eventos
Los manejadores son métodos del propio componente
Generalmente tendrás que
bindear el contexto para poder
acceder a "this"!!
17. Gestión del estado
▪ Componentes con estado
o Mantienen datos propios y los pueden cambiar a lo largo del tiempo.
o Estos componentes son capaces de enviar sus datos para que otros componentes los puedan usar
▪ Componentes sin estado
o No almacenan ni transforman ningún dato en particular.
o A través de propiedades podemos cargarles datos, que pueden mostrar en su vista, pero no los modifican.
Statefull / Stateless
18. Gestión del estado
Un estilo diferente de crear componentes a partir de una sencilla función
Los valores de las propiedades se obtienen con el parámetro de la función
Stateless function components
23. Ciclo de vida
El ciclo de vida de los componentes permite enganchar comportamientos en los
distintos momentos de la vida de un componente.
Ciclo de vida