As 7 principais ferramentas JavaScript úteis para desenvolvedores da Web

Se você assinar um serviço de um link nesta página, a Reeves and Sons Limited pode ganhar uma comissão. Veja nosso Declaração de ética.

Muitos desenvolvedores tentam evitar sujar as mãos com JavaScript tanto quanto podem. Há uma percepção de que o JavaScript é desordenado e incentiva maus hábitos de codificação, porque não impõe regras tão estritamente quanto a maioria das outras linguagens de codificação.

Yet this is also a strength. It makes developing things in JavaScript quick and easy, provided you know what you are doing. Developing code in JavaScript is often a more efficient process simply because you don’t have to spend as much time debugging, and you can see the results of any changes you make instantly.

If there’s a downside, it’s that some coders actually are lazy, and don’t test their code sufficiently before releasing it, which is why we see so many web pages that consume memory and CPU cycles to excess.

Fortunately one of the very best things about JavaScript is there are so many pre-existing tools that you can make use of. You don’t have to reinvent the wheel on every project. Some of these may even spare you the ordeal of doing any coding at all.

In this article, we’ll take a look at some of the most useful JavaScript tools and libraries available for you to use when you are working on your own projects. In the majority of cases, these tools are free or low cost, and we only selected those that don’t require a lot of effort to learn.

1. Tota11y

Uma das tarefas mais importantes para qualquer desenvolvedor web é garantir que suas páginas tenham boa acessibilidade. Pode ser difícil alcançar a perfeição, mas devemos pelo menos tentar que o fator de acessibilidade seja o melhor possível.

A Tota11y JavaScript tool from Khan Academy does a very impressive job of analyzing your web pages for accessibility while you’re in the development phase, so you can provide real-time analysis of accessibility factors to your development team.

2. BrowserSync

Começando com BrowserSync não é de forma alguma direta, mas depois de ter aprendido a usá-lo, você descobrirá que é indispensável no laboratório de testes. Teste seu site em vários navegadores e dispositivos ao mesmo tempo.

Outra característica interessante desta ferramenta é que ela permite que você estrangule sua conexão para simular o carregamento da página em uma conexão mais lenta do que a que você realmente tem.

There are other tools for testing on multiple browsers, but this is the only one we’ve found that also mirrors all your interactions with the page instantly across all your connected browsers and devices.

3. Chart.js

Existem tantas maneiras pelas quais os gráficos podem ser úteis, e uma das soluções livres mais elegantes que também é fácil de configurar tem que ser simplesmente Chart.js ferramenta.

Usando apenas um script muito simples, você pode criar uma incrível variedade de gráficos e pode até combiná-lo com um banco de dados para carregar dados dinamicamente e gerar novos gráficos sempre que os dados forem alterados. Você pode misturar diferentes tipos de gráficos em conjunto, fazendo sentido (por exemplo, uma linha combinada e um gráfico de barras).

It works by using the HTML5 canvas, and you can create multiple canvases on the page to host multiple charts. Just make sure you give each canvas and chart a unique name so you don’t send data to the wrong target.

Outro recurso interessante do Chart.js é que os gráficos que ele gera são totalmente responsive, so they’ll have a consistent look across a range of different screen sizes.

4. SamsaraJS

The unusual name choice for this tool (“samsara” in Buddhist tradition refers to the eternal cycle of suffering from which one is supposed to break free) may be an indication of how much work you’ll have to put in to master it, but it is capable of making your web page do amazing things.

The concept here is “layout animation”, and it’s extremely versatile. SamsaraJS oferece controle total sobre o layout, permitindo que você “mova” e altere-o, de acordo com uma sequência predeterminada ou em resposta à interação do usuário.

5. Kartógrafo

Se a sua página web se beneficiar da exibição de dados geográficos em forma gráfica, então Kartógrafo é a ferramenta JavaScript perfeita que você precisa para essa finalidade.

Quaisquer dados podem ser modelados com precisão de pontos e vinculados a locais específicos em um mapa, com tudo gerado em gráficos SVG em tempo real. Isso significa que até mesmo a animação é possível.

The best thing about this is how professional the end result looks. It’s certainly an interesting alternative to using more popular mapping solutions such as GoogleMaps, and doesn’t come with any unwanted extras.

Mais uma coisa que faz o Kartograph se destacar é que ele tem scripts para Python e JavaScript.

6. Raphaël

This is an SVG engine that simplifies the task of drawing real-time SVG graphics (this is different from pre-complied SVG graphics). There are numerous advantages to drawing your vector graphics as they’re needed instead of using pre-compiled graphics.

Esta é a tecnologia de alto nível de projetos de aplicações web, como o Kartograph (veja acima) eo Emulador MCDU foram construídos com.

Enquanto o Raphaël A biblioteca não está em desenvolvimento ativo neste momento, ela já tem praticamente tudo que você precisa para criar praticamente qualquer coisa que você queira, e não há dúvida de que ela torna a codificação SVG muito mais fácil do que usar a sintaxe SVG comum.

7. Knockout.js

It’s not easy being a UI framework these days with so much competition around, but Knockout.js has something a little extra special. The learning curve has been flattened out with interactive tutorials. Beyond that, it’s a powerful and flexible framework compacted down to under 60KB in size.

Despite it’s small size, it gives you a lot of control over your DOM elements and lets you build fully interactive responsive sites de forma rápida e fácil.

JavaScript isn’t bad

Much of the scorn that has been directed at JavaScript is a legacy from its earliest days, when it definitely wasn’t perfect, and unfortunately decided to incorrectly marry its name forever with Java.

Get to grips properly with JavaScript and you will discover it is a robust object oriented language that is ideal for developing online and offline applications very easily. This isn’t something that can be said about most languages out there.

Até mesmo o Java requer muito mais esforço, embora ele ofereça várias ferramentas pré-definidas de plataforma para trabalhar.

The tools listed above are just seven very useful ones out of a palette of millions you could choose from. It’s certainly a language that is useful to know, and may well be the best language to master, since it provides the most opportunities.

imagem de cabeçalho cortesia de

Bogdan Rancea

Bogdan é um membro fundador da Inspired Mag, acumulando quase 6 anos de experiência neste período. Em seu tempo livre, ele gosta de estudar música clássica e explorar artes visuais. Ele é muito obcecado com fixies também. Ele é dono do 5 já.

Comentários Respostas 0

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

NOTA *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.