Você conhece HTML e CSS e é capaz de criar páginas da web estáticas simples (e não muito), mas gostaria de dar mais "vida" e interatividade nelas? Você tem obras (pinturas, fotografias, poemas, uma coleção de selos etc.) que gostaria de compartilhar com o mundo, mas não pode criar um site ou blog de portfólio em que possa publicá-las e atualizá-las sem esforço extra. ? Ou você sonha em manter o diário de um viajante, coletar receitas culinárias incomuns ou acompanhar sua atividade física e fazer tudo isso on-line em seu próprio site? Talvez você tenha um animal de estimação favorito, cujo cuidado requer procedimentos especiais, e eles devem ser rastreados e registrados rapidamente?

Mas a menção de JavaScript o leva a um tremor fácil (e às vezes não tão), e o número de tecnologias e conceitos que você precisa dominar para realizar suas idéias leva a confusão e desespero? Como resultado, você se pergunta: “Por que a programação na Web deve ser tão difícil? É realmente impossível inventar algo para facilitar? ”

Então você veio ao lugar certo. Depois de ler o artigo, você receberá uma ferramenta com a ajuda da qual, tenho certeza, poderá realizar, se não todas, muitas de suas idéias, semelhantes às listadas acima.

O autor das fotos originais: Mart Virkus (toggl.com)

Hábil e experiente desenvolvedores de front-end, não se apressem em fechar o artigo gritando que agora haverá algo para “esfregar” os novatos aqui e você não tem nada a fazer aqui. Tenho certeza de que você também pode aprender algo útil para si mesmo. A principal coisa a lembrar: se algo se torna simples para iniciantes, automaticamente se torna simples para todos! Então, até certo ponto, isso simplificará sua vida. Isso não é ruim, concorda?

Então, ao ponto! Este artigo será inteiramente dedicado ao Mavo .

O Mavo é uma nova abordagem para o desenvolvimento de aplicativos da web interativos somente escrevendo HTML e CSS, sem a necessidade de escrever código JavaScript e implantar seu próprio servidor.

O Mavo está sendo desenvolvido pelo Haystack Group de cientistas do Laboratório de Ciência da Computação e Inteligência Artificial do Instituto de Tecnologia de Massachusetts ( MIT CSAIL ), sob a liderança de Leah Veru .

Siga o coelho branco!

Quer aprender um pouco mais sobre quais idéias foram a base do Mavo, quais características de seus antecessores ele absorveu, quais ele desenvolveu e quais ele teve que abandonar e por quê? Recomendo a leitura dessas duas publicações, especialmente preparadas para o fórum anual dedicado às inovações no campo da interação homem-máquina - O Simpósio da ACM sobre Software e Tecnologia de Interface do Usuário (UIST) :

Mavo: Criando aplicativos da Web interativos orientados a dados, criando HTML .
Estendendo uma linguagem de expressão reativa com ações de atualização de dados para criação de aplicativos do usuário final .

Uma pequena digressão para os leitores da Rússia!

O site Mavo está hospedado em servidores Netlify , cujos endereços estão na lista negra como resultado da "guerra" com o messenger Telegram . Isso significa que os recursos hospedados nesses servidores, bem como todos os serviços relacionados, estão bloqueados na Rússia (pelo menos no momento da redação deste documento).

Há, no entanto, boas notícias: Lea Verou e eu estamos trabalhando ativamente para resolver esse problema. Espero que também resolvamos isso em breve. Até lá, por favor, use, por exemplo, uma VPN para trabalhar com o Mavo (isso é verdade tanto ao acessar o site do Mavo quanto ao estudar demos no Codepen , bem como ao criar seus próprios aplicativos da web).

(ATUALIZAÇÃO) Aqueles que não estão prontos e / ou não desejam se conectar à VPN podem jogar com o Mavo no Stackblitz ou conectá-lo ao seu projeto através do cdnjs .

Estou convencido (e acho que não estou sozinho) de que a melhor maneira de "sentir" uma nova tecnologia e avaliar do que ela é capaz é criar algo útil com sua ajuda. Não é muito difícil, caso contrário, podemos simplesmente não ver as florestas atrás das árvores, mas necessárias. Resta apenas escolher o que. Oh! Existe uma ideia.

