JavaScript

Conhecendo o MEAN Stack

De software livre e código aberto, o MEAN Stack é um conjunto de soluções JavaScript para a construção de páginas web dinâmicas e aplicações web que utilizam o JavaScript em todas as camadas da aplicação.

O termo MEAN foi utilizado pela primeira vez em 2013 pelo desenvolvedor Valeri Karpov e suas siglas significam: M – MongoDB, E – Express.js, A – Angular e N – Node.js.

Basicamente, o MEAN funciona da seguinte forma:

como funciona o MEAN stack?

O cliente utiliza a aplicação front-end desenvolvida em angular que envia a requisição feita pelo cliente para o node, que vai tratar a requisição e, através do express, acessa o banco de dados mongo para obter os dados a serem retornados.

A partir daí, o Express retorna os dados obtidos no banco para o node, que trata como a resposta da requisição será feita e, utilizando o angular, exibe os dados para o usuário.

Como vimos anteriormente, o MEAN utiliza as tecnologias Angular, Node.js, Express.js e MongoDB. Abaixo veremos um pouco sobre cada uma delas.

Ferramentas que compõe o MEAN

MongoDB

MongoDB

De código aberto, multiplataforma e lançado em 2009, o MongoDB é considerado um “líder” no quesito SGBD NoSQL.

É um banco de dados orientado a documentos, baseado no formato JSON (JavaScript Object Notation) e possui uma curva de aprendizagem baixíssima.

Dentre suas principais características, podemos citar:

  • Totalmente gratuito;
  • Possui uma baixa curva de aprendizagem, como dito acima;
  • Fácil escalabilidade horizontal;
  • Multiplataforma;
  • Suporte para transações ACID multi-documento;
  • Consultas suportam funções JavaScript personalizadas, entre outros.

É um SGBD muito utilizado tanto por pequenas quanto por grandes empresas, como mostra em seu site, como: Facebook, Ebay, Google, Adobe, entre outras.

O download do MongoDB pode ser feito em seu site, onde é possível encontrar toda sua documentação, suporte e muito mais.

MongoDB - Desenvolvedor
Curso de MongoDB - Desenvolvedor
CONHEÇA O CURSO

Express.js

ExpressJS

O Express.js por sua vez é um Framework para o desenvolvimento de aplicações JavaScript com o Node.js.

De código aberto, sobre a licença MIT, o Express.js foi desenvolvido para otimizar a construção de aplicações web e APIs, tornando-se um dos Frameworks mais populares da internet e que utiliza o Node para execução do javascript como linguagem de back-end.

Dentre suas principais características, podemos citar:

  • Possui um sistema de rotas completo;
  • Possibilita o tratamento de exceções dentro da aplicação;
  • Permite a integração de vários sistemas de templates que facilitam a criação de páginas web para suas aplicações;
  • Gerencia diferentes requisições HTTP com seus mais diversos verbos;
  • Feito para a criação rápida de aplicações utilizando um conjunto pequeno de arquivos e pastas;
Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Angular

Angular

Angular é um framework para o desenvolvimento de aplicações web, que utiliza o JavaScript para desenvolvimento, tendo como principal objetivo o desenvolvimento de aplicações web mais robustas utilizando o JavaScript.

Foi criado por Misko Hevery e Adams Abrons em 2009, com um projeto inicial de que tinha como principal objetivo facilitar a criação de aplicações web.

O Angular foi construído sob o padrão MVVM ( Model-View, View-Model) abstraindo a camada de controle dos demais padrões conhecidos.

Dentre suas principais características, podemos citar:

  • É Open Source;
  • Mantido pelo Google;
  • Arquitetura da aplicação em camadas bem definidas;
  • Permite a criação modular e de componentes reutilizáveis;
  • Já possui a infraestrutura para integração com back-end;
  • Facilita a etapa de testes de forma automatizada.
Angular - Introdução
Curso de Angular - Introdução
CONHEÇA O CURSO

Node.js

NodeJS

O Node.js por sua vez, é uma plataforma open source que permite a execução de código JavaScript a nível front-end e back-end.

Em palavras mais simples, o Node.js é uma forma de executar o JavaScript do lado do servidor de uma aplicação.

Teve seu lançamento em 2009 sobre a licença MIT e é utilizado por diversas grandes empresas como Linkedln, Groupon, PayPal, entre outras.

O Node.js possui aplicabilidade em diversos meios, dentre eles podemos citar:

  • Criação de aplicações de chats e mensagens instantâneas;
  • Criação de API´s escaláveis;
  • Aplicações web que funcionam em real-time;
  • Aplicações CLI (Client Line Interface), entre outros.
Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Podemos então concluir…

O uso do Javascript para criação de aplicações cresceu muito nos últimos anos. O que antes era apenas para o desenvolvimento front-end, hoje é utilizado para o desenvolvimento completo de diversos tipos de softwares. O MEAN é um ótimo exemplo deste poder do javascript, com ele conseguimos trabalhar com a linguagem em todas as camadas da aplicação.

