Category Archives: Javascript

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

Relatos de Phonegap

Coisas aleatórias, HTML, Javascript Leave a reply

Olá, tudo bom?

Poxa, abandonei este blog por um bom tempo, confuso com um TCC e trabalhando… mas conversando com um camarada, senti uma iluminação: “vou copiar essa conversa no meu blog”.

Quero deixar claro que o que estou colocando aqui é fruto da minha experiência com Phonegap e talvez vocês tenham alternativas, mas ainda eu não as achei (comentem se tiver). Então, estou jogando algumas das vivências e espero que ajudem.

Vamos começar deixando claro que tenho regras aqui:

  • A primeira regra do clube do Phonegap é nunca usar jQuery;
  • A segunda regra do clube do Phonegap é NUNCA usar jQuery; (use Zepto, se for assim tão necessário)
  • A terceira regra é: sempre usar yeoman para gerar seus projetos;
  • A quarta regra é: sempre usar grunt ou gulp;
  • A quinta regra é: SPA com REST;
  • A sexta regra é: se esta é a primeira vez que ouviu sobre Phonegap, você tem que experimentar!!!

Animação e Frufru

Bom, depois disso, devemos entender que o maior inimigo do phonegap é animação e principalmente com jQuery. Não quero dizer que não dá, nem que não é bom, o fato é que para animar bem e ficar “liso” como vemos um código nativo, não vai ser assim tão simples. Quanto maior o projeto, mais difícil colocar coisas felizes e animadas.

3D nem se diga, eventualmente você consegue, não aconselho.

Sombra? Não abuse do blur… box e text shadows são ameaçadores.

Gradientes funcionam e não afetam tanto a performance… se seu dispositivo alvo excluir os Androids 2.X, que simplesmente ignoram a maior parte das features de gradiente. (Sinceramente, Android 2.X é o IE 6 das webviews.. eles e os dispositivos da Samsung que gostam de se comportar mal com quase tudo que era para dar certo)

Minha dica é sempre usar os vendor prefixes, pelo menos para todas as regras mais legais. O Grunt pode te ajudar a aplicar, com algum dos inúmeros plugins para css.

Segurança

Eu estava lá, feliz e contente com meu projeto, até que um dia TUDO PAROU. Segurança é a palavra! Quando você usa um script com um src apontando para fora do projeto, você precisa autorizar. Certo, a culpa foi deste safado: <meta http-equiv=”Content-Security-Policy” content=”..”>

Para usar qualquer coisa que pareça muito mágica ou especial, fique atento à segurança, se não estiver configurado no config.xml, provavelmente está em outro lugar.

Navegador

Quando você está com o navegador para testar sua aplicação, não esqueça que os plugins não estão lá. Então, faça mocks dos plugins mais importantes, pelo menos para um desenvolvimento mais fácil.

Atualmente o phonegap tem solução tanto para usar o serve quanto para testar direto nas plataformas como Windows Phone, Android e iOs

Google Maps

Então, você vai e ativa a API de mapa do Google, todo ansioso para fazer seu aplicativo. Abre o editor, coloca o mapa e põe a URL com sua chave de API e o primeiro erro é sobre o domínio. Bom, você está desenvolvendo, então vai no Google e põe “localhost”, mas aí está a pegadinha… Com o phonegap, seus arquivos são servidos no file://, não suportado pela API. A solução? Finge que a chave não existe e conviva na fé de que o google não vai contabilizar os acessos. Lembre-se: os termos do Google exigem que você pague para usar o maps em qualquer projeto de rastreio, o que inclui aquele aplicativo de taxi, o outro de monitoramento de carga e até o app que você acha que ninguém pensou antes, que rastreia o fretado e te avisa para correr.

SVG

Quer fazer coisas legais? Use SVG, mas cuidado, a especificação funciona na maior parte dos dispositivos, mas com peculiaridades. O iOs não reconheceu um path com um vazado no meio, e deu muito problema com muitos ícones no mapa, por exemplo.

Debug

Quer debug? O Weinre é uma boa pedida, mas o chrome://inspect é a melhor opção. Conecte o dispositivo via USB e coloque no chrome essa URL e seja feliz. Outra saída bacaninha é o VorlonJs, mas não mexi muito.

Cordova

Você acha que precisa só instalar o phonegap via npm? Não, você vai precisar do cordova também, então trate de dar um npm install -g cordova antes de se descabelar.

Webkit

Então, se phonegap usa a webview, simples, o Android e o iPhone usam Webkit, sua vida está feliz… SQN. Se sua aplicação for tímida e tiver pouca visão, fique feliz nestas duas plataformas, mas o Windows Phone é uma alternativa (Eu tenho um WP e gosto muito dele, ta!?) e ele não usa Webkit. Portanto: teste sempre em todas as plataformas que puder.

Plugins

Não se atenha apenas a instalar o plugin, verifique se está no config.xml. Ferramentas de build, como o Phonegap Build usam o arquivo e, na hora da verdade, o aplicativo gerado não vai funcionar.

Touchend vs Click

A tela do seu celular não tem mouse. Touch é touch e, se você acha que o click é o mesmo que o touch, não é. Use um framework como o  Hammer ou se contente com o touchstart/touchend para acionar seus eventos de toque.

Leiaute

