Primeiros passos para ser um desenvolvedor web

Primeiros passos para ser um desenvolvedor web

dezembro 04, 2017   Bate-papo, Web,

Se você está pensando em começar sua carreira web, talvez esse post possa te dar uma direção :)

Afinal, o que é o desenvolvimento web? Esse termo está relacionado a construção e manutenção de soluções que comunicam-se através da Internet. Nesse meio, temos os sistemas corporativos, os serviços de comunicação, sites, gerenciadores online, jogos online, entre outros. O desenvolvimento web não está atrelado somente ao que é apresentado ao navegador, mas também toda a estrutura interna relacionada.

Desse termo, é comum ouvir mais dois termos: Back-end e Front-end. O que fazem esses dois desenvolvedores?

Back-end é a abstração do sistema que se comunica e interage do lado do servidor. Regras de negócio, conexão com banco de dados, processamento de informações, autenticação, cache, etc. Enfim, tudo o que diz respeito ao servidor é, geralmente, back-end.

Já o front-end é a abstração que se preocupa com a apresentação dos dados no dispositivo final. Este pode ser um site, um aplicativo, um jogo. O front-end irá consumir os recursos providos pelo back-end. Embora seja estranho para alguns, o desenvolvedor front-end também programa e me arrisco a dizer que às vezes com complexidade muito maior.

Aí entra a parte interessante e que muitos se perguntam: como ser então um desenvolvedor web? Antes de mais nada, é necessário que você entenda se você prefere desenvolver do lado do servidor, do lado do cliente ou ambos (famoso fullstack).

Para o seu aprendizado, recomendo que você comece com videoaulas, ebooks ou até mesmo cursos online. Costumo assistir a cursos na Udemy do Plínio Naves, ler livros da Casa do Código (quanto mais, melhor) e tenho ouvido falar muito bem da Alura, que são autores dos livros da Casa do Código. Também tem a School of Net, que conta com grandes professores como o Erik Figueiredo.

Quero ser front-end

Legal, escolheu o caminho mais divertido, porém o mais exigente. Então comece pelo básico. Domine o HTML, CSS e Javascript. Estes três são o core da web e você irá utilizá-los todos os dias.

HTML: Comece pelo básico, até começar a brincar com HTML5. Não se esqueça de sempre conhecer os padrões e boas práticas. Aventure-se no SEO e Canvas.

CSS: Aprenda o be-a-bá, avance para o design responsivo. Experimente conhecer alguma framework CSS como o Bootstrap, Bulma ou Materialize. Depois conheça os pré-processadores, especialmente o Sass

JS: Aprenda o Javascript puro, tente evitar o jQuery logo de cara. Ele irá facilitar a vida, mas é um erro comum - que eu cometi - aprendê-lo antes do próprio Javascript. Depois aprenda o ES6, TypeScript e comece a entender o funcionamento do npm. Quando se sentir confiante, avance para algum framework front-end como o Angular, React ou Vue.js

Quero ser back-end

Ótimo, escolheu o caminho das pedras. Mas não se preocupe: diferente do Front, não existem centenas de milhares de frameworks Javascript surgindo todos os dias :P

Minha recomendação é começar com uma linguagem com uma comunidade ativa: PHP ou Python. Você dificilmente terá problemas que ninguém saberá te ajudar a resolver e existem materiais à beça na internet.

Supondo que você escolha o PHP, comece entendendo a sintaxe básica, crie um formulário de login buscando informações no banco de dados. Avance para a programação orientada a objetos, experimente desenvolver algum sistema simples do tipo CRUD. Quando se sentir confiante o suficiente, encare alguma framework, como o Laravel, por exemplo.

Avance seus estudos para testes unitários, pacotes com Composer e as PSR. Até aqui, você terá uma boa ase para desbravar qualquer outra linguagem web orientada a objetos (Ruby, Python, Java Web, Javascript)

Na verdade, quero trilhar os dois caminhos

Meu colega, quer ser fullstack... boa sorte! Recomendo trilhar o caminho básico dos dois, somando com estudos sobre gerenciamento de versões com Git. Avance os estudos sabendo fazer um deploy com Docker (por exemplo), integração contínua e não se esqueça de dedicar algum tempo para estudar padrões de projetos.

E depois?

