Tag Archives: front-end

React | Universal | Flux

Boas práticas, HTML, Javascript, Uncategorized Leave a reply

Olá, tudo bom?

A pegada de hoje é React.

Estou brincando com essa criança há algum tempo, mas criando coragem para escrever algo aqui.

Pra começar, vamos conhecer o bichinho:

 

Sério, no começo dá muito susto: “Ah Deus!? O que esse DIV está fazendo no meio do meu Javascript?”

Bom, é essa a pegada mesmo. A minha visão é bem simples: Se está tudo junto, fica mais fácil manter. (Mas é opinião totalmente pessoal).

Bom, eu gosto de usar o Webpack e realmente é um tédio configurar tudo

Certo, mas o que é o React? Um novo framework tipo Angular? NOOOOOOOOOOOO.

O React é uma biblioteca e o objetivo não é fazer muita magia. Basicamente, o pessoal do Facebook pegou o JSX (que nem é assim tão novo), juntou com o conceito de componentes, máquina de estados com um lifecycle definido e abstraiu o DOM, para oferecer uma ferramenta de grande performance no desenvolvimento de aplicações web.

Mas sozinho o React é só uma lib que ajuda a fazer componentes. A pegada monstro é justamente o conjunto de coisas que usamos com ele.

Como ele é abstrato, 100% em JS, todo o processamento pode correr solto do DOM e, portanto, do navegador. Isso significa que o seu Node.js rodando no servidor pode processar uma página inteira em React e cuspir tudo no output direto no HTML. o.O pode isso mesmo produção? Sim, chamam-se universal apps. A pegada é você renderizar o elefante no server-side e o front-end assume daí, melhorando a experiência da primeira carga e ajudando no SEO.

Bom, se ele pode rodar no servidor, então entramos no universo dos isomórficos, que são utilitários em JS que foram pensados para se comportar de maneira compatível com o navegador e com um ambiente back, tipo Node. Um exemplo disso é o isomorphic-fetch, uma lib que porta o fetch da W3C para a filosofia e permite requisições http com a mesma API dos dois lados.

Certo, então vamos sumarizar: O React é uma biblioteca para fazer componentes em JSX e que pode rodar no servidor.

Ok, mas com isso ainda não dá para fazer uma aplicação realmente atraente. Então, de novo o pessoal do Facebook idealizou o Flux, que também não é um framework, mas sim uma filosofia de arquitetura para a estruturação de uma aplicação web (Ahn?!).

Diagrama do Flux

(fonte: Site do Flux)

O Flux é a forma com a qual a sua aplicação trafega os dados. Assim como o Angular tem todo aquele way-of-life e filosofia, com o Flux você arquiteta a sua aplicação de forma transparente os dados em apenas uma direção.

Basicamente, não tem two way data binding (tá, tem, mas vamos colocar que não, pois é melhor assim). Os dados são consumidos de Stores pelos componentes e, quando uma ação for modificar o estado da aplicação, ela envia uma mensagem para uma função que irá cuidar de atualizar a Store… dessa maneira, todo o estado da aplicação fica seguro e mais fácil de ser mantido, já que não está em uma festa distribuída de objetos, largados no seu app.

Mas pera pera pera… e o tal estado da máquina de estados do componente? A idéia é que, com o Flux, você abstraia o estado do componente no estado que ele irá receber. (Isso é muita adrenalina de uma vez só).

Para ficar ainda mais bonito, a gente enfim encontra o ES2015, cheio de habilidades superpoderosas, que irão ajudar no desenvolvimento.

Assim,

– O React ajuda a fazer componentes;
– Com o Node eu renderizo minha aplicação no servidor;
– Os dados trafegam de maneira segura e são armazenados segundo a filosofia do Flux;
Tudo isso bonitinho com ES2015.

Isso!

Conclusão

Sua aplicação fica mais performática (não espera mágica tá… depende de você seguir direitinho a pegada), você tem uma grande variedade de componentes que já existem e facilidade de criar os seus e, enfim, fica mais rápido desenvolver na web e até mobile e desktop.

Até mais.

Ps. E olhe, React é bonito, mas ficar configurando o ambiente acaba ficando bem chato, então, se você quer começar a programar nisso, é bom que encontre um bom projeto base ou use um gerador #ficaadica

Web Components e Polymer

HTML, Javascript Leave a reply

Olá, tudo bom?

Faz tempo que não escrevo sobre tecnologia, então, hoje vou falar uma tecnologia que estou in love: WebComponents.

Basicamente, a ideia é você levar a reutilização ao máximo e gerar pedacinhos de código HTML, CSS e JS, para usar mais tarde. (Como o feijão que você põe em potinhos no domingo e congela para comer a semana toda, só que mantém o sabor…).

Bom, eu utilizo o Polymer para brincar com isto. Por fins produtivos, instalo meus pacotes com Bower (Falo uma outra hora dele e você pode aprender um pouco mais no próprio site). Então, vamos para o prompt (ou terminal no linux ou mac):

d:/desenvolvimento/webcomponents/teste> bower init

d:/desenvolvimento/webcomponents/teste> bower install polymer

OK! Ele vai instalar um monte de coisinhas na pasta bower_components, e é de lá que vamos importar nossa plataforma do Polymer. Para tanto, crie um arquivo HTML e referencie o script:

Pronto, daqui para frente, podemos usar nossos componentes. Claro, para fazer coisas simples, é fácil, agora, se você quiser fazer coisas macabras e monstruosas, aconselho que estude bastante o conceito de web-components.

Vamos criar um componentezinho? Que tal um botão que faz download? Não vou seguir nenhum padrão ou boa prática específico, mas existem milhares de manuais de design, estilo e etc, vamos apenas visualizar.

