JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Lista de Frameworks y librerías
- Los tres grandes:
- 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
- The Super-Brief History of JavaScript Frameworks For Those Somewhat Interested
- The Ultimate Guide to JavaScript Frameworks
- The Brutal Lifecycle of JavaScript Frameworks
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
- TypeScript in 5 minutes
- Quick Start!
- Docs
- PlayGround
- 7 bad excuses for not using TypeScript
- Why I’m NOT a TypeScript Fan
- Revisiting ‘Why I’m not a TypeScript fan’ one year later…
- TypeScript - Learn the basics 📖
- How (and why) you should use Typescript with Node and Express
- tutorialspoint | TypeScript
- How to make your life easier using functional programming in TypeScript
- TypeScript CheatSheet
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
// @flow
function concat(a: string, b: string) {
return a + b;
}
concat("A", "B"); // Works!
concat(1, 2); // Error!
// @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
- Web oficial
- writing better javascript with flow
- Flow en Github
- @flowtype en Twitter
- Getting Started
- Documentación
- Comparing Flow with TypeScript
- Flow cheatsheet
Arquitectura Cliente <-> Servidor
Peticiones desde Cliente
Pruebalo
Recursos
- GraphQL | Web Oficial
- GraphQL | Community Resources
- GraphQL | Code
- GraphQL | Learn: Introduction to GraphQL
- GraphQL | Learn: Queries and Mutations
- GraphQL | Learn: Schemas and Types
- GraphQL | Learn: Execution
- GraphQL | Learn: Best Practices
- GraphQL vs. REST | Apollo
- GraphQL vs Firebase | Prisma
- GraphQL: Everything You Need to Know
- Que es graphql
- Introducción a graphql
- REST APIs are REST-in-Peace APIs. Long Live GraphQL
- GraphQL And REST Differences Explained With Burgers
- How do I GraphQL? Top 3 things to know coming from REST
- Netflix | Our learnings from adopting GraphQL
- How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo
- GraphQL: A success story for PayPal Checkout
- GraphQL concepts I wish someone explained to me a year ago
- So what’s this GraphQL thing I keep hearing about?
- Going Serverless with NodeJS & GraphQL (Part I) — Setting up Serverless
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
Mecánica interna
En resumen
<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
- Vanilla Redux
- Goodbye Redux
- Redux from Twitter hype to production
- Carlos Azaustre | ¿Qué es Flux? Entendiendo su arquitectura
- Carlos Azaustre | Cómo funciona Redux. Conceptos básicos
- Gordux.js - The redux pattern in vanilla.js
- Redux without React — State Management in Vanilla JavaScript
- Tic-Tac-Toe.js: redux pattern in plain javascript
- ¿Qué es Redux y por qué debes conocerlo?
Comparativa Rápida en TodoMVC
Recursos
- The Best JS Frameworks for Front End
- Eric Elliott | Top JavaScript Libraries & Tech to Learn in 2018
- Top 23 Best Free JavaScript Frameworks for Web Developers 2018
- Best JavaScript Frameworks, Libraries and Tools to Use in 2019
- The State of JavaScript Frameworks, 2017
- Los mejores proyectos JavaScript del 2017
- The State of JavaScript 2018
- A Real-World Comparison of Front-End Frameworks with Benchmarks (2018 update)
- A Recap of Frontend Development in 2018
- The Cost Of JavaScript In 2018