Blog Fábio Vedovelli

Utilizar ZendAMF com Laravel 3

Ved — Sat, 13 Apr 2013 12:37:37 +0000

Bem, com meu histórico de amor e ódio com o Flex Framework (mais amor, diga-se), uma das primeiras tentativas de integração Laravel foi com o ZendAMF, implementação do protocolo AMF feita pela equipe Zend.

Foi necessário gastar um pouco de tempo com pesquisa, mas no final a integração foi tranquila. Uma das características do Laravel que o fazem ser tão bom é a facilidade de integração com bibliotecas externas. Sabendo disso, bastou iniciar a integração, entender os pulos-do-gato e correr para o abraço.

Segue o roteiro, passo a passo:

1) O primeiro foi imaginar onde eu poderia acomodar a biblioteca. A pasta /application/libraries seria uma boa escolha, porém, como o ZendAMF é um pouco complexo, com diversas classes e pastas, optei por criar um bundle. Adotei esta abordagem por dois motivos: sendo um bundle, as classes do ZendAMF ficariam a disposição do Laravel (e vice-versa) e o bundle possui o arquivo start.php, que é executado cada vez que o bundle é executado.

Item 1

2) Uma vez que a library foi adicionada na pasta /bundles, é necessário informar ao Laravel que o bundle existe e precisa ser executado. Isso é feito no arquivo /application/bundles.php.

Item 2 – informar ao Laravel que o bundle precisa ser iniciado

3) Agora, no arquivo start.php do bundle, adiciona-se a pasta library do ZendAMF ao class path do PHP. Isso é um tanto estranho, mas o ZendAMF é meio estúpido com includes. Melhor não brigar com gente estúpida. Utilizando a classe Autoloader do Laravel, adiciona-se os diretórios do Bundle que se precisa ter acesso pelo Laravel.

Item 3) Adiciona-se a pasta library ao class path do PHP

4) Agora é preciso criar uma URL para funcionar como gateway para chamadas a partir do Flex. Para simplificar as coisas, criei uma rota diretamente no arquivo application/routes.php, chamando-a de ‘/amf’ e ali no closure, criei uma instância do ZendAMF Server. Será ali também que abrirei acesso às classes que serão acessadas pelo Flex (VOs incluídos). É importante notar que a rota responderá a uma chamada POST, que é o verbo HTTP utilizado pelo RemoteObject do Flex. Para utilizar, basta colocar sua URL no RemoteObject do Flex. Ex.: endpoint=”http:///amf”.

Item 4) Cria-se a rota e nela o server AMF

5) Para manter nosso código organizado, criaremos nossas classes expostas ao Flex dentro de nosso bundle. Como estamos trabalhando com Laravel, todas as classes deste estão disponíveis para o bundle, sem que se precise fazer nada especial. No exemplo abaixo, foi utilizado um model chamado Produto, que estende Eloquent.

Item 5) A classe exposta ao Flex

6) Para finalizar (e este passo é opcional), é preciso adicionar à resposta que esta é do tipo AMF. Ter ou não esta informação não faz qualquer diferença ao Flex, porém, se você utiliza para debug uma ferramenta como Charles Proxy, este não exibe corretamente os dados caso o Content-Type não se passado como application/x-amf. Para isso, basta criar na rota ‘/amf’ um filtro do tipo after e ali determinar o Content-Type.

Item 6) Adiciona-se o Content-Type à resposta HTTP

E é isso!

Vale lembrar que o mesmo procedimento pode ser utilizado para outros componentes do Zend Framework. Basta tentar!

Grande abraço,

Vedovelli

Laravel Framework: conditional assets

Ved — Wed, 13 Mar 2013 13:53:39 +0000

A big concern related to front end performance is the burden brought by javascript includes, which tend to be big in size. Fortunately there are techniques and best practices to minimize this issue. Loading javascript files (and why not CSS files…) during navigation can be a very good idea.

Laravel Framework has a class to manage assets that allows you, among other things, to load Javascript and CSS files only when needed. All you have to do is use asset containers. Add a new file to a container and it (the file) will be loaded when the route is called and the action is executed. Let’s take a look how it works from within a controller.

Let’s assume we have an asset container being registered and its assets being loaded in the layout file (layout.blade.php):

< ?php
  // Register the files
  Asset::container('custom')->add('CustomJS', 'js/custom.js');
  Asset::container('custom')->add('CustomCSS', 'css/custom.css');
?>
< !doctype html>


	
	Title
        
  	{{ Asset::container('custom')->styles() }}
	{{ Asset::container('custom')->scripts() }}


