Ferramentas JavaScript – Notícias e Atualizações (junho de 2019)

Bibliotecas de UI do JavaScript – DHTMLX Follow Jun 27 · 6 min ler

Bater a tristeza do verão pode ser uma tarefa difícil. Felizmente, há vida no planeta JavaScript, então sempre temos algo para nos divertir. Hoje, vamos dar uma olhada em algumas bibliotecas úteis que irão lidar com a maior parte dos esforços ao criar formulários web e componentes de carrossel. Além disso, vamos verificar algumas ferramentas para gerenciar tarefas de longa duração. Para sobremesa, vamos tentar alguns novos recursos que os desenvolvedores de DHTMLX adicionaram em sua versão mais recente do dhtmlxScheduler e uma biblioteca de UI dhtmlxSuite totalmente modernizada. E, como sempre, ficaremos felizes em compartilhar alguns artigos JavaScript úteis.

Vamos rolar!

Novas ferramentas e atualizações

form-create V2

Se você está procurando uma ferramenta útil para a criação rápida de formulários da Web, form-create é a biblioteca exata que você precisa. É um gerador de formulários que você pode usar para gerar renderização dinâmica, coleta de dados, validação e envio usando JSON. Form-create pode ser usado em seus projetos Vue.js. No momento, existem 17 componentes de formulário integrados que você pode usar.

LRT. Dividir Tarefas de Longa Execução em Pedaços

LRT significa Long-running task. Esta biblioteca minimalista permite dividir tarefas de longa duração em partes e também suporta a capacidade de anular tarefas desatualizadas. Com sua ajuda, você pode coordenar a execução dessas tarefas com agendamento cooperativo. A idéia principal é dividir essas tarefas de longa duração em pequenas unidades de trabalho reunidas em blocos com um orçamento limitado de tempo de execução. As unidades de trabalho são executadas de forma síncrona até que o orçamento do bloco atual seja atingido. Depois, o encadeamento é desbloqueado até que o planejador execute o próximo bloco e assim por diante até que todas as tarefas tenham sido concluídas.

Flicking 3.3.0

Flicking é um carrossel confiável, flexível e extensível que é usado (de acordo com os desenvolvedores) por 30 milhões de pessoas todos os dias. Ele fornece integração com bibliotecas JavaScript como Angular, React e Vue.js. Ele fornece recursos como rolagem infinita, rolagem livre, painel múltiplo e tamanho variável, entre outros. Além disso, existem alguns plugins úteis, como Parallax, Fade ou AutoPlay. Você pode instalar o Flicking por meio do gerenciador de pacotes NPM usando o CDN.

dhtmlxSuite 6.0

O dhtmlxSuite 6.0 é uma versão totalmente nova da biblioteca de UI do DHTMLX JavaScript com 21 componentes que você pode usar para criar interfaces de usuário para aplicativos da Web abrangentes. Vamos verificar o que esta grande atualização trouxe.

Componentes de UI da Suite em um aplicativo File Explorer

Os desenvolvedores reescreveram todos os componentes da biblioteca do DHTMLX Suite, implementaram a nova arquitetura e a API. O tamanho dessa biblioteca é de apenas 330 KB agora. Compare com 1.2MB na versão anterior do dhtmlxSuite 5.1! A arquitetura do dhtmlxSuite 6.0 atualizado permite usar os componentes com tecnologias modernas como Angular, React ou Vue.js. Todos os componentes da interface do usuário são projetados com base no estilo do material. E além disso, eles são totalmente personalizáveis via CSS.

Vamos dar uma olhada nos componentes atualizados agora. Layout , Tabbar e Window são os elementos básicos que podem se tornar componentes fundamentais da interface do usuário do seu aplicativo. O layout JavaScript permite organizar facilmente outros componentes em uma página. List , DataView , Grid , Tree e TreeGrid são os componentes de processamento de dados. Você pode usá-los para organizar dados em diferentes exibições (lista, dataview, grade, árvore), filtrar e classificar dados e executar outras operações. A biblioteca de gráficos do JavaScript inclui 11 tipos de gráficos: Gráficos de Linha e Spline, Gráficos de Barra e X-Bar, Gráficos Área e Área de Spline, Gráficos de Torta e Rosquinha e suas variações 3D, Gráficos de Radar e Dispersão. Menu , Faixa de opções , Barra lateral , Barra de ferramentas são os componentes que podem ser usados para fins de navegação. Componentes atualizados orientados a formulários podem ser usados para finalidades diferentes, mas provavelmente você os usará para criar formulários. Entre esses componentes, você pode encontrar JavaScript Form, Calendar, ColorPicker, Combo, Slider e TimePicker. Por último mas não menos importante, os ajudantes. Popup e Message (Alert, Confirm, Tooltip) podem ser usados pelos desenvolvedores para criar diferentes tipos de caixas de diálogo.