Camaradinha, iPhone não é Android e nenhum dos dois é Windows Phone. Se você vai fazer um build único para as três plataformas, pelo menos seja original e faça algo bizarro que assassine 5 ou 6 heurísticas de Nielsen, mas não tente enfiar a cara de um no outro.

Tela branca

Se algo der errado na inicialização do javascript, você será presenteado com uma linda e gigante tela branca (ou preta, dependendo da plataforma). Para isso, garanta que nenhum código arriscado, como acesso à API ou que gere erros seja executado antes do seu leiaute ser montado. No mínimo, faça uma SplashScreen em HTML para dar um bizú e fingir que tudo ficou bem.

Framework

Quer fazer um app de verdade, use um framework de verdade. Isso é uma aplicação, não um site, então, escolha um framework sério e que atenda às SUAS necessidades.

Ionic é bom, é interessante, mas quebra do nada e, às vezes, não salva sua vida.

Angular 1.x é bacana, mas exige cuidado. Se você usar todos os recursos para ficar limpo e bonito, sua performance vai sair pela tangente (pegou a piada?). Com grandes poderes, grandes responsabilidades, então, eventualmente, você vai ter que machucar a arquitetura.

Estou em um affair recente com React, não por amar seu estilo ou estar atraído pela sua beleza, mas por ser estupidamente rápido em relação ao que já tentei e por ser bem divertido de programar.

Eu já brinquei com esses, mas tem outros como o OnsenUI, o próprio Backbone e o meu querido Knockout. É tudo lindo, mas lembre-se de testar sua aplicação nas suas plataformas alvo. Como um camarada (que não tem blog e só por isso não vou referenciar aqui) me disse, SPA com algum framework do MicroJS, o jogo está ganho.

Desafios

Existem muitos desafios para trabalhar com Phonegap e, normalmente, ele serve para você fazer uma aplicação muito rápido e que vá ter um carinho e atenção no futuro para ser aprimorada. Phonegap é poderoso, mas perigoso, então tome cuidado, você deve sempre ter em mente que é uma webview bem alimentada e, wep bor web, temos desafios que todo browser terá, ainda mais em um dispositivo mobile.

Conclusão

Meus colegas odeiam o Phonegap, as pessoas são céticas, existem outras opções como o Appcelerator e o Xamarin, mas o que vou fazer, é tipo relacionamento perigoso, o risco é grande, mas o amor garante a união. Então, se você quer usar o Phonegap (Estou falando 10 mil vezes Phonegap, pois quero lavar sua mente e deixar esta palavra gravada à frio em sua memória), tenha carinho e abra mão dos preconceitos. Tudo é possível fazer com ele, só depende da sua fé e paciência.

Até mais,

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 ^^.

Classes em Javascript – Declaração

Boas práticas, Javascript 1 Reply

Quando eu falo classes, na verdade quero dizer “tipo classes”. O javascript é uma linguagem orientada a objetos, porém, baseia-se no princípio prototípico, no qual a herança é, na verdade, uma extensão de um protótipo original e trabalhamos diretamente com os objetos baseados nestes.

Existem diversos frameworks que possibilitam a utilização de classes no modelo padrão, porém, não focarei neles, apenas mostrando, aqui, como ficaria uma classe no modelo básico de protótipos.

Primeiramente, devemos compreender que OO baseia-se em alguns princípios:

  • Encapsulamento
  • Herança
  • Polimorfismo

No caso de linguagens OO difundidas como C# ou Java, temos a declaração de classes e tudo está organizado bonitinho apenas para ser utilizado, porém,  no javascript 1.7-1.8, as coisas são meio diferentes e a utilização é um pouco mais complicada (Irá melhorar nas próximas versões). Basicamente, para criarmos uma estrutura de classes devemos trabalhar com closures, da seguinte maneira:

Bom, nesta declaração, vemos que a estrutura formada é semelhante à classes, com encapsulamento no fechamento de variáveis e funções.

A herança está em dizer que o protótipo do filho é o mesmo que o protótipo do pai, criando uma especialização do pai no filho.

Já o polimorfismo não é muito “necessário”, já que o javascript tem tipagem dinâmica e fraca e podemos utilizar objetos e métodos em vários pontos, mas claro, poderia ser implementado através de algumas coisas um pouco mais complicadas que não vou falara agora, pra não perder a graça.

Para usar o código resultante, devemos instanciar um objeto da classe acima através do new e, por isso, é melhor colocar a primeira letra maiúscula nas classes pois, se você não usar o new para chamar uma classe, this passa a pertencer ao escopo acima, gerando o caos.

Enfim, é desta maneira que criamos, diretamente, classes em javascript, lembrando que as principais vantagens desta prática são a de não sujar o escopo global, deixando fechado em um objeto todos os métodos específicos de uma atividade, tendo um código mais limpo e organizado.

Até mais

Entides Html

Coisas aleatórias, HTML, Javascript 1 Reply

Olá,

Há algum tempo (muito), eu estava procurando os simpáticos símbolos de entidades HTML para deixar meu site um pouco mais lúdico e acabei criando uma ferramenta para listar todos os caracteres HTML, com sua forma de escrita.

Utiliza-se o &#..; como entidade HTML, jogando direto no fonte, ou \.. para apresentar via javascript em alerts ou confirms.

https://github.com/octavioturra/HTMLEntityGen

Dêem uma olhada e qualquer coisa, [amq_modal]podem perguntar[/amq_modal]

Até mais