Bom, este é o seu elemento. Por enquanto ele não faz nada e, o name, por convenção, deve ser um nome composto e separado por travessão “-“. É por ele que você vai referenciar seu elemento Então, pense nele com carinho.

Bom, agora, como prometi, faremos um elemento simples para download. Utilizei data uri para baixarmos um arquivo de texto e encapsulei o elemento <a>.

Assim, temos um elemento que serve para fazer download. Claro, ele é simplório, serve no máximo para melhorar a semântica, mas pense em coisas grandes: um elemento para o google-maps ou uma caixa para figuras estilizada . Vamos ver como ele está funcionando?

O foco é pensar na reutilização. Existem bibliotecas para baixar elementos prontos, como a customelements.io e o github está cheio de coisas bacanas. Se você pensar que, muita coisa que fazemos no dia-a-dia poderia ser utilizada pelos outros e até por nós mesmos em nossos projetos futuros, isto pode facilitar muito a vida.

Finalmente, é isso aí. A internet já está cheia de componentes: select, input:checkbox. Todos eles são nativos dos navegadores e EXTREMAMENTE ÚTEIS. Por que não ajudar a melhorar ainda mais a vida de todos?

Até mais,

Ps. Tudo isso tem interoperabilidade com Angular.js e as outras brincadeiras que andam por aí ;).

K.O. – Javascriptality

Boas práticas, HTML, Javascript 1 Reply

Olá, tudo bom?

Sabe, eu mexo há muito tempo com site, sistema Web e essas parafernálias todas, porém sempre há coisas desagradáveis para fazer. Graças ao advento de frameworks bizonhos que vem acontecendo nos últimos tempos, a vida vai ficando mais fácil.

Apesar de eu ter outras paixões, vou falar um pouco de Knockout.js.

Bom, quem já criou um projeto em Microsoft MVC 4 com aqueles templates disponíveis, é possível reparar a biblioteca do KO “largada” lá na pasta scripts. Sabe como é né, eu estava lá, o arquivo também, não tínhamos muito o que fazer e eu estava meio carente de uns CRUDs e pensei: “por que não?”

O Knockout é um framework javascript MVVM (Model View View Model) que se baseia principalmente no conceito de atualização da view e no bind de valores. Fornece uma estrutura para template e ajuda na hora de trabalhar com formulários e transformações. Pense que o seu foco é ajudar na criação de aplicações web, mas, ao contrário de outras ferramentas mais monstruosas e complexas, o KO é de fácil utilização e encaixa bem na hora de brincar com coisas mais simples, sites ou até mesmo no apoio ao desenvolvimento com .NET (como foi meu caso).

Dentre as diversas funcionalidades, o KO trabalha com 3 que acho especialmente bacanas e é delas que vou escrever um pouco. E, não esquecendo, o que mais me atraiu foi a documentação, que é simples, direta e sem firulas, então, aproveite e dê uma olhada para conhecer também.

Two-way data binding

Essa facilidade é voltada para você fazer uma conexão entre propriedades do DOM e variáveis ou objetos. Através da função “ko.observable()”, ao alterar um valor, por exemplo em um input, automaticamente é atualizado na variável ou objeto. O acesso às variáveis, após o observable ser configurado, será feito através de função homônima, esse foi um detalhe que meio que me deixou estranho, mas com o tempo acostuma.

Binding Array e Event Function

Do mesmo jeito que dá para fazer o bind com uma propriedade, é possível fazê-lo com arrays. Isso fica legal para as clássicas listas e trabalhar com aplicações mais complexas, que carregam coisas do banco de dados e disponibilizam em uma tabela, lista ou qualquer coisa assim. Utilizando o bind de array, logo que haja uma modificação no seu conteúdo, o DOM pode sensibilizado. Para isto, utiliza-se também uma propriedade de bind bacana que é o “foreach”.

Só essa facilidade já é legal porém, para ter um pouco mais de tempero, a gente faz o bind também de um evento com uma função. (tudo isso sem jQuery). Através dos bindings de evento, alguns pré prontos e outros que você pode chamar via propriedade “event”, é possível fazer o equivalente ao $(…).on, mas configurando direto no HTML.

Vantagens

Certo, vendo a aplicação assim, pense que, se você estiver trabalhando com jquery e quiser mudar todo seu layout, há uma certa amarração entre o HTML e o código javascript. Esse tipo de vínculo acaba sendo separado ao fazer uso dos observables e dos binds de funções, já que a configuração é feita na sua view, enquanto o seu javascript só vai entender e procurar o que estiver configurado na página.

Outra coisa é a repetição. Ao invés de fazer um código 10 vezes, uma função bem feitinha pode ser útil e trabalhar independente, facilitando na manutenção.

Enfim, o KO tem uma documentação bacana, funcionalidades úteis, outras que nem abordamos aqui e até casa bem com outros frameworks, para fazer mais bruxarias.

Concluindo

A ideia de se utilizar uma ferramenta destas é facilitar a vida e tornar o código limpo. Fica muito mais fácil de codificar quando as coisas fluem. Pense que você tem uma aplicação complexa, uma alteração afetando outro lado da página, diversos bindings, 10 dias de texto com $ aqui $ ali. O knockout.js serve justamente para evitar retrabalho e tornar a aplicação sólida. Lembrando que:

Pra cada código que você faz, um coitado vai ter que dar manutenção e ler 10 vezes mais

Enfim, visite o site e brinque um pouco com o código. Tem tutoriais lá explicando passo a passo como utilizar algumas das principais funcionalidades e, como disse antes, o KO vem junto com alguns templates de aplicação MVC 4, então, não custa dar uma testada.

Até mais ^^.