Para ler mais sobre os novos recursos do dhtmlxSuite 6.0, você pode verificar a página de lançamento .

dhtmlxScheduler 5.2. Conteúdo personalizado e melhor arrastar e soltar

Conteúdo personalizado em células

O dhtmlxScheduler é um calendário de eventos JavaScript que fornece aos desenvolvedores uma ampla variedade de visualizações de calendário e oportunidades de personalização. Na versão 5.2, os criadores implementaram alguns recursos interessantes.

Primeiro de tudo, começando com a nova versão, você pode usar modelos personalizados para criar conteúdo a ser representado em células de calendário. A opção está disponível para o modo Árvore e todos os modos da visualização da Linha do tempo. Esse recurso permite, por exemplo, representar as horas de trabalho por funcionário no modo Árvore. Outro recurso importante é o suporte avançado de arrastar e soltar, que fornece uma maneira mais intuitiva de mover eventos. Além disso, os desenvolvedores implementaram alguns upgrades de API . Métodos desatualizados foram substituídos pelos novos, a análise de datas foi atualizada, vários bugs foram corrigidos. Para aprender mais sobre os novos recursos do dhtmlxScheduler 5.2 e revisar alguns exemplos de código, verifique a página de lançamento .

Dicas úteis e artigos

E-mail simples e Google Auth com React e Firebase

Reaja é amor. Reaja é a vida. E o Firebase também é uma ótima ferramenta. Então, por que não misturá-los? Indrek Lasn fez a mesma pergunta. Como resultado, o autor escreveu um artigo sobre como você pode combinar a abordagem direta do React à criação da interface do usuário com mecanismos de autenticação de usuário fáceis de usar fornecidos pelo Firebase. No artigo, você aprenderá como criar um novo projeto do Firebase, inicializá-lo, criar usuários com e-mail e senhas e quais métodos você pode usar para fazer login.

Um guia para manipulação de eventos no Vue.js

O Vue.js é outro concorrente para os corações dos desenvolvedores. Nwose Lotanna fez uma contribuição significativa para o banco de dados de conhecimento do Vue.js com o artigo sobre como os eventos são tratados no Vue.js. Para entender os princípios de manipulação de eventos no Vue.js, você estará construindo um aplicativo simples de contagem de dinheiro com alguns botões. O artigo é adequado para todos os níveis de desenvolvedores que usam o Vue.js, incluindo iniciantes. O autor descreve quais componentes você precisará para fazer com que os exemplos de código funcionem e gasta muito tempo explicando como tudo funciona.

Dicas de configuração do dhtmlxGantt (YouTube)

O dhtmlxGantt é uma ferramenta JavaScript para criar aplicativos de gráfico de Gantt completos. Uma das principais características desta biblioteca é a capacidade de personalizar praticamente qualquer elemento com facilidade. Se no momento você está cansado de ler, não tenha medo. Os desenvolvedores do dhtmlxGantt criaram um vídeo do YouTube descrevendo como adicionar todos os tipos de botões, ícones e menus suspensos às células da grade e aos cabeçalhos do dhtmlxGantt.

Entendendo o módulo do sistema de arquivos Node.js

Um sistema de arquivos no Node.js é um mecanismo que controla como os dados são armazenados, acessados e gerenciados em um sistema operacional. O Swathi Prasad descreve como os desenvolvedores podem usar o módulo do sistema de arquivos (fs) para ler, gravar e excluir arquivos. O artigo contém alguns exemplos de código que descrevem como você pode ler arquivos de maneira síncrona e assíncrona, ler arquivos por meio de fluxos, gravar arquivos, verificar o status do arquivo e executar outras operações úteis.

Confuso pelo const do JavaScript? Eu também!

Constantes podem ser complicadas às vezes. Você sabe quem também está confuso por constantes? Brian Rinaldi, é quem! Mas ao contrário de muitos outros, ele passou algum tempo tentando descobrir o problema. Além disso, Brian foi muito gentil em compartilhar seu conhecimento sobre o comportamento de constantes em JavaScript conosco. O autor descreve em quais situações constantes são escopo global ou escopo de bloco, determina a diferença entre const e var, e tenta responder a maior questão de todos os tempos: "Você deve usar const?"

Texto original em inglês.