Eu acho que muitos de vocês estão aprendendo uma língua estrangeira (talvez para alguém essa seja uma linguagem de programação). E, provavelmente, você usa algum tipo de aplicativo para estudá-lo. Novas palavras nesses aplicativos geralmente são aprendidas usando cartões de memória flash. A propósito, essa técnica de aprender um idioma estrangeiro também funciona muito bem offline. Mas agora não é sobre isso.

Então, por que não desenvolvemos juntos esse aplicativo? Vamos chamá-lo ... (rolo de bateria!) "Cartões" . Este será um aplicativo CRUD completo para aprender um idioma estrangeiro com a ajuda de cartões, o que permitirá:

crie, exclua, modifique cartões e organize-os usando arrastar e soltar;
importar cartões para o aplicativo de um arquivo e exportá-los para um arquivo;
acompanhar o progresso (função de auto-avaliação).

A versão final do aplicativo será mais ou menos assim:

Isso é bom? Espero que sim. Então vá!

Ao longo do artigo, orientarei você em todas as etapas do desenvolvimento de aplicativos. E enquanto você lê, você encontrará fragmentos marcados com tags especiais.

Siga o coelho branco!

Os fragmentos marcados dessa maneira contêm informações importantes, mas adicionais, sobre o Mavo. Na primeira leitura, esses fragmentos podem ser pulados sem medo de perder a idéia principal.

A prática é o caminho para a excelência!

No final de algumas seções, apresentarei pequenos exercícios independentes, tendo realizado os quais, você poderá se familiarizar um pouco mais com os recursos do Mavo e, ao mesmo tempo, melhorar o aplicativo que está sendo desenvolvido. Tais exercícios cabem nesses fragmentos.

Lembre-se à mão!

Você está pronto, seguindo o fio da minha exposição, para aplicar imediatamente novos conhecimentos na prática? Ótimo! Afinal, como você sabe, é melhor lembrar o que nossas mãos fazem . Você pode desenvolver seu aplicativo gradualmente lendo um artigo do começo ao fim, ou pode começar de qualquer estágio que lhe interessar.

Esses fragmentos fornecerão links para as versões correspondentes do aplicativo no Codepen .

Agora é tudo. Vamos começar!

Página estática da web

Para ilustrar como o Mavo amplia o poder do HTML, criaremos uma página HTML estática, que usaremos o Mavo para se transformar em um aplicativo da Web totalmente funcional.

Suponha que tenhamos o seguinte HTML dentro de um elemento <body> :

<header>  <h1></h1> </header> <main> <article>  <p>  </div>  <p></div> </article> </main>

No trecho de código acima, o elemento <article> corresponde a um cartão.

Adicionaremos alguns estilos para tornar nossa página mais parecida com um aplicativo futuro:

Deseja ver o código fonte completamente? Você pode fazer isso aqui .

Nós conectamos o Mavo

Até agora, temos apenas um layout estático. É hora de transformá-lo em um aplicativo da Web completo. É aqui que Mavo entra em jogo!

Para usar o Mavo, precisamos conectar seus arquivos JavaScript e CSS à nossa página. Para fazer isso, adicione as duas linhas a seguir ao elemento <head> :

 <head> ... <script src="https://get.mavo.io/mavo.min.js"></script> <link rel="stylesheet" href="https://get.mavo.io/mavo.css"> ... </head>

Uma pequena digressão para os leitores da Rússia!

Você pode baixar os arquivos correspondentes do repositório Mavo e conectá-los à sua página da mesma maneira.

(ATUALIZAÇÃO) Você também pode conectar o Mavo ao seu projeto através do cdnjs .

Siga o coelho branco!

Talvez seu aplicativo deva funcionar corretamente em navegadores antigos? Ou você deseja espiar o código-fonte do Mavo e esperar que seja legível? Tudo está em suas mãos. Você pode ajustar com que versão e / ou versão do Mavo deseja trabalhar , respondendo a algumas perguntas simples.

Após conectar o Mavo, precisamos especificar qual elemento da página conterá nosso aplicativo futuro. Esse elemento pode ser qualquer elemento HTML, mesmo <body> ou <html> ! Precisamos adicionar o atributo mv-app a esse elemento e especificar o nome do nosso aplicativo como seu valor - um identificador exclusivo em toda a página HTML. Um elemento com o atributo mv-app é chamado de elemento raiz do aplicativo.

