Recursos frescos para diseñadores y desarrolladores web (enero de 2018)

El nuevo año 2018 está aquí. Si observamos el progreso en el desarrollo web hace cinco años, es totalmente diferente de lo que tenemos hoy. Hoy hay novedades Métodos, herramientas e incluso un nuevo paradigma. Eso cambia la forma en que construimos sitios web hoy en día, y VirtualDOM es uno de ellos..

DOM (Document Object Model) es un Modelo de árbol que define cómo se estructura un sitio web.. Seleccionar, atravesar y manipular el DOM puede ser una operación muy costosa y puede obstaculizar el rendimiento de representación de su sitio.

Sin embargo, en esta publicación no discutiremos cómo funciona VirtualDOM, en cambio, junto con las otras herramientas, analizaremos Bibliotecas que te permiten implementar VirtualDOM. inmediatamente. Vamos a verlos.

MaquetteJS

Un Implementación de VirtualDOM que le permite crear una interfaz de usuario fluida que se mantiene actualizada con los datos que la rodean. Es un JavaScript puro y sin ser controlado biblioteca por lo tanto, es posible Úselo junto con un lenguaje sintético como CoffeeScript, TypeScript y JSX.. Una gran biblioteca alternativa a React.js; MaquetteJS es mucho más pequeña en tamaño (solo 3kb) comparativamente.

ReDOM

Esta es una de mis bibliotecas favoritas de VirtualDOM, ya que es fácil de usar simplemente con la sintaxis.. Con solo 2Kb, puede crear una página web de representación rápida o un componente HTML personalizado. La biblioteca consiste dos funciones primarias el, para crear o manipular un elemento, y montar para agregarlo a un elemento seleccionado. Puede cargarlo en el navegador y en el lado del servidor con NodeJS.

Reactivo js

Una plantilla Biblioteca de interfaz de usuario para construir aplicaciones web altamente interactivas. Construido originalmente para TheGuardian, ReactiveJS está diseñado para funcionar con navegadores y dispositivos móviles; Para que pueda confiar en su fiabilidad. ReactiveJS también viene con Muchas características necesarias para la aplicación web moderna de forma inmediata, tales como CSS con ámbito, componentes personalizados, SVG y animación.

RiotJS

RitoJS es una biblioteca agradable para principiantes y mucho más fácil de aprender para principiantes, ya que Permite definir un componente personalizado con elemento HTML. y los atributos HTML, mientras que las bibliotecas anteriores forzarán el uso de la sintaxis pura de JavaScript.

RiotJS es compatible con el entorno Node.js o en los navegadores, y podría ser un Gran alternativa a Vue.js dadas las similitudes..

HyperHTML

hiperHTML, como su nombre indica, Características de rendimiento al renderizar y manipular DOM. Puedes usarlo para crear un elemento personalizado y un componente web. Funciona tan fácil como jQuery en el que puede ser utilizado en el navegador por cargando el script desde el CDN y accediendo al hyperHTML. Sin necesidad de complicada estampación.

Mithril

Tan genial como suena, Mithril es un potente biblioteca de JavaScript. Aparte de VirutalDOM y Componentes, Mithril también está equipado con Enrutamiento y XHR con los cuales Puede crear una aplicación web de una sola página sin depender de ninguna otra biblioteca.. Benchmark muestra que supera a algunas bibliotecas populares como Vue.js, React.js y Angular.

SlimJS

SlimJS es una biblioteca de JavaScript para crear un componente web personalizado utilizando la API de componentes web nativa. Dado que está construido alrededor del componente nativo del navegador, SlimJS está equipado con un Relleno de polietileno lo que recorta la API en el navegador que aún no la admite. Es un gran marco si prefieres adoptar la forma nativa..

VSVG

Si bien tiene una sintaxis similar a HTML, SVG es otro tipo de bestia con sus propias peculiaridades. Esta biblioteca, como su nombre lo indica, Te permite crear y manipular SVG sobre la marcha.

EmotionSH

