Cover Image

WesleyMaik/frontend-roadmap

Front-end Roadmap

Versão EN-US

Esse é um repositório é destinado à uma trilha de estudos baseado na minha experiência como desenvolvedor Front-end, apenas com conteúdos gratuitos. Todos os direitos dos conteúdos são totalmente reservados aos criadores, esse repositório não tem intuito comercial.

Quer colaborar com esse ropositório ou corrigir alguma informação errada? Ótimo! Todas as issues serão bem-vindas. Clique aqui para ver as issues.

Os conteúdos marcados com star indicam que tive melhor experiência e/ou seja o mais didático que encontrei, tanto para iniciantes quanto para quem já está se desenvolvendo.

Me siga no Twitter Twitter Follow

Sumário

Internet Internet

A Internet é um sistema global de redes de computadores interligadas que utilizam um conjunto próprio de protocolos com o propósito de servir progressivamente usuários no mundo inteiro.

HTML HTML5

HTML é uma linguagem marcação feita para estruturação de sites e aplicações web.

CSS CSS3

CSS é uma linguagem de estilo que estiliza as Tags HTML. Ela é escrita em forma de cascata e é muito simples de aprender.

Javascript JavaScript

Javascript é uma linguagem de programação, estruturada e de script de alto nível, responsável por fazer o dinamismo de sites e aplicações web.

Git e Github Git GitHub

Git é um sistema de controle de versões distribuído, usado principalmente no desenvolvimento de software, mas pode ser usado para registrar o histórico de edições de qualquer tipo de arquivo.

GitHub é uma plataforma de hospedagem de código-fonte e arquivos com controle de versão usando o Git. Ele permite que programadores, utilitários ou qualquer usuário cadastrado na plataforma contribuam em projetos privados e/ou Open Source de qualquer lugar do mundo.

Typescript TypeScript

Typescript é uma linguagem de programação derivada do Javascript. É um superconjunto de novas utilidades e forte tipagem opcional. É uma tendência se utilizar do Typescript para trabalhar com médios e grandes projetos.

NodeJS NodeJS

Node.js é um runtime Javascript que leva a renderização e processamento de códigos para o lado do servidor, desassociando totalmente do browser, possibilitando que você desenvolva aplicações rápidas e estáveis.

Pré-Processadores CSS SASS Less

Pré-Processadores CSS são interpretadores de código que leem todo o código gerado e convertem para CSS comum capazes de serem rodados em (quase) todos os navegadores. A produtividade, organização e rapidez em manutenção de código justificam o uso de pré-processadores, sem falar que eles conseguem minificar o código CSS para ficarem mais leves.

Bundles e Builders Webpack Vite

Bundles são empacotadores de módulos para Javascript. Um Bundle recebe módulos com dependências e gera ativos estáticos representando esses módulos, normalmente em HTML, CSS e Javascript.

Builders são ferramentas de desenvolvimento que melhora significativamente a experiência de desenvolvimento de front-end. É composto por duas partes principais: Um servidor que atende seus arquivos de origem em módulos ES nativos e um compilador que agrupa seu código para gerar ativos estáticos altamente otimizados para produção.

Bibliotecas e Frameworks

Apartir daqui, você pode escolher uma biblioteca ou um framework para seguir seus estudos ou até mesmo aprender mais de um, vai do seu critério, mas o que eu recomendaria é focar em apenas um até você ter um domínio legal antes de passar para outro.

React React

O ReactJS é uma das biblioteca mais famosas JavaScript de com foco em criar interfaces de usuário em páginas web.

React faz com que a criação de UIs interativas seja uma tarefa fácil. O React é baseado em componentes e esses componentes encapsulados gerenciam seus próprios estados e funções e o React irá atualizar e renderizar de forma eficiente apenas os componentes necessários na medida em que os dados mudam.

Vale lembrar que o React é mantido pelo Facebook e utilizado por grandes empresas como Instagram, AirBnB, Netflix e outras.

Vue Vue.js

O VueJS é um dos framework mais famosos Javascript para criação de interfaces progressivas e reativas. Vue é perfeitamente capaz de dar poder a Aplicações de Página Única quando usado em conjunto com ferramentas modernas e bibliotecas de apoio.

O Vue fornece um modelo de programação declarativo e baseado em componentes e possui uma estrutura e aprendizagem bem simples. Apostando em uma arquitetura enxuta, Vue requer uma configuração mínima na criação de um projeto e pode ser facilmente integrado com uma aplicação já existente através de uma simples tag script. E por ser progressivo ele pode ser usado em só um pedaço de uma aplicação que precisa otimizar a UI, como o Laravel.

O Vue foi criado pelo Evan You, ex desenvolvedor da Google, e o framework é usado por grandes empresas como Alibaba, Nintendo, Baidu e outras.

NextJS Next JS

NextJS é um framework para React totalmente pré-configurada que reúne vários recursos para acelerar o desenvolvimento de aplicativos: estamos falando de renderização híbrida e estática, suporte a TypeScript, serviços de manipulação de rotas e muito mais. Criado pela Vercel, o Next.js é uma plataforma de código aberto.

NuxtJS Nuxtjs

NuxtJS é um framework para VueJS (Sim, um framework para outro framework) que tem os mesmo princípios do NextJS: simplificar o desenvolvimento, roteamento de arquivos, estrutura modulável e muito mais. Seus benefícios são a redução do tempo de interatividade e a melhoria do SEO em relação aos SPAs.

Mobile

Ferramenta para desenvolvimento de aplicativos mobile.

React Native React Native

O React Native permite que você crie aplicativos verdadeiramente nativos tanto para Android e IOS, utilizando React e não compromete a experiência de seus usuários. Ele fornece um conjunto principal de componentes nativos que mapeiam diretamente para os blocos de construção de interface do usuário nativos da plataforma.

Flutter Flutter

Flutter é um kit de desenvolvimento criado pela Google em 2015, baseado na linguagem de programação Dart, permitindo que você crie aplicativos para Android e IOS nativamente, baseado em Widgets.

Testes Unitários

Basicamente os testes unitários ajudam você a pensar com as expectativas de seu código de uma forma organizada, minimizam o risco e o esforço ao mudar o código e incentivam o design modular. A ideia de teste unitário é testar uma pequena unidade autônoma de código antes de integrá-la ao sistema maior.

Obrigado por ter vindo até aqui. Se gostou, considere dar uma estrela nesse reposiório e compartilhe para alguma pessoa que está começando ou se desenvolvendo na área Front-end.

Me siga nas redes sociais:

Twitter Instagram LinkedIn Dev.to blog