Após um teste bastante bem-sucedido da caneta com Ember Octane, eu decidi (ou melhor, decidimos com um tradutor do google) balançar em santo tradução do tutorial do guia oficial do Ember.js

Como você verá no texto, este tutorial foi desenvolvido para o menor programadores iniciantes. O que não o impede de servir lutadores experientes como um excelente ponto de partida para o conhecimento da estrutura. Para passagem completa este jogo O tutorial levará de 1 a 2 horas. Depois disso, você pode avaliar o Ember.js em sua última edição do Octane sem precisar ler as avaliações da atualização do ano passado.

A lista de tópicos abordados no tutorial sugere:

• Usando a CLI Ember
• Navegação de arquivos e pastas do aplicativo Ember
• Criar e vincular entre páginas
• Modelos e componentes
• Teste automatizado
• Trabalhar com dados do servidor
• Segmentos dinâmicos em rotas
• Serviços na Ember
• Biblioteca de dados Ember
• Adaptadores e serializadores
• Padrão de componente do provedor

Se você concorda que o sabor é bom por 1-2 horas, seja bem-vindo ao gato!

Do tradutor:
Como o Habr não pode exibir corretamente as hbs , inseri as imagens. Use o texto original para copiar as inserções de código. Desculpe pelo transtorno.

Além disso, o tutorial original consiste em duas partes, mas por causa do volume, dividi a primeira parte em duas: parte 1.1 e parte 1.2 . Espero que a segunda parte seja traduzida na íntegra e depois lhe forneça a numeração da parte 2. Espero também que isso não leve a confusão)

Em russo sobre Ember, você pode perguntar no canal de telegrama ember_js

Entrada

Bem-vindo ao mundo da Ember!

Neste tutorial, usaremos o Ember para criar o aplicativo Super Rentals. Será um site para ver lugares interessantes para ficar durante suas próximas férias. Confira o aplicativo finalizado para ter uma idéia do escopo do projeto.

Ao longo do caminho, você aprenderá tudo o que precisa saber para criar o aplicativo básico do Ember. Se você ficar preso em algum momento durante a lição, faça o download da fonte para obter um exemplo de trabalho completo.

Esta lição tem duas partes. A primeira parte aborda os seguintes conceitos básicos:

• Usando a CLI Ember
• Navegação de arquivos e pastas do aplicativo Ember
• Criar e vincular entre páginas
• Modelos e componentes
• Teste automatizado
• Trabalhar com dados do servidor

Na segunda parte da lição, passaremos para o próximo nível, usando os conceitos que já aprendemos.

Nova geração de projetos

Nesta parte, você instalará a CLI do Ember, utilizará-a para criar um novo projeto do Ember e adicionará padrões e estilos básicos ao seu novo aplicativo. No final da peça, você verá uma página de destino com uma foto do querido Professor Tomster:

Criando esta página, você aprenderá:

• Instale a CLI do Ember
• Crie um novo aplicativo Ember com a Ember CLI
• Iniciar e parar o servidor de desenvolvimento
• Edite arquivos e veja imediatamente o resultado (atualização ao vivo)
• Trabalhar com HTML, CSS e recursos no aplicativo Ember

Instale a CLI do Ember

Você pode instalar a versão mais recente do Ember CLI executando o seguinte comando:

 $ npm install -g ember-cli 

Para verificar se sua instalação foi bem-sucedida, execute:

 $ ember --version ember-cli: 3.15.0 node: 12.8.1 os: linux x64 

Se o número da versão for exibido, você estará pronto para começar.

Criando um novo aplicativo Ember usando a CLI Ember

Podemos criar um novo projeto usando o new comando Ember CLI. Use o ember new <project-name> padrão ember new <project-name> da ember new <project-name> . No nosso caso, o nome do projeto será super-rentals :

 $ ember new super-rentals installing app Ember CLI v3.15.0 Creating a new Ember app in /home/runner/work/super-rentals-tutorial/super-rentals-tutorial/dist/code/super-rentals: create .editorconfig create .ember-cli create .eslintignore create .eslintrc.js create .template-lintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create config/environment.js create config/optional-features.json create config/targets.js create ember-cli-build.js create .gitignore create package.json create public/robots.txt create testem.js create tests/helpers/.gitkeep create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep Installing packages... This might take a couple of minutes. npm: Installing dependencies ... npm: Installed dependencies Initializing git repository. Git: successfully initialized. Successfully created project super-rentals. Get started by typing: $ cd super-rentals $ npm start Happy coding! 

