Visual studio Code agora tem um Debugger JavaScript nativo.

Para a felicidade dos programadores JavaScript, o VS code agora vem com uma forma nativa de fazer o debug do código. Antes era necessário baixar uma extensão que atende-se a esta necessidade como uma que a própria microsft fez e que funcionava em conjunto com o chrome.

Agora é possível debuggar apenas com pressinando F5 e ativando o icone de debug no menu e selecionando “Run and Debug” ou “Executar e debugar”… Depende da linguagem que seu vs code estiver configurada. :/

Claro que, a microsoft não da nó sem ponto, então eles também desenvolveram funcionalidades no edge que são mais integradas que permitem a inséção de elementos dentro do Visual Studio code. No blog deles eles escreveram:

“The first time you activate this button, the editor will ask you to install the Microsoft Edge DevTools for Visual Studio Code extension. Once you have this one installed, you won’t be prompted again,”

De forma resumida “Na primeira vez que for ativado o botão (inspeção no Edge), o edito pedirá para instalar o DevTools dele nas extensões e nada mais é necessário após isso.”

Separadamente, a Microsoft tem trabalhado em maneiras de melhorar a segurança para desenvolvedores por meio de um recurso que chama de Workplace Trust, que fornece “segurança extra contra a execução de código ao navegar por código-fonte desconhecido”. Ela também introduziu um Modo restrito “onde funcionalidades potencialmente prejudiciais são desabilitadas, para que você possa navegar pelo código com mais segurança e, eventualmente, tomar uma decisão informada”. Outra abordagens também estão sendo refinadas e serão liberadas conforme possível.

JavaScript dentro do Banco Oracle 21c

JavaScript dentro do Banco Oracle 21c

Recentemente a Oracle liberou a versão 21c do seu banco. Com essa nova versã, os desenvolvedores agora podem executar trechos de código JavaScript dentro do banco de dados. Isso permite que sejam executadas pequenas tarefas computacionais facilmente expressas em JavaScript, sem ter que mover os dados para uma camada intermediária ou navegador.

Como funciona?

O Multilingual Engine (MLE) no Oracle Database 21c, desenvolvido por GraalVM, mapeia automaticamente os tipos de dados JavaScript para os tipos de dados Oracle Database e vice-versa, para que os desenvolvedores não tenham que lidar com a conversão de tipo de dados eles próprios. Além disso, o próprio código JavaScript pode executar PL / SQL e SQL por meio de um módulo JavaScript integrado.

Tudo isso também permite que os desenvolvedores que utilizam a plataforma APEX (Oracle Application Express) usem JavaScript como uma linguagem de primeira classe em seus aplicativos APEX, sem ter que sacrificar o poder do PL / SQL e do SQL. Aqui está um exemplo de código que usa o pacote DBMS_MLE PL / SQL para executar o código JavaScript:

set serveroutput on;

DECLARE
  ctx dbms_mle.context_handle_t;
  source CLOB;
  greeting VARCHAR2(100);
BEGIN
  ctx := dbms_mle.create_context(); -- Cria um contexto para execução usando o MLE

  dbms_mle.export_to_mle(ctx, 'person', 'World'); -- Exporta os valores do PL/SQL

  source := q'~
    var bindings = require("mle-js-bindings");
    var person = bindings.importValue("person"); // Importa os valores exportados anteriormente
    var greeting = "Hello, " + person + "!";
    bindings.exportValue("greeting", greeting); // Exporta os valores para o PL
  ~';

  dbms_mle.eval(ctx, 'JAVASCRIPT', source); -- Avalia e executa o código dentro do contexto

  dbms_mle.import_from_mle(ctx, 'greeting', greeting); -- Importa os valores exportados pelo MLE

  dbms_output.put_line('Greetings from MLE: ' || greeting);

  dbms_mle.drop_context(ctx);
END;

Como você pode ver, o JavaScript pode ser usado como algumas linguagens de script já funcionam quando são invocadas dentro de outras.

Para aqueles que usam APEX

Agora se você estiver utilizando o APEX com o banco 21c, você poderá executar o código de forma bem mais simples e sem utilizar uma linha de PL. Basta mudar a configuração e executar seu código

Image for post
// getting page item values
const empno = apex.env.P1_ID;
const salary = apex.env.P1_SAL;

// executing DML operations
apex.conn.execute('update emp set sal = :sal where empno = :empno', {
    sal: salary,
    empno: empno 
});

