Skip to content

Latest commit

 

History

History
391 lines (310 loc) · 19.4 KB

clase61.md

File metadata and controls

391 lines (310 loc) · 19.4 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 61

JS Frameworks: Un poco de historia

img

Lista de Frameworks y librerías

  • Los tres grandes:
    • React A declarative, efficient, and flexible JavaScript library for building user interfaces
    • Angular One framework. Mobile & desktop
    • Vue 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web
  • Historicamente significativos:
    • Angular.js Superheroic JavaScript MVW Framework
    • Backbone.js Give your JS App some Backbone with Models, Views, Collections, and Events
    • Ember.js A JavaScript framework for creating ambitious web applications
  • Notables:
    • Aurelia The aurelia framework brings together all the required core aurelia libraries into a ready-to-go application-building platform
    • Elm A delightful language for reliable webapps. Generate JavaScript with great performance and no runtime exceptions.
    • Inferno An extremely fast, React-like JavaScript library for building modern user interfaces
    • Polymer Our original Web Component library
    • Preact Fast 3kB React alternative with the same modern API. Components & Virtual DOM
    • ReasonML Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
    • Svelte The magical disappearing UI framework
    • Knockout Knockout makes it easier to create rich, responsive UIs with JavaScript
  • El resto:
    • AppRun AppRun is a 3K library for developing high-performance and reliable web applications using the elm inspired architecture, events and components
    • Binding.scala Reactive data-binding for Scala
    • Bobril Component oriented framework with Virtual dom (fast, stable, with tooling)
    • Choo 🚂🚋 - sturdy 4kb frontend framework
    • CxJS Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components
    • Cycle.js A functional and reactive JavaScript framework for predictable code
    • DIO A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc
    • Dojo Framework A Progressive Framework for Modern Web Apps
    • Domvm DOM ViewModel - A thin, fast, dependency-free vdom view layer
    • DoneJS An open source JavaScript framework that makes it easy to build high performance, real-time web and mobile applications
    • Etch Builds components using a simple and explicit API around virtual-dom
    • glimmer.js Fast and light-weight UI components for the web. With the attention to detail you've come to expect from Ember
    • Hyperapp 1 kB JavaScript micro-framework for building declarative web applications
    • Hyperdom A fast, feature rich and simple framework for building dynamic browser applications
    • hyperHTML A Fast & Light Virtual DOM Alternative
    • Ivi 🔥 Javascript (TypeScript) library for building web user interfaces
    • Maquette Pure and simple virtual DOM library
    • Marko A friendly (and fast!) UI library from eBay that makes building web apps fun
    • Mithril A Javascript Framework for Building Brilliant Applications
    • Moon 🌙 The minimal & fast UI library
    • Nerv A blazing fast React alternative, compatible with IE8 and React 16
    • NX A modular front-end framework - inspired by the server-side and Web Components
    • petit-dom Minimalist virtual dom library
    • Pux Build type-safe web applications with PureScript
    • Ractive Next-generation DOM manipulation
    • Stencil A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team
    • Y muchos más...

Recursos

JS Frameworks - Avances Tecnológicos: TypeScript

img

TypeScript es un lenguaje de programación libre y de código abierto desarrollado y mantenido por Microsoft. Es un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases. Anders Hejlsberg, diseñador de C# y creador de Delphi y Turbo Pascal, ha trabajado en el desarrollo de TypeScript. TypeScript puede ser usado para desarrollar aplicaciones JavaScript que se ejecutarán en el lado del cliente o del servidor (Node.js). Wikipedia

Tipado

function Greeter(greeting: string) {
    this.greeting = greeting;
}

Greeter.prototype.greet = function() {
    return "Hello, " + this.greeting;
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
};

document.body.appendChild(button);

Clases

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

document.body.appendChild(button);

Herencia

class Animal {
    constructor(public name: string) { }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

Recursos

JS Frameworks - Avances Tecnológicos: Flow

img

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale. Flow

Type Annotations

// @flow
function concat(a: string, b: string) {
  return a + b;
}

concat("A", "B"); // Works!
concat(1, 2); // Error!

Comment Types

// @flow

/*::
type MyAlias = {
  foo: number,
  bar: boolean,
  baz: string,
};
*/

function method(value /*: MyAlias */) /*: boolean */ {
  return value.bar;
}

method({ foo: 1, bar: true, baz: ["oops"] });

Recursos

JS Frameworks - Avances Tecnológicos: GraphQL

img

Arquitectura Cliente <-> Servidor

img

Peticiones desde Cliente

img

Pruebalo

Recursos

JS Frameworks - Avances Tecnológicos: Gestión de estados con Redux y similaress...

img

Redux es una biblioteca de código abierto de JavaScript para administrar el estado de la aplicación. Se usa más comúnmente con bibliotecas como React o Angular para crear interfaces de usuario. Similar a la arquitectura Flux de Facebook, fue creada por Dan Abramov y Andrew Clark. Wikipedia

Principios

  • Una sola fuente de la verdad. Todo el estado de tu aplicación esta contenido en un único store
  • El estado es de solo lectura. La única forma de modificar el estado es emitir una acción que indique que cambió
  • Los cambios se hacen mediante funciones puras. Para controlar como el store es modificado por las acciones se usan reducers puros

Funcionamiento

img

Mecánica interna

img

En resumen

img

Ejemplo rápido

<p>
    Counter: <span id="value">0</span> times
    <button id="increment">+</button>
    <button id="decrement">-</button>
    <button id="incrementIfOdd">Increment if odd</button>
    <button id="incrementAsync">Increment async</button>
</p>
// <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
// @see: https://gist.github.com/Arieg419/095a619371b9a62aaa7f474ac8d64740#file-index-html
const valueEl = document.getElementById('value')

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = Redux.createStore(counter)

function render() {
  valueEl.innerHTML = store.getState().toString()
}

render()
store.subscribe(render)

document.getElementById('increment')
  .addEventListener('click', function() {
    store.dispatch({
      type: 'INCREMENT'
    })
  })

document.getElementById('decrement')
  .addEventListener('click', function() {
    store.dispatch({
      type: 'DECREMENT'
    })
  })

document.getElementById('incrementIfOdd')
  .addEventListener('click', function() {
    if (store.getState() % 2 !== 0) {
      store.dispatch({
        type: 'INCREMENT'
      })
    }
  })

document.getElementById('incrementAsync')
  .addEventListener('click', function() {
    setTimeout(function() {
      store.dispatch({
        type: 'INCREMENT'
      })
    }, 1000)
  })

Similares

  • Flux Application Architecture for Building User Interfaces
  • Reflux A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux
  • Relay JavaScript framework for building data-driven React applications
  • mobx Simple, scalable state management
  • Gordux.js Gordon's Redux - Vanilla.js implementation of Redux pattern

Recursos

JS Frameworks: ¿Cual es mi camino?

img

Comparativa Rápida en TodoMVC

Recursos