Siga o coelho branco!

Se você não atribuir um valor ao atributo mv-app e não houver nenhum dos atributos no mesmo elemento: id ou nome , - o Mavo atribuirá automaticamente ao aplicativo o nome mavo1 , mavo2 , etc.

No entanto, eu recomendo fortemente que você especifique explicitamente o nome do aplicativo, pois ele é usado (explícita e implicitamente) em outras partes do aplicativo.

Lembre-se à mão!

https://codepen.io/dsharabin/pen/PoYxNjN

Portanto, no nosso caso, o elemento <main> conterá o aplicativo futuro. Adicione o atributo mv-app a ele e especifique o nome do nosso aplicativo - flashcards como seu valor:

 <main mv-app="flashcards"> ... </main>

Atributo de propriedade

Agora é hora de dizer ao Mavo quais elementos do aplicativo são importantes , ou seja, eles serão editados e / ou salvos, e também podem ser usados em expressões (mas mais sobre isso mais tarde - seja paciente).

Em nossa aplicação, existem dois elementos até agora - estes são elementos <p> . Inclua o atributo de propriedade nesses elementos, informando ao Mavo que esses elementos contêm dados com os quais você precisa trabalhar. Os elementos com o atributo de propriedade são chamados de propriedades .

Siga o coelho branco!

O atributo de propriedade pode ser adicionado a qualquer elemento HTML5 - o Mavo sabe como torná-lo editável . Por exemplo, você pode editar manualmente o conteúdo do elemento <span> usando o teclado e pode definir o valor do elemento <time> (data ou hora) usando o widget correspondente.

O conjunto de regras pelas quais o Mavo torna os elementos editáveis pode ser facilmente estendido usando plugins . É necessário que o usuário possa formatar o texto usando uma barra de ferramentas semelhante à de programas como o Microsoft® Wordpad ou Microsoft® Word , ou seja, trabalhe com texto, como em qualquer editor WYSIWYG ? Ou você deseja permitir que o usuário digite usando os comandos da linguagem Markdown ? Não há restrições. Basta ativar os plugins apropriados. Nenhum plugin adequado? Não é um problema. Escreva o seu. O Mavo suporta a funcionalidade correspondente imediatamente.

Lembre-se de que o valor do atributo de propriedade deve descrever a finalidade do elemento, como geralmente é descrito pelos valores dos atributos de id ou classe .

Transforme nossos elementos <p> em propriedades:

 ... <p property="source">  </p> <p property="translation"></p> ...

Siga o coelho branco!

Se um elemento já tiver um atributo de ID , classe ou itemprop que descreva com precisão sua finalidade, você poderá deixar o atributo de propriedade inalterado . Por exemplo, uma das propriedades do nosso aplicativo pode ser descrita da seguinte forma: <p property class="source"> .

Você notou alguma alteração em nosso aplicativo após adicionar propriedades a ele? Tenho certeza que sim. Na parte superior do aplicativo, a barra de ferramentas Mavo (barra Mavo ) apareceu com o botão Editar . Este botão permite alternar entre dois modos de aplicativo: modo de leitura e modo de edição . Agora, nosso aplicativo está no modo de leitura. Isso significa que não podemos editar seus dados diretamente na janela do navegador.

Siga o coelho branco!

A barra de ferramentas do Mavo é totalmente personalizável (como todos os elementos de interface adicionados automaticamente pelo Mavo ao aplicativo): você pode alterar sua posição, aparência, especificar um conjunto de botões disponíveis ou atribuir seu próprio elemento HTML.

Um pouco mais tarde, veremos uma das opções para essa personalização da barra de ferramentas Mavo. Enquanto isso, se você quiser se familiarizar um pouco mais com os recursos descritos, leia a documentação no site oficial.

Bem, é hora de mudar para o modo de edição e conhecê-lo. Clique no botão Editar .

O que mudou? O nome do botão mudou: agora o nome é Edição . Este é um sinal visual para nós: atenção, estamos no modo de edição. Tente passar o mouse sobre qualquer parágrafo com texto ("Palavra ou frase" ou "Tradução"). Mavo nos diz com um destaque amarelo que você pode clicar neste fragmento e editá-lo.

