"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