Tag: Frameworks

Publicado em

Como usar JavaScript no Oracle APEX

O que é o Oracle APEX?

Para aqueles que não conhecem, o Oracle APEX é uma plataforma gratuita de desenvolvimento low code disponibilizado pela Oracle e que você pode testar tanto criando uma conta https://apex.oracle.com/, criando direto em cima de uma banco oracle em sua maquina quanto instanciando na nuvem.

Se você nunca mexeu nele, então eu recomendo começar pelo link que passei para ver se a plataforma atende as necessidades e pelo simples fato de ser mais rapido de fazer tudo funcionar.

Imagem do Dashboard do APEX
Dashboard do APEX

Nossas postagens sobre APEX

Veja aqui mais postagens nossas sobre o tópico: https://www.mundojs.com.br/tag/apex/

Onde o JavaScript se encaixa nisso?

Caso você ja tenha acessado o link ou acessou antes de continuar lendo você deve estar se perguntando, onde o JavaScript vai ser usado aqui? Se eu colocar JavaScript não vou estar deixando de usar a plataforma da forma correta?

Como muito pode ser feito sem programar e sem intervenção direta de código, eu espero que você tenha feito essas perguntas, pois elas são importantes.

A resposta é simples, você pode sim trabalhar com o Javascript usando a API JavaScript disponibilizada e pode fazê-lo em múltiplos níveis.

Por exemplo, coisas como

// caixas de mensagem
apex.message.alert(texto);
apex.message.confirm(texto, funcaoCallback);

// definir valores
apex.item(identificador).setValue(valor)

// chamadas AJAX
apex.server.process(nomeProcess, dadosEnviados, funcaoCallback);

Podem ser feitas com funcionalidades (blocos lógicos) low code como

  • alert
  • confirm
  • set value
  • execute server side code, set value ou refresh

Mesmo assim, é importante que saber que temos opções que recebem suporte e que estão disponíveis na API. por isso acho importante evitar código que modele/acesse diretamente as propriedades como

// caixas de mensagem
alert(texto)
confirm(texto)
$( seletor ).dialog();

// definir valores
document.querySelector(seletor).value = valor;
$(selector).val(valor)

// chamadas AJAX
fetch(url, opcoes)
$.ajax(url);

Por mais que estes métodos funcionem, ja me deparei com casos que o framework (não só no APEX) mudou e com isso a funcionalidade deixou de acontecer ou teve um comportamento inesperado. Problemas como

  • seletores mudarem dentro do framework
  • links serem ajustados
  • componentes complexos serem reestruturados

Entre outras opções são comuns com o crescimento das plataformas, especialmente quando elas usam conjuntos de ferramentas de suporte.

Conclusão

Essa foi uma postagem rápida tentando falar um pouco da melhor forma de trabalhar como um desenvolvedor front end no APEX e mostrar algo, que na minha opinião, é muito importante e precisa ser feito com basntate estudo e atenção

Publicado em

Qwik.JS – Mais velocidade no site

Sobre o Qwik

O Qwik foi projetado para o tempo de carregamento de página mais rápido possível. Ele alcança isso fazendo com o HTML seja carregado todo primeiro enquanto deixa o máximo possível de javascript para após esta carga inicial.

Isso está em total contraste com as estruturas existentes que tratam a renderização do lado do servidor e o tempo de interação mais como uma reflexão tardia em vez de um objetivo principal, que orienta todas as outras decisões de design.

Replayable x Resumable

Esse dois são dificieis de traduzir… kkkkkk… Mas a grande sacada que o Qwik tenta trazer é essa questão de que o lado do cliente deve dar continuidade (resumable) ao trabalho entregue pelo servidor e o que temos na maioria dos casos é um custo de rexecução de lógica em duas pontas (replayable). Esse custo começa a crescer muito conforme o site cresce.

Mais informações

HTML-first, JavaScript last: the secret to web speed!

A first look at Qwik – the HTML first framework

Death by Closure (and how Qwik solves it)

Qwik: the answer to optimal fine-grained lazy loading

Publicado em

Conheça SvelteJS, um framework Frontend JavaScript

O Svelte é um framework com uma nova maneira de desenvolver interfaces de usuário. Frameworks tradicionais como React e Vue fazem a maior parte do trabalho no browser, o Svelte realiza esse trabalha em uma etapa de compilação que acontece quando você constrói a sua aplicação.

Sem utilizar técnicas como virtualização do DOM, o Svelte escreve código que cirurgicamente atualiza o DOM quando o estado do seu app muda. A diferença crucial entre o Svelte e outros frameworks JavaScript é que o Svelte converte o seu app para JavaScript ideal em tempo de construção, ao invés de interpretar seu código em tempo de execução. Isso significa que você não terá que considerar custo de performance das abstrações do framework, e você não terá penalidades quando seu app carregar pela primeira vez.

