Entendendo frameworks JavaScript do lado do cliente

Você deve aprender o básico das principais linguagens para web(HTML, CSS e principalmente Javascript) antes de estudar os frameworks voltados para client-side.Dessa forma, o seu código será mais rico e profissional, preparando você para lidar com problemas com mais confiança, resultado do bom entendimento sobre os recursos fundamentais dos frameworks que constroem as plataformas.

1.Introdução a frameworks para client-side

Nós iniciamos nosso olhar sobre frameworks com uma visão geral da área, olhando para uma breve história do JavaScript e frameworks, por que frameworks existem e o que eles nos fornecem, como começar a pensar na escolha de um framework para aprender e quais alternativas de frameworks para o lado do cliente existem.

2.Principais recursos para frameworks

Cada framework JavaScript principal tem uma abordagem diferente para atualizar o DOM, manipular eventos do navegador e fornecer uma experiência agradável de desenvolvimento. Este artigo explorará os principais recursos dos "quatro maiores" frameworks, observando como eles tendem a funcionar a partir de um nível superficial e as diferenças entre si.

1. Começando com o React

Neste artigo nós vamos dar olá para o React. Descobriremos um pouco dos detalhes sobre seu histórico e casos de uso, configurar uma cadeia de ferramentas React básica em nosso computador local, e criar e brincar com um aplicativo inicial simples, aprendendo um pouco sobre como o React funciona no processo.

2. Começando com a nossa lista "to do" do React

Digamos que recebemos a tarefa de criar uma prova de conceito em React - uma aplicação que permite aos usuários adicionar, editar e deletar tarefas nas quais desejam trabalhar e também marcar tarefas como concluídas sem excluí-las. Este artigo irá orientá-lo sobre como colocar a estrutura básica e estilizações do componente App no lugar, pronto para a definição e interatividade de componentes individuais, que adicionaremos mais tarde.

3. Componetizando o nosso app React

Neste ponto, nossa aplicação é um monólito. Antes que possamos fazê-lo fazer as coisas, nós precisamos dividi-lo em componentes gerenciáveis e descritivos. React não tem regras rígidas para o que é ou não um componente – isso é com você! Neste artigo mostraremos a você uma forma sensível de dividir nossa aplicação em componentes.

4. Interatividade React : Eventos e estado

Com nosso plano de componentes realizado, agora é hora de começar a atualizar nossa aplicação de uma interface de usuário completamente estática para uma que realmente nos permita interagir e alterar as coisas. Neste artigo faremos isso, investigando os eventos e estados ao longo do caminho.

5. Interatividade com o React : Editando, filltrando e renderizando

À medida que nos aproximamos do final da nossa jornada React (pelo menos por enquanto), adicionaremos os toques finais para as principais áreas de funcionalidade da nossa aplicação de lista "to do". Isso inclui permitir que você edite tarefas existentes e filtre a lista de tarefas entre todas as tarefas, concluídas e incompletas. Veremos a renderização condicional da interface de usuário ao longo do caminho.

6. Acessibilidade com o React

Em nosso artigo tutorial final, vamos focar (trocadilho intencional) na acessibilidade, incluindo o gerenciamento de foco no React, que pode melhorar a usabilidade e reduzir a confusão tanto para os usuários de teclado quanto usuários leitores de tela.

7. Recursos do React

Nosso artigo final fornece uma lista de recursos do React que você pode usar para avançar no seu aprendizado.

1. Getting started with Ember

In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.

2. Ember app structure and componentization

In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.

3. Ember interactivity: Events, classes and state

At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.

4. Ember Interactivity: Footer functionality, conditional rendering

Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.

5. Routing in Ember

In this article we learn about routing or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".

6. Ember resources and troubleshooting

Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.

1. Getting started with Vue

Now let's introduce Vue, the third of our frameworks. In this article, we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.

2. Creating our first Vue component

Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props and saving data state.

3. Rendering a list of Vue components

At this point we've got a fully working component; we're now ready to add multiple ToDoItem components to our App. In this article we'll look at adding a set of todo item data to our App.vue component, which we'll then loop through and display inside ToDoItem components using the v-for directive.

4. Adding a new todo form: Vue events, methods, and models

We now have sample data in place and a loop that takes each bit of data and renders it inside a ToDoItem in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that, we'll need a text <input>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.

5. Styling Vue components with CSS

The time has finally come to make our app look a bit nicer. In this article, we'll explore the different ways of styling Vue components with CSS.

6. Using Vue computed properties

In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods but only re-run when one of their dependencies changes.

7. Vue conditional rendering: editing existing todos

Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely v-if and v-else — to allow us to toggle between the existing todo item view and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.

8. Focus management with Vue refs

We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.

9. Vue resources

Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.

We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:

• They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skill set when looking for a job.
• They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.
• We don't have the resources to cover all modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.
• As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.

We want to say this upfront — we've not chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.

Note that we were hoping to have more frameworks included upon initial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via Matrix, or Discourse, or drop us a mail on the mdn-admins list.