Essas duas trilhas oferecem um leque enorme de possibilidade. Recomendo que você aprenda ao máximo JavaScript, pois ele será seu forte aliado na sua trilha e você verá que pode muito com ele.

Recomendo a leitura do livro MEAN, da Casa do Código. O livro aborda de maneira muito bacana a importância de saber Javascript e o Flavio Almeida tem um estilo bem curioso de mostrar situações que vivemos no dia-a-dia:

"Como o MongoDB não força um esquema, ele aceitará o documento com esta informação inválida. Talvez seu chefe ache engraçado ver em um relatório o nome do usuário no lugar de sua data de nascimento, ou talvez ele não seja tão bem-humorado assim."

No GitHub, existe um repositório muito interessante que percorre as duas trilhas: https://github.com/kamranahmedse/developer-roadmap

Espero que este post te dê uma luz para começar sua jornada no desenvolvimento web. Se tiver alguma dúvida ou quiser acrescentar alguma coisa, deixe seu comentário o/

Ler mais

5 plugins para Sublime Text que são indispensáveis

5 plugins para Sublime Text que são indispensáveis

novembro 06, 2017   Dicas, Produtividade, Sublime Text,

Nesse post trago alguns plugins que utilizo no meu stack que podem ser muito úteis para você que utiliza Sublime Text. Alguns destes estão disponíveis no Atom e no Code também :D

Emmet

O Emmet permite que em uma única linha você possa gerar toda sua estrutura DOM. Ele possui uma sintaxe própria bastante lógica. Algo como:

table#tabela.table-hover[data-attr=table]>thead>tr>td{Nome}+td{Idade}^^tbody>(tr>td{Pessoa $}+td{$})*5

Resulta em:

<table id="tabela" class="table-hover" data-attr="table">
<thead>
<tr>
<td>Nome</td>
<td>Idade</td>
</tr>
</thead>
<tbody>
<tr>
<td>Pessoa 1</td>
<td>1</td>
</tr>
<tr>
<td>Pessoa 2</td>
<td>2</td>
</tr>
<tr>
<td>Pessoa 3</td>
<td>3</td>
</tr>
<tr>
<td>Pessoa 4</td>
<td>4</td>
</tr>
<tr>
<td>Pessoa 5</td>
<td>5</td>
</tr>
</tbody>
</table>


Basicamente você tem uam linha equivalente a uma estrutura DOM. Filhos são representados por >, classes são representadas por pontos, IDs por #, pais (parents) são ^. A sintaxe completa está disponivel no site: https://emmet.io/

Estou preparando post somente sobre este plugin em breve :)

SidebarEnhancements

Esse plugin acrescenta diversas funcionalidades ao menu de contexto que trazem muita produtividade. Permite mover aquivos, localizar no diretório, copiar o caminho do arquivo, duplicar, mover, entre outras. É realmente uma mão-na-roda no dia-a-dia.

ColorHighlighter

Esse plugin realça referências de cor dentro do seu código. É possível personalizar a forma com que a cor é apresentada (realçar, pintar a linha, mudar a cor do marcador, etc) e é possivel restringir os formatos de arquivos permitidos para o plugin funcionar.

sublime-linter

Esse plugin verifica a sintaxe e o fluxo do seu código e faz alertas quando algo está errado. Um if que ficou aberto, um ponto-e-vírgula que faltou. É possível configurar uma proteção adicional: impedir que o arquivo seja salvo caso seja detectado erro de sintaxe. Dessa forma, você evita ficar quebrando a cabeça tentanto encontrar o problema.

Material Theme

O Material Theme oferece algumas opções de temas muito interessantes que, além de serem visualmente agradáveis, possuem paletas de cores que não agridem os olhos. Isso é essencial para quem passa o dia no computador. 

A instalação é simples e ele oferece instalar também o pacote A File Icon, que muda os favicons dos arquivos do seu projeto, personalizados conforme a extensão do arquivo.

Tem mais alguma dica? Deixa aí nos comentários o/

Credito Imagem Topo: Scriptadores 

Ler mais

Esse workflow Git pode resolver seus problemas

Esse workflow Git pode resolver seus problemas

novembro 03, 2017   Dicas, Git,

Recentemente estive debatendo com alguns colegas qual seria a melhor (ou a mais adequada) organização de branches no Git.