Atreva-se! Clique no texto e faça alterações. Isso não é ótimo ?! Podemos editar o conteúdo da página diretamente na janela do navegador!

A prática é o caminho para a excelência!

Suponha que, além da palavra (ou frase) que está sendo estudada e sua tradução, queremos que o cartão contenha um exemplo do uso dessa palavra (frase) em uma frase. Mas sabemos que é assim que palavras estrangeiras devem ser ensinadas - no contexto, certo?

Melhore o aplicativo adicionando o elemento ausente a ele e forneça um nome, por exemplo, exemplo .

Atributo Mv-multiple

No momento, há apenas um cartão em nosso aplicativo. Francamente, isso não é muito útil! Para um aplicativo completo, não temos a capacidade de adicionar novos cartões, excluir desnecessários e reorganizar os cartões quando nos sentirmos confortáveis. Mas como podemos perceber tudo isso?

Lembre-se à mão!

https://codepen.io/dsharabin/pen/PoYxNmN

Como desenvolvedores de aplicativos, poderíamos adicionar novos cartões simplesmente adicionando mais elementos <article> ao seu código HTML. Mas como o usuário pode adicionar e remover cartões por conta própria?

Felizmente, no Mavo há algo que nos permitirá adicionar a funcionalidade apropriada ao aplicativo uma ou duas vezes - o atributo mv-multiple . Usando esse atributo, dizemos ao Mavo quais elementos do aplicativo podem ser propagados . O atributo mv-multiple transforma o elemento ao qual é adicionado em uma coleção editável de elementos ( coleção ). Ao mesmo tempo, o Mavo adicionará controles aos elementos dessa coleção, com os quais você pode adicionar novos elementos à coleção, excluir os existentes e organizar os elementos da coleção arrastando e soltando. E sim, o estilo desses controles também é totalmente personalizável!

Siga o coelho branco!

Se você adicionar o atributo mv-multiple a um elemento sem o atributo de propriedade , o Mavo corrigirá automaticamente esta situação: adicione propriedade com a coleção de valores (ou collection2 , collection3 para preservar a exclusividade do nome).

No entanto, como no caso do nome do aplicativo, recomendo que você use o atributo property com coleções: isso garante a segurança dos dados do aplicativo ao fazer alterações em sua estrutura HTML.

Bem, vamos adicionar o atributo mv-multiple ao elemento <article> do aplicativo para transformar nosso cartão de memória único em uma coleção de cartões totalmente editável (observe que também adicionamos o atributo de propriedade ):

 <article property="flashcard" mv-multiple> ... </article>

Siga o coelho branco!

O Mavo permite especificar o nome da propriedade como o valor do atributo mv-multiple . Assim, poderíamos descrever a coleção de cartões um pouco mais curta: <article mv-multiple="flashcard"> .

Observe que o atributo mv-multiple deve ser incluído no item que está sendo propagado, e não no contêiner no qual a coleção está localizada. Um erro muito comum é quando os desenvolvedores escrevem <ul mv-multiple> vez de <li mv-multiple> . E, a princípio, esse erro é difícil de detectar. Até que, por exemplo, os estilos usados no aplicativo o tornem óbvio.

Agora, sinta-se à vontade para mudar para o modo de edição. Percebeu que o botão Adicionar cartão de memória apareceu sob o cartão? Vamos organizar um test drive para ela: adicione duas novas placas com a ajuda dela. É algo incrível: podemos adicionar dinamicamente novos cartões ao aplicativo, mesmo que não haja elementos correspondentes no código-fonte!

Siga o coelho branco!

Observe que a adição do atributo de propriedade ao elemento <article> não tornou seu conteúdo editável? Mavo considera esse elemento um grupo . Isso acontece quando o atributo de propriedade é adicionado a um elemento que contém outras propriedades dentro de si, ou seja, elementos com o atributo de propriedade .

Mas isso não é tudo! Passe o mouse sobre qualquer cartão. Você vê que, no canto superior direito do cartão, Mavo adicionou três novos botões (da esquerda para a direita): para excluir o cartão, adicionar um novo e mover o existente. E passando o mouse sobre qualquer um desses botões, você pode adivinhar facilmente a partir da luz de fundo gerada pelo Mavo a qual cartão eles se referem.

