Tutorial Aurelia JS - Todo List

Olá pessoal!

Nesse tutorial lhes mostrarei como criar um simples Todo List (lista de tarefas) utilizando o framework JavaScript chamado Aurelia. O tutorial é baseado exatamente no tutorial oficial, sendo muitas vezes uma tradução do artigo original encontrado aqui: https://aurelia.io/docs/tutorials/creating-a-todo-app#setup.

O que é necessário saber para seguir com esse tutorial? Vamos assumir que você conheça os conceitos básicos de HTML5, CSS, JavaScript e até mesmo TypeScript, uma vez que usaremos o mesmo como linguagem de base para nosso “backend”. O tutorial original, em inglês, segue duas linhas: Aurelia com TypeScript ou Aurelia com ECMAScript. Vamos seguir com TypeScript nesse tutorial.

Índice desse tutorial

Tutorial Aurelia JS: criando um Todo List, parte 1/3. Nesse tutorial você saberá um pouco mais sobre o Aurelia, bem como configurará seu ambiente para o desenvolvimento desse tutorial.
Tutorial Aurelia JS: criando um Todo List, parte 2/3. Nessa segunda parte do tutorial você começará a criar as classes TypeScript do projeto e já veremos como o Aurelia trabalha em conjunto com a linguagem sem interferir no seu código fonte.
Tutorial Aurelia JS: criando um Todo List, parte 3/3. Na terceira e última parte do nosso tutorial da Lista de Tarefas em Aurelia, veremos o código funcionando, bem como uma conclusão sobre o Aurelia.

Se desejar, poderá consultar meu repositório no GitHub para ver o projeto pronto: https://github.com/WilliamZimmermann/todo-aurelia

Preparando o ambiente

Há várias maneiras de inicializar/preparar um ambiente com Aurelia. Eu prefiro utilizar a linha de comando. Porém, seguindo o tutorial original em inglês, vamos baixar, por assim dizer, o Aurelia como um todo. Você pode fazer o download do pacote através do link oficial:

Download the Basic Aurelia Project Setup

Primeiramente, descompacte os arquivos zipados em uma pasta de sua preferência. Fazendo isso, você terá os diretórios de estrutura padrão e os scripts necessários para completar esse tutorial e continuar seu aprendizado. Abra o diretório em seu editor de código favorito. Eu uso, por exemplo, o Visual Studio Code (VSCode), que tem plugins bem bacanas, inclusive um bom Plugin para o Aurelia.

O primeiro arquivo que precisamos dar uma olhada é o index.html. É esse arquivo que inicia nossa aplicação e é nele também onde configuramos a linguagem de programação que utilizaremos. Você verá algo como o seguinte dentro do arquivo:

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
  </head>
  <body aurelia-app="src/main">
    <script src="scripts/system.js"></script>
    <script src="scripts/config-typescript.js"></script>
    <script src="scripts/aurelia-core.min.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Aurelia</title>

</head>

System.import('aurelia-bootstrapper');

</script>

</body>

</html>

Sim, essa será a única página HTML na sua aplicação. Quer dizer… você até terá outras, que serão os componentes, mas essa será a única página base que você terá. Tudo mais será “implantado nessa página”. Vamos ver cada elemento desse arquivo para ver o que se passa.

Primeiramente, você pode ver que esse documento está configurado como um documento HTML5 padrão com um doctype, HTML, head e body. Os itens que são de interesse para nós agora são os que estão dentro da tag <body>. Vamos ver cada um dos itens que estão sob a tag <script>:

<script src="scripts/system.js"></script>

1	<script src="scripts/system.js"></script>