Você pode escrever o seu aplicativo do zero utilizando o Svelte, ou pode adicioná-lo de forma incremental à uma base de código já existente. Você também pode utilizar componentes como pacotes independentes, que funcionam em qualquer lugar, sem a sobrecarga de dependências de um framework convencional.

Componentes

No Svelte, uma aplicação é composta de um ou mais componentes. Um componente é um bloco de código reutilizável que encapsula HTML, CSS e JavaScript juntos em um arquivo .svelte.

Por exemplo:

<script>
    let nome = "mundo";
</script>

<h1> Olá Mundo!</h1>

E podemos utilizar uma referência à variável nome, criada acima!

<h1>Olá {nome}!</h1>

E isso nos trará o resultado:

Olá mundo!

Também podemos armazenar caminhos de url e pastas de armazenamento em variáveis, e utilizá-las em atributos de nossos elementos HTML, como:

<script>
    let caminhoOrigem = "imagem/foto.png";
</script>

<img src={caminhoOrigem}>

E isso funcionará. Mas o Svelte nos trará uma mensagem:

A11y: <img> element should have an alt attribute

Quando estamos criando web apps, é importante ter certeza que ele será acessível para todos os usuários, e isso inclui pessoas com dificuldades de visão ou movimento, ou até mesmo pessoas com boa conexão à internet e com bom hardware. A acessibilidade é de extrema importância no desenvolvimento e o Svelte auxilia avisando-o se você não escreveu elementos de marcação acessíveis.

Nesse caso, teremos:
<img src={caminhoOrigem} alt="Seu texto acessível aqui.">

Você pode fazer o download do Svelte diretamente no site em um arquivo .zip ou utilizando o npm e npx:

npx degit sveltejs/template my-svelte-project

cd my-svelte-project

npm install

npm run dev

Você pode verificar a documentação em: https://svelte.dev/tutorial/basics

Gostou deste artigo? Comente abaixo!

Referência: https://svelte.dev/

Publicado em

[TypeScript] no TDC São Paulo Online 2020

Na data do dia 26/08/2020 eu tive a oportunidade de palestrar no TDC são Paulo Online 2020.

Gostaria de agradecer ao Jackson Feijó, Adriano Rodrigues e à Talitha Barcellos que coordenaram as apresentações na Sala Microsoft pela oportunidade em participarmos como palestrantes nesta edição TDC.

A seguir vocês tem alguns links do material utilizado na minha apresentação:

Slides da minha apresentação:

Prints de tela retirado por amigos 😉

Image for post
Image for post
Image for postImage for post
Publicado em

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/

 

Publicado em

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!

Publicado em

Novidades Vue v3.0.0 “One Piece”

O Vue.js está lançando a versão 3.0.0 denominada One Piece. Esta versão fornece um desempenho aprimorado, menor tamanho de pacotes, uma melhor integração do TypeScript e novas APIs para lidar com casos de uso em uma grande escala, com base sólida para iterações futuras de longo prazo do framework.

O 3.0 representa mais de 2 anos de desenvolvimento. o Vue é um projeto criado para a comunidade e sustentado pela mesma. Tem uma missão de ser simples, acessível para que qualquer pessoa possa aprendê-la rapidamente. Conforme o crescimento da base de usuários, a estrutura também cresceu em escopo, adaptando-se às demandas crescentes, evoluindo para o chamado “Framework Progressivo”.

Módulos internos em camadas

Na versão 3.0, a nova arquitetura oferece uma melhor capacidade de manutenção, permitindo que os usuários finais reduzam a metade do tamanho do tempo de execução.

  • O compilador suporta transformações AST personalizadas;
  • O runtime principal fornece uma API de primeira classe para a criação de renderizadores personalizados, visando diferentes destinos de renderização.
  • O módulo reactivity exporta funções que fornecem acesso direto ao sistema de reatividade do Vue. Este pode ser usado como um pacote independente, emparelhando com outras soluções de modelos.

Melhorias de desempenho

O Vue 3 mostra melhorias significativas de desempenho em relação à versão 2 em termos de tamanho de pacotes. No Vue 3, foi utilizado “DOM virtual informado pelo compilador”. O compilador realiza otimizações agressivas, gerando código de função de renderização, elevando o conteúdo estático, deixando dicas de tempo de execução para tipos de vinculação, nivelando nós dinâmicos dentro de um modelo para reduzir o custo de passagem em tempo de execução.

