< fRONTEND moderno />

< 2019 />

<Introducción al desarrollo web />

<Enfoque actual del desarrollo web />

<Era JavaScript del desarrollo web >

          <???? />

          <React JS />

          <Proyectos destacados />

          <Frameworks JS modernos />

<Era JavaScript del desarrollo web />

<Era posmoderna del desarrollo web />

< Introducción al desarrollo web />

< Standard languages />

< BAsic tools />

< HTML5 apis />

< Geolocation />

< Canvas />

< Drag and Drop />

< Web Workers />

api => {

             console.log("Application Program Interface");

                  // Interfaz de Programación de Aplicaciones

}

< Canvas />

< DRAG and drop />

< WEB workers />

< geolocation />

< Compatibilidad />

<script src="modernizr-custom.js"></script>

 

  if (Modernizr.geolocation) {

  //código a ejecutar si la expresión en 'true' porque ha        detectado la funcionalidad en el navegador

  }

  else

  {

  //acción o mensaje si no está soportada la                            geolocalización

  }

 

< css frameworks />

< Javascript />

  • Ajax
  • Manipulación del DOM
  • Emascript 6+

< enfoque actual del DEsarrollo WEb />

< cAPas de una aplicación web />

< Standard languages />

< ERa javascript del desarrollo web />

< ????? />

27  de Mayo 2009

2008

</ framework's war />

< React />

  • Librería
  • By Facebook
  • Aprendizaje ( 4 a 5 semanas)
  • ES 6
  • JSX
  • FLUX
  • DOM Virtual

< angular />

  • Framework
  • By Google
  • Aprendizaje (4 a 8 semanas)
  • Typescript
  • Templates
  • MVC
  • DOM Regular

< DOM / Virtual DOM />

DOM

Virtual DOM

Update

DOM => {

    console.log("Document Object Model");

//Modelo de Objetos del Documento

}

< JSX />

JSX => {

console.log("JavaScript XML");

}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

< WEb PACK />

< FLUX (Redux) />

Patrón para el manejo de información

< INSTALAción />

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

< react frameworks />

< proyectos destacados />

< ERa postmoderna del desarrollo web />

< https://sketch2code.azurewebsites.net/ />

< Links />

Copy of Introducción al Frontend Moderno

By rusiby Chura

Copy of Introducción al Frontend Moderno

El desarrollo frontend moderno ha cambiado gracias a nuevas herramientas y lenguajes que han evolucionado y mejorado la forma en que desplegamos y creamos aplicaciones web. Entender el funcionamiento, la evolución e historia que nos han llevado al punto que vivimos hoy, no solo es fundamental sino necesario para cualquier desarrollador de esta era.

  • 413