Primeiramente, embora clichê, o melhor workflow é aquele que a equipe de desenvolvimento constroi. Não adianta pegar algo pronto ou definido por um único dev e oficializar. O certo e desejável é que todos se reúnam e decidam a melhor estratégia.

Mas também é legal se inspirar em alguns modelos ou adaptar aqueles que você já tenha visto ou trabalhado. Por isso, trouxe um modelo para servir de inspiração para o seu grupo.

Master

Essa branch é a única conhecida pelo ambiente de produção. Na verdade, tem mais uma, que veremos na sequência.

Em ambiente de desenvolvimento, teremos como base a branch development

Development

Essa branch vai reunir todas as branches de desenvolvimento que surgem no dia-a-dia. Ela deve ser constantemente atualizada com as branches acima dela, que veremos mais tarde. 

Pense nela como a master do desenvolvimento. Você deve dar merge somente quando a sua branch filha estiver estável o suficiente.

Feat_*

As branches feat_ são as que trazem funcionalidades novas ao projeto. Uma nova rota, um novo comando, uma nova tela. Tudo que é novidade e não deve interferir (ou pouco interfere) no restante do projeto deve ser criado com esse prefixo.

Quando a branch estiver pronta ou madura o suficiente, ela fará merge na development. 

Fix_*

As branches fix_ são as que trazem correções ao projeto. Aquele botão que ficou com valor errado, aquela controller que precisou ser refatorada, aquela nova tabela que acabou trazendo um campo a menos. Aqui a meta é resolver bugs.

Quando a branch estiver pronta e os testes unitários forem válidos, ela fará merge na development.

Upstream

A branch upstream é uma cópia da master. Ela serve como homologação e é nela que as branches-filhas da development farão merge também. 

Vamos imaginar que foi criado um novo campo tamanho no formulário de pedido. Você criou uma branch feat_add_size_to_order. Feature implementada, testes OK. Hora de subir para a produção, certo? Errado! Faça um merge na upstream, pois é ela que vamos subir para a produção.

Hãm?

Os testes passaram, mas será mais interessante se fizermos um teste manual além dos famosos testes de CI. Na produção, na branch master, rodaremos:

git pull origin upstream

DEU RUIM! Algo inesperado aconteceu. No worries, basta voltar para a master, que está intacta.

git pull origin master

Está tudo certo novamente. Revise sua branch feat_add_size_to_order e repete o processo.

Ufa! Agora está tudo certo! Nesse caso, pode fazer o merge na master e pronto.

IMPORTANTE

Todas as branches novas devem fazer pull da master!  Lembre-se que ela está com o código mais estável de todos.

Além disso, é saudável para o seu projeto que todas as branches façam constantes pulls da master, mesmo que quebre o que você está desenvolvendo. Quanto menor o escopo, menor a chance de ocorrer um erro catastrófico na sexta-feira as 17h57.

MAIS IMPORTANTE

Esse workflow serve apenas como um guia. É evidente que em projetos maiores teremos Integração Contínua, diversos testes, pull-requests autorizados por diferentes níveis de acessos, protected branches, code coverage e tudo mais.

E aí, interessou? Discordou? Abriu uma luz no céu! Conta nos comentários o/

Ler mais

Motivos para dar uma chance ao Laravel

Motivos para dar uma chance ao Laravel

outubro 28, 2017   Laravel, PHP,

Olá, meu caros! Esse é o primeiro post do blog e por isso nada mais justo do que começar com a minha framework preferida: o Laravel.

O Laravel é uma framework PHP escrita por Taylor Otwell, inspirada nas outras grandes frameworks do mercado, reunindo centenas de recursos úteis e comuns do dia-a-dia do desenvolvedor web.

Por isso, separei alguns bons motivos para que você dê uma chance ao Laravel em seus projetos e quem sabe começar a codar profissionalmente :P

Laravel é incrivelmente simples

Uma das principais características do Laravel é a sua sintaxe simples, arquitetura fácil de compreender e a capacidade de rodar em ambientes robustos e que exigem alta performance.

O Laravel segue o padrão Model-View-Controller, oferecendo uma série de recursos para facilitar o processo de criação dessas camadas, através do Artisan, a CLI do Laravel.

Eloquent ORM