EmotionSH es Marco de CSS-in-JS que puede necesitar al crear un sitio web con VirtualDOM. Esto le permite entregar solo los bits de CSS necesarios en su sitio y puede actualizar dinámicamente el estilo sin ser convocado con el nombre y la especificidad de la clase, ya que el estilo se aplica solo al Componente al que se aplica.

Reactuar kit de inicio

Si ha estado siguiendo la web en los últimos años, encontrará React (casi) en todas partes. Esto es un 5 curso de video corto introduciendo a React. Si desea mantenerse al día con la industria, este podría ser el lugar adecuado para comenzar.

Elementos

Elements es una colección de Componentes de iOS para crear prototipo de aplicación iOS en Sketch.. Es creado por la gente por Sketch y se ha actualizado con iPhone X UI.

Modaal

Modaal es una biblioteca de JavaScript construida con accesibilidad en mente. Ha sido verificado por “WCAG 2.0 Nivel AA Soporte” que (creo) lo mas accesible “Modal” biblioteca de hoy. Sus ligero, compatible con jQuery, y puede usarse para imágenes, videos e incluso Instagram. Además, este breve curso de Google lo ayudará a comenzar con la accesibilidad web y por qué es importante.

WordPressify

Un paquete NPM que le permite obtener un entorno de desarrollo de WordPress en funcionamiento en minutos. Todo está configurado con Herramientas modernas como Gulp, LiveReload, PostCSS, Babel para que pueda concentrarse en desarrollar su proyecto en lugar de ajustar la configuración.

Lando

Lando también es una herramienta útil para activar un entorno de desarrollo de forma rápida y sencilla, al igual que para WordPressify que acabamos de mencionar anteriormente. Pero en lugar de Node.js, toma La ventaja de Docker es un contenedor ligero. Tecnología y ofrece más flexibilidad en términos de la pila que desea utilizar en su desarrollo..

Por ejemplo, puedes Especifique la versión de PHP, active XDebug e instale Composer.

WP-Docklines

WP-Docklines es un colección de imágenes que puede utilizar como línea de base para realizar una integración y entrega continuas para sus temas de WordPress y pluins en servicios como Bitbucket, CircleCI y Gitlab. Cada imagen se incluye con Herramientas comúnmente necesarias al desarrollar WordPress. como PHP Code Sniffer, PHPUnit y WP-CLI.

WP-Locker

WP-Locker es la configuración Docker Compose para hacer girar un entorno de desarrollo de WordPress en solo unos minutos. Es configurar con Apache, MySQL y phpMyAdmin y como amplía la imagen de WP-Docklines, también lleva a cabo las herramientas adicionales en la imagen de fábrica..

Simplemente tipo bin / start para dejarlo configurar el localhost e instalar complementos y temas que haya configurado en el archivo de configuración..

Docusaurus

Otra iniciativa de código abierto de Facebook., Docusaurus es una herramienta para crear un sitio web de documentación de su proyecto.. Construido con React y Markdown, puede redactar fácilmente la documentación, mantenerla e incluso crear un blog para su sitio, y publícalo en Github Pages.

VSCode Yo

Yeoman es un paquete de nodos que le permite iniciar un proyecto rápidamente al Selección de andamios prefabricados que se adapten a sus proyectos.. Si está utilizando Visual Studio Code, este complemento agilizará aún más el flujo de trabajo de inicio, ya que le permite corre el “yo” comando directamente desde la ventana de código de Visual Studio.

BluebirdJS

Una biblioteca de JavaScript que te permite usar Promesa, esperar, asíncrono hoy en todos los navegadores; dijo que incluso funciona en Netscape. Promesa es uno de los puntos más fuertes en las últimas especificaciones de JavaScript que lo haría haga su código más ágil, legible y fácil de mantener.

Más guapa

Prettier es una herramienta para Formato de su código para cumplir con el estándar de codificación del idioma. Reescribirá su código desde el control siguiendo la regla que le permite a usted y su equipo Más productivo en lugar de debatir sobre los estilos de escritura de código..