// executing PL/SQL
apex.conn.execute('begin apex_debug.message(:1); end;', ['Updated salary for ' + empno]);

// messages passed to console.log will also end up in the debug logs
console.log('Updated salary for ' + empno, ' using console.log for printing');

// setting page item values
apex.env.P1_STATUS = 'Success!';

Como mostra este exemplo, você pode interagir com os itens da página via apex.env e executar DML ou PL / SQL via apex.conn.execute

A documentação formal da API dessas novas APIs ainda está por vir. No entanto, eles são um subconjunto do Driver Oracle Node.js, embora com diferenças notáveis, como a mudança de funções assíncronas para síncronas. Você também pode encontrar exemplos no texto de ajuda do respectivo atributo e navegando no preenchimento automático do editor de código.

Exercício – Atravessar a Rua

Neste exercício, criaremos uma função que calcula a quantidade mínima de passos que uma pessoa precisa dar para atravessar a rua.

A nossa pessoa deseja atravessar a rua. Inicialmente, a pessoa está localizada em uma posição X, e deseja chegar a uma posição maior ou igual a Y. A cada passo que a nossa pessoa dá, ela percorre uma distância fixa que denominaremos Z. Na nossa função, precisaremos:

  • Contar a quantidade mínima de passos que a nossa pessoa precisa dar para atravessar a rua, ou seja, sair da posição X e chegar ou ultrapassar a posição Y.

Em nossa função, precisamos passar os parâmetros. Por exemplo, daremos 3 números inteiros, X, Y e Z, e a função deverá retornar um número mínimo de passos que inicie da posição X e vá para uma posição maior ou igual a Y.

Dando como exemplo os números de entrada:

  • X = 5;
  • Y = 40;
  • D = 1;

Ao dar um passo, deve ser somada a distância inicial + a distância do passo dado, ou seja:

Ao dar um passo = 5 + 1;

Dois passos: 5 + 1 + 1.

E assim, sucessivamente, até chegar ou passar a distância final de 40.

Para realizar esse exercício, você precisará:

  • Criar uma função chamada atravessaRua;
  • Essa função deverá receber três parâmetros: X, Y e Z;
  • Calcular a distância necessária;

Você pode fazer o download da solução aqui: [download id=”4210″]

Exercício – Letras repetidas

Neste exercício, temos um array composto de letras repetidas e uma letra isolada. Por exemplo, temos um array chamado vetor:

let vetor = ["a", "b", "a", "a", "c", "b"]

Aqui, temos:

vetor[0] = "a";
vetor[1] = "b";
vetor[2] = "a";
vetor[3] = "a";
vetor[4] = "c";
vetor[5] = "b";

Sabemos que a única letra que não possui repetição está na posição [4], elemento “c”. Então, precisamos retornar este elemento.

No nosso exercício, faremos:

  • Criaremos uma variável que terá o nosso vetor ordenado de forma crescente;
  • Criaremos uma variável chamada odd, que receberá futuramente o valor isolado;
  • Percorreremos o vetor ordenado;
  • Armazenaremos em variáveis o elemento atual e o próximo elemento;
  • Se o elemento atual for igual ao próximo, seguimos a iteração;
  • Senão, a variável odd recebe o valor isolado.

Você pode realizar o download da solução deste exercício aqui:

[download id=”4148″]

JS Fest 2020

A JS Fest acontecerá na Ucrânia, nos dias 30-31 de Outubro de 2020. A JS Fest é um evento/conferência internacional que considera sobre todos os aspectos do desenvolvimento com javaScript. É uma das maiores conferências sobre desenvolvimento JavaScript de toda a Europa, reunindo centenas de pessoas com experiência na tecnologia. A conferência acontecerá pelo terceiro ano consecutivo e são esperados palestrantes de 10 países ao redor do mundo. Por tradição, a conferência ocorrerá na cidade de Kyiv – Ucrânia.

Será falado sobre:

  • Arquitetura de apps;
  • Frameworks modernos, como GraphQL, TypeScript, etc;
  • Blockchain;
  • Desenvolvimento mobile, em particular com Flutter;
  • Aplicativos JS de IA;
  • Tópicos recentes em desenvolvimento de software;
  • Como se manter atento com as tecnologias e requisitos de mercado.