...

Now we have a javascript with instructions related to products only. We create a filter before in the controller:

class Product_Controller extends Base_Controller
{
    function __construct() 
    {
        parent::__contruct();
        // Aplicar o filtro apenas nestas actions
        $this->filter('before', 'addAssetsToProducts')->only( array('new', 'get') );     }
 
    public function action_new()
    {
    ...
}

And in the routes.php we add the filter behavior:

Route::filter('addAssetsToProducts', function()
{
    Asset::container("custom")->add("products", "js/products.js");});

When both actions new or get are executed, the file js/product.js (in this case stored in /public/js) will be inserted in our layout file and only for those actions.

Best!

Ved

Laravel Framework: assets condicionais

Ved — Tue, 12 Mar 2013 23:08:57 +0000

Uma das grandes preocupações de performance na interface do usuário é a carga trazida pelos includes Javascript, que tendem a ser grandes. Felizmente existem técnicas e boas práticas para minimizar o problema. Carregar arquivos javascript (e pq não folhas de estilos) durante a navegação pode se mostrar um coringa no seu desenvolvimento.

O Laravel Framework possui uma classe para gerenciar assets que lhe permite, entre outras coisas, carregar aquivos Javascript e CSS conforme se precisa deles. Basta utilizar o recurso de asset containers. Adicione um novo arquivo a um container e ele (o arquivo) será carregado quando o link da funcionalidade for requisitada. Vejamos como funciona a partir de um controller.

Supondo que se tenha um asset container sendo carregado no arquivo de layout (layout.blade.php) da aplicação:

< ?php
  Asset::container('custom')->add('CustomJS', 'js/custom.js');
  Asset::container('custom')->add('CustomCSS', 'css/custom.css');
?>
< !doctype html>


	
	Titulo
  	{{ Asset::container('custom')->styles() }}
	{{ Asset::container('custom')->scripts() }}


...

Agora imagine que no controller produtos, se tenha um javascript cujo conteúdo seja relevantes apenas para a funcionalidade de produtos. Basta criar um filtro before no controller:

class Produtos_Controller extends Base_Controller
{
    function __construct() 
    {
        parent::__contruct();
        // Aplicar o filtro apenas nestas actions
        $this->filter('before', 'addAssetsToProducts')->only( array('new', 'get') );     }
 