Integração aprimorada de TypeScript

O código base do Vue v3.0.0 é escrito em TypeScript, com as definições de tipo testadas e agrupadas automaticamente, para que deste forma, estejam sempre atualizadas. A API de composição funciona muito bem com inferências desse tipo.

Próximos passos:

As próximas implementações e mudanças serão:

  • Compilação de migração;
  • Suporte IE11;
  • Integração de roteador e Vuex em novos devtools;
  • Outras melhorias na inferência de tipo de modelo no Vetur.

Você pode ver todas as novidades no github do VueJS!

Gostou desta notícia? Comente abaixo!

Referências: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

Publicado em

Uma nova fase para o Angular

Com as constantes evoluções do framework, equipe e forte conexão com a comunidade angular, o projeto pretende compartilhar mais sobre o trabalho e futuros projetos considerados. Será adicionada uma página no angular.io com o roadmap, que será mantida em andamento pelo menos trimestralmente.

E o que é o roadmap?

O Angular recebe uma grande variedade de solicitações de recursos, tanto de dentro do Google quanto da comunidade. A lista de projetos contém tarefas de manutenção, refatoração de código, melhorias de desempenho e outras melhorias. Eles reúnem representantes de relações com desenvolvedores, gerenciamento de produtos e engenharia para priorizar a lista. Conforme novos projetos entram na fila, ocorre um posicionamento com base na prioridade relativa de outros projetos. Você pode verificar neste link quais são os projetos que serão lançados em atualizações futuras.

O Roadmap:

Você pode encontrar os projetos do backlog que já estão em andamento e também os que trabalharemos em breve.Os trabalhos serão executados conforme a lista de prioridades. Para maior transparência, foram inclusos trabalhos que afetam o próprio desenvolvimento do angular e projetos que se aplicam apenas ao desenvolvimento interno do Google.

O documento foi dividido em duas seções que representam todos os projetos em andamento em uma seção e, na outra, os projetos futuros. Você pode esperar que o trabalho chegue em versões futuras, dependendo de quando forem concluídos e de seu impacto na API pública do Angular. Como o projeto segue um controle de versão semântico, os novos recursos chegarão em versões menores ou maiores e com alterações que podem ser incompatíveis com versões anteriores na versão principal.

O que é controle de versão semântico?

Com a curva de crescimento de um software, novas dependências, novos pacotes irão ser integrados ao software. Se as especificações das dependências forem rígidas, pode ocorrer o bloqueio de versão. Se forem especificadas vagamente, você terá uma promiscuidade da versão. Como solução, cria-se um conjunto de regras e requisitos que ditam como os números de versões são atribuídos e incrementados. Para mais informações, acesse: https://semver.org/

Gostou desta notícia? Comente abaixo!

Referências:

Publicado em

Angular vs ReactJS: Qual o Framework Front-End mais requisitado de 2020

Olá pessoal, o primeiro semestre de 2020 foi uma época cheia de mudanças. Ainda assim, permanece a eterna batalha entre Angular e React. Antes de iniciar a comparação, esclareceremos alguns pontos sobre ambas as tecnologias:

Angular:

Desenvolvido pelo Google e lançado pela primeira vez em 2010, é um framework de desenvolvimento front-end com uma boa estrutura, um ecossistema próprio, regras rígidas e um estilo de código declarativo. Possui uma profunda curva de aprendizado, bastante difícil, mas depois de possuir todas as possibilidades do Angular, ele auxiliará a criação do seu projeto.

Baseado na arquitetura MVC (Model-View-Controller), fornece aos desenvolvedores as peças fundamentais que são necessárias para projetar aplicativos móveis e da web.

React

React foi criado em 2011 e foi criado pelo Facebook. É uma biblioteca front-end que oferece uma oportunidade de construir uma excelente UI. Fácil de ler, escrever e integrar com outras estruturas JavaScript. Com React, você não utiliza somente a lógica do desenvolvedor, mas também a imaginação. Possuindo um ambiente de desenvolvimento flexível, amplia os horizontes de pensamento do desenvolvedor.

Oportunidades

Angular:

Desenvolvido para facilitar a criação de aplicativos nativos e híbridos ricos em recursos, como um SPA ou MPA.

React:

Tem por objetivo expandir as interfaces de usuário complexas, principalmente em apps web e móveis para Android e iOS.

Template Language

Angular:

Utilizando TypeScript, é adequado para desenvolvimento de apps complicados e você não queira perder seu tempo detectando bugs, pois o TypeScript ajuda a detectá-los mais cedo.

React:

Escrito em JavaScript, pode ser utilizado com diversos tipos de aplicações devido ao suporte e integração em outras linguagens.

