Apache Cordova e Phonegap e suas pequenas diferenças

Pois bem, neste artigo vamos fazer um comparativo entre os dois(Cordova e o Phonegap) e mostrar algumas pequenas diferenças que podem confundir.

Para quem está chegando no mundo do desenvolvimento híbrido, vamos exclarecer:

Originalmente o Apache Cordova se chamada Phonegap quando foi desenvolvido pela empresa Nitobi, após a Adobe comprar a Nitobi, ela doou o código fonte para a Apache Foundation e a Apache nomeou o projeto de Apache Cordova, a Adobe usa essa base para prover um Cordova incrementado, no geral os dois são a mesma coisa, porém com algumas diferenças (estranho isso? Vamos ver)

Se quiser pular direto para um assunto:

Estrutura de arquivos

Primeiro passo, vamos criar um novo projeto usando o CLI do Cordova e também do Phonegap, a sintaxe é a mesma, portanto rode:

Usando Cordova, chamamos o projeto de helloWorldCD

cordova create helloWorldCD

Usando Phonegap, chamamos o projeto de helloWorldPG

phonegap create helloWorldPG

Agora, vamos ver um comparativo estrutural dos dois projetos:

Diferença de projetos entre criar com Cordova e Phonegap

O config.xml

Também podemos observar algumas diferenças no arquivo de configuração config.xml, as diferenças são:

No helloWorld Cordova:

  • Vem apenas com o plugin do whitelist definido
  • Não vem com ícones definidos
  • Não vem com splashscreen definidos
  • Não vem com configurações pré configuradas

No helloWorld Phonegap:

  • Vem com todos os plugins padrões já incluidos
  • Vem com ícones definidos
  • Vem com splashscreen definidos
  • Vem com configurações pré configuradas

Portanto, se você quer começar um projeto com muitas configurações padrões já realizadas use o Phonegap, caso contrário, se você quer um projeto mais limpo use o Cordova. É claro que também é possivel criar templates, veja no meu post Templates no Phonegap.

Linha de comando

No Cordova:

  • create
  • help
  • telemetry
  • info
  • requirements
  • platform
  • plugin
  • prepare
  • compile
  • clean
  • run
  • serve
  • build -> cordova prepare && cordova compile
  • emulate -> cordova run --emulator

No Phonegap:

  • help
  • create
  • build
  • install
  • run
  • platform
  • plugin
  • template exclusivo Phonegap
  • info
  • serve exclusivo Phonegap
  • version exclusivo Phonegap
  • push exclusivo Phonegap
  • local exclusivo Phonegap
  • remote exclusivo Phonegap
  • prepare
  • compile
  • emulate
  • cordova exclusivo Phonegap

Podemos concluir que, a linha de comando do Phonegap possuei alguns recursos ligados aos serviços que a Adobe oferece, como os comandos remote para envio ao Phonegap Build, o comando serve que cria uma rede para acessar via Phonegap Developer App e também é possível executar todos os comandos do Cordova.

Inicialização:

No Cordova:

    var app = {

        initialize: function() {
            this.bindEvents();
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },

        onDeviceReady: function() {
            app.receivedEvent('deviceready');
        },

        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');

            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');

            console.log('Received Event: ' + id);
        }
    };

    app.initialize();

No Phonegap:

   var app = {

        initialize: function() {
            this.bindEvents();
        },

        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
        },

        onDeviceReady: function() {
            app.receivedEvent('deviceready');
        },

        receivedEvent: function(id) {
            var parentElement = document.getElementById(id);
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');

            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');

            console.log('Received Event: ' + id);
        }
    };

A única diferença é que no Cordova ele inicializa já dentro do arquivo js, no Phonegap, eles sujam o index.html com um script para inicializar.

Conclusão

O objetivo aqui era expor algumas pequenas diferenças entre usar a linha de comando do Phonegap e do Cordova, e portante chegamos ao fim, espero que tenha curtido, deixa seu comentário, dá trabalho pra fazer rsrs.