"Frameworks e ferramentas da moda"

ou

Pokémons explicam ferramentas

de Front End

DISCLAIMER

Olá!

• H mudo
• Computer Engineer
• Programming
• Electronics
• Math <3 <3
• Physics
• Lego
• Meetups
• Animals
• Coffee
• GIFs

Hanneli (@hannelita)

@hannelita - #webbr2015

@hannelita - #webbr2015

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

@hannelita - #webbr2015

2. Pensar em cenários futuros

@hannelita - #webbr2015

@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

@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)

@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

@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) 

@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

@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

@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

@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

@hannelita - #webbr2015

Ember.js: The bad parts

• Ah, esse data binding
• Debuggar é complicado
• Pesado - 1.7Mb na versão 2 (!!!!11)

@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

@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"

@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