Performance

Angular:

Funcionando de maneira mais devagar que o React, mas ainda com velocidade satisfatória, o Angular inclui todas as etapas, desde a criação de um projeto até a otimização de código.

React:

Rápido devido à forma como foi concebido, adiciona eficiência e simplicidade ao desenvolvimento de apps.

E qual escolher para ser um desenvolvedor sob demanda?

Escolha o Angular quando precisar:

  • Desenvolver aplicativos ricos em recursos;
  • Estrutura confiável e estável;
  • Desenvolver um app em tempo real, com base em bate-papo ou mensagens;
  • Aplicativos nativos, híbridos ou web que deveriam ser projetos de investimento substanciais;
  • Código em TypeScript;
  • Programação orientada a objetos.

Escolha o Angular quando precisar:

  • Desenvolver app’s modernos e leves a nível empresarial em um curto espaço de tempo;
  • Estrutura flexível, fornecendo soluções seguras de desenvolvimento de sites;
  • Aplicativos de plataforma cruzada ou SPA;
  • Expander a funcionalidade do aplicativo existente;
  • Forte apoio da comunidade.

Tendências:

De acordo com o NPM Trends, o React é mais popular em 2020:

Tendências NPM

O StackOverflow Trends oferece uma visão diferente da situação. De 2014 a 2019, o React e Angular tiveram quase a mesma popularidade, mas o React se tornou um líder nesta corrida:

Tendências de estouro de pilha

Conclusão:

Levando em consideração as estatísticas, o React é a estrutura mais demandada em 2020. Mesmo assim, escolha o seu framework ou biblioteca de acordo com sua necessidade de trabalho e experiência.

Gostou deste artigo? Comente abaixo!

Referências: https://techstory.in/angular-vs-reactjs/

Publicado em

Criando Auto-Refresh com Live-Server (NodeJS)

Olá pessoal,  neste artigo criaremos um servidor com NodeJS que atualizará a sua página web automaticamente sempre que houver uma alteração no código. Para isso, utilizaremos o Live-server, um pacote para Node que auxilia na criação de um servidor em tempo real.

O Live-Server é um pequeno servidor para desenvolvimento com a capacidade de atualizar a página ao vivo, dispensando a necessidade de instalação de plug-in para o navegador ou adicionar códigos para inicializar a função de atualização de página.

Para instalar o live-server, você precisa do npm. Utilize o seguinte código para instalação:

npm install -g live-server

Começando:

Crie uma pasta com o nome do seu projeto. Neste tutorial, criarei uma pasta chamada Live_node. Precisamos criar o nosso arquivo package, que conterá os dados de nosso projeto. Utilize o seguinte comando para criar o seu package de forma rápida:

npm init --yes

Com nosso package criado e dependência instalada, vamos começar criando um arquivo index.html. Esse arquivo será nossa página principal.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live_node</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
  <h1> Olá Mundo </h1>  
</body>
</html>

Criaremos também um main.css para estilizar nossa página. Adicione os seus arquivos index.html e main.css dentro de uma pasta chamada public.

No nosso arquivo main.css, adicionaremos um background-color no nosso body e também, alteraremos a cor das letras:

body{
    background-color: black;
    color: #fff;
}

Com isso, temos nosso Body na cor preta e as letras na cor branca.

Agora, no seu terminal, adicione o seguinte comando:

live-server public

Esse comando fará nosso código rodar, atualizando o navegador automaticamente. É importante salientar que este comando deve ser executado em modo administrador no seu powershell/prompt/terminal. Pode acontecer de ocorrer a necessidade de adicionar o npm em suas variáveis de ambiente no windows. Caso você não saiba como fazer isso, este link pode ajudá-lo a realizar este procedimento.

Caso você não queria adicionar o live-server globalmente na sua máquina, e sim somente no seu projeto, retire o -g na instalação do server. Caso você opte por esta opção, um procedimento deve ser feito para que ocorra a execução e atualização em tempo real da sua página. No seu arquivo package.json, altere o seguinte:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

Para:

"scripts": {
  "dev": "live-server public"
},

E, por fim, no seu terminal, execute o comando:

npm run dev

Este comando iniciará o script “dev” que inserimos no nosso package.json e, com isso, iniciará o live-server! O live-server inicia por padrão na porta 8080, mas você pode alterá-lo incluindo no seu script do package.json:

"scripts": {
  "dev": "live-server public --port=3000"
},

Com isso, você pode escolher a porta a ser utilizada. Para mais detalhes sobre o live-server, acesse a documentação em:

https://www.npmjs.com/package/live-server

Gostou deste artigo? Comente abaixo!