Introdução às estruturas da web
Rodoteto
- Discuta quais são as estruturas e por que elas nos ajudam a escrever aplicativos
- Aprenda a distinção entre estruturas de front -end, back -end e CSS
- Saiba quais estruturas são populares por enquanto e por quê
- Saiba como tomar decisões sobre quais estruturas usar para projetos
Que tipo de aplicativo você construiria?
Se você não tiver certeza, aqui e aqui têm ótimas idéias! Além disso, passe algum tempo pensando no que tornaria seu aplicativo mais bem -sucedido. Discuta suas idéias com as pessoas em sua mesa.
Aplicativos da web semelhanças
Veja o Facebook, Twitter, LinkedIn e Github e liste algumas das semelhanças que você vê com as pessoas perto de você.
O que são estruturas
Se olharmos para alguns aplicativos da Web diferentes, podemos ver que existem muitos recursos duplicados. Todos os que analisamos acima têm autenticação de usuário, visualizações que renderizam, elas se conectam aos bancos de dados, eles têm perfis que você pode ver, todos eles têm feeds estilizados de informação etc. Se eu quisesse, eu poderia escrever toda essa lógica toda vez que quiser criar um novo aplicativo; No entanto, também existem muitas ferramentas disponíveis que podem fazer isso para nós. Além disso, na maioria das vezes, quando criamos aplicativos, queremos formatar nosso código de certas maneiras que nos ajude a ser eficientes e ajudar outros desenvolvedores a entender mais facilmente nosso código. As estruturas da Web nos ajudam a alcançar a estrutura para nossos aplicativos e nos fornecem recursos adicionais que podemos adicionar aos nossos aplicativos sem muito trabalho extra. As estruturas nos dão um local para começar com nossos aplicativos, para que possamos focar nos recursos de nossos aplicativos, em vez de detalhes de configuração.
Most websites share a very similar (not to say identical) structure. The aim of frameworks is to provide a common structure so that developers don’t have to redo it from scratch and can reuse the code provided. In this way, frameworks allow us to cut out much of the work and save a lot of time.
To summarize: there’s no need to reinvent the wheel.
de Awwwards.
Back -end vs front -end
O front -end de um aplicativo da web é a parte que você vê e interage. Consiste no web design e na interação do site. Em termos de linguagens de programação, isso quase sempre é composto pelo CSS, HTML e JavaScript da página.
O back -end consiste no servidor, no banco de dados e no código que interage com eles. Isso também consiste no código que fornece dados dinâmicos ao front -end do site. Isso pode ser manuseado na maioria das faixas de programação. Os que discutiremos principalmente hoje são Python, Ruby e Node JavaScript, mas existem inúmeros outros.
Frameworks de interface do usuário
As estruturas de interface do usuário ajudam a criar aplicativos da Web estilizados e profissionais. A maioria inclui algum tipo de sistema de grade para que você possa alinhar bem os elementos, eles têm esquemas de cores para que seja tratado para você e estilize seus componentes HTML para que pareçam limpos e profissionais.
Alguns deles incluem:
- Bootstrap
- Muito conhecido e construído pelo Twitter
- Fácil de aprender e parece profissional
- Pode ser fácil de identificar "sites de bootstrap"
- Pode ser difícil de personalizar componentes
- Materializar
- Aparência limpa
- Um pouco mais "divertido" do que bootstrap
- Muita opções de estilo e cores
- Segue o guia de estilo de material do Google
- Fundação
- Muitos exemplos
- Aparência profissional
- Ui semântica
- Lotes incorporados
- Construído em temas, então é personalizável
- Ilhó
- Tem um enorme foco na acessibilidade
- Parece realmente limpo
- Não tão usado quanto alguns dos outros
- Feito para React JS (outra estrutura que veremos mais tarde)
Escolhendo uma estrutura de interface do usuário
A escolha de uma estrutura da interface do usuário se resume principalmente à preferência pessoal na aparência e aos objetivos do site. Os diferentes estilos podem atrair mais indústrias diferentes ou podem transmitir uma mensagem diferente.
Passe alguns minutos discutindo as aparências de diferentes e escolha o que seria melhor para o seu aplicativo de amostra.
Estruturas de front -end
- Vue
- Fácil de aprender
- Muito rápido
- Todas as ferramentas associadas a ele são bem embaladas
- Pega peças do angular e reage e as otimiza
- menos amplamente adotado do que alguns outros
- Flexível - você pode usá -lo de várias maneiras
- AngularJS
- Construído pelo Google
- Bem suportado
- Grande número de recursos
- Melhora a escalabilidade do aplicativo
- Difícil de depurar
- Grande curva de aprendizado
- Angular 2+
- Construído pelo Google
- Bem suportado
- Incentiva a reutilização
- Melhora a escalabilidade do aplicativo
- Grande curva de aprendizado
- Reagir
- Construído pelo Facebook
- Pacotes código de front -end em componentes
- Organiza código e dados para tornar o código mais reutilizável
- Grande curva de aprendizado
- Tem alguma controvérsia com suas cláusulas de propriedade intelectual
- Brasa
- Fornece uma grande quantidade de funcionalidade fora da caixa
- Opinativo (você tem que usar sua formatação)
- Curva de aprendizado acentuado
Escolhendo uma estrutura de front -end
Passe por alguns deles e olhe para o código. Também pesquise os prós e contras de cada um. Pense no que seria melhor aprender ou integrar sua ideia de aplicativo.
Estruturas de back -end
- Spring MVC
- Java (linguagem mais difícil de aprender)
- Muito rápido
- Menos opinativo
- Django
- Python (linguagem mais fácil de aprender)
- Médio feliz entre ser muito opinativo e menos estruturado
- Dá a você muitas funcionalidades prontas para uso (como autenticação de usuário, conexões de banco de dados e renderização de visualização)
- Pode ser difícil integrar um front -end sofisticado.
- O manuseio de dados do Python é incrível
- Balão
- Python (linguagem mais fácil de aprender)
- Menos opinativo e mais personalizável que o django
- Dá menos da caixa (você precisa construir mais)
- Rubi nos trilhos
- Ruby (linguagem mais fácil de aprender)
- Muito opinativo
- Tem ótimas ferramentas como andaimes para que você possa construir as coisas rapidamente
- Dá a você muitas funcionalidades prontas para uso (como autenticação de usuário, conexões de banco de dados e renderização de visualização)
- O pipeline de ativos ajuda no desenvolvimento do front -end
- Ruby leva mais tempo para executar programas do que algumas outras linguagens de programação
- Meteoro
- JavaScript (linguagem mais fácil de aprender)
- Dá a você muitas funcionalidades prontas para uso (como autenticação de usuário, conexões de banco de dados e renderização de visualização)
- Integra muito bem com os frontends modernos
- Expressar
- JavaScript (linguagem mais fácil de aprender)
- Muito personalizável
- Muito leve
- Recursos menos construídos
- O nó é muito rápido
Escolhendo uma estrutura de back -end
Passe por alguns deles e olhe para o código. Também pesquise os prós e contras de cada um. Pense no que seria melhor aprender ou integrar sua ideia de aplicativo.
Mais recursos!
- Tutorial de garotas de Django
- Code Academy
- TODOMVC
- Podcast Codenewbie
- Mulheres que codificam DC
- Quão rápido são diferentes linguagens de programação?
Fique em contato!
- aspittel.github.io
- @aspittel no Twitter
- Aspittel no Github
- Ali Spittel no LinkedIn