Essa tag é usada para carregar o SystemJS, um moderno carregador de módulos (module loader) JavaScript. Por ser um framework moderno, Aurelia foi escrito em módulos e também encoraja você a escrever seu próprio código de forma modular. Para usar módulos em TypeScript, você precisa de um loader que entende código modular. É isso que o SystemJS faz. Ele localiza os módulos, entende suas dependências e garante que tudo foi carregado em tempo de execução. O Aurelia suporta uma variedade de module loaders. Por de trás do SystemJS, Aurelia suporta todos os loaders baseados em AMD, tal como RequireJS, Cajon e Dojo. Aurelia também suporta sistemas baseados em módulos como o Webpack.

<script src="scripts/config-typescript.js"></script>

1	<script src="scripts/config-typescript.js"></script>

Como comentado anteriormente, essa linha de código é aonde configuramos a linguagem de programação que iremos trabalhar. Ela aponta para um arquivo de configuração do SystemJS, de modo que o carregador de módulos possa instalar um transpiler* no loader. Como resultado, cada vez que um módulo é carregado, ele está apto para pegar seu código TypeScript e automaticamente convertê-lo para código ES5 que browsers (navegadores) modernos entendem completamente. Legal, não?

EM um APP em produção você não utilizaria um transpiler para transformar o código que está sendo executado no browser como estamos usando aqui. Isso afetaria a performance e requeriria que você distribuísse todo um transpiler com seu App. Estamos usando essa técnica aqui para que você possa iniciar o código sem nenhuma configuração prévia, instalação de componentes, etc. Em um futuro tutorial, lhe mostrarei como usar o CLI para configurar um projeto pronto para a produção.

<script src="scripts/aurelia-core.min.js"></script>

1	<script src="scripts/aurelia-core.min.js"></script>

Esse é o coração do Aurelia. Você precisa adicionar esse script para usar o framework. É através dele que seremos capazes de executar todas as coisas legais que veremos nessa série de tutoriais.

SystemJS.import('aurelia-bootstrapper');

1	SystemJS.import('aurelia-bootstrapper');

Essa última linha é um pouco diferente. Ao invés de ‘setar’ uma propriedade src, há aqui algum código. O objeto SystemJS está sendo provido pelo module loader do SystemJS, como mencionado anteriormente. Aqui estamos chamando uma de suas API’s, import. Essa API diz ao loader para carregar ou importar, por assim dizer, um módulo com nome específico. Nesse caso, esse módulo com nome específico é o aurelia-bootstrapper. Esse módulo está no arquivo aurelia-core.min.js, ou seja, no coração do Aurelia. Esse módulo contém o código de inicialização do Aurelia, o qual fala ao Aurelia para carregar o framework, configurá-lo e executar sua aplicação.

Há mais uma coisa para observar. Creio que você tenha percebido isso. Na tag <body>, há um atributo chamado aurelia-app. Esse atributo está apontando para src/main. É isso que diz ao Aurelia Bootstrapper qual módulo contem as configurações do framework bem como qual elemento HTML é o host, o qual “hospedará”, por assim dizer, a aplicação. É ali dentro que a aplicação será renderizada. Veremos isso mais tarde. Antes disso, queremos fazer algo um pouco não tradicional…

Na próxima parte desse tutorial você verá como podemos construir um APP de Coisas a Fazer (ToDo List) usando código TypeSCript sem usar nenhuma API do Aurelia. Então utilizaremos o Aurelia para renderizar sua aplicação no navegador sem alterar nada do seu código TypeScript, sem nem mesmo mesclá-lo com código Aurelia. Até lá!

* transpiler. A função de um transpiler é traduzir um código escrito em linguagem para um código em outra linguagem. Os transpilers também podem trazer novas funcionalidades para uma linguagem, como novos tipos primitivos, novas funções, fluxos, etc. Fonte: CodeCasts.

Tutorial Aurelia JS: criando um Todo List, parte 1 de 3

Índice desse tutorial

Preparando o ambiente

Relacionado

1 comentário

Seus comentários são muito apreciados. Cancelar resposta

Índice desse tutorial

Preparando o ambiente

Compartilhe isso:

Relacionado

1 comentário

Seus comentários são muito apreciados. Cancelar resposta