Essa equipe criará para nós uma nova pasta chamada super-rentals . Podemos ir usando o cd .

 $ cd super-rentals 

No restante do tutorial, todos os comandos devem ser executados na pasta super-rentals Rentals. Esta pasta tem a seguinte estrutura:

 super-rentals ├── app │ ├── components │ │ └── .gitkeep │ ├── controllers │ │ └── .gitkeep │ ├── helpers │ │ └── .gitkeep │ ├── models │ │ └── .gitkeep │ ├── routes │ │ └── .gitkeep │ ├── styles │ │ └── app.css │ ├── templates │ │ └── application.hbs │ ├── app.js │ ├── index.html │ └── router.js ├── config │ ├── environment.js │ ├── optional-features.json │ └── targets.js ├── public │ └── robots.txt ├── tests │ ├── helpers │ │ └── .gitkeep │ ├── integration │ │ └── .gitkeep │ ├── unit │ │ └── .gitkeep │ ├── index.html │ └── test-helper.js ├── vendor │ └── .gitkeep ├── .editorconfig ├── .ember-cli ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .template-lintrc.js ├── .travis.yml ├── .watchmanconfig ├── README.md ├── ember-cli-build.js ├── package.json ├── package-lock.json └── testem.js 15 directories, 32 files 

À medida que avançamos na lição, aprenderemos sobre o objetivo desses arquivos e pastas. Enquanto isso, saiba que na maioria das vezes trabalharemos na pasta do app .

Iniciando e Parando o Servidor de Desenvolvimento

O Ember CLI vem com muitos comandos diferentes para várias tarefas de desenvolvimento, como o comando ember new que vimos anteriormente. Ele também vem com um servidor de desenvolvimento, que podemos executar com o comando ember server :

 $ ember server building... Build successful (9761ms) – Serving on http://localhost:4200/ 

O servidor de desenvolvimento é responsável por compilar nosso aplicativo. Ele também possui um servidor web interno que fornece arquivos para o navegador. O download pode demorar algum tempo. Depois de funcionar, abra seu navegador favorito e vá para http://localhost:4200 . Você deve ver a seguinte página de boas-vindas:

Zoe explica:

O endereço do localhost na URL significa que você só pode acessar o servidor de desenvolvimento no seu computador local. Se você deseja compartilhar seu trabalho com o mundo, precisará implantar seu aplicativo na Internet pública. Explicaremos como fazer isso na segunda parte da lição.

Você pode sair do servidor de desenvolvimento a qualquer momento digitando Ctrl + C (para MacOS Cmd + C ) na janela do terminal em que o ember server sendo executado. Ou seja, pressionando a tecla “C” no teclado enquanto mantém pressionada a tecla “Ctrl”. Depois de parado, você pode iniciá-lo novamente usando o mesmo comando do ember server . Recomendamos que você abra duas janelas de terminal: uma para iniciar o servidor em segundo plano e a outra para inserir outros comandos do console do Ember.

Edição de arquivos e recarga ao vivo

O servidor de desenvolvimento possui uma função chamada live reload que monitora as alterações de arquivos em seu aplicativo, recompila tudo automaticamente e atualiza todas as páginas abertas do navegador. Isso é muito útil no desenvolvimento, então vamos tentar!

Conforme indicado no texto na página de boas-vindas, o código fonte da página está em app/templates/application.hbs . Vamos tentar editar este arquivo e substituí-lo por nosso próprio conteúdo:

Logo após salvar o arquivo, seu navegador deve atualizar automaticamente e enviar nossos parabéns para o mundo inteiro. Ótimo!

Quando terminar de excluir, exclua o arquivo app/templates/application.hbs . Não precisaremos disso por mais algum tempo. Vamos adicioná-lo mais tarde.

Novamente, se você ainda tiver a guia do navegador aberta, ela automaticamente exibirá a página em branco assim que você excluir o arquivo. Isso reflete o fato de que não temos mais o modelo de aplicativo em nosso aplicativo.

Trabalhar com HTML, CSS e ativos no aplicativo Ember

Crie o app/templates/index.hbs e cole a seguinte marcação.

Se você pensa: "Ei, isso é como HTML!", Então você está absolutamente certo! Na sua forma mais simples, os modelos do Ember são apenas HTML. Se você já conhece o HTML, deve se sentir em casa aqui.

