"Frameworks e ferramentas da moda"
ou
Pokémons explicam ferramentas
de Front End
DISCLAIMER
Muitos Pokémons
Poucos GIFs
Conceitos no estilo Cookbook, sem aprofundar nos temas
Minha visão, você pode concordar ou discordar e compartilhar seus pontos de vista :)
Links para referência nem sempre expressam minha opinião sobre o tópico
hannelita@gmail.com
Olá!
- H mudo
- Computer Engineer
- Programming
- Electronics
- Math <3 <3
- Physics
- Lego
- Meetups
- Animals
- Coffee
- GIFs
Hanneli (@hannelita)
@hannelita - #webbr2015
@hannelita - #webbr2015
Por que Pokémon?
Pessoas curtem ou não tem nada contra
Ótimas analogias
Mais fácil de absorver tanta informação
Diversidade e aceitação: geralmente lidamos bem com treinadores que tem um time diferente do nosso
Também podemos
escolher o 'starter'
no front end
@hannelita - #webbr2015
@hannelita - #webbr2015
@hannelita - #webbr2015
Futuro?
@hannelita - #webbr2015
@hannelita - #webbr2015
DISCLAIMER
É comum haver uma composição de
frameworks.
A analogia de apenas 'um starter' não vale tanto aqui.
@hannelita - #webbr2015
Com base em que escolhemos os starters?
@hannelita - #webbr2015
1. Agilidade nas primeiras etapas
@hannelita - #webbr2015
@hannelita - #webbr2015
Problem 1: Nem sempre os cenários posteriores serão bem resolvidos
@hannelita - #webbr2015
vs.
:(
@hannelita - #webbr2015
2. Pensar em cenários futuros
@hannelita - #webbr2015
vs.
( ͡° ͜ʖ ͡°)
BLIZZARD YEAH
@hannelita - #webbr2015
Problem 2: Nem sempre os cenários iniciais serão bem resolvidos
@hannelita - #webbr2015
3. Afinidade com o starter
@hannelita - #webbr2015
<3
@hannelita - #webbr2015
Problem 3: Nem sempre os cenários iniciais/ do meio/ finais serão bem resolvidos
@hannelita - #webbr2015
4. 'Pra ver qual é a desse'
@hannelita - #webbr2015
Problem 4: Não sabe ao certo como manejar a ferramenta/ boas práticas/ early adopter e falta de tutorias/ updates e manutenção
@hannelita - #webbr2015
Outras opções *não* recomendadas!
- Random
- Alguém disse que era bom; nem Googlei e escolhi
- Uso essa opção há 10 anos em todos os cenários
@hannelita - #webbr2015
Tentamos um meio termo entre as opções
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o Bootstrap
- Combo: HTML + CSS + JS
- Responsividade
- Built in Grid
- Built in Components
- Built in JS associado aos componentes
- JS para transições, modais, etc
@hannelita - #webbr2015
Bootstrap: The good parts
- Muita coisa pronta. Aquela estratégia do cenário inicial
- Fácil de aprender (iniciantes ou pessoas sem experiência em front end)
- Resultado rápido
- Comunidade ativa; desenvolvimento ativo
- Muito material na internet / tutoriais e palestras
- Atualmente é possível utilizar versões customizadas para que o pacote não fique tão pesado
Ref: http://www.sitepoint.com/11-reasons-to-use-twitter-bootstrap/
@hannelita - #webbr2015
Bootstrap: The bad parts
- Nomenclatura. A semântica de algumas classes pode incomodar algumas pessoas
- Entope o DOM com vários elementos que nem sempre são necessários <div><div><div><div>
- Por mais que seja customizável, ainda é pesado (versão 3.5 - CSS + Fonts + JS = ~1Mb )
- Pode haver colisão de classes e JS se ele for inserido no meio do projeto (ex: estilo para button)
- O estilo pode ficar similar ao de muita gente (a.k.a todo mundo começa com o Charmander)
Ref: http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
@hannelita - #webbr2015
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o Foundation
- Combo: HTML + CSS + JS
- Responsividade
- Built in Grid
- Built in Components
- Built in JS associado aos componentes
- JS para transições, modais, etc
@hannelita - #webbr2015
Foundation: The good parts
- Mobile-first approach
- Navega entre todos os níveis de desenvolvedores - dos júniors aos mais experientes
- É possível usar o Compass e ter mais controle sobre a camada de apresentação
- Desde o início é bem fácil usar com Rails, Django, etc.
- Comunidade ativa e desenvolvimento ativo
Ref: http://www.zingdesign.com/top-10-reasons-to-use-zurbs-foundation-framework/
@hannelita - #webbr2015
Foundation: The bad parts
- Semântica - embora tenha alguma flexibilidade, não há 100% de domínio sobre nomes de algumas classes, funções, etc.
- O controle do que vai para o DOM ainda não é 100%
- Também não é tão leve- o pacote da versão 5 possui ~700kb
- Pode haver colisão de classes e JS se ele for inserido no meio do projeto (ex: estilo para button)
Ref: http://www.amplificommerce.com/5-reasons-we-chose-bourbonneat-over-foundation-or-bootstrap/
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o Bourbon Neat
- Ferramenta de Grid bem enxuta
- Semântica
- Responsividade
@hannelita - #webbr2015
Bourbon Neat: The good parts
- Semântica
- Você só usa o que realmente precisa. Sem pacotes/códigos desnecessários
- SASS Mixins
- Customização. O framework lhe fornece uma base para você construir sua camada de apresentação prezando a semântica
- Comunidade ativa e desenvolvimento ativo
Ref: http://www.amplificommerce.com/5-reasons-we-chose-bourbonneat-over-foundation-or-bootstrap/
@hannelita - #webbr2015
Bourbon Neat: The bad parts
- Não é um pacotão. Muitas vezes requer uso conjunto com outras ferramentas.
- Se o desenvolvedor não tiver experiência nenhuma com front end, pode ter dificuldades
- Cuidado com os Mixins! (http://www.sitepoint.com/avoid-sass-extend/ )
@hannelita - #webbr2015
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o Angular.js
- Framework que promete enriquecer o HTML (Diretivas)
- Permite a implementação de um MVC no Front End
- Data Binding
@hannelita - #webbr2015
Angular.js: The good parts
- Fácil de aprender o básico e começar a desenvolver
- Diretivas - sensação que criamos HTML
- Bem intuivo de usar o modelo MVC
http://www.sitepoint.com/10-reasons-use-angularjs/
@hannelita - #webbr2015
Controller ( JS )
app.controller('PokeCtrl', function($scope){
$scope.starter = "Charmander"
})
HTML
<div ng-controller="PokeCtrl">
{{ starter }}
</div>
@hannelita - #webbr2015
Angular.js: The bad parts
- Muitos data bindings podem deixar o código difícil de ler...
- E eventualmente pouco performático
- Compatibilidade - 1 para o 2
- Debuggar é complicado
Ref: https://medium.com/@mnemon1ck/why-you-should-not-use-angularjs-1df5ddf6fc99
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o Ember.js
- Framework que utiliza uma template engine (Handlebars) na camada da View para empoderar o HTML
- Permite a implementação de um MVC no Front End
- Data Binding suave
@hannelita - #webbr2015
Ember.js: The good parts
- Fácil de aprender o básico e começar a desenvolver
- Handlebars
- O Data Binding é mais suave
Ref: http://www.talentbuddy.co/blog/top-reasons-why-industry-experts-use-ember-js-and-how-you-can-adopt-it-yourself/
@hannelita - #webbr2015
Ember.js: The bad parts
- Ah, esse data binding
- Debuggar é complicado
- Pesado - 1.7Mb na versão 2 (!!!!11)
Ref: http://aokolish.me/blog/2014/11/16/8-reasons-i-won't-be-choosing-ember.js-for-my-next-app/
@hannelita - #webbr2015
@hannelita - #webbr2015
@hannelita - #webbr2015
@hannelita - #webbr2015
Sobre o React.js
- *Não* é um MVC completo para front end
- Compreensão rápida de como um componente será renderizado
@hannelita - #webbr2015
React.js: The good parts
- Muita flexibilidade na construção de componentes
- Não há manipulações implícitas de DOM
- Promessas de muita performance
Ref: https://facebook.github.io/react/docs/why-react.html
@hannelita - #webbr2015
React.js
render: function() {
return <header>
{ this.state.trainer ?
this.state.name :
<span>Treinador Pokemon não identificado</span> }
</header>
}
@hannelita - #webbr2015
See also: Relay.js
Relay oferece mais funcionalidades para o React (ex: um sistema de eventos mais elaborado)
@hannelita - #webbr2015
"Coração para
EMER, Jean Carlo. 2015
@hannelita - #webbr2015
React.js: The bad parts
- Muito novo; a documentação ainda não é tão boa
- Requer algum desenvolvedor com conhecimento mais sólido em HTML e JS
- Evite euforias! "Todo mundo escolhe o Charmander, vou escolher também"
Ref: http://blog.andrewray.me/reactjs-for-stupid-people/
@hannelita - #webbr2015
Conclusão
Analise os vários cenários para escolher bem seu starter! :)
@hannelita - #webbr2015
Conclusão - Principais combos
@hannelita - #webbr2015
ou
ou
com qualquer
ou
ou
Conclusão
"Não assumam que o contexto de vocês se aplica para todos os projetos do mundo. "
ALMEIDA, Vinicius. 2015
@hannelita - #webbr2015
Extras
https://offroadcode.com/blog/1850/reactjs-whats-all-the-fuss/
http://gridgum.com/6-great-responsive-frameworks-for-2014/
@hannelita - #webbr2015
http://hhvm.ovh/entry/facebook-s-relay-and-how-it-relates-to-flux-and-react
https://therealmarv.com/understanding-react-flux-graphql-and-relay-concepts-with-4-videos/
Obrigada! :)
@hannelita - #webbr2015
hannelita@gmail.com
"Frameworks e ferramentas da moda" ou Pokémons explicam ferramentas de Front End
WebBr2015
By Hanneli Tavante (hannelita)
WebBr2015
- 5,860
