Recursos frescos para web designers e desenvolvedores (janeiro de 2018)

O novo ano de 2018 está aqui. Se olharmos para o progresso no desenvolvimento web há cinco anos, é totalmente diferente do que temos hoje. Hoje há novos métodos, ferramentas e até mesmo um novo paradigma que muda a forma como construímos sites hoje - e VirtualDOM é um deles.

DOM (Document Object Model) é um modelo de árvore que define como um site é estruturado. Selecionar, percorrer e manipular o DOM pode ser uma operação muito cara e pode dificultar o desempenho de renderização do seu site.

No entanto, neste post, não discutiremos como o VirtualDOM funciona, em vez disso, junto com as outras ferramentas, analisaremos bibliotecas que permitem implementar o VirtualDOM Imediatamente. Vamos dar uma olhada.

MaquetteJS

A implementação do VirtualDOM que permite criar uma interface de usuário fluida que se mantém atualizada com os dados ao seu redor. É um JavaScript puro e não cortada biblioteca, portanto, é possível use-o junto com uma linguagem sintética como CoffeeScript, TypeScript e JSX. Uma ótima biblioteca alternativa para o React.js; MaquetteJS é muito menor em tamanho 3kb) comparavelmente.

ReDOM

Esta é uma das minhas bibliotecas favoritas do VirtualDOM, já que é fácil de aprender apenas observando a sintaxe. Com apenas 2Kb, você pode criar uma página da Web de renderização rápida ou um componente HTML personalizado. A biblioteca consiste duas funções principais el, para criar ou manipular um elemento, e montar para adicioná-lo a um elemento selecionado. Você pode carregá-lo no navegador e no lado do servidor com o NodeJS.

ReactiveJS

Um modelo Biblioteca de interface do usuário para criar aplicativos da Web altamente interativos. Originalmente construído para TheGuardian, o ReactiveJS foi criado para funcionar em navegadores e dispositivos móveis; então você pode depender da sua confiabilidade. ReactiveJS também vem com muitos recursos necessários para aplicativos da Web modernos prontos para uso, como CSS Escopo, Componentes Personalizados, SVG e animação.

RiotJS

RitoJS é um trabalho agradável e muito mais fácil de aprender biblioteca para iniciantes, uma vez que permite definir um componente personalizado com elemento HTML e os atributos HTML enquanto as bibliotecas anteriores forçarão a usar a sintaxe pura do JavaScript.

O RiotJS é compatível com o ambiente Node.js ou com os navegadores e pode ser um ótima alternativa para o Vue.js dadas as similarties.

HyperHTML

hiperHTML, como o nome implica, apresenta desempenho ao renderizar e manipular DOM. Você pode usá-lo para criar um elemento personalizado e um componente da Web. Ele funciona tão fácil como jQuery em que ele pode ser usado no navegador por carregando o script do CDN e acessando o hyperHTML. Não precisa de complicado ferramental.

Mithril

Tão legal quanto parece, Mithril é um poderosa biblioteca JavaScript. Além do VirutalDOM e componentes, Mithril também é equipado com roteamento e XHR com o qual você pode criar aplicativos da Web de página única sem depender de nenhuma outra biblioteca. O benchmark mostra que ele supera algumas bibliotecas populares, como Vue.js, React.js e Angular.

SlimJS

SlimJS é uma biblioteca JavaScript para criar componente da Web personalizado usando a API de componente da Web nativa. Como ele é construído em torno do componente nativo do navegador, o SlimJS é equipado com Polyfill que ajusta a API no navegador que ainda não é compatível. É um ótimo framework se você preferir adotar o caminho nativo.

VSVG

Embora tenha uma sintaxe semelhante à HTML, o SVG é outro tipo de animal com suas próprias peculiaridades. Esta biblioteca, como o nome sugere, permitem que você crie e manipule o SVG em tempo real.

EmotionSH

