J Bruni

Amor e Tecnologia

Splendso.me - Um Projeto Open Source

Famo.us + Angular + Meteor = Splendso.me

Splendso.me integra o Famo.us/Angular ao Meteor, trazendo o melhor de três mundos:

  • Famo.us – nova biblioteca JavaScript para a criação de animações incríveis que rodam tanto no desktop quanto em qualquer dispositivo móvel, como se fossem nativas.

  • AngularJS – framework MVW front-end do Google, para criação de aplicações organizadas, separando o código em módulos, diretivas, controladores, serviços e escopo.

  • Meteor – plataforma client/cloud para criação de aplicações distribuídas em tempo real, compartilhando a mesma base de código JavaScript no cliente e no servidor.

Com a união dessas três tecnologias revolucionárias, você pode:

  • Criar componentes e animações do Famo.us usando diretivas do AngularJS.

  • Fazer com que os modelos do AngularJS estejam globalmente sincronizadas através da plataforma client/cloud do Meteor.

  • Focalizar na aplicação ao invés de código repetitivo gerenciando Ajax e REST, sem precisar usar $http, $resource ou outro mecanismo.

Leia mais nos site dos projetos:

Estas bibliotecas e frameworks estão em ativo desenvolvimento. É possível criar aplicações estáveis e poderosoas, mas mudanças são esperadas na medida em que esses projetos avançarem.

Instalação rápida

  1. Instalar o git sudo apt-get install git no Debian/Ubuntu ou siga as instruções
  2. Instalar o Meteor curl https://install.meteor.com | /bin/sh
  3. Instalar o Meteorite npm install -g meteorite
  4. Criar uma nova aplicação do Meteor usando meteor create myapp e/ou navegar para o diretório raiz da sua aplicação nova/existente.
  5. Incluir o pacote ngMeteor mrt add ngMeteor
  6. Incluir o pacote famono mrt add famono
  7. Incluir o pacote splendsome mrt add splendsome

Rodando (usando Splendso.me na sua aplicação Meteor)

Para liberar o poder deste fantástico combo, você precisa:

  • Requerer splendsome
  • Usar o módulo famous.angular como uma dependência do seu próprio módulo do Angular
  • Inserir seu módulo no ngMeteor

Muito fácil:

if (Meteor.isClient)
{
  require('splendsome');
  angular.module('myModule', ['famous.angular']);
  ngMeteor.requires.push('myModule');
}

E você pode começar a criar código como este diretamente em seus templates:

<template name="hello">

  <h1>Hello World!</h1>
  <p>{{ greeting }}</p>

  <input ng-model="text" />
  <p>[[ text ]]</p>

  <fa-app style="height: 200px">
      <fa-surface fa-background-color="'red'" fa-size="[108, 108]">
          Hello world
      </fa-surface>
  </fa-app>

</template>

Neste exemplo temos:

  1. um template com live data comum do Blaze / Spacebars (leia mais)
  2. uma utilização simples da diretiva ngModel provendo ligação de dados bidirecional (leia mais)
  3. uma diretiva de uma Superfície do Famo.us/Angular contendo ‘Hello world’ com cor-de-fundo vermelha (leia mais)

Divirta-se!

Comente pelo Facebook(Yahoo ou Hotmail também)

Comente pelo Disqus