    public function action_new()
    {
    ...
}

E no routes.php:

Route::filter('addAssetsToProducts', function()
{
    Asset::container("custom")->add("produtos", "js/produtos.js");});

Com isso, quando as actions new e get do controller produtos forem executadas, o javascript js/produtos.js (salvo em /public/js) será inserido no layout da aplicação e apenas para estas actions.

Grande abraço!

Ved

PHP Console: mais uma ferramenta para ajudar no desenvolvimento de apps

Ved — Sat, 09 Mar 2013 15:11:24 +0000

Eu frequentemente utilizo print_r() para ver o estado da informação naquele momento da execução, por diversos motivos. Quando se trata de uma API, recorro à gravação de arquivos texto no filesystem com a informação que preciso analisar (pense em chamadas AJAX que não podem ser quebradas). Certamente minha solução é um tanto mambembe e que, apesar de desconfortável, tem me atendido bem. Hoje me deparei com um serviço chamado PHP Console (http://phpconsole.com) que com um único include PHP lhe provê com diversos métodos que fazem o output dos seus dados no site do serviço. Achei uma boa proposta, pois você pode manter um histórico dos seus prints.

Já existe inclusive um package para Laravel 4: https://github.com/Prologue/Phpconsole/

Para entender bem, veja o curto video abaixo:

phpconsole – Getting Started from Support Phpconsole on Vimeo.

Screencast: Laravel e operações CRUD

Ved — Tue, 05 Mar 2013 16:12:56 +0000

Neste screencast serão abordadas as 4 operações básicas para o gerenciamento de informações e o armazenamento em banco de dados: Create, Read, Update and Delete, também conhecidas pela sigla CRUD.

Os recursos do framework utilizados durante o screencast foram:

Models e relacionamentos
ORM
Controllers
Templates
Filtros

Caso queira fazer o download do video, utilize este link: http://bit.ly/15vbgpW

Se encontrar alguma informação incorreta, por gentileza, me avise! vedovelli@gmail.com

Screencast: Laravel – Templates

Ved — Tue, 05 Mar 2013 16:10:27 +0000

No terceiro video da série, você encontrará uma demonstração sobre os recursos de template do Laravel.

Screencast: Laravel e o padrão MVC

Ved — Tue, 05 Mar 2013 16:04:42 +0000

Inicio este post agradecendo a todos pelo excelente feedback dado ao primeiro screencast (link) da série Laravel. Fiz tudo certinho, pois não apontaram nada! =D

Neste segundo vídeo, falo brevemente sobre o padrão de projeto MVC (Model, View, Controller) e sua implementação no Laravel.

Caso queira fazer o download do video, utilize este link: http://bit.ly/VqbmOC

Se encontrar alguma informação incorreta, por gentileza, me avise! vedovelli@gmail.com

E para quem está ansioso pela terceira parte, saiba que será sobre templates.

Screencast: introdução ao Laravel PHP Framework

Ved — Wed, 30 Jan 2013 17:00:13 +0000

Este screencast de 30 minutos lhe dará uma visão geral sobre o Laravel framework. É o primeiro de uma série, que já tem o segundo vídeo gravado, este tratando do tema MVC.

Caso queira fazer o download do video, utilize este link: http://bit.ly/WpDY8K

Se encontrar alguma informação incorreta, por gentileza, me avise! vedovelli@gmail.com

Um forte abraço,

Vedovelli

http://twitter.com.br/vedovelli
http://blog.vedovelli.com.br
http://youtube.com/vedovelli

Cuecas (uma reflexão)

Ved — Mon, 10 Dec 2012 11:00:22 +0000

Na fila do caixa do Free Shop do aeroporto de GRU vi um rapaz comprando 3 pacotes de Marlboro, do vermelho. Imediatamente me veio ao pensamento uma única palavra, associada a meu passado: REFÉM.

Nicotina, pessoas, comida, álcool, comportamentos, sentimentos, cheque especial e rotina!

Quantas amarras mantive voluntariamente durante anos. E uma coisa corriqueira como a visão de um fumante se abastecendo conseguiu me lembrar do quanto mudei.

Hoje num almoço requintado, no qual servia-se bons vinhos e whisky de primeira qualidade, ao ser indagado o que beberia, não titubeei : “- Bebo água, de preferência com gás”. A possibilidade de eu ir à qualquer lugar e não encontrar água para beber é remota e atualmente é só o que preciso para ser feliz. E sem renegar nada. Sempre fiz questão de ser bêbado conhecido.

Diversão nas melhores capitais do sudeste brasileiro muitas vezes inclui shopping center e este possui a famigerada praça de alimentação, com seu McDonalds sempre lotado. Minha esposa aprendeu rapido: primeiro alimente a criatura para manter o mau humor na caverna. No caso, o meu humor. Já repararam em quanto comemos mais do que precisamos? E quanto dinheiro se gasta em restaurantes, sem qualquer controle de qualidade sobre o que se ingere. Quando analisei friamente fiquei assustado…. E tomei uma providência. Ainda não é hora de dizer o que fiz, mas que se registre que agi.

E com a mesma rapidez com que divaguei na fila do caixa, voltei a atenção para o que estava a fazer ali. Enquanto o moço estava garantindo mais um estoque de amarras, sorri imaginando o quanto minha vida está mais fácil, preocupado apenas em pagar pelas cuecas Calvin Klein que me dei de presente.

Esteja bem.

Treino – Bike – 04.12.2012

Ved — Tue, 04 Dec 2012 17:42:19 +0000

]]>

Insight

Ved — Thu, 15 Nov 2012 16:51:39 +0000

Durante o lançamento recente de um produto online e após certo tempo sem ter participado de um lançamento, percebi uma coisa:

“- O cliente não fica irritado com erros no projeto, pois isso é esperado. Ele se irrita sim quando lhe pergunta por que o erro ocorreu e você não sabe responder. Quando a resposta é imediata e firme, mostrando que você o projeto fresco na mente, o cliente se sente seguro de que o problema não vai mais ocorrer”.

É claro que um pouco de TDD não fará mal algum!

O que há de melhor em desenvolvimento frontend na atualidade, num único set de slides

Ved — Sat, 27 Oct 2012 13:26:51 +0000

Palestra de Zeno Rocha na QCon São Paulo 2012.

Os mitos do desenvolvimento front-end from Zeno Rocha

RIA Labs: manter-se atualizado não é fácil #soudev

Ved — Tue, 23 Oct 2012 19:51:51 +0000

Quando a Adobe soltou a bomba sobre nossas cabeças em novembro de 2011, anunciando de forma desastrada a transferência do desenvolvimento do Flex Framework para a Apache Foundation confesso que pessoalmente senti certo alívio. Como desenvolvedor Flex profissional eu já vinha discordando da política da Adobe de se aproximar dos designers, ao invés de investir na melhoria dos componentes existentes e criação de novos componentes. Não me entenda mal: a arquitetura Spark, MXMLG e os s:States fazem toda a diferença, mas iniciativas como Flash Catalyst ou a associação de componentes a fontes externas de dados através de wizards foram um desastre e perda de tempo. E o mundo então trancou o Flex no porão…

Todos os desenvolvedores Flex que conheço (inclusive eu) foram atrás de outras tecnologias (entenda: framework, pois em interface é Actionscript ou Javascript). O que encontramos? O MUNDO! Principalmente o mundo sendo dominado pelo Javascript e pelos projetos opensource. Excelente! Muita coisa para aprender e usar, imediatamente, sem precisar aprender algo completente novo. Eu nunca deixei JS de lado e sempre fui apaixonado por jQuery e isso me deu uma vantagem grande, não frente aos demais devs (não estou numa competição) mas com relação ao mercado, que passou a demandar “um único desenvolvimento (entenda por ‘conta a ser paga’) para rodar em todos os devices”.

O problema é que minha empresa nasceu por causa do Flex e para a equipe foi um choque ter que se adaptar a uma nova forma de desenvolver interfaces, novos problemas a serem resolvidos, novas ciladas a ficar atento. Pior do que isso, foi ter perdido a comodidade de uma IDE fantástica (Flash Builder) e o uso de um único framework, precisando virar uma espécie de “pescador de plugins jQuery”.

No final das contas, encontramos vantagens e desvantagens. É a vida!

Bem, agora sabemos que o Flex não é um bêbado rolando a ladeira, mas já fizemos a nossa virada! Atualmente, a RIA Labs está muito adaptada ao mundo HTML/CSS/JS e ganhando skills rapidamente. Continuamos mantendo sistemas legados em Flex e acabamos de fechar um contrato de 8 meses para (re)desenvolver um produto cujo desenvolvimento nos tomou todo o ano de 2011. Era Flex, será HTML. Já nasceu bem enquadrado num iPad e com um pé nos smartphones.

Felizmente o Flex nos foi uma excelente escola e conceitos que só agora atingem a grande maioria dos desenvolvedores, tais como data binding e dependency injection já nos são velhos companheiros, graças ao profissionalismo dos desenvolvedores Flex. A vocês, nosso muito obrigado!

E como tudo atualmente gira em torno de agilidade e testes, fizemos outra mudança, deixando o PHP de lado (mas não abandonado) e adotamos o Ruby e o Rails como linguagem e framework server side. Já que é para modernizar, que seja em todas as frentes!

E que venham os novos tempos, meus amigos!

Um grande abraço.

Treina Tom, surpresa boa #soudev

vedovelli — Mon, 24 Sep 2012 14:51:34 +0000

Este post tem a intenção de ser um agradecimento e uma crítica. Primeiro as más notícias.

A Adobe continua sendo uma empresa cretina e pela qual eu tenho certo desprezo. Mesmo depois de tantos anos, aparentemente ainda não dá a mínima para os clientes da América do Sul. Isso sempre foi um problema e motivo de reclamação por parte de clientes, inclusive grandes.

Nos meus mais recentes treinamentos, venho utilizando o Adobe Connect, produto que aprendi a gostar, principalmente pela possibilidade de compartilhar a tela toda, somente uma janela ou ainda parte de uma janela. O restante dos recursos são triviais e não merecem destaque. Eu vinha utilizando salas criadas pela escola parceira nos cursos de jQuery. Para o curso de Flex, que é uma iniciativa apenas minha, tentei contratar o Connect para ministrar os cursos e na última hora, depois de 3 tentativas frustradas de assinar o serviço e 2 solicitações de contato por parte do departamento de vendas da Adobe (sem qualquer retorno, sequer uma mensagem automática), fui socorrido pelo Carlos Eduardo da E-genial, que me cedeu uma sala do seu TreinaTom para que eu pudesse ministrar meu curso.

Agora é que entra o agradecimento em forma de elogio: eu já estava acostumado com o ambiente do produto por ter ministrado no passado recente alguns cursos pela E-genial. Mas muito me surpreendeu o aumento da qualidade do compartilhamento de tela. Está mais estável e com área de captura maior, apesar de ainda não permitir a tela toda. Nenhum aluno reclamou de áudio picotando, o que é inédito no uso de software de EAD. Realmente fiquei muito feliz!

Migu, obrigado pela gentileza.

Ved

Microsoft teve 1 hora de minha atenção #soudev

Ved — Wed, 19 Sep 2012 13:41:26 +0000

Tenho utilizado bastante a app do GitHub para Windows [link], que foi desenvolvida utilizando a nova interface dos produtos Windows: Metro. Quando a instalei, de cara me senti bastante confortável com a interface lisa e efeitos discretos. Pensei: “- Ohhhh: o pessoal do GitHub tem bom gosto! =D”. Pouco tempo depois, me dei conta de que o bom gosto é na verdade o look and feel Metro.

Eis que hoje de manhã me deparei com um video de 1 hora e alguma coisa, de uma apresentação oficial sobre como desenvolver aplicativos Metro utilizando HTML5/CSS3/Javascript e como estou bastante interessado em tudo o que diz respeito a essa trinca, fui conferir o video.

Eis o link: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2012/DEV366

O que encontrei me deixou bastante empolgado. Sei que existem outras formas de desenvolver para Windows 8, como C# por exemplo, mas de cara ficou óbvio que, ao trazer para o desenvolvimento para Windows os web standards, a Microsoft aumentou muito a quantidade de desenvolvedores que podem se interessar em desenvolver para Windows e os desenvolvedores web ganharam um mercado gigantesco para explorar. Está clara a relação ganha-ganha nesta história. O melhor de tudo foi perceber que, no meu caso, eu não teria que aprender algo completamente novo: posso continuar a trabalhar com as tecnologias que amo: HTML/CSS/JS. Obviamente que existe muita coisa proprietária da MS neste pacote, mas como o alvo aqui não são o browsers e sim apps desktop/tablets/smartphones, pode-se usar sem medo “aquela transição CSS 3D que vc ficou apaixonado dias atrás“.

Durante a apresentação fiquei com a sensação de que a Microsoft fez “um Flex” que não depende do Flash Player. Não é lindo??? Isso pq existe uma suite de componentes de interface de usuário, de comunicação e utilitários na SDK, da mesma forma que o Flex tem, só que baseados em standards. E isso muito me agrada.

O único ponto que me broxou foi o one-way data binding. Qual a dificuldade em trazer two-way para algo que teve tanto esforço para ser desenvolvido?

Bem, assim que eu tiver um tempinho, instalarei o Windows 8 + o Visual Studio 2012 para começar a explorar esta nova possibilidade. Como eu já disse antes, tecnologia boa é aquela que paga as minhas contas.

AngularJS: o primeiro componente a gente nunca esquece! #soudev

vedovelli — Thu, 13 Sep 2012 22:34:32 +0000

Caso não faça idéia do que seja o AngularJS, existe um screencast com uma introdução aqui: http://blog.vedovelli.com.br/?p=1946

Ao cair de paraquedas no mundo Javascript, vindo do mundo do Flex, a primeira coisa que senti falta foi a ausência do data binding. Mais ainda, do two-way data binding. Uma rápida explicação:

Quando se tem a disposição do two-way data binding, sua preocupação volta-se apenas para a informação, que está ligada (bind) ao um elemento de interface de usuário que a representa. Quando uma mudança é feita na informação, é refletida no elemento de interface. Quando é o elemento que recebe a mudança, esta é refletida na informação. Nenhum acesso ao elemento precisa ser feito para mudar seu valor.

A segunda ausência sentida foi a possibilidade de rapidamente desenvolver componentes de interface personalizados e utiliza-los em diversos projetos, coisa corriqueira quando desenvolvendo com Flex. Os plugins para jQuery fazem este papel e são relativamente fáceis de desenvolver, porém, é necessária bastante expertise para chegar a um resultado satisfatório. Finalizando, o uso do plugin de jQuery deve ser feito na programação e não de forma declarativa, HTML style, coisa que gosto muito.

AngularJS: a forma declarativa é como escrever HTML!

Bem, ao utilizar seu documento HTML como template, o AngularJS (http://angularjs.org/) faz, após o parse do browser, o seu próprio parse da marcação HTML, procurando por elementos conhecidos do framework, para transforma-los em qualquer coisa que vc tenha determinado. Estes elementos são as diretivas. Podemos defini-las como elementos HTML criados por você e que são parseados pelo framework em tempo de execução. É como criar componentes no Flex.

Com muita determinação, fui atrás de informações sobre como desenvolver uma diretiva básica: uma propriedade a ser utilizada num