Você pode esperar palestras sobre os temas:

  • Frameworks;
  • JavaScript no Backend;
  • Embarcados;
  • Mobile;
  • JS Core;
  • Arquitetura de software;
  • Design de software;
  • Otimização de aplicações;
  • Teste de aplicações;
  • Blockchain;
  • Inteligência Artificial;
  • Machine Learning.

O que você pode esperar do evento?

Abordagens e Ferramentas:

Na conferência, será abordado o tema de uso de ferramentas, frameworks e boas práticas no desenvolvimento.

Palestrantes famosos mundo afora:

Foram convidados especialistas dos Estados Unidos, Europa e Ucrânia que irão realizar palestras cheia de exemplos práticos sobre projetos utilizados na vida real.

Novos tópicos no mundo da tecnologia:

É uma oportunidade para aprender sobre as inovações e receber os insights em primeira mão.

Atmosfera especial:

Será criada uma atmosfera especial para a comunicação, receber novos conhecimentos, aprender, compartilhar ideias e inspirações.

Novas conexões e networking:

Este evento em larga-escala é uma excelente chance de adquirir novos contatos que poderão ser úteis no futuro de sua carreira no desenvolvimento.

Excelente Organização:

Trabalhando apenas com fornecedores comprovados e com estrito cumprimento de cronograma, para não haver surpresas ruins para você.

Sorteios:

Os parceiros prepararam surpresas e concursos interessantes para os participantes do evento, então você pode, além do conhecimento, ganhar alguns presentes!

Casos práticos:

Profissionais com experiência prática compartilharão conhecimentos e contarão sobre os desafios enfrentados nos seus projetos.

Você pode verificar em: https://jsfest.com.ua/indexe.html

Gostou desta notícia? Comente abaixo e compartilhe com seus amigos!

Referências:

https://jsfest.com.ua/indexe.html

https://armacad.info/

 

Exercício – Rotacionando vetor

Um vetor é um conjunto de dados que pode armazenar vários dados em apenas um lugar. Por exemplo, em um vetor, podemos armazenar uma lista de itens de, por exemplo, uma lista de compras.

Uma lista de compras armazenada em um vetor seria algo como:

let listaDeCompras = ["arroz", "massa", "carne", "alface"];

Um vetor também pode ser criado vazio e, depois, utilizando métodos de inserção, podemos inserir itens neste vetor.

let vetor = [];

Podemos inserir no vetor utilizando o método push(), e remover itens usando o método pop().

O método push() adiciona um valor ao fim do vetor, e o método pop() remove o elemento do final do vetor. Também temos outros métodos, por exemplo:

  • unshift(): adiciona um elemento na primeira posição do vetor;
  • shift(): remove o elemento na primeira posição do vetor.

Entre outros métodos. Você pode verificar os outros métodos em: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array

Exercício:

Neste exercício, criaremos uma função que rotaciona o nosso vetor. Levaremos em consideração as letras do alfabeto, de A a E.

let vetorAlfabeto = ["A", "B", "C", "D", "E"];

O que queremos que aconteça é: rotacionar o vetor a quantidade de vezes indicada. Essa quantidade será representada pela letra Q.

Caso o valor apresentado por Q for 1, o array deverá rotacionar um elemento:

["E", "A", "B", "C", "D"]

Para realizar esse exercício, você precisará:

  • Criar uma função rotacao(), que receberá dois parâmetros. O vetor e a quantidade (V, Q);
  • Adicione um índice para percorrer o vetor;
  • Caso o vetor passado por parâmetro for um vetor vazio, retorne um vetor vazio.

Solução:

Você pode fazer o download da solução aqui:

[download id=”4138″]

Exercício – Maior espaço entre letras

Um binary gap é uma sequência de bits consecutivos do mesmo valor (1 ou 0) que são circundados por bits de valores opostos. Por exemplo, o número 14512 (11100010110000) tem duas lacunas binárias 0, uma de comprimento 3 e outra de comprimento 1.

Portanto, o comprimento máximo de um intervalo binário (binary gap) é o comprimento do intervalo mais longo dentro da representação binária do número.

O número 9, tem representação binária 1001, contendo uma binary gap de tamanho 2. O número 529 possui uma representação binária 1000010001 e possui duas gap’s: uma com comprimento 4 e outra com comprimento 3.

Exercício

Construa uma função que, dado uma string, retorna o tamanho do seu maior intervalo entre as letras. Caso não existam intervalos entre as letras A e B, retorne 0.