EmotionSH é Estrutura CSS-in-JS que você pode precisar ao construir um site com o VirtualDOM. Isso permite que você entregue apenas pedaços de CSS necessários em seu site e você pode atualizar dinamicamente o estilo sem ser convocado com a nomenclatura e a especificidade da classe, pois o estilo é escopeado para apenas o Componente ao qual é aplicado.

Reagir Starter Kit

Se você está seguindo a Web nos últimos dois anos, você encontrará o React (quase) em todos os lugares. Isto é um 5 cursos em vídeo curto apresentando o React. Se você quiser acompanhar a indústria, esse pode ser o lugar certo para começar.

Elementos

Elements é uma coleção de Componentes do iOS para criar o protótipo do aplicativo iOS no Sketch. Ele é criado pelas pessoas pelo Sketch e atualizado com a interface do iPhone X.

Modaal

Modaal é uma biblioteca JavaScript construída com acessibilidade em mente. Tem sido verificado para “WCAG 2.0 nível AA suporte” que (eu acho) o mais acessível “Modal” biblioteca hoje. Está leve, compatível com jQuery e pode ser usado para imagens, vídeos e até mesmo no Instagram. Além disso, este breve curso do Google ajudará você a começar a usar a acessibilidade na Web e por que ela é importante.

WordPressify

Um pacote NPM que permite que você obtenha um ambiente de desenvolvimento WordPress instalado e funcionando em minutos. Está tudo preparado com ferramentas modernas como Gulp, LiveReload, PostCSS, Babel para que você possa se concentrar no desenvolvimento de sua configuração de ajuste de projeto.

Lando

Lando também é uma ferramenta útil para criar um ambiente de desenvolvimento com rapidez e facilidade, WordPressify que acabamos de mencionar acima. Mas em vez de Node.js, demora vantagem de Docker uma conteinerização leve tecnologia e oferece mais flexibilidade no prazo da pilha que você gostaria de usar em seu desenvolvimento.

Por exemplo, você pode especifique a versão do PHP, habilite o XDebug e instale o Composer.

WP-Docklines

WP-Docklines é um coleção de imagens que você pode usar como linha de base para executar Integração e Entrega Contínuas para seus temas WordPress e pluins em serviços como Bitbucket, CircleCI e Gitlab. Cada imagem é empacotada com ferramentas comumente necessárias ao desenvolver o WordPress como o PHP Code Sniffer, PHPUnit e WP-CLI.

WP-Locker

O WP-Locker é a configuração do Docker Compose para girar um ambiente de desenvolvimento do WordPress em apenas alguns minutos. Isto é configurar com o Apache, MySQL e phpMyAdmin e uma vez que estende a imagem do WP-Docklines, também executa as ferramentas extras na imagem out-of-the-box.

Simplesmente tipo bin / start para deixar, configure o localhost e instalar plugins e temas que você configurou no arquivo de configuração.

Docusaurus

Outra iniciativa de código aberto do Facebook, Docusaurus é uma ferramenta para criar um site de documentação do seu projeto. Criado com o React e o Markdown, você pode facilmente compor documentação, mantê-la e até mesmo criar um blog para o seu site, e publique-o nas páginas do Github.

VSCode Yo

Yeoman é um pacote de nó que permite iniciar o projeto rapidamente selecionando andaimes pré-fabricados que se adequam aos seus projetos. Se você estiver usando o Visual Studio Code, esse plug-in simplificará ainda mais o fluxo de trabalho de inicialização, pois permite que você executar o “Yo” comando direto da janela do Visual Studio Code.

BluebirdJS

Uma biblioteca JavaScript que permite que você use Promessa, aguardam, assíncrono hoje em todos os navegadores; disse que até funciona no Netscape. Promessa é um dos pontos mais fortes nas últimas especificações JavaScript que Torne seu código mais enxuto, legível e de fácil manutenção.

Mais bonito

Prettier é uma ferramenta para formate seu código para estar em conformidade com o padrão de codificação do idioma. Ele irá reescrever seu código do scracth seguindo a regra permitindo que você e sua equipe sejam mais produtivo em vez de debater sobre estilos de escrita de código.