{"id":5877,"date":"2019-07-29T09:45:26","date_gmt":"2019-07-29T12:45:26","guid":{"rendered":"https:\/\/blog.umbler.com\/?p=5877"},"modified":"2021-12-01T11:24:43","modified_gmt":"2021-12-01T13:24:43","slug":"como-se-tornar-um-desenvolvedor-javascript-de-sucesso","status":"publish","type":"post","link":"https:\/\/blog.umbler.com\/br\/como-se-tornar-um-desenvolvedor-javascript-de-sucesso\/","title":{"rendered":"Como se tornar um desenvolvedor JavaScript de sucesso?"},"content":{"rendered":"\n<p>Certamente, o JavaScript \u00e9 uma das linguagens que mais ganhou destaque nos \u00faltimos anos. A populariza\u00e7\u00e3o de seu uso tamb\u00e9m em aplica\u00e7\u00f5es <em>back-end<\/em> (gra\u00e7as ao Node.js principalmente) e o aumento na demanda por aplica\u00e7\u00f5es SPA (<em>Single Page Application<\/em>) atrav\u00e9s de frameworks como o Angular e o React fez com que o<strong> JavaScript desse um salto de popularidade e ado\u00e7\u00e3o em solu\u00e7\u00f5es computacionais<\/strong> dos mais variados n\u00edveis de porte e complexidade. Atualmente, a grande maioria dos desenvolvedores n\u00e3o enxerga o JavaScript como uma linguagem unicamente <em>client-side<\/em> que deve ser utilizada para pequenas anima\u00e7\u00f5es e valida\u00e7\u00f5es de formul\u00e1rios em p\u00e1ginas web.<\/p>\n\n\n\n<p>O JavaScript hoje \u00e9 visto como uma <em>stack<\/em> de desenvolvimento poderosa, robusta e, ao mesmo tempo, leve e com uma curva de aprendizado razo\u00e1vel, por mais que a linguagem tenha as suas \u201cmanias\u201d e particularidades.Tornou-se t\u00e3o popular que hoje <strong>\u00e9 poss\u00edvel desenvolver uma solu\u00e7\u00e3o de qualquer tipo e nicho com ferramentas baseadas nessa linguagem<\/strong>, desde <em>batches<\/em> at\u00e9 mesmo aplica\u00e7\u00f5es com foco em <a href=\"https:\/\/blog.umbler.com\/br\/inteligencia-artificial-no-whatsapp\/\">intelig\u00eancia artificial<\/a>. Isso amplia, e muito, a quantidade de t\u00f3picos e conceitos que um desenvolvedor JavaScript moderno precisa dominar. Neste artigo, vamos dar algumas dicas de como voc\u00ea pode se tornar um desenvolvedor JavaScript de sucesso e requisitado pelo mercado.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aprenda os conceitos essenciais e o core da linguagem<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"360\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code.jpg\" alt=\"\" class=\"wp-image-5880\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code.jpg 640w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code-300x169.jpg 300w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code-500x281.jpg 500w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code-150x84.jpg 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code-400x225.jpg 400w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/source-code-200x113.jpg 200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Por mais redundante que possa parecer, esse \u00e9 um ponto que sempre merece destaque: um bom desenvolvedor JavaScript deve conhecer o core e as nuances que a linguagem tem, principalmente com rela\u00e7\u00e3o a outras linguagens mais tradicionais. \u00c9 essencial que um desenvolvedor JavaScript domine conceitos como o sistema de tipagem, a defini\u00e7\u00e3o de escopos, as diferen\u00e7as no <em>strict mode<\/em>, as <em>keywords var<\/em>, <em>let <\/em>e <em>const<\/em>; e conceitos como <em>hoisting<\/em>, <em>closures <\/em>e <em>prototyping<\/em>.<\/p>\n\n\n\n<p>Outro ponto essencial quando falamos do core da linguagem \u00e9 <strong>o aprendizado tanto do JavaScript pr\u00e9-ECMA6 e o p\u00f3s-ECMA6<\/strong>, tendo em vista que a linguagem teve uma s\u00e9rie de mudan\u00e7as nessa transi\u00e7\u00e3o de vers\u00e3o.<\/p>\n\n\n\n<p>Hoje, consideramos como \u201c<strong>JavaScript moderno<\/strong>\u201d do ECMAScript6 em diante pelo menos, j\u00e1 que a linguagem trouxe uma s\u00e9rie de recursos inovadores. Por\u00e9m, ainda existem grandes projetos que s\u00e3o escritos em vers\u00f5es anteriores da linguagem.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Saiba como o JavaScript e outras linguagens lidam com a web<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"640\" height=\"426\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https.jpg\" alt=\"\" class=\"wp-image-5883\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https.jpg 640w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https-300x200.jpg 300w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https-500x333.jpg 500w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https-150x100.jpg 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https-400x266.jpg 400w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/https-200x133.jpg 200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Entender conceitos essenciais sobre o funcionamento de aplica\u00e7\u00f5es web \u00e9 essencial para qualquer desenvolvedor JavaScript, tendo em vista que a linguagem \u00e9 largamente utilizada em projetos web. Aqui entram, principalmente, conceitos relacionados ao protocolo HTTP.<\/p>\n\n\n\n<p>Entender o funcionamento do protocolo, bem como etapas como <em>handshake <\/em>e o <em>content negotiation<\/em>, <strong>\u00e9 essencial para a utiliza\u00e7\u00e3o correta e perform\u00e1tica do protocolo<\/strong> sob o qual a maioria das aplica\u00e7\u00f5es modernas rodam. Aqui, tamb\u00e9m entram t\u00f3picos fundamentais do protocolo, como a fun\u00e7\u00e3o dos status e verbos HTTP.<\/p>\n\n\n\n<p>Tamb\u00e9m \u00e9 importante entender a natureza da assincronia que o JavaScript adota para lidar com requisi\u00e7\u00f5es HTTP. Aqui, entram t\u00f3picos como <em>callbacks<\/em>, <em>promises <\/em>e, mais recentemente, <em>observables <\/em>e o famoso <em>RxJS<\/em>, o que ir\u00e1 realizar a introdu\u00e7\u00e3o para outras frentes, como programa\u00e7\u00e3o reativa.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Entender que JavaScript n\u00e3o \u00e9 mais simplesmente para front-end<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"640\" height=\"320\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node.png\" alt=\"\" class=\"wp-image-5885\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node.png 640w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node-300x150.png 300w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node-500x250.png 500w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node-150x75.png 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node-400x200.png 400w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/logo_node-200x100.png 200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>Foi-se o tempo em que JavaScript era uma linguagem puramente para desenvolvimento front-end\u2026 A flexibilidade e leveza caracter\u00edsticos do JavaScript o tornaram uma ferramenta poderos\u00edssima para o desenvolvimento tamb\u00e9m de aplica\u00e7\u00f5es que rodam no <em>back-end<\/em>.<\/p>\n\n\n\n<p>E tudo isso aconteceu em especial por causa de uma biblioteca que hoje \u00e9 muito popular: o<strong> Node.js<\/strong>.<\/p>\n\n\n\n<p>O Node.js hoje \u00e9 considerado um ambiente de execu\u00e7\u00e3o de JavaScript ass\u00edncrono e orientado a eventos, concebido para ser executado server-side e oferecer um processo de escalabilidade flu\u00eddo, simples e r\u00e1pido.<\/p>\n\n\n\n<p>Estas caracter\u00edsticas, aliadas com a versatilidade e leveza do JavaScript, fizeram com que o Node.js se tornasse uma das principais ferramentas para desenvolvimento de aplica\u00e7\u00f5es web em geral, principalmente quando falamos de <em>APIs RESTful<\/em> e <em>GraphQL<\/em>.<\/p>\n\n\n\n<p>O Node.js se torna mais poderoso ainda para aplica\u00e7\u00f5es web quando \u00e9 utilizado em conjunto com bibliotecas como o <em>Express<\/em>, que possibilitam o desenvolvimento de aplica\u00e7\u00f5es web em geral de maneira muito r\u00e1pida.Tamb\u00e9m \u00e9 importante ressaltar que o <strong>JavaScript hoje tamb\u00e9m \u00e9 usado em ferramentas como utilit\u00e1rios de linha de comando<\/strong>, algo que era inimagin\u00e1vel anteriormente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conhecer o ferramental caracter\u00edstico de um ambiente de desenvolvimento JS<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"426\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools.jpg\" alt=\"\" class=\"wp-image-5887\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools.jpg 640w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools-300x200.jpg 300w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools-500x333.jpg 500w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools-150x100.jpg 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools-400x266.jpg 400w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/tools-200x133.jpg 200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>O ambiente de desenvolvimento JavaScript costuma ser um pouquinho mais \u201ccomplexo\u201d do que em outras linguagens\u2026 Mas essa complexidade n\u00e3o vem do fato de ser dif\u00edcil montar um ambiente de desenvolvimento JavaScript, e sim por causa da <strong>quantidade de ferramentas dispon\u00edveis para cada etapa do desenvolvimento<\/strong>.<\/p>\n\n\n\n<p>Geralmente, esse ambiente vai ser concebido pelo menos pelos seguintes elementos:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Editor de texto\/IDE:<\/strong> este \u00e9 o ambiente onde o desenvolvedor ir\u00e1 escrever o c\u00f3digo a ser produzido. Atualmente, os editores de texto est\u00e3o tendo uma ado\u00e7\u00e3o muito interessante no mercado de trabalho, embora muitos desenvolvedores ainda prefiram IDEs mais completas. Se falarmos de editores de texto, merecem destaque o Visual Studio Code, o Atom e at\u00e9 mesmo o Vim\/Vi. Falando de IDEs, geralmente falamos das IDEs da JetBrains, como o WebStorm;<\/li><li><strong>Gerenciadores de pacotes: <\/strong>estas ferramentas possibilitam a ger\u00eancia simplificada das depend\u00eancias do projeto. O gerenciador mais utilizado na atualidade \u00e9 o NPM (<em>Node.js Package Manager<\/em>), embora o Yarn vem surgindo como uma op\u00e7\u00e3o interessante ao NPM;<\/li><li><strong>Ferramentas CLI (<em>Command-Line Interface<\/em>)<\/strong>: s\u00e3o ferramentas que geralmente automatizam o processo de escrita de c\u00f3digo atrav\u00e9s de <em><a href=\"https:\/\/blog.umbler.com\/br\/evitar-bloqueio-por-spam-no-whatsapp\/\">templates<\/a><\/em>. A maior parte das bibliotecas e frameworks JavaScript modernos oferecem ferramentas de linha de comando que tornam o processo de cria\u00e7\u00e3o de projetos mais produtivo;<\/li><li><strong>Ferramentas de depura\u00e7\u00e3o: <\/strong>s\u00e3o ferramentas que permitem realizar o processo de <em>debugger<\/em> (ou depura\u00e7\u00e3o). Neste ponto, certamente, o <em>Chrome Developer Tools<\/em> merece lugar de destaque, j\u00e1 que se trata de uma ferramenta muito mais poderosa do que as pessoas imaginam;<\/li><li><strong>Ferramentas de build e automatiza\u00e7\u00e3o de compila\u00e7\u00e3o: <\/strong>s\u00e3o ferramentas que auxiliam no processo de compila\u00e7\u00e3o e prepara\u00e7\u00e3o do c\u00f3digo JavaScript para ambientes como o de produ\u00e7\u00e3o. Estas ferramentas acabam sendo respons\u00e1veis por processos como minifica\u00e7\u00e3o, <em>hot reloading<\/em> e execu\u00e7\u00e3o de testes unit\u00e1rios, por exemplo. Entre as ferramentas mais populares com essa finalidade, podemos citar o <em>WebPack<\/em>, o <em>Gulp<\/em> e o <em>Browserify<\/em>.<\/li><\/ul>\n\n\n\n<p>\u00c9 essencial que um desenvolvedor JavaScript tenha o <strong>dom\u00ednio de pelo menos uma parte destas ferramentas<\/strong>, j\u00e1 que certamente ir\u00e1 utiliz\u00e1-las de maneira extensiva durante o desenvolvimento de projetos baseados em tecnologias JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conhecer frameworks SPA<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"250\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo.png\" alt=\"\" class=\"wp-image-5889\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo.png 250w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-150x150.png 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-200x200.png 200w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-57x57.png 57w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-72x72.png 72w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-114x114.png 114w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/angular-logo-144x144.png 144w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/figure><\/div>\n\n\n\n<p>Para desenvolvedores JavaScript modernos, tamb\u00e9m \u00e9 <strong>imprescind\u00edvel conhecer <em>frameworks SPA<\/em>, como o <em>Angular<\/em>, o <em>React<\/em>, o <em>Vue<\/em> ou o <em>Ember<\/em><\/strong>. Estes frameworks hoje s\u00e3o largamente empregados para o desenvolvimento do front-end de aplica\u00e7\u00f5es web e at\u00e9 mesmo de aplica\u00e7\u00f5es <em>mobile<\/em>, se considerarmos frameworks de desenvolvimento mobile h\u00edbrido baseados em <em>frameworks SPA<\/em> (como o <em>Ionic<\/em> e o <em>React Native<\/em>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">N\u00e3o se esque\u00e7a: o mercado valoriza cada vez mais as soft skills<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"289\" src=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1.png\" alt=\"Soft Skills\" class=\"wp-image-5895\" srcset=\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1.png 640w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1-300x135.png 300w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1-500x226.png 500w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1-150x68.png 150w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1-400x181.png 400w, https:\/\/blog.umbler.com\/wp-content\/uploads\/2019\/07\/softskills-1-200x90.png 200w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/><\/figure><\/div>\n\n\n\n<p>J\u00e1 se foi o tempo em que quem trabalhava com TI ficava em uma sala o dia todo apenas no computador com um fone de ouvido&#8230; Hoje em dia, \u00e9 importante para desenvolvedores em geral desenvolver habilidades interpessoais e intrapessoais \u2013 as famosas <em>soft skills<\/em>.<\/p>\n\n\n\n<p>Aqui, entram habilidades como <strong>proatividade, responsabilidade, conviv\u00eancia e coopera\u00e7\u00e3o em grupo e habilidade de conversa\u00e7\u00e3o<\/strong>, por exemplo. O profissional de TI hoje \u00e9 um profissional \u201cglobalizado\u201d, participando de todas as etapas que envolvem o projeto de um software.<\/p>\n\n\n\n<p>Entre estas etapas, existem algumas que n\u00e3o exigem necessariamente habilidades t\u00e9cnicas, mas sim habilidades pessoais. Levantamento de requisitos e reuni\u00f5es com clientes s\u00e3o algumas destas etapas que podem ser utilizadas como exemplo neste cen\u00e1rio.<\/p>\n\n\n\n<p>As empresas v\u00eam dando cada vez mais aten\u00e7\u00e3o a estas habilidades, <strong>valorizando profissionais que tenham <em>soft skills<\/em> fortes no perfil<\/strong>. Isso acontece pelo fato de que treinar algu\u00e9m para desenvolver habilidades t\u00e9cnicas \u00e9 geralmente mais f\u00e1cil do que treinar algu\u00e9m para desenvolver habilidades interpessoais e intrapessoais.<\/p>\n\n\n\n<p>Se voc\u00ea ficou interessado e quer iniciar ou se aprofundar no JavaScript, na <a href=\"https:\/\/www.treinaweb.com.br\/\" rel=\"noreferrer noopener\" target=\"_blank\">TreinaWeb<\/a> temos uma <a href=\"https:\/\/www.treinaweb.com.br\/formacao\/desenvolvedor-front-end-pleno\" rel=\"noreferrer noopener\" target=\"_blank\">forma\u00e7\u00e3o espec\u00edfica<\/a> para isso, al\u00e9m de v\u00e1rias outras que podem te interessar.<\/p>\n\n\n\n<p><strong>At\u00e9 a pr\u00f3xima!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Certamente, o JavaScript \u00e9 uma das linguagens que mais ganhou destaque nos \u00faltimos anos. A populariza\u00e7\u00e3o de seu uso tamb\u00e9m em aplica\u00e7\u00f5es back-end (gra\u00e7as ao Node.js principalmente) e o aumento na demanda por aplica\u00e7\u00f5es SPA (Single Page Application) atrav\u00e9s de frameworks como o Angular e o React fez com que o JavaScript desse um salto [&hellip;]<\/p>\n","protected":false},"author":26,"featured_media":5904,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[402,156,250,256],"class_list":["post-5877","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev","tag-angular","tag-desenvolvimento-web","tag-javascript","tag-node-js"],"_links":{"self":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5877"}],"collection":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/comments?post=5877"}],"version-history":[{"count":0,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/posts\/5877\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media\/5904"}],"wp:attachment":[{"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/media?parent=5877"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/categories?post=5877"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.umbler.com\/br\/wp-json\/wp\/v2\/tags?post=5877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}