Para realizar este exercício, você vai precisar:

  • Construir uma função chamada lacuna, que receberá como parâmetro uma String.
  • Iterar a string;
  • Encontrar o primeiro valor A no binário adicionado;
  • Encontrar a quantidade de B entre A.

Você pode fazer o download da solução aqui:

[download id=”4132″]

Nova versão – MOBX 6

O MobX é uma biblioteca responsável por gerenciamento de estado simples e escalável. Aplica este gerenciamento e escalonamento de forma transparente a programação reativa funcional.

O MobX já possui 5 anos. Já foi adotado por empresas como Microsoft(Outlook), Netflix, Amazon e E.A. Games (Battlefield). Ele possui a mesma filosofia desde o início. Se algo pode ser derivado pelo estado do aplicativo, será derivado automaticamente.

Em contraste a isso, o ecossistema JavaScript mudou significativamente ao longo dos anos. No entanto, propostas do JavaScript como observables, Object.observe e decorators nunca foram materializados. O MobX 6 é uma versão que não traz muitos novos recursos, mas sim uma consolidação em consideração ao estado atual do JavaScript.

Adeus Decorators!

Usar decorators não é mais regra no MobX. Quando começou, o MobX era um projeto do TypeScript e utilizava decorators. Atualmente, as implementações experimentais do decorator são incompatíveis com a proposta de campos de classe que logo será padronizada. As implementações de decorator legado (Babel) e experimental (TypeScript) não serão capazes de interceptar inicializações de campos de classe. Mas como ficará o MobX depois dos decorators?

Em vez de usar decorator nos membros durante a definição de classe, os membros da instância precisam  ser anotados no construtor, usando o utilitário makeObservable.

import {observable, computed, action, makeObservable} from "mobx"

// Antes:
class TodoStore {
    @observable
    todos: Todo[] = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    @action
    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

// Depois:
class TodoStore {
    todos: Todo[] = []

    constructor() {
        makeObservable(this, {
            todos: observable,
            unfinishedTodoCount: computed,
            addTodo: action
        })
    }

    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

O makeObservable não requer configurações de compilação sofisticadas. Migrar uma base de código que use diversos decorators para makeObservable pode ser um desafio. O MobX vem com um mod de código para fazer isso automaticamente. Utilizando o comando:

npm mobx-undecorate

Utilizando este comando, todos os decorators da pasta de origem serão reescritos automaticamente! Depois, atualize sua configuração TypeScript/Babel e estará tudo pronto para prosseguir.

Documentação nova!

Com a retirada da norma de utilização de decorators, a documentação foi revisada e reestruturada, sendo mais curta, com menor repetição e discutindo melhor os cenários comuns.

Suporte a navegador aprimorado

O MobX 6 suporta mais mecanismos JavaScript que o MobX 5. O 5 exigia suporte de proxy, tornando-o inadequado para Internet Explorer e React Native, por isso, o Mobx 4 era mantido ativamente. No entanto, o MobX 6 substitui os dois. Ele ainda exigirá Proxies, mas será possível cancelar o uso do Proxy caso precise oferecer suporte a mecanismos mais antigos.

Você pode verificar mais novidades em:

Gostou desta notícia? Comente abaixo!

Referência: https://michel.codes/blogs/mobx6

NativeScript 7.0 – Lançamento

A versão 7.0 do NativeScript é um passo decisivo para o framework, pois alinha-se com os padrões do JavaScript moderno, trazendo consistência para a stack. O NativeScript 7.0 fornece uma capacidade de atualizações mais eficientes com as mudanças no ecossistema JavaScript, reinando em uma varredura holística sobre o gerenciamento do código aberto em torno do framework.

Para instalar o NativeScript via npm:

npm i -g nativescript

O NativeScript possui novos aliases cli:

