Tag: Angular

Publicado em

Angular 8.0

Veja nesse artigo as principais novidades dessa nova versão do Angular.

Já faz um tempo que eu estou brincando com essa versão do Angular em RC. Eu atualizei o meu ambiente para essa versão para testar a nova versão do TypeScript e indo já indo para primeira novidade do Angular 8, nesse update nós podemos trabalhar com o TS na versão 3.4 😉

Caso você não tenha visto nada dessa nova versão do TS 3.4, eu recomendo a leitura dos seguintes links abaixo:

E indo para a próxima novidade, nessa versão foi removido o pacote @angular/http. Esse pacote estava deprecated desde de a versão 5.0, desde de essa versão nós deveríamos estar utilizando o pacote @angular/common/http.

Novidades nos Forms

markAllAsTouched

Nessa versão foi adicionado um novo método dentro da class AbstractControl chamado markAllAsTouched. Esse método é parecido com o markAsTouched das versões anteriores, a diferença é que esse método marca todos controles do nosso form como touched.

Sintaxe

form.markAllAsTouched();

Caso você tenha interesse em saber mais sobre AbstractControl, eu recomendo a leitura do seguinte do seguinte link: Angular-AbstractControl.

clear

Para o pessoal que já trabalha com o Angular a um tempo, com certeza já deve ter feito algo como no exemplo abaixo para limpar um form.

while (formArray.length) {
  formArray.removeAt(0);
}

Nessa versão nós podemos utilizar o .clear() para limpar todos elementos de uma só vez 😉

Sintaxe

formArray.clear()

Rotas

Nessa versão foi adicionado uma nova sintaxe para declaração de rotas com lazy-loading.

Agora ao invés de declaramos assim:

loadChildren: './news/news.module#NewsModule'

Nós declaramos com o import:

loadChildren: () => import('./races/races.module').then(m => m.RacesModule)

Essa sintaxe com import() já é utilizada nas versões anteriores do TypeScript.

Ivy

Essa sem dúvidas foi uma das atualizações mais esperadas. Eu estou escrevendo um artigo focando nele, mas caso esse seja o seu primeiro contato com ele, o Ivy é o novo compilador do Angular 😉

Bom galera, esse foi um post rápido com foco em alguns dos updates dessa nova versão.

Referências

alligator.io

Publicado em

Stack Overflow Survey: JavaScript ganha linguagem mais popular

Para aqueles que acompanham as pesquisas do Stack Overflow, saiu recentemente os resultados da pesquisa de 2019. Está é a maior e mais abrangente pesquisa do mundo para envolver programadores e suas preferências. A edição de 2019 desta pesquisa tocou cerca de 90.000 desenvolvedores.

Do que toca o JavaScript, a linguagem ficou em 1º lugar em popularidade entre todos os tipos de linguagem (programação, marcação, query, etc…). Este é o 7º ano seguido!!

Para uma listagem completa acesse: https://insights.stackoverflow.com/survey/2019#technology-_-programming-scripting-and-markup-languages

Outros resultados interessantes para o mundo JavaScript são os resultados sobre os frameworks web e é possível ver através da imagem abaixo que os frameworks para JS estão muito fortes:

Acesse: https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks

Por último, na categoria outros frameworks, bibliotecas e ferramentas, temos mais um representate de peso em 1º lugar e diversos com um bom posicionamento:

Para a listagem completa da imagem acima, acesse: https://insights.stackoverflow.com/survey/2019#technology-_-other-frameworks-libraries-and-tools

Os resultados da pesquisa são bem mais abrangentes que os 3 itens mostrados acima, vale apenas acessar o link oficial do Stack Overflow e conferir todos os detalhes, como linguagens que maid adoradas/odiadas, IDEs e outras pesquisas que eles fizeram para você saber melhor como estão as opiniões dos profissionais da area em relação as tecnologias atuais.

Publicado em

Angular: Criação de Pipes

Introdução

Para quem ainda não conhece as pipes do Angular, elas são uma maneira elegante de realizarmos transformações no nosso front-end. Com ela nos podemos criar funções ou filtros (como ela é chamado no inglês), que podem ser utilizadas em qualquer parte do template do nosso projeto. Para que você possa ter um entendimento melhor, irei criar um exemplo de uma pipe que nos auxilie com o problema “unsafe” de URL’s externas.

Criação do projeto

Para esse artigo, eu não irei abordar os passos para criação de um projeto, irei partir de um já criado com Angular cli. Caso ainda não tenha o Angular Cli instalado e queira saber mais sobre esse passo, segue link de um artigo onde eu demonstro esse tema Angular Cli Scaffold. Para quem tiver interesse, eu irei disponibilizar o link do projeto que utilizaremos no final desse artigo.

Pipes

O Angular já nos prove algumas pipes para utilização como: date, uppercase, lowercase … etc mas na maioria das vezes nós precisamos de algo mais complexo. Para que possamos criar a nossa pipe, nos iremos utilizar o command line do Angular cli. Para isso, execute o comando abaixo no seu terminal/CMD.

