Frontend stack discussion

[rfviolato]

Issue pra falar sobre o stack que será adotado pelo time de front-end.

[rfviolato]

Stack:

React

Biblioteca responsável por criar, gerenciar ciclos de vida e dar comportamento aos componentes da UI. É atualmente uma das bibliotecas mais aderidas no desenvolvimento front-end, cumprindo a premissa de ser algo que ajuda a ter mais contribuidores no projeto.

Redux

Biblioteca responsável por gerenciar containers de estado da aplicação. Ajuda muito no desenvolvimento pois auxilia a escrever uma aplicação mais previsível, testável e escalável.

Axios

Biblioteca http client para resolver toda a ligação, tanto com a API do backend, como de API externas.

React-router-redux

Router que mantém ações com os estados da aplicação gerenciados pelo redux.

Moment

Biblioteca para trabalhar com objetos de data que auxilia muito na manipulação precisa.

Lodash

Biblioteca modular e performática que traz diversas utilidades que auxiliam na manipulação de dados como arrays e JSONs.

Greensock GSAP

Biblioteca para fazer animações complexas que demandam maior processo lógico, como motions compostos ou até SVG, tudo com alta performance. Possui bastante plugins.

Webpack

Module bundler que auxilia na separação da árvore de dependências do projeto, auxiliando na organização e escalabilidade. Também é responsável por optimizar builds e prover servidor de desenvolvimento local. Ajuda na integração simples de transpiladores, pré e pós compiladores como babel, jsx, e post-css.

Babel (jsx + es6)

Transpilador responsável por compilar código de especificações futuras de ecmascript permitindo usar features importantes agora. Também transpila jsx, sendo imprescindível para desenvolvimento com a bilbioteca react.js, pois tornar a composição de componentes muito mais natural e declarativa.

PostCSS

Compilador de código css, que funciona semelhantemente a um pré-compilador convencional, porém compila o código css convencional com plugins javascript que podem des de lintar o css até oferecer features das próximas especificações de css. Alguns plugins que serão utilizados serão: cssnext, rucksack e cssnano

[rfviolato]

SUITCSS

Tanto como a metodologia tanto como alguns elementos do framework serão utilizados. Esta metodologia visa tornar o código CSS mais componentizado e pela sua sintaxe resolve o problema de conflitos de nomes e especificidade. O framework conta com diversas classes de utilidade, normalize e grid system.

[rfviolato]

@ericdouglas Ericones, vê oquê você acha dessa metodologia CSS :D

[ericdouglas]

@rfviolato show mano, por mim tudo bem, bora usar :smile:

[rfviolato]

@ericdouglas Cara ela e muito boa pra componentes, pois ela produz namespaces unicos, assim como componentes, evitando varias side-effects chatos de CSS, afinal, CSS eh td global e isso nao eh nem um pouco escalavel.

Quero usar isso aqui em conjunto pra ajudar: https://github.com/acdlite/react-suitcss