\n
![\"Um](\"https:\/\/blog.umbler.com\/wp-content\/uploads\/2017\/04\/wordcloud-2-e1490725580159.jpg\")
<\/p>\nA Web est\u00e1 crescendo exponencialmente e ficando cada vez mais complexa. \u00c9 por isso que desenvolvedores web precisam das ferramentas certas para ajudar com seus trabalhos.<\/p>\n
Neste post, juntamos as ferramentas mais \u00fateis e populares que ajudam bastante com desenvolvimento da web. A maioria delas s\u00e3o usadas pelos nossos devs incr\u00edveis aqui na Umbler e pelos nossos f\u00e3s super legais da comunidade Umbler.
\n<\/p>\n
Esperamos que essas ferramentas facilitem seu trabalho e, se voc\u00ea for um iniciante, que elas ajudem a come\u00e7ar da maneira certa.<\/p>\n
IDEs (Integrated Development Environment ou Ambiente de Desenvolvimento Integrado) economizam seu tempo de alternar entre diferentes aplicativos e ajudam voc\u00ea manter seu foco no seu c\u00f3digo. Uma IDE geralmente inclui –<\/p>\n
Por mais que as IDEs ofere\u00e7am muito mais do que um editor de texto simples, elas ocupam espa\u00e7o e n\u00e3o s\u00e3o para iniciantes. Se sua necessidade \u00e9 algo simples, uma ferramenta para apenas escrever seu c\u00f3digo rapidamente, \u00e9 melhor escolher um editor de texto. Eles s\u00e3o leves e oferecem muitos recursos convenientes como destaque de sintaxe, interfaces personaliz\u00e1veis e extensas ferramentas de navega\u00e7\u00e3o.<\/p>\n
Ent\u00e3o, o que voc\u00ea deveria usar? A resposta -> n\u00e3o tem uma resposta certa. N\u00e3o tem uma IDE ou um editor de texto certo para todo mundo. A melhor ferramenta, na minha opini\u00e3o, \u00e9 algo que funciona bem baseado em suas necessidades.<\/p>\n
Depois de falar com nossos devs aqui na Umbler, criamos uma lista de IDEs e editores de textos mais populares que serve bem para eles –<\/p>\n
“Em rela\u00e7\u00e3o ao Visual Studio, ele \u00e9 free para desenvolvedores individuais e times pequenos. Somente times grandes e tamb\u00e9m pequenos com alta renda precisam pagar licen\u00e7a. \u00c9 uma IDE muito poderosa, mas ela n\u00e3o gosta de computadores sem SSD.”<\/p><\/blockquote>\n<\/li>\n
- Visual Studio Code (VS Code)<\/strong><\/a> – Visual Studio Code \u00e9 um editor leve mas poderoso e com uma interface bem pensada que funciona em seu desktop e est\u00e1 dispon\u00edvel para Windows, Mac e Linux. Ele tem suporte a JavaScript, TypeScript e Node.js e possui um rico ecossistema de extens\u00f5es para outras linguagens (como C ++, C #, Python, PHP) e runtimes. O VS Code \u00e9 ideal se voc\u00ea precisa um editor leve que n\u00e3o usa muito espa\u00e7o e recursos.<\/li>\n
- Atom<\/strong><\/a> – Atom \u00e9 um editor de texto moderno, acess\u00edvel, mas \u2018hackable to the core\u2019, isso significa que voc\u00ea pode personalizar tudo para fazer qualquer coisa, sem tocar a m\u00e3o nos arquivos de configura\u00e7\u00f5es. Ele \u00e9 um aplicativo de desktop constru\u00eddo com HTML, JavaScript, CSS, e integra\u00e7\u00e3o com Node. Ele roda em Electron, um framework para construir aplicativos multiplataforma usando tecnologias web. Ele possui gerenciador de pacotes e pacotes extensas (como plugins, defini\u00e7\u00f5es de sintaxes, menus, snippets, etc.) escritos em CoffeeScript.<\/li>\n
- Sublime<\/strong><\/a> – O Sublime \u00e9 um editor de texto sofisticado para c\u00f3digo, marca\u00e7\u00e3o e texto com grande desempenho. Ele \u00e9 \u00fatil especialmente para arquivos individuais porque ele executa mais r\u00e1pido do que o VS Code. Oferece um alto n\u00edvel de personaliza\u00e7\u00e3o, quase nunca falha e inclui plugins bacanas e pacotes como Origami e GitGutter que tornam o desenvolvimento realmente divertido.<\/li>\n
- Netbeans<\/strong><\/a> – O NetBeans \u00e9 uma das melhores IDE open source (c\u00f3digo-fonte aberto) de PHP. Ele \u00e9 enriquecido com recursos e \u00e9 gratuito oferece suporte em v\u00e1rias l\u00ednguas como Ingl\u00eas, Japon\u00eas, Portugu\u00eas BR, Russo e Chin\u00eas simplificado. A vers\u00e3o mais recente de Netbeans (vers\u00e3o 8.2) \u00e9 leve, mais r\u00e1pido e suporta tudo em rela\u00e7\u00e3o de PHP. Ele suporta frameworks de PHP mais populares como Zend, Doctrine, Smarty e Symfony2 e tamb\u00e9m suporta Laravel atrav\u00e9s de laravel-ide-helper e outros frameworks como Yii, CakePHP, FuelPHP e WordPress CMS.<\/li>\n
- Cloud9<\/strong><\/a> – Cloud 9 \u00e9 o IDE na\u00a0nuvem mais usado e mais famoso para todas as linguagens de programa\u00e7\u00e3o. Se voc\u00ea usa PHP, ent\u00e3o o Cloud9 \u00e9 ainda melhor para voc\u00ea porque ele oferece depurador (built-in debugger) para inspe\u00e7\u00e3o de c\u00f3digo em tempo real<\/li>\n<\/ul>\n
Tem alguns requisitos m\u00ednimos para usar uma IDE, como:
\n1. Uma m\u00e1quina com dois n\u00facleos de 2 GHz ou mais
\n2. 4 GB RAM e\u00a020 GB de HD sobrando (caso voc\u00ea quer usar o Visual Studio, note que ele usa mais de 10 GB de HD)<\/div>\n\n
\n<\/div>\n2. Front-end Frameworks<\/h2>\n
Os Frameworks de front-end ou \u201cCSS frameworks\u201d s\u00e3o pacotes com c\u00f3digo pr\u00e9-escrito e padronizado em arquivos e pastas. Eles fornecem uma base para construir e ainda permitem flexibilidade com o design final. Eles ajudam a aumentar a sua produtividade sem sacrificar a qualidade do seu trabalho.<\/p>\n
Um framework front-end t\u00edpico cont\u00e9m os seguintes componentes –<\/p>\n
\n
- Um layout em grid para organizar os elementos de design de seu site<\/li>\n
- Estilos de fonte pr\u00e9-definidos e dimensionamento que variam baseado na sua fun\u00e7\u00e3o (por exemplo, tipografias diferentes para t\u00edtulos e par\u00e1grafos)<\/li>\n
- Componentes prontos do site, como pain\u00e9is laterais, bot\u00f5es e barras de navega\u00e7\u00e3o<\/li>\n<\/ul>\n
Recomendamos que voc\u00ea escolha um framework CSS que economize seu tempo escrevendo c\u00f3digo e ajude a adicionar componentes extras (como bot\u00f5es) com facilidade.<\/p>\n
Os frameworks CSS mais populares s\u00e3o –<\/p>\n
\n
- Bootstrap<\/strong><\/a> – O framework mais popular de HTML, CSS e JS, Bootstrap facilita o desenvolvimento de sites responsivos e projetos mobile na web. Ele \u00e9 open source, hospedado no GitHub e \u00e9 perfeito para iniciantes, pois \u00e9 o framework mais f\u00e1cil de aprender e usar.<\/li>\n
- Foundation<\/strong><\/a> – Um framework que oferece muita flexibilidade e personaliza\u00e7\u00e3o, o Foundation \u00e9 ideal se voc\u00ea \u00e9 um veterano de desenvolvimento de front-end procurando um framework que seja superflex\u00edvel. Como o Bootstrap, o Foundation tamb\u00e9m \u00e9 gratuito e open source. Feito pelo pessoal da ZURB (uma empresa de product design), ele tem muitos recursos para apoiar o seu ciclo de desenvolvimento.<\/li>\n
- Materialize<\/strong><\/a> –\u00a0O Materialize \u00e9 baseado no Material Design do Google para facilitar a constru\u00e7\u00e3o de aplica\u00e7\u00f5es web responsivas e com visual elegante. Ele \u00e9 um framework HTML, CSS e JavaScript que conta com recursos para simplificar o desenvolvimento de p\u00e1ginas responsivas que utiliza as filosofias de design do Material Design do Google. O Material Design combina os princ\u00edpios cl\u00e1ssicos de design bem sucedido, junto com a inova\u00e7\u00e3o<\/a> e tecnologia<\/a>. Se a sua necessidade \u00e9 para criar uma aplica\u00e7\u00e3o visualmente interessante (em termos de UI) e com pouco esfor\u00e7o, opte pelo Materialize.
\nSe a sua necessidade \u00e9 para criar uma aplica\u00e7\u00e3o visualmente interessante (em termos de UI) e com pouco esfor\u00e7o, opte pelo Materialize. Quer saber mais sobre esse assunto? Ent\u00e3o \u00e9 vale a pena aproveitar\u00a0este site com guias, cursos e recursos bem bacanas sobre o Materialize<\/a>.<\/li>\n<\/ul>\nDica do Umblerito:<\/strong>\u00a0Se voc\u00ea quiser pesquisar mais sobre o framework ideal para voc\u00ea, ent\u00e3o confira este post de KeyCDN que explora os 10 melhores frameworks CSS de 2016<\/a>.<\/div>\n
\n3. Web App Frameworks<\/h2>\n
Os frameworks de web apps simplificam sua vida de desenvolvimento e existem para melhorar e facilitar o processo de construir um site. Normalmente eles fornecem ferramentas que cobrem os casos mais comuns de CRUD (Create, Read, Update, Delete ou Criar, Ler, Atualizar, Excluir). Existem muitas frameworks de web dispon\u00edveis.<\/p>\n
Vamos explorar alguns:<\/p>\n
\n
- ASP.NET<\/strong><\/a> – Um framework de web app gr\u00e1tis e completamente suportado que ajuda a criar solu\u00e7\u00f5es de Web baseados em padr\u00f5es. Ele cria sites baseados em HTML5, CSS, e JavaScript. Na Umbler, nossos web dev gurus confiam em .NET para facilitar seus trabalhos. E se voc\u00ea pensa que somente usu\u00e1rios de Windows podem trabalhar com o ASP.NET, saiba que a Microsoft lan\u00e7ou o ASP.NET CORE<\/strong><\/a>. O .NET Core \u00e9 uma plataforma r\u00e1pida, e leve para criar aplicativos e servi\u00e7os de web que rodam em Windows, Linux e Mac. Ao contr\u00e1rio do framework .NET que funciona s\u00f3 em Windows, o .NET Core \u00e9 de c\u00f3digo-fonte aberto e multiplataforma, que voc\u00ea pode criar aplicativos de .NET Core que rodam em Windows, Linux and Mac OS.\n
Dica do Umblerito:<\/strong>\u00a0Quer saber mais sobre como criar uma aplica\u00e7\u00e3o .NET Core e hosped\u00e1-la na Umbler? Ent\u00e3o veja o v\u00eddeo que n\u00f3s criamos s\u00f3 para esse motivo aqui.<\/a><\/div>\n<\/li>\n<\/ul>\n\n
- Ruby on Rails<\/strong><\/a> – Se voc\u00ea \u00e9 um f\u00e3 de Ruby, ent\u00e3o o Ruby on Rails \u00e9 o framework para voc\u00ea. \u00c9 gratis, open source e oferece uma integra\u00e7\u00e3o boa com JS, que \u00e9 perfeito para sites pesados de AJAX. Ele tamb\u00e9m inclui o Prototype Javascript Library que voc\u00ea pode integrar diretamente. Se voc\u00ea \u00e9 um iniciante com Rails, ent\u00e3o confira este tutorial sobre Ruby on Rails para iniciantes para aprender mais<\/a>.<\/li>\n
- Django<\/strong><\/a> – O Django \u00e9 um framework Web de alto n\u00edvel em Python que facilita o desenvolvimento r\u00e1pido e o design limpo e pragm\u00e1tico. Ele oferece uma se\u00e7\u00e3o de administra\u00e7\u00e3o de site auto-gerada para seus usu\u00e1rios (de site) para criar, editar e atualizar o conte\u00fado. Ele tamb\u00e9m inclui ferramentas para armazenar dados em cache e construir URLs flex\u00edveis. Se voc\u00ea usa Python, ent\u00e3o confira este blog extremamente \u00fatil sobre programa\u00e7\u00e3o com Python<\/a>.<\/li>\n
- Laravel<\/strong><\/a> – O framework mais famoso de PHP, Laravel \u00e9 simples e muito f\u00e1cil de usar. Ele tamb\u00e9m oferece maior compatibilidade e desenvolvimento mais r\u00e1pido do que qualquer outro framework de PHP.
\nDe acordo com Heber, um dos nossos engenheiros de software, \u201cEu particularmente gosto de Laravel porque ele \u00e9 simples, tem tudo o que precisa para desenvolver uma aplica\u00e7\u00e3o robusta, inclusive funcionalidades importantes de outros frameworks, como database migrations. Tudo isso sem muitas configura\u00e7\u00f5es.\u201d<\/li>\n- Phalcon<\/strong><\/a> – Se a sua preocupa\u00e7\u00e3o principal \u00e9 a velocidade e desempenho, ent\u00e3o escolhe o Phalcon, o framework mais r\u00e1pido do PHP. Precisa a opini\u00e3o de especialistas? Confira o que o Heber tinha a dizer sobre o Phalcon, \u201cGostei muito da sintaxe do framework, e tem o Phalcon micro, que \u00e9 super simples; uma vers\u00e3o light.\u201d\n
Dica do Umblerito:<\/strong>\u00a0Saiba\u00a0mais sobre o Phalcon no nosso blog post sobre o mesmo assunto<\/a>. Tamb\u00e9m vale a pena aproveitar este\u00a0excelente compila\u00e7\u00e3o de todos os recursos sobre Phalcon em Github<\/a>.<\/div>\n<\/li>\n<\/ul>\n
\n4. Terminal de Linha de Commando<\/h2>\n
De acordo com C\u00e1ssio Bock, nosso Dev (Full-stack),<\/p>\n
\u201cAprender a usar a linha de comando aumenta em muito a produtividade de um dev, muitas tarefas simples podem ser feitas atrav\u00e9s dele, sem a necessidade do uso do mouse. Al\u00e9m disso, muitas ferramentas possuem aplica\u00e7\u00f5es que s\u00e3o executadas na linha de comando, ent\u00e3o o dev vai precisar saber usar a linha de comando de um jeito ou outro, por\u00e9m quanto mais cedo, melhor.\u201d<\/p><\/blockquote>\n
A ferramenta mais b\u00e1sica (para usu\u00e1rios Windows apenas) \u00e9 CMD (Command Line Prompt) – o processador de comandos do Windows. Nossos especialistas recomendam a usar ferramentas poderosas como oPowershell<\/a> (para o Windows), o Bash<\/a> (para o Linux) e o Terminal (para o Mac). \u00c8 importante aprender como usar elas porque ferramentas como o Git, o MongoDB, o MySQL, entre outras \u201cte obrigam\u201d a usar linha de comando.<\/p>\n
5. Versionador de C\u00f3digo<\/h2>\n
Um passo muito importante para qualquer desenvolvedor \u00e9 aprender a usar um versionador de c\u00f3digo, que basicamente vai ajudar a guardar hist\u00f3rico da evolu\u00e7\u00e3o do desenvolvimento, guardar o c\u00f3digo fonte em um local seguro para evitar perdas, al\u00e9m de ser essencial quando se trabalha em equipe. Existem v\u00e1rios versionadores, como o Team Foundation Server (TFS), Git, SVN, dentre outros, al\u00e9m de produtos SaaS como Visual Studio Online, GitHub e BitBucket. Mas aqui em nosso post inclu\u00edmos s\u00f3 o Git. Vamos ver por qu\u00ea.<\/p>\n
Git<\/strong><\/a> – N\u00e3o espere at\u00e9 que voc\u00ea substitua acidentalmente seus arquivos essenciais. Evite isso usando o Git, um sistema open source de controle de vers\u00f5es e gerenciamento de c\u00f3digo fontes. Ele rastreia o hist\u00f3rico de seu projeto em um reposit\u00f3rio e facilita manter v\u00e1rios reposit\u00f3rios de backup.
\nMas por que usar Git, por que n\u00e3o algo como o TFS?<\/p>\nThiago Roberto, um dos nossos engenheiros de software explica assim, \u201cDurante o uso do versionador uma boa IDE tamb\u00e9m far\u00e1 diferen\u00e7a, oferecendo atalhos f\u00e1ceis para enviar e pegar a \u00faltima vers\u00e3o do c\u00f3digo, bem como uma boa interface para realiza\u00e7\u00e3o de merge de vers\u00f5es. Para quem trabalha com C# era quase certo a escolha do TFS como versionador devido a \u00f3tima integra\u00e7\u00e3o com o Visual Studio, entretanto, ele demanda uma instala\u00e7\u00e3o bem pesada de um conjunto de softwares, al\u00e9m dos custos de licenciamento. Por conta disto, e com a possibilidade de integrar com o Git a partir da vers\u00e3o 2013, a minha escolha, mas que acredito que \u00e9 a do mercado em geral, passou a ser o Git. Ele oferece as mesmas funcionalidades do TFS, mas possui alguns diferenciais, como: ser open-source e free, commits podem ser feitos localmente antes de serem enviados para o servidor, e no meu caso ele se demonstrou mais r\u00e1pido do que o TFS durante o uso do dia a dia para adicionar um arquivo novo, pegar e enviar a \u00faltima vers\u00e3o dos arquivos, o que o torna uma escolha perfeita.\u201d<\/p>\n
6. Web Deploy<\/h2>\n
Escrever o c\u00f3digo para criar aplicativos de app \u00e9 uma coisa, mas fazer um deploy de aplicativo e faz\u00ea-lo funcionar sem problemas para o seu p\u00fablico \u00e9 uma coisa completamente diferente. Por isso, inclu\u00edmos algumas ferramentas de web deploy que realmente v\u00e3o reduzir suas dores de cabe\u00e7as com deploy –<\/p>\n
\n
- Filezilla<\/strong><\/a> – Se voc\u00ea \u00e9 um iniciante, apenas est\u00e1 come\u00e7ando com desenvolvimento web, voc\u00ea pode usar um FTP simples como Filezilla para publicar seus recursos. Ele \u00e9 uma ferramenta de FTP muito simples de troca de arquivos, que pode ser \u00fatil para fazer deploy de sites.<\/li>\n
- Git<\/strong><\/a> – O FTP n\u00e3o possui todos os recursos necess\u00e1rios para o deploy e controle eficiente de aplica\u00e7\u00f5es web. Ent\u00e3o voc\u00ea deveria usar uma ferramenta como o Git e construir seu processo de deploy com isso. O Git facilita controle de vers\u00e3o – sempre ser\u00e1 poss\u00edvel rastrear cada altera\u00e7\u00e3o, e fazer deploy em m\u00faltiplos ambientes.<\/li>\n
- Jenkins<\/strong><\/a> – Jenkins \u00e9 uma ferramenta de automa\u00e7\u00e3o<\/a> (CI – Continuous Integration) de deploy escrito em Java. Se voc\u00ea tem todo seu c\u00f3digo numa m\u00e1quina e publica usando o FTP, n\u00e3o valeria a pena usar o Jenkins. Mas se voc\u00ea mant\u00ea-lo num reposit\u00f3rio e fa\u00e7a testes, valeria a pena usar um CI como Jenkins. Assim voc\u00ea pode automatizar toda essa parte, fora que deixa o processo de deploy muito mais fluido. Outra vantagem \u00e9 de seguran\u00e7a<\/a>. De acordo com nosso Thiago Roberto,
\n\u201cNo caso do do deploy via Git do nosso app, um commit na master j\u00e1 faz o deploy pro ar. Ent\u00e3o, a seguran\u00e7a fica a cargo do Git e quem tem permiss\u00e3o de dar deploy na master, tem a permiss\u00e3o de deploy. Com Jenkins, conseguimos evitar isso e aumentar a seguran\u00e7a de deploy. O Jenkins tamb\u00e9m pode fazer outras coisas legais como executar pre e post scripts.”<\/p><\/blockquote>\n
Como Jenkins \u00e9 open source, voc\u00ea pode desenvolver v\u00e1rios plugins para usar a ferramenta de qualquer forma que voc\u00ea quiser.<\/p>\n
Dica do Umblerito:<\/strong>\u00a0Quer entender mais sobre como funciona um deploy com CI? Ent\u00e3o\u00a0confira este post sobre deploy cont\u00ednuo de aplica\u00e7\u00f5es utilizando SNAP CI.<\/a><\/div>\n<\/li>\n<\/ul>\n
\n7. Outras Tecnologias<\/h2>\n
Al\u00e9m disso, existem v\u00e1rias outras ferramentas e tecnologias que facilitam bastante a vida de um desenvolvedor web. Listamos tudo isso nessa categoria de outras tecnologias –<\/p>\n
\n
- Postman<\/strong><\/a> – O Postman \u00e9 como uma canivete su\u00ed\u00e7o para devs de servi\u00e7os da web. Ele \u00e9 um cliente de HTTP muito poderoso que voc\u00ea pode testar servi\u00e7os web constru\u00eddos sob o modelo REST principalmente, mas funciona para a web em geral. O Postman \u00e9 um App do Chrome que se destaca por ter um \u00f3timo recurso de compartilhamento entre usu\u00e1rios.
\nNosso Software Developer Marcos Artigas recomendou o Postman,<\/p>\n\u201cTer uma boa ferramenta para consumir HTTPs APIS \u00e9 indispens\u00e1vel para um bom dev. O Postman \u00e9 super simples se comparado a outras formas de se realizar as mesmas a\u00e7\u00f5es.\u201d<\/p><\/blockquote>\n
Tem uma baixa curva de aprendizagem que significa que voc\u00ea estar\u00e1 construindo e testando seus servi\u00e7os da Web rapidamente.<\/li>\n
- NewRelic<\/strong><\/a> – Saber exatamente o que est\u00e1 acontecendo com seu site ou aplica\u00e7\u00e3o em produ\u00e7\u00e3o \u00e9 algo muito valioso no mundo de hoje. Devs sabem que o mundo localhost \u00e9 maravilhoso, l\u00e1 temos informa\u00e7\u00f5es em abund\u00e2ncia para debugar c\u00f3digos e otimizar scripts, conseguimos ter controle total sobre o que est\u00e1 acontecendo. Por\u00e9m, quando se coloca uma aplica\u00e7\u00e3o para um ambiente de produ\u00e7\u00e3o, muitas vezes perdemos o controle das coisas.
\nPor isso, o Marcos tamb\u00e9m recomendou usar o Newrelic.<\/p>\n\u201cCom o NewRelic podemos voltar a ter um controle mais completo sobre nossas aplica\u00e7\u00f5es. NewRelic se torna uma ferramenta completa comparada a outros concorrentes, principalmente por possuir integra\u00e7\u00e3o com diversas linguagens (PHP, .NET, Node.Js, Java). Capturar o stacktrace completo dos erros que ocorrem em produ\u00e7\u00e3o, descobrir querys lentas que est\u00e3o prejudicando a performance do site ou aplica\u00e7\u00e3o, monitoramento e at\u00e9 gerar relat\u00f3rios de estat\u00edsticas se torna uma tarefa mais simples para o Dev.\u201d<\/p><\/blockquote>\n<\/li>\n
- Chrome Dev Tools<\/strong><\/a> – Voc\u00ea \u00e9 um f\u00e3 de nossos artes, e nosso querido Umblerito? Ent\u00e3o voc\u00ea certamente adoraria saber qual \u00e9 a dica do criador (o \u2018pai\u2019) do Umblerito, Tiago Fontella.
\n\u201cN\u00e3o tem como se aventurar no desenvolvimento front-end sem usar o Chrome DevTools, o t\u00e3o famoso F12! Curti os novos recursos focado no design, como –<\/p>\n\n
- Edi\u00e7\u00e3o dos easings (curvas de B\u00e9zier) das transitions;<\/li>\n
- Novo color picker;<\/li>\n
- Novo painel de timeline para analisar os gargalos de desempenho;<\/li>\n
- O foco para depura\u00e7\u00e3o em outros devices.<\/li>\n<\/ul>\n<\/li>\n
- AngularJS<\/strong><\/a> – O AngularJS \u00e9 um framework open source mantido principalmente pelo Google e usa o conceito de SPA (Single Page Application). Nesse tipo de aplica\u00e7\u00e3o, apenas uma parte dela muda e a outra permanece fixa, fazendo parte de um template compartilhando entre as p\u00e1ginas. Ele possui ferramentas para buscar dados, process\u00e1-lo, exibi-lo na tela e manipular a entrada do usu\u00e1rio (como cliques ou pressionamentos de teclas) de uma forma inteligente. Ele simplifica desenvolvimento fornecendo um framework confi\u00e1vel no estilo MVC (Model View Controller). Ele \u00e9 \u00f3timo para construir SPAs que n\u00e3o precisam muitas manipula\u00e7\u00f5es de DOM (aplicativos que n\u00e3o envolvem jogos e editores de GUI). Uma dica \u00e9 usar Angular2, pois \u00e9 uma vers\u00e3o mais poderosa.<\/li>\n
- Vue.js<\/strong><\/a> –\u00a0Vue.JS \u00e9 uma biblioteca de JavaScript para desenvolver componentes reativos para interfaces web modernas. Desenvolver componentes que s\u00e3o reativos envolve observar um objeto javascript e refletir suas altera\u00e7\u00f5es no DOM do HTML. Fazer isso usando javascript puro ou jQuery n\u00e3o \u00e9 facil.\u00a0VueJS torna isso extremamente simples.\u00a0De acordo com Vinicius Reis<\/a> que escreveu esse post bem legal sobre o VueJS<\/a>,
\n“A curva de aprendizagem \u00e9 uma das mais curtas. Para come\u00e7ar a usar VueJS basta importar um script via CDN, sem contar com o apoio da comunidade Telegram, Slack e StackOverflow.”<\/p><\/blockquote>\n
Quer saber mais sobre o Vue.js? Veja nosso post sobre As Estrelas do JavaScript e como o Vue.js foi o projeto mais popular em 2016<\/a>.<\/li>\n
- ReactJS<\/strong><\/a> – Desenvolvido pelo Facebook, o ReactJS \u00e9 um concorrente muito forte de AngularJS. Ele pode construir aplicativos em grande escala que envolvem muitas manipula\u00e7\u00f5es de DOM. \u00c9 porque ao contr\u00e1rio de AngularJS (vers\u00e3o 1), o ReactJS fornece algo como \u2018’Virtual-server side-DOM’, junto com o client-side DOM. A presen\u00e7a de dois DOM resulta em maior efici\u00eancia e capacidade de manipula\u00e7\u00f5es complexas de DOM. Os sites de Facebook e Instagram foram constru\u00eddos usando ReactJS.<\/li>\n
- Node.js<\/strong><\/a> – O Node.js \u00e9 uma plataforma constru\u00edda sobre o motor JavaScript do Google Chrome para facilmente construir aplica\u00e7\u00f5es de rede r\u00e1pidas e escal\u00e1veis. Ele usa um modelo de IO chamado \u2018event-driven non-blocking IO model\u2019 e tem um mecanismo JavaScript extremamente r\u00e1pido do Google, o mecanismo V8. Usamos JavaScript normalmente como a linguagem de browser. O Node.js ajuda a usar o JavaScript no lado do server. Muitas ferramentas da web (web tools ou task runners) como Bower, Grunt, Gulp, etc usam o Node.js. Voc\u00ea tamb\u00e9m pode construir aplica\u00e7\u00f5es completas apenas usando o Node.js.
\nO Fontella, nosso principal Front-end Designer, tamb\u00e9m usa o Node para seu trabalho, \u201cO Node tem um papel fundamental no meu workflow front-end. Utilizo muitos packages que automatizam tarefas como: Atualiza\u00e7\u00e3o das depend\u00eancias, minifica\u00e7\u00e3o e concatena\u00e7\u00e3o dos assets e scripts, compila\u00e7\u00e3o dos estilos com pr\u00e9-processadores, montar servidores locais em segundos e com live update, etc.\u201d<\/li>\n- Studio 3T (anteriormente o MongoChef)<\/strong><\/a> – Se voc\u00ea est\u00e1 pensando em entrar o reino do banco de dados de n\u00edvel \u2018big data\u2019, provavelmente voc\u00ea j\u00e1 pensou sobre o MongoDB e realizou que ele \u00e9 um pouquinho mais complicado do que seu banco de dados usual. Mas existe um GUI que realmente facilita o uso do MongoDB. \u00c9 o Studio3T (anteriormente era conhecida como MongoChef). Ele suporta totalmente a integra\u00e7\u00e3o de MongoDB shell e oferece todos os recursos para ajud\u00e1-lo a dominar seus bancos de dados de n\u00edvel enterprise. Instalar e usar o Studio3T \u00e9 super f\u00e1cil. Voc\u00ea pode adicionar bancos de dados, usu\u00e1rios, cole\u00e7\u00f5es e muito mais, sem entrar no MongoDB shell.\n
Dica do Umblerito:<\/strong>\u00a0Quer aprender como usar PHP com MongoDB? Este tutorial de PHP + MongoDB ensina como.<\/a><\/div>\n<\/li>\n<\/ul>\n\n
- Genymotion<\/strong><\/a> – O Genymotion \u00e9 um emulador r\u00e1pido de terceiros que pode ser usado em vez do emulador padr\u00e3o do Android. Ele roda como uma m\u00e1quina virtual em seu computador, ent\u00e3o voc\u00ea obt\u00e9m um desempenho muito melhor, e \u00e9 muito mais como usar um dispositivo real em vez do emulador Android. O Genymotion \u00e9 gratuito para desenvolvedores (uso n\u00e3o comercial) para usar, mas tamb\u00e9m tem vers\u00f5es pagas, dependendo de suas necessidades.<\/li>\n<\/ul>\n
8. Comunidades de Desenvolvimento Web<\/h2>\n
Cada desenvolvedor de web j\u00e1 enfrentou isso.<\/p>\n
Quando voc\u00ea tem um problema, o que voc\u00ea faz? Voc\u00ea pesquisa no Google para encontrar uma resposta r\u00e1pida. A web oferece tanto conte\u00fado certo na ponta dos dedos que torna mais f\u00e1cil diagnosticar e solucionar problemas quando surgem.<\/p>\n
\u00c9 exatamente por isso existem v\u00e1rias comunidades para desenvolvedores ensinar, aprender e crescer. Confira algumas comunidades de desenvolvimento web boas –<\/p>\n
\n
- Github<\/strong><\/a> – O Github \u00e9 o maior comunidade para desenvolvedores de web e app para compartilhar c\u00f3digos e projetos. Ele tamb\u00e9m \u00e9 uma comunidade que ajuda aumentar seu conhecimento e n\u00edvel. Al\u00e9m disso, o GitHub oferece centenas de c\u00f3digos prontos que voc\u00ea pode usar como um trampolim para seus projetos de desenvolvimento.<\/li>\n
- Stackoverflow<\/strong><\/a> – O Stackoverflow \u00e9 uma comunidade de devs, code gurus e entusiastas de webdesign que est\u00e3o l\u00e1 para ajudar uns aos outros com os problemas que podem acontecer dentro do processo de cria\u00e7\u00e3o de sites. Voc\u00ea pode enviar suas d\u00favidas ou procurar respostas dentro da comunidade. De acordo com Luiz Duarte<\/a>, evangelista tecnol\u00f3gico na Umbler,
\n\u201cO StackOverflow \u00e9 simplesmente o site mais importante da atualidade para tirar d\u00favidas de programa\u00e7\u00e3o.\u201d<\/p><\/blockquote>\n<\/li>\n
- Youtube<\/strong> – Os v\u00eddeos s\u00e3o fontes incr\u00edveis de novas informa\u00e7\u00f5es e conhecimento profundo. Os canais de YouTube s\u00e3o uma forma bem popular de de aproximar esse conhecimento a todas as pessoas. Tradicionalmente, os vlogs de culin\u00e1ria e modas eram os mais famosos no Youtube. Mas hoje podemos achar canais de Youtube oferecendo informa\u00e7\u00f5es \u00fateis sobre qualquer assunto, mesmo o desenvolvimento web. Alguns canais Youtube realmente \u00fateis que voc\u00ea pode seguir s\u00e3o –\n
\n
- Dev Tips<\/strong><\/a> – muitas dicas sobre cria\u00e7\u00e3o de site, web design, codifica\u00e7\u00e3o e programa\u00e7\u00e3o.<\/li>\n
- Learn Code Academy<\/strong><\/a> – bastante playlists de tutoriais e roundups de ferramentas principalmente focados em JQuery, JavaScript e Node.js.<\/li>\n
- Level Up Tuts<\/strong><\/a> – Dicas mais vers\u00e1til sobre o desenvolvimento web e t\u00f3picos de design do site.<\/li>\n<\/ul>\n<\/li>\n
- Tutoriais<\/strong> – O Uriel Ricardo, nosso Sysadmin tem essa dica para voc\u00eas,
\n\u201cTutoriais s\u00e3o tudo de bom; Sem contar plataformas de ensino que s\u00e3o gr\u00e1tis e focadas em desenvolvimento; como essa aqui – Sololearn<\/a>. Al\u00e9m de ter conte\u00fado interativo, de alta qualidade, eles possuem a mesma coisa mobile. Geralmente quando eu estava no t\u00e9cnico e no suporte e estudando n\u00e3o tinha tempo pra ficar estudando uma linguagem. Com esse apps de desenvolvimento minha vida mudou. S\u00e3o r\u00e1pidos, f\u00e1ceis e interativos. N\u00e3o s\u00e3o aqueles livros de 700 p\u00e1ginas que precisa carregar pra todo lado.\u201d<\/p><\/blockquote>\n
Al\u00e9m disso, tem mais tutoriais e cursos gratuitas de desenvolvimento no Tuts+<\/a>, Codeacademy<\/a>, etc.<\/li>\n<\/ul>\n
9. Coffee + Spotify = Productivity \u2615\u00a0?<\/h2>\n
N\u00e3o importa quem voc\u00ea \u00e9, provavelmente h\u00e1 dias em que voc\u00ea poderia usar um pouqu\u00edssimo de ajuda extra para ser mais produtivo durante a dia inteira. Se voc\u00ea \u00e9 como n\u00f3s aqui na Umbler, ent\u00e3o o caf\u00e9 e o Spotify s\u00e3o sua for\u00e7a de vida no trabalho e a chave para sua awesomeness 24 * 7<\/em>.<\/p>\n
Ent\u00e3o continue tomando o caf\u00e9 sagrado de todos os dias para dar aquela energia e aproveite para ouvir a playlist do Umblerito especialmente criada para devs – M\u00fasicas para programar<\/a>.<\/p>\n