ng generate pipe [name]

Nesse artigo eu dei o nome de Safe. Esse comando irá gerar um novo arquivo chamado safe.pipe.ts. Vamos atualizar ele com o seguinte código:

import { Pipe, PipeTransform } from '@angular/core';
/*Carregando o pacote DomSanitizer, ele auxilia com o Cross Site Scripting Security.*/
import { DomSanitizer } from "@angular/platform-browser";

@Pipe({
    name: 'safe'
})

export class SafePipe implements PipeTransform {
    /*Injetando o DomSanitizer no nosso componente.*/
    constructor(private _sanitizer: DomSanitizer) { }

    /*Criando um método que recebe uma URL, em seguida nós retornamos ele passando pelo método bypassSecurityTrustResourceUrl, dessa forma a nossa aplicação passa a acreditar (remover o erro unsafe) da nossa console.*/
    transform(url) {
        return this._sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

Caso você queria entender melhor a classe DomSanitizer, segue um link para sua documentação oficial DomSanitizer Docs.

Testando

Para que possamos testar a nossa Pipe, iremos utilizar o Iframe de vídeos do Youtube. Para isso, iremos atualizar o nosso AppComponent com os códigos abaixo:

app.component.html

<iframe width="500" height="400" [src]="video | safe"></iframe>

app.component.html

export class AppComponent {
    title = 'app';
    video: string = "https://www.youtube.com/embed/Ckom3gf57Yw"
}

Bom, com isso nos finalizamos esse post, caso tenha interesse na versão final do projeto, segue o seu link no GitHub.

Publicado em

5 frameworks JavaScript que você precisa conhecer

Com o crescimento da popularidade do JavaScript como sendo mais que apenas uma linguagem que valida forms ou faz alguns “efeitinhos” e animadas na tela, vieram diversas bibliotecas e frameworks que adicionam funcionalidade, complexidade e muitas, mas muitas horas a mais de estudo. Para ajudar a reduzir um pouco esta carga, colocamos aqui uma lista com 5 frameworks que podem servir como ponto de partida para essa jornada. Boa sorte!

Angular

Angular é um dos frameworks JavaScript mais utilizados para construir aplicações web e SPAs. Ele foi desenvolvido e lançado pela Google com o nome AngularJS no ano de 2009. Desde então ele já sofreu diversas atualizações de versão, se tornou disponível como um projeto open source licenciado MIT e é a base de diversas aplicações web de nível empresarial.

Angular é um framework MVC e oferece um a possibilidade de fazer one-way ou two-way data binding entre views e models. Angular é utilizado para construir tanto aplicações desktop quanto web.

React

Construído pelo Facebook e lançado em 2013, o React ganhou popularidade rapidamente e se tornou um dos frameworks JavaScript com o crescimento mais rápido dentre os mencionados. O React é utilizado na interface com o usuário tanto do Facebook quanto do Instagram e isso já prova que ele é capaz de lidar com aplicações empresariais de alta performance.

Este framework fornece um fluxo de dados de 1 caminho e dá suporte a componentes encapsulados que gerenciam seu próprio estado. React pode ser renderizado no servidor usando Node e também pode ser usado para construção de aplicativos para celular usando React Native

Ember

Ember é um framework JavaScript simples de aprender e possui um bom suporte da comunidade. Ember possui um framework para criar aplicações web de grande porte e utiliza o Handlebars, que atualiza de acordo com a mudança dos dados, como base para seus templates.

Ele foca na produtividade do programador e incorpora funcionalidades comuns para que o desenvolvedor não perca tempo fazendo escolhas triviais.

Aurelia

Aurelia é outro framework popular para o desenvolvimento mobile, desktop e web. Aurelia oferece two-way data binding e suporta várias versões do JavaScript, tais como ES5, ES 2015, ES 2016 e Typescript.

Ao invés de utilizar um framework monolítico, é formado por diversos módulos menores e focados. O Aurelia também torna fácil testar o código e seus criadores fornecem suporte comercial.

Meteor

Meteor é um framework de aplicações reativas completo para desenvolver aplicativos mobile, desktop e web utilizando JavaScript como a linguagem padrão. Desde que foi lançado em 2012 ele tem crescido bastante.

Com um framework open source sobre a licença MIT, ele foca em construir funcionalidades com menos linhas de código e usando uma integração JavaScript desde o banco de dados até a tela do cliente. A equipe que desenvolveu o Meteor também fornece suporte comercial e hospedagem para aplicativos que o usam.

Qual deles é o melhor?

Todos os frameworks mencionados são muito populares, cada um tem seus pontos fortes, pontos fracos e os focos mudam um pouco. Por isso fica difícil escolher o “melhor” pois depende da aplicação sendo implementada, a estrutura de trabalho seu ou da sua equipe e a plataforma de escolha. De toda forma, sempre vale a pena mexer com o básico do código de cada um para se ter uma ideia melhor do que é melhor para você.