JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing
Un
framework,entorno de trabajoomarco de trabajoes un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de problemática particular que sirve como referencia, para enfrentar y resolver nuevos problemas de índole similar. En el desarrollo de software, un entorno de trabajo es una estructura conceptual y tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de software, que puede servir de base para la organización y desarrollo de software. Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes de un proyecto. Representa una arquitectura de software que modela las relaciones generales de las entidades del dominio, y provee una estructura y una especial metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio. Wikipedia
Partes en juego
- Custom Elements Necesario para agregar nuevos elementos HTML en el DOM
- HTML Templates Las reglas sobre cómo crear un DOM único encapsulado con sintaxis HTML
- Shadow DOM Permiten importar código HTML y reutilizar sus componentes en otras webs
- HTML Imports Necesario para escribir código reutilizable y declarar cómo debe verse, aunque es problemático
Ejemplos en Acción
- carlosazaustre/webcomponents-example
- PLAIN ES6. Web components and Shadow DOM by Mikko Kämäräinen
- nuclei/material-input
Frameworks y librerías destacadas
- Hybrids 🖍 UI library for creating Web Components with simple and functional API
- LitElement A simple base class for creating fast, lightweight web components
- Polymer Our original Web Component library
- Skate.js a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint
- Slim.js Fast and robust micro-framework and tooling for web components
- Stencil.js A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team
Recursos
- Building Web Components with Vanilla JavaScript
- HTML Web Component using Plain JavaScript
- Web Fundamentals Guides | Custom Elements v1: Componentes web reutilizables
- Carlos Azaustre | Cómo crear un WebComponent de forma nativa
- MDN | Web components
- Web components tutorial
- Intro To Web Components: What They Are & How They Work
- Stencil.js: crear web components nunca fue tan fácil
- Web Components in 2018
- The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
- Communication between components (universal)
- Front-end microservices with Web Components
- The Wonderful World of Web Components
- Building a custom tag input with Skate.js
Librerías
- Virtual-dom A Virtual DOM and diffing algorithm
- Snabbdom A virtual DOM library with focus on simplicity, modularity, powerful features and performance
- Maquette Pure and simple virtual DOM library
Recursos
- Learn the differences between Shadow DOM and Virtual DOM
- Shadow DOM != Virtual DOM
- JSDayES 2018 - Rubén Valseca - "¿Cómo funciona un Virtual DOM?"
- How to write your own Virtual DOM
- ¿Qué es el Virtual DOM y como funciona?
- The difference between Virtual DOM and DOM
Librerías
- nx-js | observer-util Transparent reactivity with 100% language coverage. Made with ❤️ and ES6 Proxies.
- razilobind ES6 JS/HTML binding library for creating dynamic web applications through HTML attribute binding. Pulls in all required parts and configures as RaziloBind
- hamsa-es6 A dead simple, data-binding & observable model in EcmaScript 6
- GIST | WickyNilliams/bind.js Super simple one-way data-binding
Recursos
- Writing a JavaScript Framework - Data Binding with ES6 Proxies
- Frameworkless JavaScript Part 3: One-Way Data Binding
- ES6 in Action: How to Use Proxies
- JS & DOM data bindings in 2017
- Data-binding Revolutions with Object.observe()
- 📖 ExploringJS | Metaprogramming with proxies
- Metaprogramming in ES6: Part 3 - Proxies
- Mozilla Hacks | ES6 In Depth: Proxies
Herramientas
recursos
- Google: Crawling SPA (Single-Page Application) Isn't Easy But Can Work
- AngularJS SEO: Get your site indexed and to the top of the search results.
- SEO-friendly Single Page Applications (AngularJS, Prerender.io) by Battlefy Jaime Bueza
- Optimizing AngularJS Single-Page Applications for Googlebot Crawlers
- The Benefits of Server Side Rendering Over Client Side Rendering
- Headless Chrome: an answer to server-side rendering JS sites
- AngularJS - server-side rendering