NPM – Você sabe o que dá para fazer com ele?

Olá Web Developers! Há um tempo falamos aqui sobre 10 truques do NPM. Mas você sabe o que dá para fazer com ele?

Gerenciamento de Dependências

O uso mais básico do NPM é o gerenciamento de dependências. Ou seja, você pode gerenciar o que deve ser baixado para seu projeto usar, como bibliotecas e frameworks. Todas as dependências ficam listadas no arquivo package.json.

Não só podemos baixar esses códigos do servidor do NPM, como também podemos baixar de outros lugares, como diretamente do Github.

Execução de Comandos

No package.json você pode definir uma lista de scripts. Isso é muito útil caso tenha algum script que você precise executar com frequência. Ferramentas como VS Code e WebStorm já interpretam a lista de scripts e disponibilizam para você executar com apenas um clique.

Mas não só podemos escrever pequenos scripts, como também podemos executar qualquer comando disponível em nossa máquina. Portanto, caso você tenha algum programa que pode ser executado pela linha de comando, mesmo que não seja JavaScript, poderá chamá-lo pelo NPM.

Automação de Tarefas

Caso você precise minificar arquivos, transpilar TypeScript e outras coisas, não precisa necessariamente configurar alguma ferramenta como Gulp ou WebPack. Basta baixar uma ferramenta que faça esse trabalho e chamá-la pelo NPM. Em certos casos a configuração da tarefa pelo NPM fica mais simples do que configurar essas outras ferramentas.

Npm - Gerenciador de pacotes para JavaScript
Curso de Npm - Gerenciador de pacotes para JavaScript
CONHEÇA O CURSO

Criação de Ferramentas

Você pode criar programas e instalá-los na máquina de forma bem simples. Já que podemos instalar os pacotes do NPM globalmente e depois chamá-los pelo terminal de qualquer lugar, isso significa que podemos criar nossas próprias ferramentas, que poderão ser instaladas e executadas de forma bem simples, com um simples comando.

Um exemplo de uma ferramenta nossa que usamos muito nos cursos é o Tw Dev Server, que inicia um servidor estático com Live Reload e também mantém navegadores sincronizados com cada ação que você fizer. Além disso, ele também simula um servidor com API e banco de dados.

Tw Dev Server - tela de desenvolvimento com navegadores sendo atualizados automaticamente

E não é apenas programas de linha de comando. Também podemos integrar com o Electron para criar aplicações Desktop. Por exemplo, o MemoPlay, programa que criei há algum tempo e que uso para gravar as aulas dos cursos aqui da TreinaWeb.

Memoplay Screen Recorder

E o que mais?

Bom, nessa pequena lista vimos o que dá para fazer com o npm. Porém, dentro de cada um desses itens há uma infinidade de possibilidades.

Já que foi dito que podemos instalar e executar qualquer programa, seja baseado em linha de comando ou possuir interface gráfica, isso já nos trás muitos poderes. Veja alguns exemplos mais usados com desenvolvimento de software:

  • Build de aplicações
  • Deploy de aplicações
  • Execução de Testes
  • Análise de qualidade de código
  • Automação de tarefas
  • Conversão de arquivos
  • Geração de arquivos e estrutura de projetos
  • Geração de certificados
Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

O que é Jasmine?

Tendo a sua primeira release publicada em agosto de 2009 no GitHub, o Jasmine é uma biblioteca de testes JavaScript, de código aberto que tem como principal objetivo a execução em qualquer plataforma habilitada ao JavaScript.

A realização de testes no desenvolvimento de uma aplicação é de fundamental importância para o seu resultado final. À medida em que todo o código vai sendo desenvolvido, a sua complexidade vai aumentando, desta forma, a realização de testes vai sendo primordialmente requerida.

O Jasmine é um Framework que serve para criar testes automatizados no JavaScript e é um dos mais utilizados para tal finalidade.

JavaScript - Testes automatizados com Jasmine
Curso de JavaScript - Testes automatizados com Jasmine
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

De volta ao Jasmine

Como dito anteriormente, o Jasmine é bastante utilizado na realização de testes automatizados em JavaScript. Isso quer dizer que é utilizado o Framework para analisar toda a funcionalidade da aplicação a fim de verificar se a lógica de negócio proposta está funcionando de acordo com o esperado.

Sabemos da importância dos testes de softwares para a garantia da qualidade final de todo o projeto, para que todos os resultados esperados sejam atingidos, desta forma, escrever testes automatizados é de fundamental importância para o desenvolvimento de um software.

Características do Jasmine

Podemos dizer que a utilização do Jasmine em um projeto traz diversas vantagens, uma delas é a sua utilização em testes JavaScripts. Mas não é a única, dentre suas diversas características podemos citar:

  • Por não possuir dependências externas, possui baixa sobrecarga;
  • Já vem completo para que os testes sejam realizados sem a necessidade de incluir alguma outra ferramenta JavaScript para tal finalidade;
  • Não há necessidade da utilização do DOM;
  • É possível a execução de testes em Node.js com a mesma estrutura utilizando diretamente no navegador;
  • Conta com o script próprio para a execução de testes;
  • Possui sintaxe clara e limpa para execução de testes, entre outros.
JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Sintaxe do Jasmine

Como podemos perceber abaixo, o Jasmine possui um código de fácil entendimento, sintaxe simples e uma estrutura de desenvolvimento orientada por comportamento para testar o código JavaScript. Como disse anteriormente, não é necessário uma outra estrutura JavaScript e não requer o uso de DOM.

describe("A suite is just a function", function() {
  var a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

Podemos então concluir…

Como vimos neste artigo, o Jasmine é um ótimo framework de testes automatizados para o Javascript. Sabemos que testar nossas aplicações é algo de extrema importância, o que torna o Jasmine ainda mais importante para o ecossistema Javascript.

No site do Jasmine é possível acessar toda a sua documentação, releases, suporte, dentre outros.

O que é PWA?

Progressive Web App ou simplesmente PWA é uma metodologia utilizada por desenvolvedores que busca oferecer ao usuário uma experiência similar ao uso de um aplicativo nativo sem a necessidade de instalação.

Em palavras mais simples, o usuário estará acessando uma página web utilizando o seu smartphone, porém vivendo a experiência de um usuário que está acessando um aplicativo nativo, já que os navegadores atuais colaboram com seus recursos modernos para tornar esta experiência ainda mais agradável e intuitiva.

PWA - Progressive Web Apps
Curso de PWA - Progressive Web Apps
CONHEÇA O CURSO

Principais características de um PWA

Diversas são as empresas que utilizam PWA, dentre elas: Pinterest, Twitter, Trivago, Lancôme, entre outras.

Dentre as suas diversas características listadas de acordo com o Google Developers, podemos citar:

  1. Progressivo: Funcional em qualquer que seja o contexto independente do navegador que o usuário esteja utilizando.
  2. Responsivo: Adaptação do site a qualquer tamanho de tela, seja um smartphone ou uma TV Smart, por exemplo.
  3. Independente de conectividade: Utiliza tecnologias que garantem o funcionamento das principais funcionalidades da aplicação sem a necessidade de conectividade, podendo também ser acessado por redes que possuem baixa qualidade.
  4. Semelhante a aplicativos: Como disse anteriormente, o usuário terá a mesma experiência que utilizar um aplicativo (mesma estrutura visual, por exemplo).
  5. Sempre atualizados: Como uma PWA nada mais é que um site que se adapta à tela do smartphone, todas as alterações feitas no site são refletidas na PWA.
  6. Seguro: Pois são fornecidas pelo protocolo HTTPS.
  7. Descobríveis: Aplicações PWA são reconhecidas facilmente pelos mecanismos de buscas como um App.
  8. Reenvolvente – Facilita o reengajamento com recursos como notificações push.
  9. Instalável: Mesmo não havendo a necessidade de instalação, caso o usuário queira fixá-lo em sua tela principal, é possível, dispensando assim a necessidade de abrir o navegador. O mesmo irá se comportar semelhante a um aplicativo (fixado em tela principal).
  10. Linkável: Compartilhado facilmente por URL.

Vantagens de um PWA

As características por si só já são bastante vantajosas na utilização do PWA, mas podemos incrementar esta lista com as seguintes vantagens:

  • A complexidade do desenvolvimento de um PWA comparado a um aplicativo nativo é um dos grandes atrativos em sua utilização, já que basta alguma alterações em uma página web para que ela se comporte como uma PWA;
  • Tempo estimado para o seu desenvolvimento é menor do que o tempo utilizado na construção de um aplicativo mobile;
  • Possui foco no baixo consumo de dados, permitindo que diversos usuários tenham acesso à aplicação sem consumir muita banda;
  • Menor custo para o desenvolvimento, já que, caso a empresa já possua um site, o mesmo poderá ser “transformado” em um PWA, diminuindo assim os custos com uma equipe de desenvolvimento mobile, entre outros.
JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Desvantagem de um PWA

Como já dizia o ditado, “nem tudo na vida são flores”, e isso também pode ser aplicado ao PWA. As suas vantagens são diversas, como citadas acima, mas as desvantagens também existem e podemos listá-las como:

  • A principal desvantagem de um PWA é a limitação no uso de recursos de hardware dos dispositivos. Caso uma aplicação necessite acessar diversos deles, o aplicativo nativo seria o mais indicado;
  • Não constam em lojas de aplicativos e por isso não podem ser baixados diretamente por lá;
  • Por ser utilizado direto no navegador, não possuem integração com qualquer outro aplicativo;
  • Não possui interface tão fluida quanto a de uma aplicação nativa, entre outros.

Podemos concluir que…

O que devemos pensar é que o desenvolvedor não deve optar pela escolha de um PWA ou de uma aplicação nativa, mas sim analisar a sua situação como um todo na hora de se decidir qual utilizar.

A maioria das aplicações possuem as duas opções, tanto o PWA quanto a aplicação nativa, pois como vimos durante todo o artigo, as vantagens de uma aplicação nativa no momento também se sobressaem à criação de um PWA, já que o mesmo também possui algumas limitações.

Desta forma, entender as características de um PWA em relação a uma aplicação nativa é uma excelente forma de adequar às suas reais necessidades.

Uma aplicação nativa trará todos os recursos disponíveis do seu projeto, enquanto a PWA trará toda a velocidade e será acessível a todos os usuários (principalmente aos que possuem acesso limitado à conexão). Antes de se perguntar se deve transformar o seu site em um PWA, é importante analisar as suas reais necessidades em transformá-lo e adequar o seu negócio à necessidade do seu cliente, que é o mais importante a ser considerado! 🙂

O que é o Express.js?

Tendo sua versão inicial lançada no ano de 2010, o Express.js (ou somente Express) é um Framework para o desenvolvimento de aplicações JavaScript com o Node.js.

De código aberto, sobre a licença MIT, o Express.js foi desenvolvido para otimizar a construção de aplicações web e APIs, tornando-se um dos Frameworks mais populares da internet e que utiliza o Node para execução do javascript como linguagem de back-end.

Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

Um pouco sobre o Node.js

O Node.js por sua vez, é uma plataforma open source que permite a execução de código JavaScript a nível front-end e back-end.

Em palavras mais simples, o Node.js é uma forma de executar o JavaScript do lado do servidor de uma aplicação.

Teve seu lançamento em 2009 sobre a licença MIT e é utilizado por diversas grandes empresas como Linkedln, Groupon, PayPal, entre outras.

O Node.js possui aplicabilidade em diversos meios, dentre eles podemos citar:

  • Criação de aplicações de chats e mensagens instantâneas;
  • Criação de API´s escaláveis;
  • Aplicações web que funcionam em real-time;
  • Aplicações CLI (Client Line Interface), entre outros.

Possuímos aqui em nosso blog um artigo sobre Node.js, caso queira acompanhar.

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

De volta ao Express.js

O Express.js é um Framework rápido e um dos mais utilizados em conjunto com o Node.js, facilitando no desenvolvimento de aplicações back-end e até, em conjunto com sistemas de templates, aplicações full-stack.

Escrito em JavaScript, o Express.js é utilizado por diversas empresas ao redor do mundo, dentre elas a Fox Sports, PayPal, IBM, Uber, entre outras.

Muito popular tanto em grandes empresas quanto na comunidade, o Express facilita a criação de aplicações utilizando o Node em conjunto com o JavaScript, tornando este ecossistema ainda mais poderoso.

Características do Express.js

O Express é um framework incrível e possui diversas características que facilitam o desenvolvimento de nossas aplicações. Dentre suas principais características, podemos citar:

  • Possui um sistema de rotas completo;
  • Possibilita o tratamento de exceções dentro da aplicação;
  • Permite a integração de vários sistemas de templates que facilitam a criação de páginas web para suas aplicações;
  • Gerencia diferentes requisições HTTP com seus mais diversos verbos;
  • Feito para a criação rápida de aplicações utilizando um conjunto pequeno de arquivos e pastas;

Podemos concluir que…

O Express.js é um ótimo Framework para o desenvolvimento de aplicações utilizando o Node. No site do Express.js podemos acessar toda a sua documentação, tutoriais, sua lista de recursos e muito mais.

React 17 – Conheça o que vai mudar no JSX

Olá Web Developers! O React 17 foi lançado e não trouxe nenhuma funcionalidade nova. Porém, ele veio com algo que vai mudar como o JSX funciona e um detalhe de como você lida com ele.

Como o JSX funcionava até agora

Os navegadores não entendem JSX. Portanto, é necessário que uma ferramenta como Babel faça a “tradução” do JSX para JavaScript comum.

Isso significa que quando você escreve o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Teremos o seguinte resultado:

function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

Note que o JSX é substituído por React.createElement(). Por consequência, mesmo que você não fosse usar algo do React, era necessário importá-lo:

import React from 'react';

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Caso você não importasse, você teria um erro na hora da transpilação. E muitos iniciantes no mundo do React já tiveram esse mesmo problema, sem entender onde estavam errando.

React - Despertando o Poder dos Hooks
Curso de React - Despertando o Poder dos Hooks
CONHEÇA O CURSO

O novo JSX Transform do React 17

No React 17 em diante não vamos mais precisar importar o React para apenas usar JSX. A fim de simplificar as coisas, o novo transformador de JSX irá injetar automaticamente as funções necessárias.

Então o seguinte código:

function MeuComponente(){
    return <div>Olá Web Developers!</div>;
}

Vai se tranformar em:

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

E o melhor de tudo: você não precisa mudar nada no seu código, pois isso é compatível com os códigos já existentes!

Se acaso você quiser atualizar seu código, a própria equipe de desenvolvimento do React criou um script que remove automaticamente as importações não usadas do React. Basta executar npx react-codemod update-react-imports.

Mas existe alguma vantagem no novo JSX Transform?

Sim! Além de não precisarmos mais importar o React quando não formos usá-lo, também teremos uma melhora no tamanho dos arquivos.

// antigo
function MeuComponente(){
    return React.createElement('div', null, 'Olá Web Developers!');
}

// novo
function App() {
  return _jsx('div', { children: 'Olá Web Developers!' });
}

Além disso, também foi dito que o formato anterior não possibilitava certas melhorias e simplificações, que agora com o novo formato serão possíveis.

De acordo com a equipe de desenvolvimento do React, esse novo formato também vai permitir futuras melhorias e até a redução do número de conceitos que as pessoas precisam saber para aprender React.

Desenvolvedor React
Formação: Desenvolvedor React
O React é utilizado por várias empresas em suas aplicações por sua simplicidade e poder, como Facebook, Instagram, Whatsapp, Netflix e DropBox.Nesta formação veremos todo poder desta biblioteca tão poderosa.
CONHEÇA A FORMAÇÃO

O que é Ember.js?

Ember.js ou simplesmente Ember é um framework JavaScript para a construção de aplicações robustas, tendo como principal objetivo o aumento da produtividade no desenvolvimento de aplicações web.

EmberJS - Criação de interfaces web
Curso de EmberJS - Criação de interfaces web
CONHEÇA O CURSO

Relembrando Framework

Aqui no blog já possuímos um artigo que aborda “Para que serve um Framework”, mas em palavras mais simples, o framework é um facilitador no desenvolvimento de diversas aplicações e, sem dúvida, sua utilização poupa tempo e custos para quem utiliza, pois de forma mais básica, é um conjunto de bibliotecas utilizadas para criar uma base, onde as aplicações são construídas, um otimizador de recursos.

Possui como principal objetivo resolver problemas recorrentes com uma abordagem mais genérica. Ele permite ao desenvolvedor focar nos “problemas” da aplicação, não na arquitetura e configurações.

De volta ao Ember.js

De código aberto, lançado em 2011 sobre a licença MIT, o Ember.js permite aos desenvolvedores a criação de interfaces de usuários ricas e que funcionem em qualquer dispositivo.

Utilizada por diversas empresas como: Linkedin, Netflix, Heroku, Microsoft, Square, entre outras, conta com uma imensa comunidade ativa de desenvolvedores.

Apesar de ser um framework com foco para web, com o Ember.js também é possível a criação para dispositivos móveis ou desktop, sendo o escolhido na criação do Apple Music para desktop, o maior case de sucesso do Framework.

Possuindo similaridade com o Rails, o Ember.js é baseado na arquitetura Model–view–viewmodel (MVVM).

Padrão MVVM : Model-View-ViewModel

O Ember.js utiliza o padrão MVVM, que é um padrão de arquitetura de software que visa separar o desenvolvimento de uma aplicação em camadas bem definidas, similar aos padrões já existentes, como o MVP e o MVC, muito importante para o desenvolvimento mobile e web.

Foi um padrão criado para aplicativos Windows Presentation Foundation (WPF) utilizando XAML para separar a interface do usuário (UI) da lógica de negócios.

Basicamente, o MVVM funciona da seguinte forma:

Padrão MVVM

  • Model: Parte lógica da aplicação que gerencia o comportamento dos dados, ou seja, todos os seus recursos (consultas ao BD, validações, notificações, etc). A camada de model apenas tem o necessário para que tudo aconteça, mas não sabe quando irá executar.

  • View: Camada de interface do usuário. É a estrutura, o layout e a aparência do que o usuário vê na tela, normalmente representadas por páginas HTML.

  • ViewModel: Camada responsável por determinar quando as ações serão executadas em uma aplicação. É esta camada que faz o “meio de campo” entre as camadas Model e View para exibição dos dados em uma aplicação.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Características do Ember.js

Diversas são as características do Ember.js, dentre elas podemos citar:

  • Adoção de boas práticas de desenvolvimento;
  • Possui o Ember CLI, interface de linha de comando para criação e gerenciamento de projetos Ember;
  • Ember Data, biblioteca para trabalhar com a camada de models em aplicações Ember;
  • Possui sistema de roteamento complexo para determinar as diferentes rotas da aplicação;
  • Estabilidade;
  • Atualização contínua, com lançamento de novas versões a cada 6 semanas;
  • Escrito em JavaScript;
  • Comunidade ativa, entre outras.

Podemos então concluir:

Como vimos neste artigo, o Ember.js é um ótimo Framework JavaScript e utilizado por grandes empresas. Poderoso e com um grande ecossistema, o Ember é uma ótima alternativa para construção de aplicações web.

No site do Ember.js é possível encontrar toda a sua documentação, releases, blog, comunidade e muito mais.

Instalação do Node.js – Windows, Mac e Linux

O Node.js é uma ferramenta que nos permite executar JavaScript fora do navegador, no lado do servidor. Ele foi um dos responsáveis por popularizar o JavaScript em diversas áreas. Podemos criar muito mais com JavaScript graças ao Node.js. Nesse post veremos como fazer a instalação do Node.js em Windows, Mac e Linux.

Acesse o site do Node, https://nodejs.org/en/. Assim que entrar no site, você verá dois botões, indicando duas versões para baixar (LTS e Current).

  • LTS é uma versão que tem um suporte mais prolongado, porém, costuma ser mais antiga. Ela é focada em estabilidade e segurança. Essa versão é mais recomendada para grandes projetos, que precisam de uma versão mais estável e que não podem ficar sendo atualizados.
  • Em contrapartida temos a Current, a versão mais atual com todas as novas funcionalidades, muito indicada para testes, estudos e novos projetos. Cada nova versão pode ter atualizações que podem quebrar um código que foi escrito em uma versão mais antiga. Portanto, é preciso tomar cuidado ao atualizar projetos para novas versões.

Com o propósito de estudos, recomendo sempre usar a Current. Desse modo você sempre terá as funcionalidades mais recentes.

Instalação em Windows

Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Windows. Assim como é comum nos instaladores do Windows, basta seguir clicando nos botões Next até chegar ao final da instalação.

Assim que a instalação for finalizada, precisaremos testar se tudo está certo. Então, inicie o seu terminal. Pressione Tecla Windows + R, com a finalidade de abrir o programa Executar. Escreva powershell e aperte a tecla Enter.

Executar com o comando "powershell"

Em seguida, no terminal digite node -v e aperte a tecla Enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!

Powershell com comando "node --version"

Node.js Completo
Curso de Node.js Completo
CONHEÇA O CURSO

Instalação em Linux

Podemos instalar o Node.js facilmente com o próprio gerenciador de pacotes do Linux. Inicie o terminal pressionando Ctrl + Alt + T.

Em seguida, no terminal digite o comando:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Depois execute:

sudo apt-get install -y nodejs

Logo depois da instalação, no terminal digite node -v e aperte a tecla Enter. Se acaso a versão do Node for exibida, sua instalação foi feita com sucesso!

Instalação em Mac

Logo após selecionar uma versão (LTS ou Current), será iniciado o download do instalador para Mac (arquivo .pkg). Assim que abrir esse arquivo, o instalador será iniciado.

Instalador do Nodejs para Mac

Basta ir clicando para continuar até ele finalizar a instalação.

Precisamos testar se tudo está certo. Então, inicie o seu terminal. Para isso, pressione Command + Barra de Espaço. Digite terminal e pressione Enter.

Em seguida, no terminal digite node -v e aperte a tecla Enter. Caso seja exibida a versão do Node, sua instalação foi feita com sucesso!

Caso você precise ter mais de uma versão do Node.js em sua máquina, confira nosso post sobre como instalar várias versões do Node.js usando o NVM.

Express - Otimização de aplicações Node.js
Curso de Express - Otimização de aplicações Node.js
CONHEÇA O CURSO

Qual a diferença entre ECMAScript e JavaScript?

Olá Web Developers! Se você estuda JavaScript, deve ter em algum momento se deparado com o termo ECMAScript. Será que eles são a mesma coisa? Por quê temos esses dois nomes tão diferentes? Nesse post vamos entender qual a diferença entre ECMAScript e JavaScript.

A Criação do Nome JavaScript

A fim de entender a diferença entre ECMAScript e JavaScript, precisamos entender brevemente como o JavaScript foi criado.

Assim que a Internet foi liberada comercialmente para todos, no começo dos anos 1990, a Netscape surgiu com seu navegador Netscape Navigator. Havia sempre o lançamento de novas funcionalidades. A fim de permitir interação com o usuário na web (e principalmente permitir validação de formulários), a Netscape resolveu criar uma linguagem de programação que ficaria embutida no navegador.

Assim surgiu a ideia da linguagem Mocha (nome de um tipo de café). Logo em seguida esse nome foi trocado para LiveScript. Ao mesmo tempo uma nova linguagem estava fazendo muito sucesso, o Java. Isso porque na época era comum a necessidade de escrever um código para cada sistema operacional, e com o Java podíamos programar uma única vez e executar nosso código em qualquer lugar.

Com a finalidade de aproveitar carona na fama, a Netscape resolveu mudar o nome da sua linguagem para JavaScript. Claro que isso foi com aprovação da Sun Microsystems, sua parceira contra a Microsoft e seu recém lançado Internet Explorer. E isso pode causar confusão em muitos iniciantes até hoje, pois é comum pensar que as duas linguagens possuem alguma relação. O JavaScript fez sua primeira aparição no Netscape Navigator 2.0, em 1995.

Em resumo, esse nome foi apenas uma jogada de marketing.

Uma outra curiosidade é que o nome Java vem da Ilha de Java, principal ilha da Indonésia. O café que ela produzia era tão famoso mundialmente entre os séculos XIX e XX que até hoje a palavra “Java” é sinônimo de café em alguns países.

JavaScript Básico
Curso de JavaScript Básico
CONHEÇA O CURSO

Oracle, a dona da marca JavaScript

Quem criou a linguagem Java foi a Sun Microsystems. A empresa registrou essa marca e outras palavras relacionadas. Entre elas estava o nome JavaScript.

Na época a Microsoft também resolveu adicionar uma linguagem ao seu navegador. Ela fez engenharia reversa no interpretador de JavaScript. A fim de evitar problemas com a Sun, a Microsoft chamou sua linguagem de JScript.

Em 2009 a Oracle comprou a Sun Microsystems. Como resultado, a Oracle passou a ser dona da marca JavaScript. Você pode ver todas as informações sobre o registro sobre o nome JavaScript aqui. Conforme essas informações, os direitos sobre o nome JavaScript continuam sendo renovados até hoje pela Oracle.

Isso até causou um problema em 2018 na App Store, quando um desenvolvedor lançou um aplicativo que possuía a palavra JavaScript. Em seu post no reddit, o desenvolvedor publicou a mensagem que recebeu da Apple:

“Como você provavelmente sabe, a Oracle possui o registro de marca registrada dos EUA nº 2416017 para JAVASCRIPT. O vendedor deste aplicativo do iTunes exibe JAVASCRIPT de forma proeminente sem a autorização de nosso cliente. A exibição não autorizada da propriedade intelectual de nosso cliente pode fazer com que os consumidores encontrem este aplicativo e acreditem erroneamente que é proveniente de ou fornecido sob licença da Oracle. O uso da marca registrada de nosso cliente de tal forma constitui violação de marca registrada em violação da Lei Lanham. 15 USC § 1125 (a) (1) (A). Para evitar mais confusão por parte do consumidor e violação dos direitos de propriedade intelectual de nosso cliente, solicitamos que você desative imediatamente o acesso a este aplicativo. Aguardamos sua confirmação de que atendeu a essa solicitação.”

Você pode ver a mensagem original no link: https://www.reddit.com/r/javascript/comments/8d0bg2/oracle_owns_javascript_so_apple_is_taking_down_my/

JavaScript Avançado
Curso de JavaScript Avançado
CONHEÇA O CURSO

JavaScript não possui logo

Outra curiosidade é que nem a Sun e nem a Oracle criaram um logo para o JavaScript. E como essa marca pertence à Oracle, ninguém além dela pode fazer isso.

Logos não oficiais do JavaScript

Os logos que vemos por aí representando o JavaScript não são oficiais, foram criados pela comunidade. Oficialmente, JavaScript não possui logo. O primeiro logo da imagem acima é o mais usado, e foi apresentado em uma conferência de JavaScript em 2011, a JSConf EU.

Note que a maioria desses logos (com excessão do segundo) utilizam apenas as letras “JS”. Isso não é apenas para o logo ficar mais minimalista. O objetivo é evitar o uso da palavra “JavaScript”, que poderia causar problemas com os direitos de marca que a Oracle possui.

A Padronização do ECMAScript

Imagine o caos que seria cada navegador com sua própria linguagem. A ideia da web é funcionar igual para todos. A fim de manter um padrão, em novembro de 1996 a Netscape enviou o JavaScript à ECMA International, uma associação fundada em 1961 que padroniza sistemas de informação. A saber, seu nome significa European Computer Manufacturers Association (Associação Europeia de Fabricantes de Computadores).

Já que o nome JavaScript pertencia à Sun, foi preciso registrar com um novo nome. Assim surgiu o nome ECMAScript. Porém, como o nome JavaScript já estava famoso, continuamos chamando a linguagem assim até hoje em todos os lugares.

Portanto, com essa padronização, todos os criadores de navegadores devem seguir regras que indicam como o ECMAScript (ou JavaScript) deve funcionar. Assim o seu código vai poder funcionar igual em qualquer lugar.

Já mostrei aqui no blog a explicação das partes estranhas do JavaScript. Se você não entende a razão de algo ocorrer no seu código, você pode ler as regras do ECMAScript que os navegadores devem seguir nesse endereço: https://www.ecma-international.org/ecma-262/11.0/index.html#title.

Além disso, você também pode usar a especificação de uma linguagem como base para criar a sua própria linguagem de programação. Foi o que aconteceu com o ActionScript da Adobe e UnityScript da Unity.

A especificação do ECMAScript está no registro ECMA-262. A especificação da linguagem C# também está lá, como ECMA-334. Você pode vê-la pelo endereço: http://www.ecma-international.org/publications/standards/Ecma-334.htm

Versões do ECMAScript

O ECMAScript continua em evolução. Sempre que novas funcionalidades são adicionadas, o documento do registro ECMA-262 é atualizado. Antes o nome das versões eram seguidos por um número, como ECMAScript 3 e ECMAScript 5.

Em 2015, durante o lançamento do que seria o ECMAScript 6, também conhecido como ES6, foi decidido que o nome das versões agora viriam com o número do ano de seu lançamento. Por isso que o ES6 também ficou conhecido como ECMAScript 2015 (ou ES2015).

Então é muito comum que ao fazer referência à linguagem, chamamos de JavaScript. Mas ao se referir a uma versão, chamamos de ECMA ou ES + ano.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé.Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO

Então, qual a diferença entre ECMAScript e JavaScript?

Há pessoas que defendem que estamos atualmente utilizando ECMAScript, e que o nome JavaScript é usado apenas por costume, já que esse nome pertence à Oracle. Em contrapartida há pessoas que dizem que é tudo a mesma coisa.

Se formos definir que há uma diferença, poderíamos dizer que o ECMAScript é a especificação, e que JavaScript é uma implementação por parte dos navegadores, assim como o ActionScript pela Adobe, UnityScript pela Unity e JScript pela Microsoft.

Em resumo, é como se o ECMAScript fosse a receita de um bolo e o JavaScript fosse o bolo de verdade, em sua forma mais pura e fiel à receita original. ActionScript, UnityScript e JScript seriam os “outros sabores”.

5 motivos para estudar React

Utilizada em milhares de aplicações, o JavaScript certamente está entre as linguagens de programação mais importantes. Isso tudo se deve também aos frameworks e bibliotecas que a tem como base, fazendo com que o JavaScript atinja novos patamares constantemente. Sendo assim, este artigo irá lhe apresentar cinco motivos para você aprender a biblioteca JavaScript mais famosa da atualidade: o React.

React está em alta no mercado

Podemos nos basear em dois indicadores de que algo está em alta no mercado: o alto número de pessoas que estão envolvidas e a quantidade de empresas que estão utilizando a ferramenta, sejam elas grandes, médias ou pequenas empresas. No caso do React, ambos estão em alta! Além disso, também podemos ver uma grande quantidade de oferta de vagas que pedem essa biblioteca. Aprender algo que tem uma boa aceitação no mercado é excelente.

Um dos fatores de sua popularidade é por ele ter sido criado pelo Facebook. Essa biblioteca de código aberto, que faz parte dos projetos open-source do Facebook, faz com que ele realmente ganhe muita visibilidade.

Segundo uma pesquisa do Stack Overflow deste ano (2020), podemos ver alguns indicadores. Ao focar puramente em estruturas da web, vemos que jQuery ainda é o líder, mas está lentamente perdendo terreno. Enquanto isso, o React vem aumentando sua participação no mercado.

Também podemos ver como os desenvolvedores gostam dessa biblioteca: ela está no topo entre os frameworks/bibliotecas mais amados e procurados.

Do React para o React Native

Ao aprender essa biblioteca, você não somente aprende como fazer interfaces web melhores, como pode usar os mesmos conceitos para fazer aplicativos para Android e iOS. Ao aprender o React, você pode complementar seus estudos com o React Native. O React Native também é disponibilizado de forma open-source pelo Facebook, permitindo criar aplicações móveis com interface nativa para iOS e Android. Ele se utiliza dos mesmos conceitos e design do React, exigindo baixo nível de esforço.

O React é flexível

Essa é uma ótima vantagem que resume bem um dos motivos para se aprender o React: ele é flexível e facilita a interface com outras bibliotecas e frameworks. Além disso, mesmo sendo uma bibioteca SPA, ele torna possível escrever aplicações que renderizam no servidor através do Next.js, fazendo com que as páginas carreguem mais rapidamente.

React - Introdução
Curso de React - Introdução
CONHEÇA O CURSO

Uso de componentes reutilizáveis

Uma das suas principais características é a utilização de componentes que, em conjunto, criam uma interface. Com ele, você pode criar, reutilizar e combinar componentes no seu código. Um componente é como se fosse uma função JavaScript que permite dividir a interface em partes independentes e reutilizáveis, livre de outras dependências externas.

Nós podemos reutilizar um simples componente em múltiplas interfaces, onde componentes podem conter outros componentes. Isso facilita a manutenibilidade e o acompanhamento do código.

Facilidade no aprendizado

React, antes de tudo, é JavaScript. Se você já tem experiência com JavaScript, é possível absorver toda a proposta do React facilmente, criando aplicações modernas com pouco tempo de estudo. Considerando todos os itens acima, podemos afirmar que hoje, certamente, ele está entre os melhores frameworks JavaScript disponíveis no mercado.

Desenvolvedores iniciantes, antes de iniciarem seus estudos em algum framework ou biblioteca (no caso do React), devem adquirir uma boa base de front-end. Estude primeiro os fundamentos, conceitos, HTML, CSS e JavaScript. Aí sim depois você estará pronto para iniciar no mundo do React.

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200