Conveniente, certo?

Siga o coelho branco!

Os botões gerados pelo Mavo para trabalhar com itens de coleção são totalmente personalizáveis . Por exemplo, você pode criar seu próprio botão para mover um item de coleção adicionando a classe mv-drag-handle ao elemento HTML correspondente.

Lembre-se de que você pode interagir com todos os botões para trabalhar com itens de coleção usando o teclado . Por exemplo, coloque o foco de entrada no botão de movimento do cartão e use as teclas do cursor para alterar a posição do cartão na coleção.

Atributo MV-storage

Lembre-se à mão!
https://codepen.io/dsharabin/pen/WNeYwpj

Agora que a interface principal do futuro aplicativo foi desenvolvida, proponho o seguinte:

Alterne para o modo de edição (se você não tiver feito isso antes).
Adicione alguns cartões, indicando a palavra e sua tradução em cada um deles.
Retorne ao modo de leitura.
E ... atualize a página.

Ai! Para onde foram todos os dados que inserimos? Mavo não deveria salvá-los? O que deu errado? Onde nós erramos?

Apenas calma! De fato, nunca dissemos a Mavo que ele deveria salvar dados editáveis. Além disso, não indicamos onde exatamente ele deveria salvá-los.

Então vamos fazer agora. Para isso, o Mavo tem um atributo especial - mv-storage . Resta apenas descobrir quais valores ele pode assumir. E acontece que Mavo nos oferece as mais amplas possibilidades . E plugins - abra ainda mais!

Deixe nosso aplicativo salvar dados no armazenamento local do navegador - localStorage . Esta é a opção mais fácil disponível no Mavo e é ótima para o nosso primeiro aplicativo. Tudo o que precisamos fazer é simplesmente adicionar o atributo mv-storage com o valor local ao elemento raiz do aplicativo (este é o nome do elemento com o atributo mv-app , lembra?):

 <main mv-app="flashcards" mv-storage="local"> ... </main>

Agora dê uma olhada na barra de ferramentas Mavo. Notou um novo botão Salvar ? Além de seu objetivo direto - salvar alterações no aplicativo - ele tem outra função útil. Tente editar os dados novamente. Observe que o botão Salvar agora está realçado . Passe o mouse sobre ele com o mouse e o Mavo destacará os dados que você editou, mas não salvou!

Ótimo, hein?

Clique no botão Salvar e atualize a página (não é necessário mudar para o modo de leitura). Bem, agora seus dados estão salvos? Ótimo! Estamos um passo mais perto de um aplicativo da Web completo.

Atributo Mv-autosave

Agora, nosso aplicativo funciona para que o usuário precise clicar no botão Salvar sempre que precisar salvar as alterações feitas no aplicativo. Isso está correto do ponto de vista de salvar informações vitais, mas muitas vezes os usuários esquecem de fazê-lo. Como ser Se apenas o nosso aplicativo pudesse salvar os dados automaticamente em alguns intervalos! "E o que, isso realmente pode ser feito com a ajuda de Mavo?" - você pergunta. E responderei com alegria e orgulho que sim, é possível!

Portanto, para ensinar o aplicativo a salvar automaticamente as alterações feitas pelo usuário nos dados, podemos usar o atributo mv-autosave . Você precisa adicioná-lo ao elemento raiz do aplicativo. O valor desse atributo é o número de segundos que devem decorrer desde o momento em que o usuário faz alterações nos dados até que eles sejam salvos pelo aplicativo. Faremos as alterações apropriadas em nosso aplicativo:

 <main mv-app="flashcard" mv-storage="local" mv-autosave="3"> ... </main>

Siga o coelho branco!

O atributo mv-autosave="3" instrui o Mavo a salvar as alterações feitas nesses dados a cada três segundos. A presença desse tipo de atraso entre salvamentos se torna fundamentalmente importante se o serviço (back-end) escolhido para salvar os dados armazena um histórico de suas alterações (por exemplo, GitHub e Dropbox ). A ausência de tal atraso tornará inútil o histórico de mudanças.