Obviamente, diferentemente do HTML, os modelos do Ember podem fazer muito mais do que apenas exibir conteúdo estático. Em breve, veremos isso em ação.

Após salvar o arquivo, a guia do navegador deve ser atualizada automaticamente, mostrando a mensagem de boas-vindas em que acabamos de trabalhar.

Antes de fazer qualquer outra coisa, vamos adicionar um pouco de estilo ao nosso aplicativo. Passamos tempo suficiente olhando para a tela do computador, portanto, devemos proteger nossa visão da marcação HTML vazia!

Felizmente, nosso designer nos enviou algum CSS para usar, para que possamos fazer o upload do arquivo da folha de estilo e copiá-lo para app/styles/app.css . Este arquivo tem todos os estilos que precisamos para criar o restante do aplicativo.

 @import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,400,700,700italic); /** * Base Elements */ * { margin: 0; padding: 0; } body, h1, h2, h3, h4, h5, h6, p, div, span, a, button { font-family: 'Lato', 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 1.5; } body { background: #f3f3f3; } /* ...snip... */ 

Se você conhece CSS, sinta-se à vontade para personalizar esses estilos ao seu gosto! Lembre-se de que você poderá ver algumas diferenças visuais no futuro, se decidir fazê-lo.

Quando estiver pronto, salve o arquivo CSS; nosso servidor de desenvolvimento confiável deve buscá-lo imediatamente e atualizar nossa página. Chega de conteúdo HTML vazio!

Para corresponder ao layout do nosso designer, também precisamos fazer o download da imagem teaching-tomster.png que nosso arquivo CSS se refere:

 .tomster { background: url(../assets/images/teaching-tomster.png); /* ...snip... */ } 

Como aprendemos anteriormente, a convenção da Ember é colocar seu código-fonte na pasta do app . Para outros recursos, como imagens e fontes, há uma pasta public . Seguiremos essa convenção carregando o arquivo de imagem e salvando-o em public/assets/images/teaching-tomster.png .

A CLI do Ember e o servidor de desenvolvimento entendem essas convenções de pasta e disponibilizam esses arquivos automaticamente para o navegador.

Você pode confirmar isso acessando http://localhost:4200/assets/images/teaching-tomster.png . A imagem também deve ser exibida na página de boas-vindas em que estamos trabalhando. Se a imagem ainda não aparecer durante a atualização, tente atualizar manualmente para que o navegador escolha um novo arquivo.

Criando páginas de aplicativos

Nesta parte, você criará as primeiras páginas do seu aplicativo Ember e estabelecerá links entre elas. No final deste capítulo, você deverá ter duas novas páginas - a página Sobre nós e a página Contatos. Estas páginas serão vinculadas à sua página inicial:

Criando essas páginas, você aprenderá sobre:

• Definindo rotas
• Usando padrões de rota
• Personalização de URL
• Vinculando páginas ao componente <LinkTo>
• Passando argumentos e atributos para componentes

Definição de Rota

Depois de criar nossa primeira página, vamos adicionar outra!

Desta vez, gostaríamos que a página estivesse hospedada no URL /about . Para fazer isso, precisamos informar a Ember sobre nosso plano de adicionar uma página a este local. Caso contrário, o Ember assumirá que visitamos o URL errado!

O local para gerenciar páginas acessíveis é o roteador. Abra app/router.js e faça as seguintes alterações:

Isso adiciona uma rota chamada "about", que é atendida por padrão no URL /about .

Usando modelos de rota

Agora podemos criar um novo app/templates/about.hbs com o seguinte conteúdo:

Para ver isso em ação, vá para http://localhost:4200/about .

Portanto, nossa segunda página está pronta!

Definindo rotas usando caminhos personalizados

Nós continuamos! Vamos adicionar nossa terceira página. Desta vez é um pouco diferente. Todos na empresa chamam isso de página "contatos". No entanto, o site antigo que estamos substituindo já possui uma página semelhante, exibida /getting-in-touch URL desatualizado /getting-in-touch .

Queremos manter os URLs existentes para o novo site, mas não precisamos entrar getting-in-touch todo o novo código! Felizmente, podemos fazer melhor:

Aqui nós adicionamos a rota de contact , mas especificamos explicitamente o caminho para a rota. Isso nos permite manter um URL obsoleto, mas use um nome novo e mais curto para a rota, bem como o nome do arquivo de modelo.

Falando no modelo, vamos criá-lo também. Adicionaremos o arquivo app/templates/contact.hbs com o conteúdo:

O Ember adere a convenções estritas e configurações padrão razoáveis ​​- se começamos do zero, não nos importaríamos com o URL /contact padrão. No entanto, se as configurações padrão não funcionarem para nós, isso não é um problema. Podemos personalizar o Ember para as nossas necessidades!

Depois de adicionar a rota e o modelo acima, devemos ter uma nova página no endereço http://localhost:4200/getting-in-touch .

Crie navegação cruzada nas páginas usando o componente <LinkTo>

Nós nos esforçamos muito para criar essas páginas, mas precisamos que as pessoas as encontrem! Na Internet, os hiperlinks são usados ​​para isso, ou para abreviar, simplesmente para links.

O Ember oferece excelente suporte para URLs prontos para uso. Podemos simplesmente vincular nossas páginas usando a tag <a> com o href correspondente. No entanto, clicar nesses links exigirá que o navegador atualize completamente a página, o que significa que ele precisará retornar ao servidor para obter a página e depois baixar tudo do zero novamente.

Com a Ember, podemos fazer mais! Em vez da tag <a> antiga e simples, o Ember oferece uma alternativa ao <LinkTo> . Por exemplo, veja como você pode usá-lo nas páginas que acabamos de criar:

Vamos dar uma olhada no que acabamos de adicionar.

<LinkTo> é um exemplo de componente no Ember - você pode distingui-lo das tags HTML comuns porque elas começam com uma letra maiúscula. Juntamente com as tags HTML regulares, os componentes são os tijolos que podemos usar para criar a interface do usuário do aplicativo.

Mais tarde, teremos muito mais informações sobre os componentes, mas agora você pode pensar neles como uma maneira de fornecer tags personalizadas que complementam as tags incorporadas nos navegadores.

A parte @route=... é como passamos argumentos para o componente. Aqui usamos esse argumento para indicar qual rota queremos conectar. (Observe que esse deve ser o nome da rota, não o caminho, portanto especificamos "about" vez de "/about" e "contact" vez de "/getting-in-touch" .)

Além dos argumentos, os componentes também podem aceitar atributos HTML regulares. Em nosso exemplo, adicionamos a classe "button" para estilizar, mas também podemos especificar outros atributos que consideramos apropriados, como o atributo de role ARIA . Eles são passados ​​sem o caractere @ ( class=... diferentemente de @class=... ), então o Ember saberá que são atributos HTML regulares.

Sob o capô, o componente <LinkTo> gera para nós uma tag <a> regular com o href correspondente para uma rota específica. Essa tag <a> funciona muito bem com os leitores de tela e também permite que nossos usuários adicionem o link aos favoritos ou abri-lo em uma nova guia.

No entanto, quando você clica em um desses links especiais, o Ember intercepta um clique do mouse, exibe o conteúdo de uma nova página e atualiza a URL - tudo isso é feito localmente, sem aguardar o servidor. Isso evita uma atualização de página inteira.

Vamos aprender mais sobre como tudo isso funciona no futuro próximo. Enquanto isso, vá em frente e clique no link no navegador. Você percebeu a rapidez com que essas transições ocorrem?

Parabéns, você está no meio do caminho para se tornar um mestre de páginas!

Teste automatizado

Nesta parte, você usará o ambiente de teste interno do Ember para escrever alguns testes automatizados para o seu aplicativo. Como resultado, teremos um conjunto de testes automatizados que podemos executar para garantir que nosso aplicativo esteja funcionando corretamente:

No processo, você aprenderá sobre:

• Objetivos de teste automatizados
• Escrevendo testes de aceitação
• Usando geradores na CLI do Ember
• Testando com a biblioteca de testes QUnit
• Trabalhando com auxiliares de teste Ember
• Testando práticas de fluxo de trabalho

O objetivo do teste automatizado

Já alcançamos muito! Para resumir - começamos do zero, adicionamos algumas páginas de conteúdo, estilizamos tudo para ficar bonito, adicionamos uma imagem do Tomster, adicionamos links entre nossas páginas e, surpreendentemente, funcionou!

Mas temos certeza de que tudo realmente funciona? Obviamente, chamamos um pouco para garantir que tudo pareça como o esperado. Mas temos certeza de que verificamos todas as páginas após a alteração mais recente que fizemos?

No final, a maioria de nós tem experiência (ou ouviu histórias horríveis) quando uma pequena alteração em uma área de um aplicativo inadvertidamente quebra algo em outra parte. Mesmo se não alterássemos nada lá (e, consequentemente, não verificamos mais tarde).

Suponha que possamos escrever uma lista de verificações e verificá-la após fazer alterações em nosso site. Mas é claro que isso ficará fora de controle quando adicionarmos mais recursos ao nosso aplicativo. Também expira muito rapidamente. Portanto, é melhor deixar essas tarefas repetitivas para os robôs.

Hmm, robôs. Isso é uma ideia! E se pudermos escrever essa lista de verificação e apenas fazer o computador verificar tudo para nós? Acho que acabamos de inventar a ideia de testes automatizados! Ok, talvez não tenhamos sido os primeiros a criar esse conceito, mas o descobrimos independentemente, por isso ainda merecemos alguns elogios.

Usando geradores para criar testes de aceitação

Assim que terminarmos de nos acariciar na cabeça ou terminar a torta da prateleira, executaremos o seguinte comando no terminal:

 $ ember generate acceptance-test super-rentals installing acceptance-test create tests/acceptance/super-rentals-test.js 

No Ember CLI, isso é chamado de comando do gerador . Os geradores criam automaticamente arquivos para nós com base nas convenções da Ember e os preenchem com o conteúdo padrão correspondente, semelhante ao modo como a ember new criou originalmente um aplicativo de esqueleto para nós. Geralmente segue o padrão ember generate <type> <name> , onde <type> é o que geramos e <name> é o que queremos chamar.

Nesse caso, geramos um teste de aceitação localizado em tests/acceptance/super-rentals-test.js .

Obviamente, o uso de geradores não é necessário; nós mesmos poderíamos criar um arquivo que faria o mesmo. Mas os geradores, é claro, nos salvam de uma carga de trabalho mental desnecessária para encontrar a pasta e o nome certos, além de tempo para definir o conteúdo. Dê uma olhada no arquivo de teste de aceitação e veja por si mesmo.

Zoe explica ...

Deseja economizar ainda mais ao imprimir? ember generate ... pode ser reduzido para ember g ... São 7 caracteres a menos! Outros comandos seguem uma lógica semelhante.

Escrevemos testes de aceitação

Os testes de aceitação são um dos tipos de testes automatizados que temos na Ember. , , , — « , », .

:

URL / (test helper) visit Ember. , http://localhost:4200/ enter .

, , , JavaScript await . , , , .

, , await visit . , , , . , , , , .

URL / , URL URL ( / ). currentURL - currentURL , equal . « » . , , , , .

, <h2> , « Super Rentals!» . , , , .

«About Us» , CSS .jumbo a.button . , , « jumbo <a> button» . HTML .

, . , , await .

, , URL- /about .

...

, QUnit , module , test assert . , click , visit currentURL @ember/test-helpers . , import . , .

, ember test --server ember t -s . , . . http://localhost:7357/ .

, , ( ):

, , , , , , , . , index.hbs , <LinkTo> , , (failing) :

!

, , :

, . . , , - .

. , ( : , ) , , « ».

, . — — , ?

. :

:

• {{yield}}
• {{outlet}}

<LinkTo> . , , — Ember HTML . !

. , "jumbo" . , :

, , . , , , . , .

. — , . app/components/jumbo.hbs «jumbo» :

, ! , <Jumbo> .

...

, , Ember HTML. jumbo.hbs <Jumbo> , , super-awesome.hbs <SuperAwesome> .

{{yield}}

Ember , . HTML-, , , <Jumbo>some content</Jumbo> . {{yield}} , , .

, :

, , … ! , , ! <Jumbo> , - , .

!

.

, , .

, «jumbo» , , . , , . !

, <Jumbo> . :

 $ ember generate component-test jumbo installing component-test create tests/integration/components/jumbo-test.js 

(component test), (rendering test). . , , .

, , :

URL- <Jumbo> . , , , . .

, , , await . , , . , , .

, : .

<NavBar> app/components/nav-bar.hbs :

:

, !

...

<NavBar /> <NavBar></NavBar> . , - , . , Ember !

, , , . , !

? <NavBar> , <Jumbo> . , <NavBar> , , . !

, , <nav> . (accessibility), . , <NavBar> .

!

{{outlet}}

, , . <NavBar> , . . , .

, application.hbs . , , , , . !

, URL-, . , , . , (footer) .

, , , .

{{outlet}} , , {{yield}} , .

! , , . !

1.1 . .

UPDATE: MK1301 .