From blog.hackerrank.com
FRONT-END vs BACK-END
O front-end representa a parte responsável pela interação da aplicação com o usuário. O que o usuário vê, clica, arrasta.
Já o back-end epresenta a parte responsável pelo armazenamento e organização dos dados da aplicação. O que o usuário não vê.
O profissional do front-end
Quem são? O que comem? Onde vivem?
Photo by NESA by Makers on Unsplash
O Desenvolvedor Front-end é o profissional encarregado de projetar as estruturas web, sempre pensando na experiência do usuário.
Por onde começar?
HTML
Hypertext Markup Language
Photo by Pankaj Patel on Unsplash
Usando a analogia de uma casa, o HTML é a demarcação dos limites e da estrutura da casa.
O HTML é uma linguagem de marcação composta por blocos que definem o posicionamento das informações numa página da web.
É uma linguagem relativamente simples e muito flexível.
Recomenda-se o estudo da versão vigente, o HTML5.
Planta de uma casa — From Wikipedia
Focos de estudo:
Tags e estrutura HTML5
HTML5 Canvas
HTML5 APIs
Documentação oficial: https://www.w3.org/html
CSS
Cascading Style Sheets
Photo by Pankaj Patel on Unsplash
Continuando em nossa analogia, o CSS é o estilo que vamos escolher. Cores, formatos, tamanhos etc.
O CSS é uma linguagem de **estilo **criada para separar os conceitos de estrutura e design.
É uma linguagem que não exige conhecimentos avançados e com prática, sua escrita se torna natural.
Recomenda-se o estudo da versão vigente, o CSS3.
Estilização de uma casa — From mphventurescorp.com
Focos de estudo:
Propriedades do CSS3
Flexbox
Documentação oficial: https://www.w3.org/Style/CSS
Javascript
A linguagem mais popular da WEB
Photo by Christopher Robin Ebbinghaus on Unsplash
O Javascript seria o movimento de uma porta, de uma janela. Ele é responsável por trazer o dinamismo de funcionalidades e o canal de comunicação de dados com os dados do Back-end.
O Javascript hoje é a principal base da programação de front-end que temos na web. A partir ele são criadas diversas frameworks (veremos mais à frente).
Movimentação/Dinâmica — govloop.com
Focos de estudo:
Conceitos de algoritmos
Programação funcional
Não se preocupe com frameworks nesse momento
Documentação oficial: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
Pré-processadores CSS
Exemplo de um código stylus — From Google images
Os pré-processadores de CSS permitem ao desenvolvedor utilizar o paradigma de programação na construção de um CSS que será compilado.
Com ele é possível criar variáveis, condicionais, repetição, imports, funções, mixins e até extends que possibilitam você extender propriedades, evitando a duplicação de código.
Dentre os principais no mercado estão:
Stylus (stylus-lang.com) [Recomendado]
SASS (sass-lang.com)
LESS (lesscss.org)
Linha de comando (Terminal)
Conhecer o básico de manipulação do terminal pode agilizar muitas tarefas, como instalação de componentes e versionamento de código.
Terminal no Mac OS — From Google images
Algumas ferramentas de terminal são importantes no desenvolvimento, tais como:
Versionamento de código com Git (git-scm.com)
Gerenciador de pacotes Js (npmjs.com)
Virtualização de sistema com Docker (docker.com)
Responsive Concept
Frameworks de Design Responsivo
O Bootstrap é a estrutura HTML, CSS e JS mais popular para o desenvolvimento projetos mobile first e responsivos na web.
Usar uma dessas ferramentas torna o desenvolvimento web front-end mais rápido e fácil. Uma única base de código para diversos dispositivos.
Dentre as principais no mercado estão:
Bootstrap (getbootstrap.com)
Foundation (foundation.zurb.com)
JSON
A linguagem de definição de dados da web
snippet from carbon.now.sh
JSON é a interface de dados que pode ser trafegada do back-end para o front-end e vice-versa. Por ser um objeto JavaScript, o manuseio dos dados é fácil e rápido.
Documentação: https://www.json.org/json-pt.html
Editor de código/IDE
Feitos para facilitar o desenvolvimento do seu código
Uma IDE traz diversos recursos para agilizar o processo de desenvolvimento como plugins, integrações, debbugers, dentre outros. A IDE que vem se destacando hoje e é a mais recomendada para desenvolvedores front-end é o VS Code.
Dentre as principais IDEs hoje temos:
VS Code (code.visualstudio.com)
Brackets (brackets.io)
Atom (atom.io)
Sublime Text(sublimetext.com)
Frameworks JS
JavaScript Framework
Trecho de código React — From blog.apollographql.com
As frameworks geralmente são baseadas em componentes acessíveis, versáteis e performáticos de construção de interface de aplicações utilizando JavaScript.
Elas tem o propósito de simplificar a integração de componentes entre projetos e acelerar o processo de desenvolvimento pulando determinadas etapas repetitivas.
Dentre as principais frameworks Javascript no mercado hoje temos:
React (reactjs.org)
Vue (vuejs.org)
Angular (angular.io)
Javascript no back-end
Nodejs server code — From infoworld.com
Hoje também é possível programar em ambientes server-side com JavaScript. Utilizando os mesmos recursos de outras linguagens famosas.
Hoje, o padrão global é o node (nodejs.org), porém existem diversas alternativas.
Na softbox um produto interno desenvolvido com este propósito é o Thrust JS (github.com/Thrustjs).
Para um primeiro momento, você tem bastante coisa para estudar. Bons estudos e nos vemos no próximo artigo.
Top comments (0)