Para forçar o Mavo a salvar as alterações imediatamente, você pode definir o atributo mv-autosave="0" ou apenas mv-autosave . Ao mesmo tempo, o botão Salvar será removido (conforme desnecessário) da barra de ferramentas do Mavo.

Para ver e avaliar as alterações feitas no aplicativo, atualize os dados novamente em um dos cartões e preste atenção no botão Salvar . Você já reparou? No início, era destacado, mas após três segundos desapareceu, indicando que não havia dados não salvos no aplicativo. Agora todas as alterações são salvas automaticamente!

Assim, a parte principal do nosso aplicativo agora fica assim:

 <main mv-app="flashcards" mv-storage="local" mv-autosave="3"> <article property="flashcard" mv-multiple>  <p property="source">  </p>  <p property="translation"></p> </article> </main>

A prática é o caminho para a excelência!

Estamos quase terminando a versão alfa do nosso aplicativo. Viva! Agora é sua vez de torná-lo ainda melhor. Não se preocupe! Você está armado com todo o conhecimento necessário para concluir a tarefa que eu lhe oferecerei.

Melhore o aplicativo para que os cartões unidos por um tema comum possam ser agrupados. Por exemplo, em um grupo todas as palavras relacionadas a roupas estão incluídas, no outro - os nomes das profissões, no terceiro - os nomes dos alimentos etc.

Dicas!

Existem várias maneiras de resolver o problema. Cabe a você decidir qual caminho escolher e qual caminho seguir. Mas quero que você pense em respostas para algumas perguntas que podem ajudá-lo a encontrar uma solução.

Qual elemento HTML você usará como um elemento de agrupamento (grupo) ? Seria conveniente para os usuários do aplicativo se o grupo de cartões pudesse receber um nome ( nome do tópico ) e também se esse grupo pudesse ser minimizado, se necessário, em seu título.
Quais atributos você adicionará ao elemento selecionado (a menos, é claro, que você adicione algo). Este item será uma propriedade ou coleção ?
Os usuários do aplicativo terão a oportunidade de adicionar novos grupos de cartões, excluir grupos desnecessários, mover os próprios grupos e cartões entre grupos diferentes?

A propósito, você pode decidir que combinar cartões em grupos usando elementos separados não é o seu método. E isso é normal. Talvez você queira apenas adicionar tags ( hashtags ) que correspondam ao tópico nos cartões. E também será uma ótima decisão!

Para "se familiarizar" e um pouco mais para se familiarizar com o Mavo e seus recursos, implemente essas duas soluções.

Atributo MV-bar

Continuaremos a expandir a funcionalidade do nosso aplicativo. Nós o configuramos para que os dados do usuário sejam armazenados no armazenamento local do navegador. Mas nosso aplicativo permanece como usuário único: os usuários não podem compartilhar seus cartões com outros usuários. E seria ótimo ter essa oportunidade! E aprender uma língua estrangeira em uma empresa é muito mais divertido, não é?

Existe uma maneira no Mavo de permitir aos usuários exportar seus cartões do aplicativo e importar outros de alguém para ele? Temos sorte! E essa funcionalidade é suportada no Mavo, como se costuma dizer, "pronto para uso". Obviamente, isso não tornará nosso aplicativo multiusuário no sentido canônico da palavra, mas a presença de tal funcionalidade já é muito para um aplicativo tão simples, você deve concordar.

Lembre-se à mão!

https://codepen.io/dsharabin/pen/ZEzmWBr

Para essas tarefas, o Mavo possui o atributo mv-bar , com o qual você pode especificar quais botões aparecerão na barra de ferramentas do Mavo (se algum botão for necessário). Normalmente, esse atributo é adicionado ao elemento raiz do aplicativo. Os próprios botões têm identificadores muito lógicos (em termos de nomes em inglês). Aqui estão apenas alguns deles: editar, importar, exportar .

Como apenas queremos adicionar botões ao conjunto que já está na barra de ferramentas do Mavo, podemos usar a chamada sintaxe relativa . Essa sintaxe nos permite adicionar e remover botões do conjunto padrão sem precisar listar explicitamente todos os botões. , , — mv-bar with , ( ) :

 <main mv-app="flashcards"   mv-storage="local"   mv-autosave="3"   mv-bar="with import export">   ... </main>

— !

- : . , .

