Top Trends Tecnologias em Desenvolvimento Web para 2020!
Tags: webdev, showdev, javascript, node
Published: 2020-01-20 00:07:58

---
title: Top Trends Tecnologias em Desenvolvimento Web para 2020!
published: true
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3afl1latquyodntmezxq.jpg
description: Nesse artigo vamos descobrir os top trends tecnologias em desenvolvimento Web para 2020!
series: O que aprender em 2020?
tags: webdev, showdev, javascript, node
---

[![marvin-meyer-SYTO3xs06f-U-unsplash.jpg](https://i.postimg.cc/FzkYxnGs/marvin-meyer-SYTO3xs06f-U-unsplash.jpg)](https://postimg.cc/ZvZYbH11)

Essa é a segunda e última parte da série: **O que aprender em 2020?**. Para quem ainda não leu a primeira parte, podem conferir **[AQUI](https://dev.to/azure/top-5-linguagens-de-programacao-para-aprender-em-2020-52in)**

No artigo de hoje, vamos falar um pouco sobre tendências de Tecnologias para Desenvolvimento Web durante esse ano de 2020! Pois sabemos que todos os anos novos frameworks surgem e conceitos de programação também.

Esse artigo ele é baseado no famoso roadmap criado pelo desenvolvedor **[Kamran Ahmed](https://twitter.com/kamranahmedse)**, que nos mostra certos direcionamentos em que devemos estudar para seguir como: Back-End ou Front-End. Para quem não conhece o site dele com esses roadmaps, podem conferir: **[AQUI](https://roadmap.sh/)**.

Novamente: artigo baseado em tendências. Não que isso possa ser cumprido durante esse ano. Por isso, vamos observar durante esse ano! E outro ponto: o meu foco nesse artigo será em tecnologias Web! 

Vamos lá?!

## HTML, CSS & JavaScript

Sim! Esse grande tríade da Web ainda é necessário para todos(as) e fundamental para desenvolvimento de aplicações para Web. Assim sendo, pode passar ano a ano o HTML, CSS e JavaScript continuarão como itens muito importantes para o Desenvolvimento Web. Por isso, faz parte dessa lista!

E caso, queiram aprender mais sobre HTML, CSS e JavaScript, deixarei aqui recursos e links que poderão ajudar a todos:

##### 1. HTML

- **[HTML Full Course - Build a Website Tutorial](https://www.youtube.com/watch?v=pQN-pnXPaVg)**
- **[Curso de HTML5 Completo e GRÁTIS](https://www.youtube.com/playlist?list=PLHz_AreHm4dlAnJ_jJtV29RFxnPHDuk9o)**
- **[MDN Docs - HTML](https://developer.mozilla.org/pt-BR/docs/Web/HTML)**

##### 2. CSS

- **[Curso de CSS - Curso completo de CSS3 a linguagem oficial de formatação de páginas web](https://www.youtube.com/playlist?list=PLx4x_zx8csUi47Bnugpk78nqJN6rYvEnV)**
- **[CSS Crash Course For Absolute Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI)**
- **[MDN Docs - CSS](https://developer.mozilla.org/pt-BR/docs/Web/CSS)**

##### 3. JavaScript

- **[10 Dicas para se Tornar Ninja em JavaScript!](https://dev.to/azure/10-dicas-para-se-tornar-ninja-em-javascript-1775)**
- **[Curso Grátis - HTML, CSS & JavaScript: Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=devto-blog-gllemos)**
- **[Curso de Javascript - Para quem quer aprender Javascript de verdade de forma objetiva e clara](https://www.youtube.com/playlist?list=PLx4x_zx8csUj3IbPQ4_X5jis_SkCol3eC)**
- **[Rodrigo Branas - JavaScript (Youtube)](https://www.youtube.com/playlist?list=PLQCmSnNFVYnT1-oeDOSBnt164802rkegc)**
- **[MDN Docs - JavaScript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)**

## Frameworks JavaScript

Esse é um tema polêmico, pois tem gente que não sabe qual começar e tivemos uma live no meu canal, ano passado, falando justamente sobre isso e foi sensacional. E ainda mais com pessoas referências na Comunidade Técnica no Brasil: Loiane Groner, Will Oliveira, Tulio Faria, Igor Halfeld e Marco Bruno. Para aqueles que não viram, fica a dica: **[Webinar - Vue vs React vs Angular - Qual Escolher?!](https://youtu.be/0pThnRneDjw)**

Não tem como dizer que framework X é melhor que Y e que Z é melhor que Y. Vai depender de cada contexto de cada projeto. Mas, isso é um tema para o Webinar acima! ;)

Angular, Vue e React continuam como grandes tendências! Mas, tem um que vem ganhando os corações de vários desenvolvedores(as) em todo o planeta: Svelte!

Para quem deseja aprender um pouco mais sobre cada um desses frameworks, segue os links abaixo:

##### 1. Angular

- **[Curso de Angular - Loiane Groner](https://www.youtube.com/playlist?list=PLGxZ4Rq3BOBoSRcKWEdQACbUCNWLczg2G)**
- **[Learn Angular - Full Tutorial Course](https://www.youtube.com/watch?v=2OHbjep_WjQ)**
- **[Angular Docs](https://angular.io/docs)**
- **[Usando Angular no Visual Studio Code](https://code.visualstudio.com/docs/nodejs/angular-tutorial?WT.mc_id=devto-blog-gllemos)**

##### 2. React

- **[React Docs](https://pt-br.reactjs.org/)**
- **[Learn React JS - Full Course for Beginners - Tutorial 2019](https://www.youtube.com/watch?v=DLX62G4lc44)**
- **[ReactJS Tutorial](https://www.youtube.com/playlist?list=PLC3y8-rFHvwgg3vaYJgHGnModB54rxOk3)**
- **[Usando React no Visual Studio](https://code.visualstudio.com/docs/nodejs/reactjs-tutorial?WT.mc_id=devto-blog-gllemos)**
- **[Curso Gratuito de React - Rocketseat](https://rocketseat.com.br/starter/curso-gratuito-reactjs)**

##### 3. Vue

- **[Vue Docs](https://br.vuejs.org/v2/guide/)**
- **[Learn Vue.js](https://www.youtube.com/watch?v=4deVCNJq3qc)**
- **[Vue.js do jeito ninja (Youtube)](https://www.youtube.com/playlist?list=PLcoYAcR89n-qq1vGRbaUiV6Q9puy0qigW)**
- **[Usando Vue no Visual Studio Code](https://code.visualstudio.com/docs/nodejs/vuejs-tutorial?WT.mc_id=devto-blog-gllemos)**

##### 4. Svelte

- **[Svelte Docs](https://svelte.dev/tutorial/basics)**
- **[Svelte Crash Course](https://www.youtube.com/watch?v=uK2RnIzrQ0M)**
- **[Svelte - Quickstart & Thorough Introduction Tutorial](https://www.youtube.com/watch?v=LIfIRdRlD58)**

## Ferramentas & IDE's

Outro ponto que para nós pessoas desenvolvedoras, fazemos uso diariamente: terminais e IDE's. E quais são as Ferramentas e IDE's que serão tendências nesse ano de 2020 no Desenvolvimento Web?

São eles: 

##### **1. [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=devto-blog-gllemos)**

- **[Vs Code Docs](https://code.visualstudio.com/docs?WT.mc_id=devto-blog-gllemos)**
- **[Visual Studio Code Intro & Setup](https://www.youtube.com/watch?v=fnPhJHN0jTE)**
- **[14 Dicas para Turbinar o seu VS Code!](https://medium.com/@glaucia86/14-dicas-para-turbinar-o-seu-vs-code-341cf5f8a353)**

##### **2. [Novo Terminal do Windows](https://github.com/microsoft/terminal)**

- **[Artigo sobre - Novo Windows Terminal](https://devblogs.microsoft.com/commandline/introducing-windows-terminal/?WT.mc_id=devto-blog-gllemos)**
- **[The New Windows Terminal ROCKS! Let's customize it!](https://www.youtube.com/watch?v=sckbApgo4Fk)**

##### **3. [WSL (Windows Subsystem Linux)]()**

- **[WSL Docs](https://docs.microsoft.com/windows/wsl/about?WT.mc_id=devto-blog-gllemos)**
- **[Tutorial - Usando WSL no Vs Code](https://code.visualstudio.com/remote-tutorials/wsl/run-in-wsl?WT.mc_id=devto-blog-gllemos)**
- **[Rodando Linux DENTRO do Windows - WSL](https://www.youtube.com/watch?v=HSLpH43hL-o)**

##### **4. [Git](https://git-scm.com/)** 

- **[Curso Grátis - Introdução ao controle de versão com o Git: Microsoft Learn](https://docs.microsoft.com/learn/paths/intro-to-vc-git/?WT.mc_id=devto-blog-gllemos)**
- **[Curso básico de Git](https://www.youtube.com/playlist?list=PLInBAd9OZCzzHBJjLFZzRl6DgUmOeG3H0)**
- **[Git & GitHub Crash Course For Beginners](https://www.youtube.com/watch?v=SWYqp7iY_Tc)**
- **[Controle de Versão Git no Vs Code](https://code.visualstudio.com/docs/editor/versioncontrol?WT.mc_id=devto-blog-gllemos)**

##### **5. [GitHub](https://github.com/)**

- **[GitHub docs](https://guides.github.com/)**
- **[GitHub | Guia Completo do Iniciante](https://www.youtube.com/watch?v=UbJLOn1PAKw)**
- **[Artigo com inúmeros cursos de GitHub](https://devblogs.microsoft.com/premier-developer/github-learning-path/?WT.mc_id=devto-blog-gllemos)**
- **[Curso - Implementando um code workflow no seu pipeline do build com Git & GitHub](https://docs.microsoft.com/learn/modules/implement-code-workflow/?WT.mc_id=devto-blog-gllemos)**

Falando em Vs Code e WSL, aguardem que em muito em breve estarei estarei escrevendo um artigo sobre WSL e esse ano no meu **[Canal do Youtube](https://www.youtube.com/user/l32759)** estarei fazendo uma série de vídeos sobre Visual Studio Code! Assim que, assinem o canal e ativem o sininho para receberem as notificações!

Mas, vamos lá! Pois a lista continua!

## TypeScript

Muitos podem não gostar, mas não podemos negar que TypeScript é fundamental para o desenvolvimento Web e por isso está na lista do Top Trends para 2020!

E falando de TypeScript também, nesse ano estarei fazendo reboot de vídeos de TypeScript no meu canal no Youtube. Também, aguardem!

Aqui temos alguns recursos importantes para aprender mais sobre TypeScript:

##### TypeScript

- **[TypeScript docs](https://www.typescriptlang.org/docs/handbook/basic-types.html?WT.mc_id=devto-blog-gllemos)**
- **[Tutorial TypeScript - Vs Code](https://code.visualstudio.com/docs/typescript/typescript-tutorial?WT.mc_id=devto-blog-gllemos)**
- **[Learn TypeScript in 50 Minutes - Tutorial for Beginners](https://www.youtube.com/watch?v=WBPrJSw7yQA)**
- **[TypeScript com NodeJS do jeito certo! | Diego Fernandes](https://www.youtube.com/watch?v=aTf8QTjw4RE&t=684s)**


## Server Side

Trabalhando com desenvolvimento web se faz necessário ter um server side para que possamos executar as nossas aplicações web no lado do servidor. E quais são as tendências para 2020?

São eles:

##### 1. **[Node.js](https://nodejs.org/en/)**

- **[Node.js docs](https://nodejs.org/en/docs/)**
- **[Curso: Criando APIs com NodeJs](https://www.youtube.com/playlist?list=PLHlHvK2lnJndvvycjBqQAbgEDqXxKLoqn)**
- **[Learn Node.js - Full Tutorial for Beginners](https://www.youtube.com/watch?v=RLtyhwFtXQA&t=1s)**
- **[Tutorial Node.js com Vs Code](https://code.visualstudio.com/docs/nodejs/nodejs-tutorial?WT.mc_id=devto-blog-gllemos)**
- **[Tutorial - Criando um App Web em Node.js no Azure](https://docs.microsoft.com/azure/app-service/app-service-web-get-started-nodejs?WT.mc_id=devto-blog-gllemos)**
- **[Curso - Criando um App Node.js para o Azure Cosmos DB no Vs Code](https://docs.microsoft.com/learn/modules/build-node-cosmos-app-vscode/?WT.mc_id=devto-blog-gllemos)**

##### 2. **[Nest](https://nestjs.com/)**

- **[Nest Docs](https://docs.nestjs.com/)**
- **[NestJS Crash Course](https://www.youtube.com/watch?v=wqhNoDE6pb4)**
- **[Iniciando com NestJS - NestJS para Iniciantes](https://www.youtube.com/watch?v=ufSIGVs9X_8)**

##### 3. **[Nuxt.js](https://nuxtjs.org/)**

- **[Nuxt Docs](https://nuxtjs.org/guide)**
- **[010 Nuxt - Vue e SSR simples e fácil](https://www.youtube.com/watch?v=PPlKBtH8kFs)**
- **[Nuxt JS Crash Course](https://www.youtube.com/watch?v=ltzlhAxJr74)**

##### 4. **[Next.js](https://nextjs.org/)**

- **[Next.js docs](https://nextjs.org/docs/getting-started)**
- **[Iniciando com server-side rendering (SSR) no ReactJS com Next.js | Diego Fernandes](https://www.youtube.com/watch?v=aQFPetOyzUE)**
- **[Next.js Crash Course - Server Side React](https://www.youtube.com/watch?v=IkOVe40Sy0U)**

E vamos concluir essa lista com alguns itens adicionais! Vamos lá!

## Itens adicionais

Para que esse artigo não fique longo demais, resolvi incluir essa última parte da lista com itens que às vezes, nós pessoas desenvolvedoras, acabamos nos esquecendo mas que se tornam muito importantes para todos nós sabermos no dia de hoje! Incluso Computação em Nuvem!

Aqui vão algumas delas:

##### 1. Cloud Computing

- **[Curso Grátis de Cloud Computing - Azure](https://docs.microsoft.com/learn/paths/azure-fundamentals/?WT.mc_id=devto-blog-gllemos)**
- **[Tutoriais de Azure no Vs Code](https://code.visualstudio.com/docs/azure/deployment?WT.mc_id=devto-blog-gllemos)**
- **[Azure com Node.js - Documentação Azure](https://docs.microsoft.com/azure/javascript/?WT.mc_id=devto-blog-gllemos)**

##### 2. Serverless

- **[Serverless Docs](https://serverless.com/framework/docs/)**
- **[Tutorial - Implantando o Azure Functions com o Vs Code](https://docs.microsoft.com/azure/javascript/tutorial-vscode-serverless-node-01?WT.mc_id=devto-blog-gllemos)**
- **[E-book Gratuito: Design de sistemas distribuídos](https://azure.microsoft.com/resources/designing-distributed-systems/?WT.mc_id=devto-blog-gllemos)**
- **[E-book Gratuito: Azure Serverless Computing Cookbook, Second Edition](https://azure.microsoft.com/resources/azure-serverless-computing-cookbook/?WT.mc_id=devto-blog-gllemos)**
- **[Guia do desenvolvedor de JavaScript do Azure Functions - Docs](https://docs.microsoft.com/azure/azure-functions/functions-reference-node?WT.mc_id=devto-blog-gllemos)**

##### 3. NoSQL

- **[MongoDb Docs](https://docs.mongodb.com/)**
- **[MongoDB Complete Introduction & Summary](https://www.youtube.com/watch?v=VELru-FCWDM)**
- **[Tutorial - Criando um App Angular com a API do Azure Cosmos DB para MongoDB](https://docs.microsoft.com/azure/cosmos-db/tutorial-develop-mongodb-nodejs?WT.mc_id=devto-blog-gllemos)**
- **[Tutorial - Criando um App do MongoDB com React e Azure Cosmos DB](https://docs.microsoft.com/azure/cosmos-db/tutorial-develop-mongodb-react?WT.mc_id=devto-blog-gllemos)**

##### 4. GraphQL 

- **[GraphQL Docs](https://graphql.org/learn/)**
- **[GraphQL Full Course - Novice to Expert](https://www.youtube.com/watch?v=ed8SzALpx1Q)**
- **[Aprenda GraphQL com Express (Servidor Backend API JSON)](https://www.youtube.com/playlist?list=PLUbb2i4BuuzAHToiiVdFwrFSpw3FUj6Qh)**
- **[Build Scalable APIs using GraphQL and Serverless - Video](https://azure.microsoft.com/resources/videos/build-2019-build-scalable-apis-using-graphql-and-serverless/?WT.mc_id=devto-blog-gllemos)**

## Palavras Finais

Com certeza deixei de lado muitas outras tecnologias. Até porque se eu citar todos eles aqui, essa lista não vai ter fim. Isso não quer dizer que vocês precisam saber todas elas para ser expert. Não! Não mesmo! Aqui só quero mostrar tendências de tecnologias web que devemos ficar de olhos abertos!

E aí? Alguma tecnologia que eu esqueci de colocar aqui e não mencionei?! Deixem nos comentários abaixo e dão vários ❤️❤️ aqui no **[dev.to](https://dev.to/)** e fiquem ligados nos próximos artigos escritos aqui pois durante esse ano, vai vir muita coisa legal.

Ah! Já estava me esquecendo... estou fazendo live coding de segunda a sexta no Twitch e no Youtube com uma nova série chamada: **Aprendendo Front-End com 9 Projetos**, a qual nos próximos 100 dias estarei desenvolvendo 9 projetos Front-End (Vue, Angular, React, Svelte, Nest...) enfim... se desejarem saber mais informações sobre essa nova série, bastam clicar: **[AQUI](https://github.com/glaucia86/livecoding-frontend-projects)**

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

[![Twitter](https://code4coders.files.wordpress.com/2019/05/image-12.png)](https://twitter.com/glaucia_lemos86)

Nos vemos! Até a próxima série pessoal! 😍