O Laravel dispõe do Eloquent, a ORM nativa do Laravel, que oferece um novo modo de fazer consultas ao banco de dados de forma muito semântica e simples. Supondo que você queira saber as datas de publicação dos posts feito por um usuário específico, você poderia fazer algo como:

$data = Post::whereUserId($user_id)->get()->publish_date;

A partir dos Models, você pode definir relacionamentos 1-1, 1-n e n-n de forma muito simples. A relação User-Post poderia ser definida da seguinte forma:

// app/User.php
public function posts() {
     return $this->hasMany('App\Post');
} 

Documentação decente

A documentação oficial do Laravel é muito agradável, clara e objetiva. Nada mais irritante do que precisar depender de vídeo-aulas de 40 minutos para conseguir rodar um "Hello world" e depois não passar disso sem precisar de um curso longo de n módulos para poder concluir um CRUD*.

Por isso, a documentação é clara e simples. Qualquer pessoa com o mínimo de conhecimento de PHP e MVC terá muita facilidade para brincar com o Laravel

* Existem excelentes cursos e vídeo-aulas de Laravel, mas me referi as linguagens e frameworks com curvas de aprendizados complexas e longas que são resolvidas somente se você recorre a um curso :)

Service Container e Injeção de Dependências

O Laravel possui um container de serviços muito fácil de ser utilizado que funciona de forma muito concisa. Basicamente você tem serviços e estes são registrados no Container. Dessa forma, você consegue centralizá-los, disponbilizar em outras partes da aplicação e consegue evitar a redundância de código.

Supondo que você tenha que emitir boletos de diversos bancos. Com Laravel, você disponibiliza a classe Boleto no container (através de um provedor de serviços) e essa classe poderá ter dependências (cliente de API, gerador de credenciais, etc) e poderá também ter classes filhas, como BoletoBradesco, BoletoInter, BoletoItau... 

Como a lógica da geração do boleto acontecerá no serviço, deixando a manutenção da sua aplicação muito mais simples

Presets de front-end

O Laravel oferece o Blade, uma engine de templates server-side, que conversa diretamente com as classes de View e Mail.

Além disso, o Laravel é muito amigo de frameworks front-end orientadas a componentes. Rodando alguns comandos, você consegue definir se usará o Blade, Vue.js, React ou Bootstrap:

php artisan preset react # prepara o ambiente para trabalhar com ReactJS
php artisan preset none # nenhuma

Caso prefira usar o Laravel Blade, é bom saber que a sintaxe é muito simples e elegante.

// resources/views/user.blade.php
@if($user->is_admin)
Seja bem vindo, {{ $user->name }}
@endif 

Tem muita coisa pronta

O Laravel dispõe de recursos nativos e também bibliotecas prontas para resolver diversos problemas que costumamos ter no dia-a-dia

• Autenticação e CRUD de usuários
• API RESTFul (inclusive, existem comandos que geram TODA a restrutura básica de um recurso REST)
• Responses com json, html, xml, txt, etc
• Proteção CORS
• Proteção CSRF
• Cache
• Criptografia
• Operações com arquivos
• Mailing (com Mailgun, Mailchimp, Gmail, etc)
• Eventos (integração real-time)
• Linha de comando
• Agendamento de tarefas
• Testes unitários e de integração
• Seeders e Migrations
• Multilogin com Laravel Socialite
• Compilador de SASS com Laravel Mix
• Processamento de pagamentos com Laravel Cashier
• Microframework de alta performance: Lumen

Tem uma comunidade incrível

Teve problema? A comunidade Laravel está no Stack Overflow, GitHub, Facebook, Slack, Telegram, Emails, Eventos, Meetups, Universidades e muitos outros canais. A comunidade é uma das maiores e mais ativas atualmente.

Além disso, tem o Laracasts, que é "tipo um Netflix" voltado aos Laradevs. Lá, além dos cursos e vídeos, tem uma comunidade muito ativa no fórum que está sempre respondendo e colaborando com outros devs.

Eu estou codando em Laravel dois projetos que fazem uso de quase todos os recursos acima: um serviço de streaming e um intermediador de pagamentos. Mas vou falar desses dois projetos mais para frente.

Se você gostou da ideia (ou não), por favor, deixe seu comentário! E se você já usa, comenta o que você está codando também :)

Ler mais