Angular Material Design vs Polymer vs SB Admin Bootstrap

Neste post vou documentar minha pesquisa para a escolha da melhor biblioteca de web component, para um projeto web mobile, utilizando AngularJS.

Angular Material

O projeto Angular Material é uma implementação do Material Design em AngularJS. Esse projeto provê um conjunto de reutilizáveis, bem testados e acessíveis componentes UI, baseados no sistema Material Design. Similar à coleção Paper elements do projeto Polymer, Angular Material é suportado internamente pelo Google, pelo AngularJS, Material Design UX e outros times de produtos.

Esta opção é a que mais me agrada, visto que trabalha muito bem com o AngularJS, que já é certeza no projeto.

Polymer

A biblioteca Polymer foi feita para tornar mais rápido e fácil, para os desenvolvedores, criar maravilhosos e reutilizáveis componentes para os navegadores modernos.

Em geral, ele foca no uso de componentes web. Cria elementos customizados e evolui tanto quanto a web evolui. Até o momento, só suporta as últimas versões dos navegadores modernos. Segue uma imagem que explica a arquitetura do Polymer.

Esta opção é um vislumbre das novas possibilidades que o HTML5 e os novos componentes web podem nos oferecer.

Ionic

Ionic é um ótimo open source front-end SDK para desenvolvimento de apps híbrido mobile com tecnologias web como: HTML5, CSS e Javascript. Ionic é focado no “look and feel” e interações UI para um app. Atualmente utiliza AngularJS.

Porém, o Ionic está descartado do meu estudo, visto que o foco do meu projeto é web e ele, apesar de ter uma boa atuação web, é focado no mobile, por isso não garante perfeita execução nos navegadores web. Isto é dito na própria documentação do Ionic.

http://ionicframework.com/docs/overview/#browser-support

É provável que, em um futuro não tão distante, seja criada uma branch do projeto utilizando Ionic para uma versão totalmente mobile. Mas isso também depende do lançamento oficial do Angular 2.0 e outras decisões arquiteturais.

SB Admin 2

É um tema administrativo, painel de controle (dashboard), ou aplicação web UI, baseado em Bootstrap, juntamente com o poderoso plugin jQuery e funcionalidades herdadas.

Esta opção é a que menos considero, porque o Bootstrap está desgastado, mesmo que com uma grande comunidade e número de plugins e aplicações. Levando em consideração que o AngularJS é certeza no projeto e que ele sempre precisou de muitas adaptações/plugins/modules/gambiarras para que o bootstrap rodasse bem com ele, seria trabalhoso utilizá-lo. Se não existisse o Angular Material esta opção seria a minha favorita.

Então, qual a diferença entre Polymer e Angular Material?

Angular Material já está adaptado para trabalhar com AngularJS, utilizando diretivas e services. O Polymer é uma biblioteca para criação de componentes web personalizados. Angular Material utiliza a biblioteca Paper elements do Polymer, então, eles não são inimigos, são tecnologias amigas que caminham juntas, porém com um foco diferente.

Diretivas Angular vs Custom Elements

Polymer (mais especificamente Shadow DOM) provê a habilidade para compor JS, CSS e HTML encapsulado em componentes personalizados, assim como as diretivas AngularJS.

As diretivas Angular são conceitualmente similares aos Custom Elements, mas elas são implementadas sem o uso da API para componentes web. Diretivas Angular é uma maneira para construir elementos personalizados, e Polymer e a especificação de componentes web são os padrões-base de como fazer isso.

Similar ao AngularJS, Polymer Elements provê um template e bi-direcional data binding. Entretanto, eles também provêm funcionalidades como o Shadow DOM, que permite encapsulamento do CSS. Diretivas Angular não tem nenhuma noção de encapsulamento de estilo, mas é esperado que isto seja incorporado por uma eventual nova funcionalidade.

No futuro, ambos poderão ser usados conjuntamente. Porque custom elements serão o DOM, eles irão trabalhar sem problemas com frameworks como AngularJS. O time do AngularJS disse que eles irão eventualmente usar a API de Web components (custom elements, Shadow DOM, etc).

Conclusão

Utilizarei o Angular Material, pois, além de ter grandes qualidades do Polymer, ele tem o AngularJS por trás tornando-o mais forte e vivo por mais tempo. Nada é eterno, principalmente neste mundo da tecnologia, mas sabemos que um poderoso framework, mantido por uma poderosa organização (Google), sempre leva vantagem. E como o Angular Material já nasceu feito para o AngularJS, ele se destaca em relação ao Polymer. Contudo, acredito que em breve o Polymer seguirá o mesmo caminho e será uma ótima opção, juntamente com o Angular 2.0.

Angular 2.0 é outro assunto que precisa ser estudado, mas ainda é cedo para este projeto. De qualquer forma, deixarei links aqui no final para leitura complementar, casos se interessem.

“May the Force be with you”

Leitura complementar

http://ng-learn.org/2014/12/Polymer/

http://www.sitepoint.com/whats-new-in-angularjs-2/

Angular 2.0

http://stackoverflow.com/questions/18089075/what-is-the-difference-between-polymer-elements-and-angularjs-directives

http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/

Yeoman-polymer

http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/?redirect_from_locale=pt

https://developers.google.com/web/updates/2014/01/Yo-Polymer-A-Whirlwind-Tour-Of-Web-Component-Tooling

http://jcrowther.io/2015/05/26/using-polymer-webcomponents-with-angular-js/

http://www.2ality.com/2014/07/angularjs-vs-polymer.html

http://www.oyecode.com/2015/05/angularjs-20-or-polymer-open-discussion.html

https://dzone.com/articles/typed-front-end-with-angular-2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s