. MavoScript

, « », : « ?!» - . ? .

«» , - Mavo.

, (, , ) . , , property . — , .

, , , Mavo ( HTML-). . : [] . . , - , .

!

, Mavo, MavoScript . ( Microsoft® Excel, Apple Numbers Google Sheets) , , . .

Mavo MavoScript , , , : , , , , .

, MavoScript , .

Mavo MavoScript .

!

https://codepen.io/dsharabin/pen/rNBQeMv

. , [source] flashcard . , source translation :

 ... <p property="source">  </p> [source] <p property="translation"></p> ...

? , , source . ? !

. source . , , ? [source] , , source , : , . ?!

, , , — . Porque [source] , , — source . - .

[source] flashcard , ? Assim:

 ... [source] <article property="flashcard" mv-multiple>  ... </article> ...

? , . , source (!) . , , . ?

. ? , , source ? , , source translation . ? : [source] [flashcard] . :

 ... [flashcard] <article property="flashcard" mv-multiple>  ... </article> ...

, ? , — . ( (!)).

, , ( , , ), , . , Mavo . MavoScript count() , .

!

MavoScript — . , .

— . , .

, , , .
.

, count() . , :

 ... <span>[count(flashcard)] .</span> <article property="flashcard" mv-multiple> ... </article> ...

, , — !

— !

, Mavo … . , , - . , .

, , ( ).

!

, , . where filter() .

, , . : , ? , .

( , ) — .

!

https://codepen.io/dsharabin/pen/WNeYwxR

, : . , ? , :

, , (), — ;
, , (), , , .

« , JavaScript?» — . Sim , Mavo — ?!

, , , :

 ... <article property="flashcard" mv-multiple> ... <section>  <h2> </h2>  <button> </button>  <button> </button> </section> </article> ...

mv-action

Mavo , , — ( custom actions ).

, mv-action . , . , — .

!

mv-action <form> , .

mv-action . , MavoScript , : add(), set(), move() delete() .

, , , , .

: Mavo mv-action . , . , mv-action="" , mv-action="[]" . , , , , .

, . : . move() . , — () . , , 0 .

, : , . . . :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, 0)"> </button> ... </article> ...

, mv-action flashcard . .

, . , , , ?

, : , . , , (). , , , . ?

, . : , — flashcard — . flashcard . - :

 ... <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, count(flashcard))">      </button> ... </article> ...

! .

?

. <meta>

, , , [count(flashcard)] , flashcard . , flashcard . , !

, [count(flashcard)] flashcard - , . — flashcard . Mavo , , ( computed properties ).

!

https://codepen.io/dsharabin/pen/NWKENNb

, , HTML-. HTML-, <meta> : <meta property="" content="[]"> . : <meta> , .

!

, , , .

flashcardCount . , flashcard ( ):

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple>  ... </article> ...

: , . :

 ... <meta property="flashcardCount" content="[count(flashcard)]"> <article property="flashcard" mv-multiple> ... <button mv-action="move(flashcard, flashcardCount)">      </button> </article> ...

! . Parabéns!

— !

— $all .

$all , , . , . $all flashcardCount . ? Porque

, . , , ( ) . .

Conclusões

, -. JavaScript. , , -. , « ». .

, — , , , . , , , . , HTML- Mavo, :

( <head> ) JavaScript- CSS- Mavo.
mv-app .
, ( / , / ) , property .
mv-multiple , .
Mavo, , mv-storage .
, . , mv-autosave .

, :
Mavo ( Mavo ). mv-bar , , , .
(expressions) ( ) (property) . ( ) , . Mavo , MavoScript .
(custom actions) . mv-action .
(computed properties) — , . , <meta> .

. ? , . . , , , (, ). , . ! . - — ! ? 17 — ( « » )!

, Mavo, — , . Mavo . : Mavo -, .

Mavo . -, . Como :

Mavo, , — Mavo ;
, , , ;
Mavo, , , , — ;
, Mavo Twitter , , , , «» (, Gitter Mavo);
, Mavo — !

Mavo!

.

, ( Lea Verou ), ( ), : , - . , !

( James Moore ). , « JavaScript » Udemy , , «» . !

Uma aplicação web interativa sem programação? Fácil! Mavo nos seus braços