tag:blogger.com,1999:blog-28228295917198303632024-03-05T02:39:58.293-03:00ReactiveJSConteúdos diários sobre desenvolvimento web e mobileAnonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-2822829591719830363.post-42486792693130780822018-11-23T20:36:00.002-03:002018-11-23T20:37:21.637-03:005 Maneiras de Aproveitar melhor os Tutoriais e Cursos<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuy-LX9TF_-xdOOmv9kB3uXc0F4ICsXCD7OzxvR0DwBZtDL4-vu-8xqYCTv5XYMx4L9pFftSP-MPSkGuhXV6I9ZJvpOkZ6i8uWvTFoQ9z-iM06-qb2DM63Vd4_bDoUPdAsC2MGNZH91JX/s1600/5+maneiras.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcuy-LX9TF_-xdOOmv9kB3uXc0F4ICsXCD7OzxvR0DwBZtDL4-vu-8xqYCTv5XYMx4L9pFftSP-MPSkGuhXV6I9ZJvpOkZ6i8uWvTFoQ9z-iM06-qb2DM63Vd4_bDoUPdAsC2MGNZH91JX/s640/5+maneiras.webp" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div style="text-align: justify;">
Quando iniciamos nosso processo de aprendizagem, é muito comum encontrarmos centenas de tutoriais com dicas, desde as mais simples até as mais avançadas, relacionadas com o que estamos começando a aprender, ou até sobre coisas que temos simplesmente curiosidade de saber como funcionam.</div>
<div style="text-align: justify;">
Bastam apenas algumas palavras na pesquisa do YouTube, como "Tutorial React", para recebermos uma enxurrada dos mais variados vídeos sobre o assunto e de dezenas de canais diferentes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Nunca foi tão fácil aprender, correto? Mas...</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E o que sobra depois de assistirmos a esses tutoriais? Nós ao menos realizamos o ensinado pelo tutor no vídeo? Sabemos como aproveitar aquelas dicas no dia a dia? Por que há tantos tutoriais diferentes sobre a mesma coisa (Todo list que o diga)?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
É por isso que decidi escrever esse artigo e colocar aqui algumas dicas de como usar tutoriais para não só aumentar seu conhecimento (ou curiosidade) sobre um determinado assunto, mas também construir um portfólio sólido e melhorar bastante como profissional na sua área.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Me baseei para esse texto no vídeo do canal Traversy Media "<a href="https://www.youtube.com/watch?v=V_NZxfpEZhI&t=322s" target="_blank">5 Tips To Maximize & Move Beyond Tutorials</a>", mas usei minha experiência para ressaltar cada um dos pontos. ;)</div>
<br />
<b>Dica 1#</b> <b>Continue o Tutorial</b><br />
<br />
<div style="text-align: justify;">
Use o código desenvolvido no tutorial e adicione coisas novas, modifique-o e experimente com ele.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Essa primeira dica é muito importante pois muitas vezes começamos um tutorial e nem sequer finalizamos ele, às vezes até finalizamos mas apenas fazendo Ctrl-C e Ctrl-V e depois largamos ele de lado. E isso é muito ruim. Os tutoriais estão ali para nos ensinar algo e não somente para que copiemos o código sem nos questionar nada sobre o que está sendo passado ali.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aqui vou adicionar uma experiência minha: um dos apps que tenho publicado na Play Store, o Kazagastão, foi a evolução de um tutorial que estava fazendo quando estava estudando React Native. Na época, estava criando um clone para o YouTube, e o tutorial era bem simples e objetivo, basicamente escolhíamos um canal para receber os vídeos e adicionávamos um visual parecido ao App oficial. Daí eu fiz mudanças visuais, adicionei os logos, adicionei novas abas com informações sobre o Canal do KZG, redes sociais, etc. E lancei o App. Ou seja, além de aprender algo novo, ainda adicionei bastante ao meu portfólio e contribui com um canal que admiro muito.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então, em resumo, não se prenda ao resultado final, use o que construiu ao longo do tutorial e o evolua para algo novo.</div>
<br />
<br />
<b>Dica 2# Crie algo novo</b><br />
<br />
<div style="text-align: center;">
<i>Use os Princípios que você aprendeu no tutorial para construir um projeto do zero.</i></div>
<div style="text-align: center;">
<i>Utilize coisas que você aprendeu em vários tutoriais para criar coisas novas.</i></div>
<br />
<div style="text-align: justify;">
Essa segunda dica está totalmente relacionada à primeira, mas aqui é importante sabermos utilizar o conhecimento adquirido ao longo dos diversos tutoriais que vimos para construir algo mais avançado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Um exemplo que me vem à cabeça agora é construir um site ou um App que consuma alguma Api. Então, dessa forma, você conseguiria treinar seu conhecimento em desenvolvimento de interfaces construindo algo com React ou Angular e montar um servidor simples que se comunique com um servidor NodeJS ou até mesmo o Json-Server, que é muito útil para aprendermos como uma aplicação completa funciona.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Saber ou ao menos conhecer diferentes tecnologias abre muitas portas para nós desenvolvedores pois podemos enxergar diversas maneiras de solucionar um determinado problema, e isso é algo que agrega muito ao nosso currículo.</div>
<br />
<b>Dica 3# Pesquisas e Mais pesquisas</b><br />
<b><br /></b>
<div style="text-align: center;">
<i>Não se prenda somente aos tutoriais, vá atrás da documentação, vá nos fóruns, nas comunidades e visite outros projetos.</i></div>
<br />
<div style="text-align: justify;">
Uma coisa importantíssima para aproveitar muito bem os tutoriais e diversos cursos que fazemos ao longo da nossa vida, é conhecer a documentação daquela biblioteca, framework, banco de dados, etc.</div>
<div style="text-align: justify;">
É muito comum vermos pessoas que se limitam somente ao curso ou a um tutorial sem se aprofundar na documentação do projeto, sem ir aos fóruns ou ter a curiosidade de verificar o código fonte de Apps que utilizam a linguagem de programação que você está aprendendo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Muitas vezes o tutor não explica algo direito e se você não correr atrás de entender como uma determinada função, por exemplo, funciona isso vai prejudicar muito seu aprendizado.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E, acredite, a documentação muitas vezes pode salvar sua vida e lhe ajudar a resolver um problema que você pode estar perdendo horas e horas quando a resposta estava logo ali na sua frente.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E, caso não consiga essa resposta na documentação, sempre teremos fóruns como o do StackOverflow para conseguir resolver uma bronca que apareceu para a gente mas que alguém já encontrou solução para ela em outro momento. É bem provável que apenas 10% dos problemas que você vai ter durante sua vida de programador vai ser algo totalmente inédito.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
E, uma coisa importante é sabermos que nunca vamos saber de tudo, sentarmos em frente ao computador e resolvermos todos os problemas em segundos. Sempre, sempre, vamos precisar de ajuda e essas dicas vão ser muito valiosas mesmo quando for um programador "super mega power da NASA".</div>
<br />
<b>Dica 4# Utilize outras fontes de informação</b><br />
<b><br /></b>
<div style="text-align: center;">
<i>Assista a conferências, vídeos no YouTube, Streams, leia artigos e ouça Podcast</i></div>
<br />
<div style="text-align: justify;">
Muitas vezes temos o péssimo hábito de ficarmos presos dentro de um mundo de cursos e mais cursos, tutoriais e mais tutoriais ou também apenas em livros ou blogs e isso é muito ruim. Obter conhecimento a partir de apenas uma ou duas fontes de informação é péssimo e limita não só o seu aprendizado de uma determinada coisa mas também limita seu crescimento profissional.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Outra coisa é que não podemos apenas querer ler e assistir coisas técnicas, é importante também ouvir sobre experiências de pessoas que estão na área e que falam da carreira, novidades, etc. E também não apenas sobre programação, mas é importante saber sobre as coisas que acontecem ao nosso redor também. Isso tudo nos faz um profissional e pessoa mais completa.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aqui eu vou citar alguns canais do YouTube, Brasileiros e Gringos, que costumo assistir com frequência e também alguns Podcasts muito bons também:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Canais Brasileiros: DevPleno, RocketSeat e BrazilJS.</div>
<div style="text-align: justify;">
Canais Gringos: Academind, Traversy Media e FreeCodeCamp.</div>
<div style="text-align: justify;">
Podcasts: DevNaEstrada e Hipsters.tech.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Aí você não somente se aprofundará sobre as tecnologias em si mas também verá palestras, novidades e conhecimento de carreira de profissionais que fazem muita diferença no mercado.</div>
<br />
<b>Dica 5# Interaja com outros Desenvolvedores</b><br />
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
Essa última dica pode ser fácil para você que já trabalha na área e em uma empresa de TI, Startup, etc. Mas para quem está aprendendo ou trabalha como freelancer, isso é um pouco mais complicado e pode custar muito a nós desenvolvedores.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Então as dicas que dou são:</div>
<br />
<ul>
<li style="text-align: justify;">Junte-se a um grupo no Slack/Discord ou até mesmo no Telegram ou WhatsApp. Há muitos grupos abertos que estão cheios de pessoas prontas a lhe ajudar. Só não esqueça de pedir com educação. ;)</li>
<li style="text-align: justify;">Vá a Meetups. Mesmo em cidade pequenas, há grupos como o GDG que produzem eventos abertos à comunidade. Em Faculdades e IFs espalhados pelo país também muito encontros e muitos deles gratuitos também. Minha dica é se cadastrar no site Meetup.com e procurar pelos próximos encontros mais perto de você. Eles são muito importantes para se construir um Networking e poder conversar com programadores mais experientes também.</li>
<li style="text-align: justify;">Faça perguntas nos StackOverflow ou qualquer outro fórum de desenvolvimento. Isso é importante que se torne um hábito, não só perguntar, mas procurar responder também. Lembre-se que sempre e em todo lugar há pessoas começando a desenvolver e que tem dúvidas que, para você, talvez já sejam bem básicas e é muito legal ajudar, é até viciante muitas vezes.</li>
<li style="text-align: justify;">Contribua para projetos OpenSource. No Github há diversos projetos de código aberto para contribuir e isso agrega muito ao seu currículo. É um Ganha-Ganha, pois você ajuda o projeto, aprende coisas novas e isso vai ser um "chamariz" para seu currículo, atraindo a atenção de recrutadores do mundo todo. </li>
<li style="text-align: justify;">Faça Pair Programming (programação em tempo real com outros desenvolvedores). Isso é legal quando você tiver outros amigos que programem também e estejam dispostos a estudar em conjunto resolvendo desafios ou construir coisas novas. Isso ajuda a lidar com ansiedade e com síndrome do impostor também.</li>
</ul>
<br />
<div style="text-align: justify;">
Então é isso pessoal, espero ter ajudado com essas dicas rápidas e que devem servir para abrir a mente quando o assunto é conhecimento. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Valeu! :D</div>
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-89897344248316879482018-11-04T12:28:00.000-03:002018-11-04T12:28:31.706-03:00Closures em Javascript<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQt_zIKdf5v8sFoH_3d91Gf_j03cNCvbzTyE2uxqrhVrjK-RjjR8ViRZnzfdUq1VRewpR-rvJjPJg37DEy2y7a16TmIG6VPh3z-_himyUXrx32NoPK96HfQszGjRyLh1jTukC2PZMb6r3p/s1600/js.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="609" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQt_zIKdf5v8sFoH_3d91Gf_j03cNCvbzTyE2uxqrhVrjK-RjjR8ViRZnzfdUq1VRewpR-rvJjPJg37DEy2y7a16TmIG6VPh3z-_himyUXrx32NoPK96HfQszGjRyLh1jTukC2PZMb6r3p/s320/js.webp" width="320" /></a></div><br />
<div style="text-align: justify;">Nesse novo artigo, tratarei das Closures, também conhecidas como funções de "Fechamento", as quais têm a possibilidade de armazenar valores internos mesmo após terem sido executadas. O que dá, aos desenvolvedores, possibilidade imensas ao criar lógica para seu código.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">O Javascript, assim como outras linguagens de programação, utiliza o chamado "Escopo Léxico". E do que se trata isso de nome tão complicado e difícil de lembrar? Bom, em resumo, significa que variáveis e funções que estejam fora de um determinado escopo, ou seja, fora de uma função ou de um loop, por exemplo, podem ser acessadas por esses.</div><br />
Na prática é algo como isso:<br />
<script src="https://gist.github.com/flavioislima/1456e80c32d284b09dea2607bc6947bd.js"></script><br />
<div style="text-align: justify;">Ou seja, a função <i>increment</i> tem acesso à variável <i>num</i>, pois ela se encontra fora do escopo da função. Dessa forma, ela consegue incrementar o valor informado, no exemplo o número 20, ao valor 10 da variável <i>num</i>, retornando o número 30 como resultado da adição.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Já o contrário não é possível. Você não conseguiria acessar a variável <i>inc</i> ou qualquer outra que estivesse sido declarada dentro da função <i>increment</i>, fora desta.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Outro exemplo:<br />
<script src="https://gist.github.com/flavioislima/2b4fac3da3b990fe59c8aaaba617d931.js"></script></div><div style="text-align: justify;">Ao utilizar Closures em Javascript, é possível guardar o resultado de variáveis dentro de funções que podem ser manipuladas em seguida e trazidas para um novo contexto, sem perder o estado delas.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">É um pouco complicado de entender mesmo, mas vou tentar utilizar um exemplo prático para ficar mais fácil.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">No exemplo abaixo, podemos ver como utilizar Closures para criar um contador simples, onde cada vez que a função é chamada, ele aumenta o valor da variável <i>contador</i> em 1.<br />
<script src="https://gist.github.com/flavioislima/ae802f9f6bd3997672a7b59872b74b8b.js"></script></div><div style="text-align: justify;">Um outro exemplo mais simples ou trivial seria:<br />
<script src="https://gist.github.com/flavioislima/c525b3eec561ed8d0493e3262464c024.js"></script></div><div style="text-align: justify;">Uma analogia utilizada para entender de forma mais simples as Closures é a analogia da mochila.</div><div style="text-align: justify;">Quando se cria uma função, a mesma traz consigo as variáveis em seu escopo dentro de uma "mochila", então quando você executa essa função, ela vai lidar com essas variáveis e tudo o que fizer dentro dela, vai ser mantido e atualizado junto. </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Pois as Closures são nada mais do que uma coleção de variáveis dentro de um escopo no momento em que a função é criada.</div>Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-39142542423354169782018-10-08T16:34:00.000-03:002018-10-08T16:41:59.922-03:00Projetos e mais projetos - Remote Work e Kazagastão<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD38hY7oKF2C-JgL8j3Eprxdlw3KVnlUMY9i4dirZMiQk24BUURqr7My0gqAfjyBJBWiYsX_qs9VtWWcrrCMD0JGLfaiTZglzjJ7JwSMHj0FtVKS0ZaXig2DE35C4IWXUUqY6NZ1vX07Bw/s1600/post.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="680" data-original-width="1220" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD38hY7oKF2C-JgL8j3Eprxdlw3KVnlUMY9i4dirZMiQk24BUURqr7My0gqAfjyBJBWiYsX_qs9VtWWcrrCMD0JGLfaiTZglzjJ7JwSMHj0FtVKS0ZaXig2DE35C4IWXUUqY6NZ1vX07Bw/s400/post.webp" width="400" /></a></div>
<br />
<br />
Olá, pessoal!<br />
<br />
Nas últimas semanas andei finalizando alguns projetos que comecei há alguns meses e que precisavam de uma atenção especial para poder sair do papel.<br />
Por isso mesmo, decidi focar minha atenção nisso antes que perdesse o fôlego com outras coisas e acabasse as deixando de lado.<br />
<br />
Nesse post vou falar sobre alguns de meus projetos pessoais e como aprendi, e continuo aprendendo, mesmo desenvolvendo, por vezes, apenas por diversão mesmo.<br />
<br />
<b>Remote Work - Trabalhe Remotamente </b><br />
<br />
Esse é o meu mais recente projeto e decidi começar citando ele justamente para demonstrar que, na maioria das vezes, uma boa ideia começa com algo muito simples ou uma necessidade básica.<br />
<br />
Então, se trata de um App feito com React Native, um dos frameworks que citei <a href="https://blog.flavioflima.com/2018/09/desenvolvimento-mobile-por-onde-comecar.html">aqui nesse post</a>, e que serve, basicamente, para listar e salvar vagas para trabalho remoto.<br />
<br />
<b>Como a ideia surgiu?</b> Bom, eu tenho vários sites que oferecem trabalho remoto nos meus favoritos, mas todas as vezes em que ia procurar por trabalho novo, precisava ir de site em site, abrindo diversas abas no meu navegador. Então eu pensei: "deve ter algum app que faça isso pra mim". Bom, na verdade não. Pesquisei por toda a Play Store e os únicos apps que ofereciam trabalho remoto eram apps de agências de emprego, ou senão eram apps que demonstravam vagas remotas e não remotas, como o próprio Linkedin.<br />
<br />
A partir daí eu decidi fazer um app, primeiramente para meu uso pessoal, mas depois decidi lançar na Play Store (e em breve na App Store), que reunisse essas vagas num único lugar e que desse para salvá-las para verificar depois.<br />
<br />
<b>O que faz? </b>Em resumo, é um projeto relativamente simples. São apenas 3 telas, por enquanto, onde reúno vagas dos sites RemoteOK e JSRemotely e também uma tela para os favoritos. Mas já estou trabalhando para adicionar novos sites.<br />
<br />
<b>O que aprendi? </b>Bom, primeiramente melhorei alguns aspectos em relação ao React Native em si, principalmente em relação ao visual do app (vejam screenshots abaixo), à organização de código e o ciclo de vida dos componentes.<br />
<br />
<b>Quanto tempo até o lançamento? </b>Aqui vem o mais engraçado, a primeira versão eu levei apenas 4 horas entre o conceito, desenvolvimento e lançamento na loja. A barra de busca era bem básica, não tinha botão de favoritos e nem botão de compartilhamento. Fora o visual que não tava nada agradável, embora isso seja questão de gosto, claro. Mas o legal de lançar logo é que me comprometi a melhorar o projeto diariamente, então, toda vez que tinha algum tempo livre, ia lá e melhorava algo. E assim foi evoluindo e ainda tem bastante coisa a ser feito. O app tem apenas 15 dias de lançado afinal.<br />
<br />
Vejam vocês mesmos screenshots da primeira versão:<br />
<div class="separator" style="flex-direction: 'row'; flex: 1; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixSDu8zT3m31Phggr9QsWKfaJ5ktQLZzxGs9svgeseFt5WD5zxRJbQ-9uSBF3EInXWHRMf5MqiuJYptZyeGDn2qy9L5fDqxSJXycBS78VCS-q8q2-NdNV25S7JlzRCjyD1e97e3K8YXmAt/s1600/photo4968015605479352344.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixSDu8zT3m31Phggr9QsWKfaJ5ktQLZzxGs9svgeseFt5WD5zxRJbQ-9uSBF3EInXWHRMf5MqiuJYptZyeGDn2qy9L5fDqxSJXycBS78VCS-q8q2-NdNV25S7JlzRCjyD1e97e3K8YXmAt/s320/photo4968015605479352344.jpg" width="180" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gNGj7tCSuJxx24kXMT3NFPBAgy9oQBNpkP0uCx4KNHqWmgFWcJKe4cnbhe3YGsr6mneSJRCih-fijqbTUHxPTznz2MK6Rp6hini1a-_uJdi7meExKhRz-cidkSUguxGS-QtcUg_OPa-o/s1600/photo4990148808906221646.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0gNGj7tCSuJxx24kXMT3NFPBAgy9oQBNpkP0uCx4KNHqWmgFWcJKe4cnbhe3YGsr6mneSJRCih-fijqbTUHxPTznz2MK6Rp6hini1a-_uJdi7meExKhRz-cidkSUguxGS-QtcUg_OPa-o/s320/photo4990148808906221646.jpg" width="180" /></a></div>
<div class="separator" style="flex-direction: 'row'; flex: 1; text-align: center;">
<br /></div>
<div class="separator" style="text-align: justify;">
E agora os da nova versão:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSWbj7xQ3PDv1z1tQWO4BUKB4SN1bXwqiSWaiPOaK4Xk2cd0UOeOCOeKlWqwNjhfzHGiZeaRzuS0wcqwoQQWiy1dF6xWDjnWKLS8TunePf-1psea0-F-AXiDAM1M5x6hqFvtkpW7D_l4b/s1600/Screenshot_1538835980.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="900" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuSWbj7xQ3PDv1z1tQWO4BUKB4SN1bXwqiSWaiPOaK4Xk2cd0UOeOCOeKlWqwNjhfzHGiZeaRzuS0wcqwoQQWiy1dF6xWDjnWKLS8TunePf-1psea0-F-AXiDAM1M5x6hqFvtkpW7D_l4b/s320/Screenshot_1538835980.png" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtMegzyZRNwetVdikpqKz4v25ffGUVRQgZfKSW0Tvm8XczgX5TsCDIEEG6FHFkciB9H0ZQgnuCNA2mSD8UW2uJdSbdTRBQMC-lIsqiJVvSj2aovBGi8WWKfvvB3DDHsui6vyW0ntgqxnIK/s1600/Screenshot_1538836007.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="900" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtMegzyZRNwetVdikpqKz4v25ffGUVRQgZfKSW0Tvm8XczgX5TsCDIEEG6FHFkciB9H0ZQgnuCNA2mSD8UW2uJdSbdTRBQMC-lIsqiJVvSj2aovBGi8WWKfvvB3DDHsui6vyW0ntgqxnIK/s320/Screenshot_1538836007.png" width="180" /></a></div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
Outra coisa legal é que, apesar de não ter feito muita divulgação fora das redes sociais e com a ajuda de alguns amigos meus, o app atingiu mais de 100 downloads em menos de uma semana e de pessoas de diversas partes do mundo. Parece pouco, mas é um app desenvolvido num fim de semana e por uma única pessoa durante seu tempo livre. Ao menos até agora pois o código fonte dele está disponível no Github para quem quiser contribuir, então fiquem à vontade para fuçar o código, mandar melhorias ou até mesmo fazer um fork e sua própria versão do app, blz?</div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
<b>Kazagastão - Jornalismo Rock n' Roll</b></div>
<div class="separator" style="text-align: justify;">
<b><br /></b></div>
<div class="separator" style="text-align: justify;">
Esse app é basicamente uma homenagem e uma forma que encontrei de ajudar um dos melhores canais do YouTube, na minha opinião. Quem gosta de boa música, principalmente de Rock, deve conhecer o Gastão, ex-VJ da MTV que apresentava o programa Fúria! e logo depois foi para a TV Cultura apresentar o Musicaos.</div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
Hoje em dia o Gastão tem um canal no YouTube chamado <a href="https://www.youtube.com/user/heavylero1" target="_blank">Kazagastão</a>, onde ele posta entrevistas, curiosidades e novidades do mundo do Rock n Roll Nacional e Internacional.</div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
<b style="text-align: start;">Como a ideia surgiu? </b><span style="text-align: start;">Acompanho o trabalho do pessoal do Kazagastão há alguns anos já e vi que eles não tinham um App, a rede deles basicamente se resumo às redes sociais e ao YouTube. Então tive a ideia quando estava estudando como implementar a API do YouTube a um App em React-Native.</span></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="text-align: justify;">
<b style="text-align: start;">O que faz? </b><span style="text-align: start;">Por enquanto, o App lista os últimos vídeos do canal e você pode assistir diretamente dele numa interface mais simples e objetiva. Também é possível acessar às redes sociais do canal em outra aba. Em breve adicionarei favoritos também ao app e notificações para novos conteúdos.</span></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="text-align: justify;">
<b style="text-align: start;">O que aprendi? </b><span style="text-align: start;">Principalmente a lidar com a APIs de terceiros como a do YouTube.</span></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="text-align: justify;">
<b style="text-align: start;">Quanto tempo até o lançamento? </b><span style="text-align: start;">Esse app acabou demorando mais pra sair apesar de ter tido um desenvolvimento rápido. A questão aqui é que precisava da aprovação do Gastão, se ele curtia o visual e os recursos. Após a resposta dele é que fiz a postagem na Play Store.</span></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;">Seguem as screenshots do app:</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zVkfySMr2FPJpnVT1Jj8qLz0Ij7YYpyHM2GWR7puApBmkbxesmv4jxn7XFIn9V_L-ZAInB1XnIOJDk9mh3TzeD5pXgbUQ5WERGUXAtnrcK_7luYdiq_aq5vmYY7GGUG_4OUD1krDGvfG/s1600/photo4947240182948669421.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6zVkfySMr2FPJpnVT1Jj8qLz0Ij7YYpyHM2GWR7puApBmkbxesmv4jxn7XFIn9V_L-ZAInB1XnIOJDk9mh3TzeD5pXgbUQ5WERGUXAtnrcK_7luYdiq_aq5vmYY7GGUG_4OUD1krDGvfG/s320/photo4947240182948669421.jpg" width="180" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVpxJDOn8oeubxZhogtyrYztCJcDehceqty6lhz3XXjUhw__s_0ZpqzDozpUOVnsgOuveomRxW4mFdLm5yG4u8g_JElUFuU0uBZx9ZHFDbhQhJCkmXqVhsr6yY5EK0Y8J6VCwYZqq-XPj/s1600/photo4949607629051766769.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1280" data-original-width="720" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVpxJDOn8oeubxZhogtyrYztCJcDehceqty6lhz3XXjUhw__s_0ZpqzDozpUOVnsgOuveomRxW4mFdLm5yG4u8g_JElUFuU0uBZx9ZHFDbhQhJCkmXqVhsr6yY5EK0Y8J6VCwYZqq-XPj/s320/photo4949607629051766769.jpg" width="180" /></a></div>
<div class="separator" style="text-align: justify;">
<span style="text-align: start;"><br /></span></div>
<div class="separator" style="text-align: justify;">
Além desses, também lancei o App chamado Bitcoin Trainee, mas esse merece um post só para ele pois foi um projeto muito grande que levou meses pra ficar pronto, então fica pra próxima.</div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
Mas, em resumo, queria demonstrar e falar desses projetos pra ficar claro pro pessoal que está começando agora em uma nova área que, como falei em <a href="https://blog.flavioflima.com/2018/09/alternativas-para-adquirir-experiencia.html" target="_blank">outro post</a>, podemos conseguir experiência trabalhando em projeto próprios também, e que isso abre muito as portas para novas oportunidades de emprego mundo a fora. E, na hora em que for fazer uma entrevista, já tem coisa legal pra mostrar. </div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
Mesmo que seja algo simples, muito conceitos podem ser abstraídos a partir deles.</div>
<div class="separator" style="text-align: justify;">
<br /></div>
<div class="separator" style="text-align: justify;">
Valeu!</div>
<br />Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-88355699816153773412018-09-15T00:24:00.000-03:002018-09-15T00:31:22.002-03:00Desenvolvimento Mobile - Por onde começar?<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXcEUe4XYNh43Eoiskeu26LOCONzaKM7P7umIs57-w1BXBtqMFEDLVXWZMVeT9dJUJOlCnDMqPvMv8w98giRZ9bftBhHUDQBo3tEh3Pk9Du54GFbE25uR6IgveWIAnsjoQpx1cuTTCq-8/s1600/smarts.webp" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Smartphones" border="0" data-original-height="347" data-original-width="616" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXcEUe4XYNh43Eoiskeu26LOCONzaKM7P7umIs57-w1BXBtqMFEDLVXWZMVeT9dJUJOlCnDMqPvMv8w98giRZ9bftBhHUDQBo3tEh3Pk9Du54GFbE25uR6IgveWIAnsjoQpx1cuTTCq-8/s400/smarts.webp" title="Smartphones" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
</div>
<div style="text-align: justify;">
Quando optamos por desenvolver para <i>smartphones</i>, temos algumas opções em mente: o desenvolvimento nativo, que inclui uma linguagem de programação e ambientes de desenvolvimento específicos para cada plataforma; desenvolvimento multiplataforma, utilizando linguagem web como Javascript; ou ainda um Progressive Web App (PWA), ou seja, uma aplicação web de verdade pensada para esses pequenos aparelhos. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Em meio a tudo isso, como saber as principais vantagens e desvantagens de cada forma de desenvolvimento e como ela se sai adapta à imensa variedade de aparelhos e tamanhos de tela disponíveis no mercado? </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Boom dos Smartphones iniciado no final da década passada com o lançamento do iPhone e do sistema operacional Android, juntamente com a derrocada da gigante BlackBerry, fez desses pequenos 'computadores de mão' companheiros inseparáveis da grande maioria das pessoas. Sendo, já há alguns anos, a principal forma de acesso à internet e às redes sociais, que desenvolveram aplicativos próprios que nos notificam todas as vezes em que alguém curte nossas fotos no Instagram, recebemos solicitações de amizade no Facebook, ou até mesmo temos um tweet retuitado.<br />
<br />
Com toda essa demanda, não é de se espantar a quantidade de possibilidades quando se trata de desenvolver para essas plataformas, correto?</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Seguem as principais formas de desenvolvimento para dispositivos móveis disponíveis na atualidade, bem como suas vantagens e desvantagens:</div>
<div style="text-align: justify;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobQrjDxdxh9XliyB10Yj0rP5nceaHPtslN-NzqfBVxNY3Y2HpzjUZekSVlBgW7-p04ld6muOrRXcukPR-GkkX6MSS95V0bV1MfXsipvipyfU1Rjs8tA3QUHdjdtP4kNyFL8dJCGX6VFax/s1600/ap_an-1024x469.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Android-Ios" border="0" data-original-height="418" data-original-width="832" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobQrjDxdxh9XliyB10Yj0rP5nceaHPtslN-NzqfBVxNY3Y2HpzjUZekSVlBgW7-p04ld6muOrRXcukPR-GkkX6MSS95V0bV1MfXsipvipyfU1Rjs8tA3QUHdjdtP4kNyFL8dJCGX6VFax/s400/ap_an-1024x469.webp" title="Android-Ios" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br /></div>
<div style="text-align: justify;">
<b>Desenvolvimento Nativo</b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>iOS</b></div>
<div style="text-align: justify;">
Todos sabemos da importância do sistema operacional da Apple para a popularização dos Smartphones. Apesar de seus aparelhos não serem exatamente "populares", ao menos em termos de preço, a marca construiu uma história de evolução do seu sistema a cada novo lançamento. E não podemos deixar de citar ainda que a App Store foi a primeira loja de aplicativos disponível e que isso se provou uma das maiores revoluções na forma de distribuição de software nos últimos anos.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O desenvolvimento iOS é um dos mais fechados que temos, é necessário um computador da Apple rodando as últimas versões do sistema operacional MacOSX, de preferência, bem como domínio da linguagem Objective-C ou Swift. A Apple desenvolveu e aperfeiçoou ao longo dos anos sua IDE chamada XCode que inclui recursos muito úteis e dispõe de um simulador que consegue replicar praticamente tudo o que um aparelho físico faz, o que facilita muito o desenvolvimento e os testes.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vantagens:</div>
<ul>
<li style="text-align: justify;">Ecossistema otimizado pelo fato de não ter muita variedade de aparelhos;</li>
<li style="text-align: justify;">Ferramentas que auxiliam muito no desenvolvimento;</li>
<li style="text-align: justify;">Desempenho muito bom mesmo em aparelhos mais antigos;</li>
</ul>
<div style="text-align: justify;">
Desvantagens:</div>
<ul>
<li style="text-align: justify;">Necessita de um MacOSX para seu desenvolvimento;</li>
<li style="text-align: justify;">Plataforma mais fechada que a concorrência;</li>
</ul>
<br />
<div style="text-align: justify;">
<b>Android</b></div>
<div style="text-align: justify;">
Esse sistema operacional dispensa mais comentários já que é o mais utilizado no mundo, hoje muito próximo de atingir os 90% de market share no que tange aos smartphones.<br />
<br />
Projeto de código aberto baseado no kernel linux que foi comprado e aperfeiçoado pelo Google, sendo lançado em meados de 2008 e disponível em milhares de aparelhos de dezenas de marcas hoje em dia, e que acabou de ter sua nona versão, Android Pie, lançada no mês de agosto desse ano.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Por se tratar de uma plataforma aberta (não 100%, eu sei), o desenvolvimento Android pode ser realizado em computadores com sistema operacional Windows, Linux ou Mac. Seu desenvolvimento é feito na linguagem Java, essa que ainda é uma das mais utilizadas no mundo. Hoje também é possível desenvolver para a plataforma utilizando a linguagem Kotlin, criada pelo Google para ser a linguagem oficial desse sistema.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Além do domínio de uma dessas linguagens, também é necessário o Android Studio, ferramenta que possui, assim como o XCode, um simulador do sistema, bem como as ferramentas de desenvolvimento (Android-SDK).</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vantagens:</div>
<ul>
<li style="text-align: justify;">Possibilidade de desenvolver em qualquer sistema operacional;</li>
<li style="text-align: justify;">Linguagem Java pode ser utilizada em inúmeros projetos fora do android, tornando-a mais "útil" que a Swift, por exemplo;</li>
<li style="text-align: justify;">Plataforma de Código Aberto; </li>
</ul>
<div style="text-align: justify;">
Desvantagens:</div>
<div>
<ul>
<li style="text-align: justify;">Número imenso de aparelhos torna a tarefa de desenvolver e testar muito mais complexa;</li>
<li style="text-align: justify;">Android Studio é um devorador de recursos e exige uma máquina relativamente boa para não travar, embora esteja melhorando nas últimas versões;</li>
</ul>
</div>
<br />
<div style="text-align: justify;">
<b>Desenvolvimento Multiplataforma</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37taIAwzJiyWDYOFBcjWgCJqAzhrEcA53dAapBsNR7Rcl1ujf4Gkgsysr2pDQtTiE_04zkdxVojCtpZyaFpJmRFMLNCeJjUkfUPc-0zFffufpJlgYmn7fWJtwFzyKglHlCNyxDYfN2mjS/s1600/ionic.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Ionic" border="0" data-original-height="407" data-original-width="850" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37taIAwzJiyWDYOFBcjWgCJqAzhrEcA53dAapBsNR7Rcl1ujf4Gkgsysr2pDQtTiE_04zkdxVojCtpZyaFpJmRFMLNCeJjUkfUPc-0zFffufpJlgYmn7fWJtwFzyKglHlCNyxDYfN2mjS/s400/ionic.webp" title="Ionic" width="400" /></a></div>
<b><br /></b></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Ionic</b></div>
<div style="text-align: justify;">
Esse Framework pode ser utilizado para desenvolvimento para Android, iOS e Windows 10, bem como para Progressive Web Apps, e é hoje utilizado por diversas empresas e StartUps ao redor do mundo.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Ele surgiu como um projeto paralelo ao AngularJS, framework de desenvolvimento web criado por um ex-funcionário da Google e que é, até hoje, apoiado pela gigante, e assim como o AngularJS, passou por mudanças profundas a partir de sua segunda versão, se estabilizando a partir do terceiro, e atual, lançamento.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
O Ionic facilita o desenvolvimento móvel para aqueles que já dominam as tecnologias web, já que ele é basicamente HTML, CSS e Javascript, claro que tudo isso encapsulado juntamente com componentes do Angular. O problema é que ele roda em cima de uma WebView e acaba não sendo recomendado para projetos que exijam muito do aparelho.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vantagens:</div>
<ul>
<li style="text-align: justify;">Fácil e rápido para desenvolver para quem já desenvolve para a Web;</li>
<li style="text-align: justify;">Possui componentes que se adaptam a cada plataforma;</li>
</ul>
<div style="text-align: justify;">
Desvantagens:</div>
<div>
<ul>
<li style="text-align: justify;">Desempenho não é dos melhores;</li>
</ul>
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibQ4atXdjUwnGuDInFR5UnJSYw3XlEJdCzu14h0dhJFl7h3yXpmchy__NoTD7tYbsxZlWxAb62tn4s8nektKnNN9e1g9dqxrEVwD1f1_Wbz-EEkU-sKJL_SFJ3i8D21Hbs5a8yV9WaDjT/s1600/react-native.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="React Native" border="0" data-original-height="540" data-original-width="960" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibQ4atXdjUwnGuDInFR5UnJSYw3XlEJdCzu14h0dhJFl7h3yXpmchy__NoTD7tYbsxZlWxAb62tn4s8nektKnNN9e1g9dqxrEVwD1f1_Wbz-EEkU-sKJL_SFJ3i8D21Hbs5a8yV9WaDjT/s400/react-native.webp" title="React Native" width="400" /></a></div>
<br />
<div style="text-align: justify;">
<b>React Native</b></div>
<div style="text-align: justify;">
Esse segundo framework foi criado pelo Facebook e é uma extensão de outro projeto da gigante, o ReactJS. O RN dá a possibilidade de utilizar basicamente um código e compilá-lo para Android ou iOS. Embora, ao contrário do Ionic, não possui componentes adaptáveis a cada plataforma, o que dificulta um pouco a estilização desses.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Por ser baseado no ReactJS, utilizamos basicamente Javascript para seu desenvolvimento. O RN possui componentes próprios que são traduzidos para as plataformas de destino, se comportando bastante como um código nativo, embora não o seja, o que dá um aumento de performance quando comparado com o framework anterior.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Vantagens:</div>
<ul>
<li style="text-align: justify;">Desempenho superior, próximo ao nativo;</li>
<li style="text-align: justify;">Relativamente rápido para aprender, já que o código é basicamente Javascript, principalmente para quem desenvolve com React;</li>
</ul>
<div style="text-align: justify;">
Desvantagens:</div>
<div>
<ul>
<li style="text-align: justify;">Mais difícil de estilizar e adaptar que outras alternativas;</li>
</ul>
</div>
<div style="text-align: justify;">
<br />Outros Frameworks que podem ser utilizados para desenvolvimento multiplataforma incluem:</div>
<ul><span style="text-align: justify;">
<li><b>Flutter</b> - Outro Framework multiplataforma que é apoiado pela Google. Ao contrário das outras alternativas, utiliza uma linguagem própria para seu desenvolvimento: Dart, o que pode afastar quem já domina outras linguagens de programação, mas pode atrair quem está iniciando agora nesse mundo. O desempenho é muito próximo do nativo e dá para utilizar o Android Studio para seu desenvolvimento;</li>
<li><b>NativeScript</b> - Esse é, por assim dizer, um misto de Ionic e React Native. Utiliza bastante de componentes Angular mas também faz jus a uma camada de compilação para código nativo, o que faz com que o desempenho seja similar ao obtido pelo React Native e Flutter.</li>
<li><b>PWA</b> - Progressive Web App não é bem um framework, mas é uma tendência crescente já que suas principais vantagens incluem a de que para se desenvolver um basta saber desenvolver para a Web, pode ser "instalado" tanto em Android quanto iOS, funcionando inclusive offline e também de não ser necessário de uma loja para publicar o App. O que acaba também sendo uma desvantagem, já que é necessário atrair o usuário até o site para que ele o "adicione a tela inicial" de seu sistema operacional para que esse permaneça no mesmo e possa acessar os recursos do aparelho;</li>
</span></ul>
<b style="text-align: justify;">
</b>
<br />
<div style="text-align: justify;">
Bom, com essa lista de vantagens e desvantagens de cada uma das maneiras de se desenvolver, espero ter ajudado a escolher sua próxima plataforma de desenvolvimento.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Claro que tudo depende do projeto. Se for algo rápido e que não seja muito complexo, recomendaria o Ionic, com certeza, caso contrário, o React Native. A não ser que você já esteja familiarizado com o framework React, daí o React Native é a aposta mais certa.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Quanto ao mercado de trabalho, posso dizer que a procura por esse último também está muito mais aquecida que a do Ionic, então se for para escolher uma plataforma para começar, React Native é o que recomendo sem dúvidas.</div>
<div style="text-align: justify;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-7026567694332097052018-09-08T15:53:00.000-03:002018-09-08T15:53:35.295-03:00ES2015 - Promises no Javascript (Parte 1)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2y2UxlPJOxpZVQCtgqJxvvs8RuDyH2nOOFpGo7B1G8nuAd5HzzzYEvzJYcIswNF29umtOeFX6iRZPDCgk8lgIKI53yUM_lLEo2B8CJMmAa51DMBXRkAV4Qdk9H5rE2H4cJlP77c0iM4fJ/s1600/js.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="340" data-original-width="609" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2y2UxlPJOxpZVQCtgqJxvvs8RuDyH2nOOFpGo7B1G8nuAd5HzzzYEvzJYcIswNF29umtOeFX6iRZPDCgk8lgIKI53yUM_lLEo2B8CJMmAa51DMBXRkAV4Qdk9H5rE2H4cJlP77c0iM4fJ/s320/js.webp" width="320" /></a></div>
<br />
<br />
<b>01 - Callbacks e Callback Hell</b><br />
<br />
Há algum tempo atrás, todas as vezes em que desenvolvíamos uma aplicação com Javascript e essa começava a escalar, crescer mais e mais, agregando mais e mais funções onde cada uma estava conectada com a outra e, principalmente, dependia uma da outra, tínhamos que utilizar as chamadas Callbacks, que são, basicamente, funções que chamam outra funções em seus parâmetros.<br />
<br />
Exemplo:<br />
<br />
<script src="https://gist.github.com/flavioislima/9855f92437807e636e06a04b35a05028.js"></script><br />
Nesse exemplo, a função forEach, que pertence ao prototype Array, chama uma função anônima que retorna cada um dos elementos precedido do seu índice.<br />
<br />
Ok, legal, quando tempo uma função chamando outra função é tranquilo de lidar, mas imagine por exemplo se fossem 4, 5 ou mais funções sendo chamadas uma dentro de outra. Isso é que o chamamos de "Callback Hell" pois aí fica fácil perder o controle da sua aplicação já que quando for precisar escrever testes ou debugar, tudo vira um inferno para o desenvolvedor.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgySnbJMtQt1YISsQZAKBMn75vMqvs_muvsfHDvr6ob4m3CzgyDBOgBbHW8xkHqaGfcxx6df-YeNf_rtm5BX3Es4g6dl0fARbDW-dNBJ65Io0WJMYFvPLkm1xqIkjNeWFKJThp6mOmJEFX/s1600/callbackmeme.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="399" data-original-width="600" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgySnbJMtQt1YISsQZAKBMn75vMqvs_muvsfHDvr6ob4m3CzgyDBOgBbHW8xkHqaGfcxx6df-YeNf_rtm5BX3Es4g6dl0fARbDW-dNBJ65Io0WJMYFvPLkm1xqIkjNeWFKJThp6mOmJEFX/s320/callbackmeme.webp" width="320" /></a></div>
<br />
Foi aí que foi introduzido mais recentemente no Javascript as chamadas Promises. A princípio se tratava de uma biblioteca externa e que só depois de 2015 que foi implementada por completo na linguagem.<br />
<b><br /></b>
<b>02 - O que são e como funcionam as Promises?</b><br />
<b><br /></b>
Como o próprio nome já indica, Promises são Promessas, é um indicativo de que você possa receber, ou não, algo a partir de uma solicitação feita anteriormente.<br />
<br />
Por exemplo, vamos supor que você precise mostrar uma lista de produtos disponíveis num supermercado, a princípio você terá uma função que busca no banco de dados a lista de produtos disponíveis, com seus saldos e preços e também terá uma outra função que organiza e mostra essa lista na tela para o usuário. Bom, para essa segunda função funcionar, será necessário que a primeira tenha sido executada e tenha trazido as informações, correto? Só temos um problema aqui: o Javascript é uma linguagem assíncrona, ou seja, se você simplesmente chamar a primeira função e logo depois chamar a segunda, o que vai ocorrer é um erro.<br />
<br />
<script src="https://gist.github.com/flavioislima/6d678dd2b9d9840cd5691445012c5b1a.js"></script><br />
Para evitar esse erro, utilizamos as Promises, especificando uma função anônima que recebe dois parâmetros: <b><i>resolve</i></b> e <i style="font-weight: bold;">reject</i>. Sendo o primeiro para tratar a informação quando recebida e o segundo para quando há um erro com o pedido.<br />
<br />
Exemplo:<br />
<br />
<script src="https://gist.github.com/flavioislima/dd600b95376a0ea0f67394df5d2d56e4.js"></script><br />
<br />
Nesse exemplo eu fiz questão de utilizar a função "fetch" pois ela em si já utiliza o protocolo de Promises.<br />
<br />
<b>03 - Como tratar erros em Promises?</b><br />
<b><br /></b>
Acima nós vemos como podemos obter as respostas a partir das promisses usando a função ".then()", correto? Ela serve para retornar o parâmetro <i style="font-weight: bold;">resolve</i> da promise. Caso precisemos tratar o erro, podemos utilizar a função ".catch()".<br />
<br />
<script src="https://gist.github.com/flavioislima/2bdfefab266e606cbcf34ad7dbfd35f4.js"></script><br />
Por hoje é só mas pretendo aprofundar mais em posts futuros pois tem muita coisa que dá pra fazer com Promises.<br />
Inclusive, pretendo fazer um post sobre o uso de Promises e Obervables e em qual situação usar um ou o outro.<br />
<br />
Valeu!<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-56079078031775390812018-09-03T11:30:00.000-03:002018-09-03T12:51:23.333-03:00Alternativas para adquirir experiência como programador<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkGc6WzgBFThuk800RH4ObrJyydi3WliMGK9HtgCwV1dSBGl3h2l9uWDwxi_fphgztGLfxdXz0ONvZwrGcwkPAMygGSGCrMtEQ8OoS6_9kgcVUBx-D034oU76gxAOjp8j5j3ErgyLjLQf/s1600/Job-Search-Find-a-Job1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="351" data-original-width="641" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkGc6WzgBFThuk800RH4ObrJyydi3WliMGK9HtgCwV1dSBGl3h2l9uWDwxi_fphgztGLfxdXz0ONvZwrGcwkPAMygGSGCrMtEQ8OoS6_9kgcVUBx-D034oU76gxAOjp8j5j3ErgyLjLQf/s320/Job-Search-Find-a-Job1.png" width="320" /></a></div>
<br />
<br /></div>
<div>
Olá, pessoal!</div>
<div>
<br /></div>
<div>
Hoje o post será um pouco diferente pois pretendo passar umas dicas para quem está começando agora na área de desenvolvimento, ou está mudando de carreira, mas não está conseguindo colocação no mercado pois praticamente todas as vagas de emprego são voltadas para programadores Pleno e Sênior.</div>
<div>
Então, por muitas vezes, isso acaba gerando uma frustração muito grande na gente e acabamos por aceitar vagas de emprego em áreas que não queríamos trabalhar na TI, ou até mesmo fora dela.<br />
<br />
Então, devido ao fato de ver muitos desenvolvedores perguntando como faz para adquirir experiência ou até trabalhando em estágios mal (ou sequer) remunerados, e até com memes surgindo aí aos montes, como esse abaixo, que decidi demonstrar os meios pelos quais se dá para conseguir obter experiência mesmo sem um emprego fixo ou um trabalho freelancer.</div>
<div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtiUSD5Ja_vzVguO2FZGUNBpxWyDPgzg8dTFtDUYCnS8HQnr2ncDtx6h_vLJMJXsbQUFpVzWI7VKiBB98fxd7-9MNcnLN3zeDP4el7veS-3j3FFHgMbyJ5GKP5lYEqWsZrlmKDfzkg2iR_/s1600/get-job.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="707" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtiUSD5Ja_vzVguO2FZGUNBpxWyDPgzg8dTFtDUYCnS8HQnr2ncDtx6h_vLJMJXsbQUFpVzWI7VKiBB98fxd7-9MNcnLN3zeDP4el7veS-3j3FFHgMbyJ5GKP5lYEqWsZrlmKDfzkg2iR_/s320/get-job.jpeg" width="282" /></a></div>
<br /></div>
<div>
<br />
Então, Flávio, como obter experiência, mostrar trabalho, mostrar para o mercado que eu realmente manjo do assunto e estou pronto para essa ou aquela vaga de emprego?<br />
<div>
<br /></div>
<div>
<b>1 - Não pare no tempo!</b></div>
<div>
<br /></div>
Bom, a primeira dica que gostaria de dar é a de que o desenvolvedor não pode ficar parado no tempo. Sim, eu sei que é muito difícil conseguir acompanhar todas as novas tecnologias ou todos os novos Frameworks Javascript que saem todos os dias, todas as horas, minutos, etc. Nossa área tem essa natureza de que as coisas tem que acontecer muito rápido e tudo acontece dessa forma. Você vai pesquisar um tutorial de algo que deseja aprender e se ele tiver mais do que 6 meses de escrito talvez nem sirva mais.<br />
<br />
Mas existem alternativas a isso. Eu, por exemplo, uso muito o recurso de criar listas no Twitter. Funciona assim: você cria uma lista personalizada para adicionar perfis de usuários que comentam sobre um determinado assunto e daí adiciona aqueles usuários da rede social àquela lista, logo, toda vez que você quiser se informar sobre algo novo, basta abrir a lista e verificar as postagens dos perfis.<br />
<br />
Outra ideia é seguir determinados projetos e usuários no Github, isso também é algo que ajuda muito pois sempre que tem novidade naquele projeto Open Source, você recebe uma notificação no seu E-mail. Também dá para seguir usuários e grupos no Medium e ver as últimas postagens de autores específicos, que muitas vezes você conheceu no Twitter.<br />
<br />
<b>2 - Trabalhe sua presença online</b><br />
<br />
Outra atitude importante do desenvolvedor é trabalhar na sua presença online. Então, se você ainda não fez o seu site ou até mesmo um blog como esse, ta esperando o quê? E nem sempre é preciso escrever sobre tecnologia em si ou trazer tutoriais e tal, mesmo que o assunto principal não seja desenvolvimento, um blog e um site pessoal te ajudam a construir sua marca e, consequentemente, a te divulgar.<br />
<br />
Além do mais, seu site e blog vão acrescentar mais ainda ao teu portfólio.<br />
<br />
<b>3 - Construa projetos pessoais e os divulgue</b><br />
<br />
Outra dica muito importante, e essa realmente pode te ajudar a conseguir trabalho mais fácil, é você criar, desenvolver projetos, mesmo que os que sejam apresentados em cursos como os da Udemy, Udacity, Rocket Seat, Devpleno, ou até mesmo no YouTube (E tem centenas lá). Não assista ao curso, crie o projeto e deixe ele engavetado isso é um ERRO! Repito: isso é um ERRO tremendo e que muitas pessoas fazem.<br />
<br />
Os projetos passados no cursos, mesmo os mais simples, devem estar, ao menos, no seu GitHub. Mas, de preferência utilize serviços como o Firebase Hosting, AWS ou Heroku para postar seus trampos online. Esses serviços que citei tem planos gratuitos onde você pode hospedar seus projetos todos lá sem limites. Isso é uma coisa que você pode adicionar numa página no seu site e colocar no seu currículo pois mesmo sendo projetos para estudo, eles te deram alguma experiência, entende? E, caso você precise obter alguma informação para outro projeto similar, é só dar uma olhada no código que você fez quando estava estudando.<br />
<br />
E, só para finalizar, procure também por projetos sociais como ONGs que, muitas vezes, não têm sequer um site para divulgar seus trabalhos. Trabalho voluntário ajuda muito no currículo, acredite, as empresas olham muito isso.<br />
<br />
<b>4 - Contribua para projetos Open Source </b><br />
<br />
Caso você se sinta seguro para desenvolver mas esteja sem ideias para criar coisas novas, procure algum projeto que você goste e ajude-o com correção de bugs, documentação, testes, etc. Isso também te ajuda a manter atualizado e ocupado adquirindo mais experiência. E, quando as empresas forem verificar seu GitHub, elas vão ver lá que você não está parado e está sempre trabalhando.<br />
<br />
<b>5 - Participe da Comunidade (Eventos, Palestras, Fóruns)</b><br />
<br />
Outra coisa que te ajuda a aumentar teu Networking e te abrir a mente é participar de eventos de desenvolvimento, Meetups, etc. E eles acontecem em praticamente todos os lugares e cidades do país. Com certeza tem algum essa semana na cidade em que você mora ou ao menos perto dela. Se cadastra no Meetup.com e procura que com certeza vai ter algum que te agrade e não deixe de ir!<br />
<br />
Também se inscreva para palestrar nesses eventos que isso acrescenta muito à sua carreira e você pode acabar sendo visto por alguém de alguma empresa que pode lhe fazer uma proposta de emprego.<br />
<br />
Bem, essas são as minhas dicas por hoje. Caso você tenha mais alguma ideia, não deixe de usar a área de comentários!<br />
<br />
Valeu!<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com1tag:blogger.com,1999:blog-2822829591719830363.post-11106787102617686782018-08-31T11:02:00.001-03:002018-08-31T12:45:11.834-03:00JS - Desconstruindo o Destructuring (Arrays)<p style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAQVEt3p42OMyh0izlAvhkAz8BoaJJL_gBZXZwVQQfjQaHDgdDKUZ3qu7wnuXh3wQvVCxULMGAtCzuszRQv5nnDvKNK03G4xng8_KehsHdPB3noI36UPPy6LOrwcYj1kU2BFsdRqlJlBL/s1600/%255BUNSET%255" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYAQVEt3p42OMyh0izlAvhkAz8BoaJJL_gBZXZwVQQfjQaHDgdDKUZ3qu7wnuXh3wQvVCxULMGAtCzuszRQv5nnDvKNK03G4xng8_KehsHdPB3noI36UPPy6LOrwcYj1kU2BFsdRqlJlBL/" data-original-width="" data-original-height=""></a></p><p></p> Continuando a nossa série sobre novos recursos implementados na linguagem Javascript nos últimos anos, teremos a segunda parte sobre Destructuring, dessa vez, falaremos sobre <b>Arrays, </b>que traz em si muitas coisas similares mas também recursos únicos em comparação aos Objetos. Caso você não tenha visto a primeira parte, <a href="https://blog.flavioflima.com/2018/08/o-destructuring-foi-um-recurso-incluido.html" target="_blank">clique aqui para acessá-la</a>.<br>
<br>
Bem, em alguns pontos, o Destructuring com Arrays funciona de forma muito similar a com Objetos, mas veremos abaixo o que muda de um para o outro. Por exemplo, para quem não sabe, Arrays, diferente de Objetos, possuem um ordenamento, então ele começa com um índice que vai de 0 a N, sendo 0 o seu primeiro item. Então, nesse caso, o Destructuring irá respeitar essas posições.<br>
<br>
Exemplo:<br>
<pre><code class="language-javascript">const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, pSega ] = personagens;
console.log(pNintendo); // "Mario"
console.log(pSega); // "Sonic"
</code></pre>
<br>
Como vimos, a escolha não é aleatória, ela respeita as primeiras posições do Array e, claro, sem modificar o Array em si.<br>
Caso necessário, há a possibilidade de omitir itens caso tenha algum deles que não nos seja interessante.<br>
<br>
Então é possível fazer dessa maneira: <br>
<pre><code class="language-javascript">const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, , pCapcom ] = personagens;
console.log(pNintendo); // "Mario"
console.log(pCapcom); // "MegaMan"
</code></pre>
<br>
<div>
Ou seja, utilizando esse "espaço" em branco, podemos ignorar um determinado elemento do Array.</div>
<div>
<br></div>
<div>
Também há a alternativa de modificar o valor de alguma variável que já tenha sido previamente atribuída utilizando o Destructuring, além de podermos, assim como em Objetos, passar valores padrões.<br>
<br></div>
<div>
Exemplo:</div>
<div>
<pre><code class="language-javascript">// Nosso Array de personagens
const personagens = ["Mario", "Sonic", "MegaMan"];
// Variáveis já atribuídas previamente
let pNintendo = "Luigi", pSega = "Alex Kid";
// Reatribuindo e passando um valor Default para uma variável não existente
[ pNintendo, pSega, pKonami = "Snake" ] = personagens;
console.log(pNintendo); // "Mario"
console.log(pKonami); // "Snake"
</code></pre>
<br>
Outra coisa muito legal é que temos a escolha de utilizar o Destructuring com Arrays juntamente com outro recurso muito útil que veio inserido no Ecmascript 2015: os parâmetros Rest, que merecem um artigo só para eles depois. Mas, em resumo, é uma forma de incluir todos os itens de um Array ou uma determinada parte dele, em outro Array ou Objeto. Também tem outras funcionalidades, em funções, por exemplo, mas fica para outro post.<br>
<br>
Então, é possível utilizar os parâmetros Rest, simbolizados pelos símbolos de reticências [...] Destructuring para copiar parte do Array para outro Array.<br>
<br>
Exemplo:<br>
<pre><code class="language-javascript">const personagens = ["Mario", "Sonic", "MegaMan"];
// Utilizamos o parâmetro Rest para copiar o resto dos personagens para um outro array chamado restPersonagens
let [ pNintendo, ...restPersonagens ] = personagens;
console.log(pNintendo) // "Mario";
console.log(restPersonagens[0]) ]] // "Sonic";
console.log(restPersonagens[1]) ]] // "MegaMan";
// Clonando todo o Array
const [ ...personagensClones ] = personagens;
console.log(personagensClones) // ["Mario", "Sonic", "MegaMan"];
</code></pre>
<br></div>
Bom, por hoje é só. Na próxima e última parte, veremos como misturar Arrays e Objetos com Destructuring.<br>
<br>
Valeu!
Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-58838450463745290972018-08-30T11:00:00.000-03:002018-09-03T12:52:45.952-03:00O que é RxJS?<div style="text-align: center;">
<img height="200" src="https://rxjs-dev.firebaseapp.com/generated/images/marketing/home/Rx_Logo-512-512.png" width="200" /></div>
<br />
Nesse artigo eu procuro esclarecer um pouco sobre essa biblioteca voltada para a programação funcional e que, hoje em dia, tem crescido exponencialmente em termos de adoção.<br />
<br />
<b>Então, de que se trata o RxJS?</b><br />
<b><br /></b>
Bem, como disse antes, o RxJS é uma biblioteca para uso em projetos que utilizam Javascript (incluindo JSX e TypeScript), que faz parte do projeto de Programação Reativa, daí que vem o Rx, de Reactive Extension. Além dela, existem também outros projetos voltados para a linguagem Java, Python, C++, etc.<br />
<br />
<b>E para quê serve? Qual sua finalidade?</b><br />
<b><br /></b>
Nós desenvolvedores, cedo ou tarde, trabalhamos em algum projeto de complexidade sem tamanho e que lida com inúmeras fontes de dados assíncronas, chamadas de <b>Stream</b>. Essas Streams precisam ser tratadas para que sejam mostradas para o usuário, na tela de um Smartphone, por exemplo, e isso demanda muito trabalho pois precisamos verificar informação por informação e mostrar somente o que importa naquele momento.<br />
O RxJS trouxe o conceito de Observable justamente para lidar com Streams e com alto volume de informação, de forma a facilitar esse tratamento, debugs, testes, etc.<br />
<br />
<b>Observable Pattern</b><br />
<br />
Para isso, fazemos uso do padrão Observable, ou Observable Pattern, que é formado por:<br />
<br />
<ul>
<li>Um <b>Observable</b>, que se trata de uma coleção de futuros eventos que podem ser invocados numa determinada situação ou momento;</li>
<li>Um <b>Observer</b> que sabe ouvir e tratar os valores recebidos pelo Observable;</li>
<li>Uma <b>Subscription</b>, ela é basicamente a execução de um Observable e também serve para cancelar essa mesma execução;</li>
<li><b>Operators</b>, funções puras escritas sob o conceito de linguagem funcional (tratarei dessas funções num futuro próximo) que servem para lidar com coleções utilizando operadores como <i>map</i>, <i>filter</i>, <i>reduce</i>, etc;</li>
<li>Temos ainda o <b>Subject</b>, equivalente a um EventEmitter e que é a única forma de fazer um multicasting para vários <b>Observers.</b></li>
<li>E, por último,<b> Schedulers</b>. Esses servem para lidar com concorrência entre os processos, nos dando a opção de escolher quando as informações serão processadas. Exemplos mais comuns são <i>SetTimeout</i> e <i>RequestAnimationFrame</i>.</li>
</ul>
<br />
Então, em resumo, qualquer tipo de fonte de informação pode ser tratada utilizando-se dessa biblioteca.<br />
Exemplos mais comuns, e os quais eu já utilizei em meus projetos, incluem tratamento de informações vindas de bancos de dados em tempo real. Quem utiliza o AngularFirebase2, a implementação do Firebase utilizada no Angular e Ionic, sabe muito bem da sua utilizada na hora de receber e tratar informações das Collections e com os Subscribers você monitora as mudanças no banco em tempo real.<br />
Mas há também usos em projetos de jogos e animações, por exemplo, já que é necessário 'observar' os comandos de um Joystick, teclado ou mouse. Então pode-se criar um Observable para isso.<br />
<br />
Enfim, esse post foi apenas para fazer um resumo de pra quê serve essa biblioteca, mas, em breve, trarei posts práticos de seu uso e talvez tudo fique mais claro.<br />
<br />
Valeu!Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-29453649665240151772018-08-29T14:03:00.001-03:002018-09-03T12:53:41.288-03:00Nova versão do Babel traz suporte a Typescript<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rU-Olc0ONxxI_toD8phwl6wZrF-cbjTQ1wdy7E07zp1ufWqiF7a0G6E6rOpbXBvRoBwx3xxt6xtQ-Q3hdqc-4fYj8ywH5h1DIM_kEu9TcVMPStrmW1Dfm53ms1I8f8rikQSYoJWbC-Fh/s1600/babel-typescript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="589" data-original-width="614" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2rU-Olc0ONxxI_toD8phwl6wZrF-cbjTQ1wdy7E07zp1ufWqiF7a0G6E6rOpbXBvRoBwx3xxt6xtQ-Q3hdqc-4fYj8ywH5h1DIM_kEu9TcVMPStrmW1Dfm53ms1I8f8rikQSYoJWbC-Fh/s320/babel-typescript.png" width="320" /></a></div>
<br />
Eis uma grande novidade do time Babel para a comunidade Javascript que realmente vai melhorar e muito a vida de quem gosta, assim como eu, de escrever JS tipado com Typescript mas também adora o Babel.<br />
<br />
Pra quem não sabe, Babel se trata de um compilador de Javascript que "traduz" Javascript atual (ES2015+) para Javascript antigo, mantendo assim uma camada de compatibilidade com navegadores legados.
Ele é essencial também no desenvolvimento de aplicações com React, já que essa biblioteca se utiliza de uma linguagem específica chamada de JSX e que não é compreendida pelos navegadores. Então o Babel faz essa "tradução", dando um leque enorme de possibilidades para os desenvolvedores.<br />
<br />
Um exemplo, utilizando o meu post anterior sobre <a href="https://reactivejs.blogspot.com/2018/08/o-destructuring-foi-um-recurso-incluido.html">Destructuring</a>:<br />
<pre><code class="language-javascript">// Código escrito com Ecmascript 2015+,
// ainda não compreendido por 100% dos browsers
const person = {
name: 'Flavio',
lastName: 'Lima',
age: 30
}
const { name, lastName, age } = person
// Agora o código compilado pelo Babel
'use strict';
var person = {
name: 'Flavio',
lastName: 'Lima',
age: 30
};
var name = person.name,
lastName = person.lastName,
age = person.age;
</code></pre>
<br />
É possível utilizar uma ferramenta oficial no site do <a href="https://babeljs.io/" rel="noopener" target="_blank">Babel</a> para verificar seus códigos.<br />
<br />
Já o <a href="https://www.typescriptlang.org/" rel="noopener" target="_blank">Typescript</a> se trata de um SuperType do Javascript, é basicamente um Javascript tipado criado pela Microsoft e que permite utilizar uma sintaxe muito similar a de outras linguagens, como o Java, por exemplo, no sentido de criar tipos, classes, entre outras coisas, ao Javascript. É uma ferramenta muito poderosa e é a linguagem padrão de frameworks como Angular e Ionic e também pode ser utilizada no React.<br />
<br />
Como o JSX, o Typescript também não é devidamente compreendido pelo navegador, logo, precisamos utilizar um compilador de typescript para javascript, que já existia, claro, mas agora com o suporte do Babel, vai ampliar mais ainda as possibilidades durante o desenvolvimento.<br />
<br />
Bom, sobre a notícia que foi postada no Blog oficial do <a href="https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/" rel="noopener" target="_blank">Typescript</a>, é basicamente o seguinte:<br />
<br />
"<em>Over a year ago, we set out to find what the biggest difficulties users were running into with TypeScript, and we found that a common theme among Babel users was that trying to get TypeScript set up was just too hard. The reasons often varied, but for a lot of developers, rewiring a build that’s already working can be a daunting task.</em>
<em>Babel is a fantastic tool with a vibrant ecosystem that serves millions of developers by transforming the latest JavaScript features to older runtimes and browsers; but it doesn’t do type-checking, which our team believes can bring that experience to another level. While TypeScript itself can do both, we wanted to make it easier to get that experience without forcing users to switch from Babel.</em>
<em>That’s why over the past year we’ve collaborated with the Babel team, and today we’re happy to jointly announce that Babel 7 now ships with TypeScript support!</em>"<br />
<br />
Traduzindo para o bom português: desde o ano passado que o time do Babel e do Typescript queriam adicionar uma compatibilidade entre os dois e isso foi feito agora na última versão do Babel, a versão 7. Para quem desenvolve Typescript e, consequentemente, utiliza a ferramenta oficial para sua compilação, tem acesso à checagem de tipo e compilação, já quem usar o Babel só terá como compilar, já que o Babel não checa o código por erros do usuário.<br />
<br />
No geral, não muda muita coisa na verdade, mas expande as capacidades do Babel e também deve atrair novos usuários para o Typescript.
Segue link para a matéria original que, inclusive, ensina a instalar o Babel para Typescript:<br />
<a href="https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/" rel="noopener" target="_blank">https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/</a><br />
<br />
Valeu!Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0tag:blogger.com,1999:blog-2822829591719830363.post-26100705422277773222018-08-29T11:51:00.001-03:002018-08-29T17:04:51.157-03:00JS - Descontruíndo o Destructuring (Objetos)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8UYUB2UHhFiyQToK81i_kxD3Ra5C8C_yMLafZA1N9oCgJNjR0xH14hdHI-a-TdfMgAH2EgjZK2MMuJ_gXw_6c7fWtJ2RCaTI9ycRZ5aJmNGNmkupFgX5RsRlM_kjlq4a1Mzdfn5ZSSGi/s1600/js.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="324" data-original-width="668" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp8UYUB2UHhFiyQToK81i_kxD3Ra5C8C_yMLafZA1N9oCgJNjR0xH14hdHI-a-TdfMgAH2EgjZK2MMuJ_gXw_6c7fWtJ2RCaTI9ycRZ5aJmNGNmkupFgX5RsRlM_kjlq4a1Mzdfn5ZSSGi/s320/js.png" width="320" /></a></div>
<br />
<br />
O Destructuring foi um recurso incluído nas últimas versões do Javascript e que talvez tenha passado batido por muita gente. Ele, basicamente, te permite escrever códigos mais limpos e menos repetitivos.<br />
<br />
O Ecmascript 2015 (ES2015), que define os padrões da linguagem Javascript, o revolucionou em muitas coisas, tornando-o mais global e elevando-o a patamares mais altos, e isso não é novidade alguma. Mas, mesmo já estando aí há mais de 3 anos, muitas pessoas ainda não conhecem diversos de seus recursos que podem facilitar, e muito, a vida dos desenvolvedores.
E sabemos que não são poucas as utilidades do Javascript hoje, a linguagem que, por muito tempo, foi até mesmo ridicularizada por desenvolvedores de linguagens mais 'nobres', por assim dizer, hoje está em praticamente tudo.<br />
<br />
Se antes estávamos limitados aos browser, às interações com usuários, alertas e animações, hoje podemos rodar o Javascript num servidor completo e executar basicamente qualquer coisa nele. Podemos ainda executar num app Mobile utilizando frameworks como React-Native, Nativescript e Ionic; Podemos ainda criar um aplicativo multiplataforma para Windows, Linux e Mac com Electron; e, hoje já está se tornando uma realidade, executar códigos em linguagens como C e C++ direto no browser através da camada de WebAssembly.
Enfim, Javascript está em todo o lugar, você pode criar basicamente qualquer coisa com ele e é certo que ainda não atingimos nem 50% do que ele é capaz, longe disso!<br />
<br />
Bom, então vamos falar desse recurso incluído nessa versão do Javascript e que ainda gera muitas dúvidas em sua utilização no dia a dia, para quê que serve? o que posso construir utilizando esse recurso? Em quê pode fazer diferença nas minhas tarefas diárias? Enfim, pretendo ao menos tentar responder a algumas dessas perguntas aqui.<br />
<br />
Vamos lá!
Enfim, Destructuring é basicamente uma técnica que, como disse antes, te faz economizar muito no código e deixar ele mais limpo e fácil de ler. Ele permite criar variáveis a partir de objetos ou arrays. Como? Segue um exemplo:
<br />
<div style="text-align: left;">
Antes, quando se precisava atribuir variáveis a partir de objetos, utilizávamos o seguinte código:<br />
<pre><code class="language-javascript">// Objeto person apenas para exemplificar
var person = {
name: "Flávio",
lastName: "Lima",
age: 30
}
// Criando variáveis a partir do objeto:
var name = person.name
var lastName = person.lastName
var age = person.age
// Logando as variáveis no terminal
console.log(name) //Flávio
console.log(lastName) //Lima
console.log(age) // 30
</code></pre>
</div>
<div style="text-align: left;">
<br /></div>
Bom, não parece grande coisa, né? afinal, nosso objeto tem apenas três propriedades. Mas imagine a complexidade disso em objetos maiores. É muita mão de obra e o Destructuring veio justamente pra facilitar nisso.<br />
<br />
Segue agora o mesmo código escrito usando Destructuring:<br />
<pre><code class="language-javascript">let person = {
name: "Flávio",
lastName: "Lima",
age: 30
}
// Atribuindo as variáveis
const {name, lastName, age} = person
// Logando as variáveis no terminal
console.log(name) // Flávio
console.log(lastName) // Lima
console.log(age) // 30
</code></pre>
<br />
Viu só? nesse caso, o código ficou bem mais simples de ler e só ocupou uma linha para declarar as variáveis.
E isso não é tudo, também é possível utilizar nomes diferentes para as variáveis.
Por exemplo:<br />
<pre><code class="language-javascript">// Abrasileirando as variáveis
const { name: nome, lastName: sobreNome, age: idade } = person
// Verificando no terminal
console.log(`Nome completo: ${nome} ${sobrenome};
Idade: ${idade}`) // Nome Completo: Flávio Lima; Idade: 30
</code></pre>
<br />
Também é possível atribuir valores default para variáveis pois caso você inicialize uma variável usando Destructuring e ela não existir no objeto, ela retornará <em>undefined.</em> Então podemos fazer dessa forma:<br />
<pre><code class="language-javascript">// Vamos continuar a utilizar o objeto Person,
// mas dessa vez vou criar uma variável não declarada antes
const { name, lastName, age, favMovie } = person
// Ao tentar logar a variável não existente, receberemos undefined
console.log(name) // Flávio
console.log(favMovie) // undefined
</code></pre>
<br />
Para evitar isso, definiremos um valor padrão para a variável:<br />
<pre><code class="language-javascript">const { name, lastName, age, favMovie = "Forrest Gump" } = person
// Dessa vez, não obteremos undefined mas sim o valor padrão informado
console.log(name) // Flávio
console.log(favMovie) // Forrest Gump
</code></pre>
<br />
Bom, por hoje é isso mas logo logo trarei mais posts sobre o uso de Destructuring com Arrays e também outras coisinhas mais que podemos fazer com ele.<br />
<br />
Valeu!Anonymoushttp://www.blogger.com/profile/04025922542098522297noreply@blogger.com0