  • ns – O novo padrão;
  • nsc – “Compilador NativeScript”;
  • tns – funciona por razões históricas.

O novo comando clean garante que os arquivos de projeto sejam limpos quando necessário. Você pode usar o comando:

ns clean

Você precisa verificar se os plug-ins dos seus projetos possuem compatibilidade com o NativeScript 7 antes de migrar. Você também deve olhar o guia de referência para importação para nivelar quaisquer informações que seu projeto possa utilizar.

Com a segmentação do es2017 e posteriores, é permitido um código mais rápido e com melhor desempenho. O motor v8 usado no NativeScript sempre teve suporte de ponta para o ES mais recente.

Vários pacotes do npm também foram definidos, incluindo plug-ins para ajudar a esclarecer o que é compatívelcom NativeScript 7.

@NativeClass() decorator

Necessário apenas se você estiver usando TypeScript e estendendo uma classe nativa. Se você estiver usando JavaScript puro, use a função .extend().

Um dos recursos mais atraentes do NativeScript é estender as classes nativas diretamente no JavaScript. Mas o JavaScript não sabe como estender uma classe nativa por conta própria. No ES2017, extends é suportado nativamente e, portanto, deixa de fora o __extends necessário para os tempos de execução e esta é uma oportunidade perfeita pra usar o decorator.

nsconfig.json -> nativescript.config.ts

Há muito tempo existe uma key nativescript na raiz de qualquer aplicativo package.json, para gerenciar as id’s do pacote de aplicações e versões de runtime. Havia também outro package.json embutido no diretório src que continha sinalizadores de runtime. Também existia um arquivo chamado nsconfig.json, que continha outras configurações de aplicativo. Agora, no NativeScript 7, isso tudo é consolidade em um único arquivo nativescript.config.ts!

engine v8 iOS

No NativeScript 7.0, a runtime padrão do iOS usa o mesmo mecanismo v8, ajudando a melhorar a manutenção em tempos de execução.

Para conhecer mais novidades sobre o NativeScript 7, acesse a página de novidades.

Referências: https://nativescript.org/blog/nativescript-7-announcement/

Gostou desta notícia? Comente abaixo!

Tornando o código mais rápido usando Sets JavaScript

Muitos desenvolvedores limitam-se a utilização de objetos globais básicos, como strings, objetos, números, arrays e booleanos. Na maioria das vezes, isso realmente é tudo que você precisa mas, para tornar o código mais eficiente, nem sempre isso é todo o necessário.

Para isso, existem os Sets JavaScript, que tornam o seu código mais rápido a medida que ele é escalonado. O uso de sets traz resultados que seriam impossíveis de obter somente com arrays.

E como os sets são diferentes?

Bom, os arrays são coleções de dados indexados, ou seja, cada valor dos dados em um array é ordenado por um índice. Por exemplo:

let mainArray = [a, b, c, d];
console.log(mainArray.indexOf(a));
// 0
console.log(mainArray.indexOf(c));
// 2

Já os Sets são coleções codificadas. Não usam índices, mas ordenam os seus dados utilizando chaves. Seus elementos são iteráveis na ordem de inserção e não podem conter dados duplicados, ou seja, cada conjunto de dados deve ser único.

E quais são os benefícios?

  • Utilizar métodos como indexOf() ou includes() para verificar a existência de um elemento em um array é muito lento;
  • Nos Sets, você pode excluir o elemento pelo seu valor. Em um array, você pode utilizar o splice com base no índice do elemento, tornando-o lento pela dependência de índices;
  • É mais rápido adicionar elementos aos Sets do que adicionar elementos em um array utilizando metodos como push() ou unshift();
  • Um Set pode armazenar NaN;
  • Sets armazenam apenas valores únicos. Se você não pode trabalhar com duplicatas, esta é uma vantagem.

O quão mais rápido são os Sets?

Os métodos que o array utiliza possuem uma complexidade de tempo linear de O (N), ou seja, o tempo de execução necessário aumenta conforme aumenta o tamanho dos dados. Mas métodos que utilizam Sets para manipulações como inserção, exclusão e pesquisa possuem uma complexidade de tempo  O (1), e isso significa que o tempo de execução não varia, pois o tamanho dos dados não influencia no tempo de execução dos métodos.

Teste:

Realizando um teste, vamos criar um array e um set com um milhão de entradas cada:

let newArray = [], newSet = new Set(), n = 1000000;

for (let i = 0; i < n; i++){
    newArray.push(i);
    newSet.add(i);
}

Agora, pesquisaremos o número 425123 no array e no set:

let result; 
console.time('Array');
result = newArray.indexOf(425123) !== -1;
console.timeEnd('Array');

console.time('Set');
result = newSet.has(425123);
console.timeEnd('Set');

E a saída foi:

// Array: 1.201ms
// Set: 0.029ms

Gostaram deste artigo? Comente abaixo!

Referência: https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77