compartilhamento de código angularJS no aplicativo Ionic híbrido e no site móvel regular

Ok, então em nosso 'laboratório de inovação', atualmente há um esforço para usar o Ionic, uma estrutura de aplicativo híbrida construída sobre o Cordova para acesso nativo e o angularJS para o 'código da web'.

Existem também alguns projetos que são pura Web móvel, usando o Angular + bootstrap para design responsivo, por exemplo.

O problema é que alguns projetos futuros precisam ter um site para celular e aplicativos nativos (híbrido iônico). A maioria dos recursos e telas será a mesma, compartilhando o back-end e a maior parte da interface do usuário, mas ainda haverá alguma diferença.

Então minha pergunta é; Como arquitetar um projeto para que ele possa ser um projeto iônico e um site angular normal com 2 abordagens de implantação diferentes. A maior parte do código está sendo reutilizada, mas algumas exibições para o site móvel e outras para o aplicativo híbrido (usando mais componentes e convenções nativas), talvez também algumas diferenças de roteamento.

Isso é mesmo uma boa ideia?

E no código compartilhado, existe uma maneira simples de saber em que caso você está? algumas IF, algumas diretivas inativas fora de seu contexto etc.

Parece que há algum tipo de link ausente que talvez eu desconheça.

Desde já, obrigado.

Você pode construir um kernel compartilhado que contenha alguns componentes atomics ( https://docs.angularjs.org/guide/component ) / Services.

Aplicativo Web, aplicativo Android, aplicativo iOS, aplicativo de supervisão ... todos usarão as funcionalidades fornecidas pelo kernel, de maneira adaptativa.

Imagine se você deseja implantar um aplicativo Android. O uso de https://material.io faz sentido, juntamente com alguns recursos do Android. O aplicativo para iOS terá um design diferente ( https://developer.apple.com/ios/human-interface-guidelines/overview/themes/ ) etc ...

Crie uma implementação sólida, use componentes atômicos e adapte-os!

Para aplicativos móveis que usam Ionic e aplicativos da Web que usam AngularJS ou Angular, é muito comum que alguns desses aplicativos tenham funcionalidade compartilhada, além de se conectar ao servidor e obter alguns dados, mas isso não significa que você não terá cópia desse código em seus novos projetos.

O que quero dizer é que, se você sabe que só haveria diferenças na camada da interface do usuário e o projeto requer um aplicativo da web e um aplicativo móvel, é possível ter três camadas em que a interface do usuário para o aplicativo da web pode estar em ângulo e o aplicativo móvel em iônico. Os benefícios que você obtém ao usar funções nativas como cordova phonegap ou ionic talvez sejam muito mais do que manter tudo em um único tipo.

Eu só quero deixar claro que não é difícil alternar entre essas interfaces de usuário, caso seu cliente queira ter um aplicativo Web convertido em aplicativo móvel nativo.

Eu começaria com as seguintes perguntas

1. Este projeto precisa de uma interface de usuário separada para celular?
2. Este projeto precisa de funções móveis nativas?
3. Este projeto precisa de funções de interface do usuário e de backup separadas para dispositivos móveis?

Se sua resposta for sim para todos os 3, crie dois projetos. Se sua resposta for sim para 1 e 2, crie back-end angular e aplicativo da web, juntamente com o aplicativo iônico ou de captura de chamadas. Se sua resposta for sim para 1 apenas, recomendo usar angular para ambos.

Se, em algum momento, você quiser usar vistas angulares no ionic (procure por itens ionic-ng), terá o mesmo código para o front end, o aplicativo móvel e o aplicativo da web. No final, você poderá gerenciar o seguinte independentemente:

1. Migrações de banco de dados
2. Funcionalidade de servidor back-end com a API conectada a 1 para dados
3. Aplicativo Web front-end usando Visualizações Angulares consumindo 2
4. Se for necessário, o aplicativo móvel usa Ionic / phonegap para resolver dependências do dispositivo, mas usa Angular para criar visualizações e consumir 2.

Espero que isso ajude e abra um pouco de discussão.