O WebAppForge é uma base para desenvolver aplicações web e Progressive Web Apps utilizando HTML, CSS, JavaScript e Web Components. Em vez de reconstruir a mesma estrutura em cada projeto, você começa com um núcleo organizado e personalizável.
Antes de desenvolver a funcionalidade principal, você normalmente precisa preparar navegação, estrutura de telas, componentes, modais, organização dos arquivos e outros elementos básicos.
Criar novamente a estrutura inicial sempre que um novo projeto começa.
Cada projeto pode acabar utilizando uma organização diferente de arquivos e componentes.
Parte do trabalho inicial é preparar a base antes de começar as funcionalidades específicas.
O WebAppForge reúne uma estrutura inicial, componentes reutilizáveis e recursos para aplicações web e PWA em um único projeto.
Utilize componentes personalizados baseados
na tecnologia nativa de Web Components,
como app-column,
app-row,
app-modal,
app-header e
app-nav-bar.
As telas da aplicação são arquivos HTML
independentes armazenados em
screens/, permitindo organizar
cada parte da interface separadamente.
O núcleo APP controla a navegação
entre telas através de métodos como
APP.navigate() e
APP.loadScreen().
Crie modais como arquivos HTML dentro de
modals/ e carregue-os através
de APP.loadModal().
Organize a lógica específica da aplicação
em actions.js e acesse suas
funções através de APP.actions.
Estrutura preparada para Manifest, instalação do PWA, Service Worker, cache e funcionamento offline dos recursos configurados.
A estrutura organiza o funcionamento inicial da aplicação enquanto você adiciona as telas, estilos e funcionalidades específicas do seu projeto.
Adicione arquivos HTML dentro de
screens/ para representar
as diferentes partes da aplicação.
Utilize HTML, CSS e os Web Components fornecidos pela estrutura.
Organize funcionalidades específicas
através de actions.js.
Utilize APP.navigate() para
controlar a navegação e o histórico
do navegador.
Configure Manifest e Service Worker para disponibilizar sua aplicação como Progressive Web App.
A organização separa telas, componentes, lógica, estilos e recursos PWA para facilitar manutenção e expansão.
Contém os arquivos HTML que representam as telas da aplicação.
Contém os Web Components reutilizáveis utilizados pelas interfaces.
Núcleo responsável por inicialização, telas, navegação, histórico e integração com outros sistemas.
Centraliza as funções e comportamentos específicos da aplicação.
Organiza tema, estilos globais e estilos específicos das telas.
Reúne Manifest, instalação, Service Worker e cache.
O WebAppForge não substitui HTML, CSS ou JavaScript. Ele organiza essas tecnologias em uma estrutura própria para o desenvolvimento da aplicação.
O WebAppForge utiliza Web Components nativos para disponibilizar elementos estruturais reutilizáveis.
Container flexível com orientação vertical para organizar elementos da interface.
Container flexível com orientação horizontal para organizar elementos lado a lado.
Componente estrutural que pode ser utilizado para composição e espaçamento da interface.
Fornece a camada visual utilizada para apresentar conteúdos modais.
Componente de cabeçalho carregado através de um template HTML externo.
Barra de navegação reutilizável para controlar a navegação entre telas.
O WebAppForge possui uma estrutura voltada para Progressive Web Apps, incluindo Manifest, instalação e Service Worker.
Defina nome, ícone, cores, orientação, escopo e outras informações da aplicação.
Utilize um Service Worker para controlar cache e recursos disponibilizados localmente.
O sistema captura o evento
beforeinstallprompt quando
o navegador disponibiliza a instalação.
O Service Worker utiliza uma estratégia Cache First para os recursos que intercepta.
Você pode adaptar Manifest, arquivos pré-cacheados e comportamento às necessidades da sua aplicação.
O WebAppForge foi pensado como uma base para diferentes tipos de projetos e experiências de desenvolvimento.
Uma estrutura prática para estudar e experimentar HTML, CSS, JavaScript, Web Components e PWA em projetos reais.
Uma base reutilizável para protótipos, projetos pessoais e aplicações web.
Comece novos projetos a partir de uma estrutura já organizada e personalize-a conforme sua necessidade.
O pacote reúne o código do WebAppForge, seus componentes, estrutura PWA e documentação técnica.
A classe App e a estrutura central
responsável por inicialização, telas, navegação
e integração dos recursos.
Componentes reutilizáveis como
app-column,
app-row,
app-modal,
app-header e
app-nav-bar.
Estrutura baseada em arquivos HTML dentro
de screens/, com carregamento
dinâmico e suporte a CSS específico.
Arquivo actions.js para organizar
a lógica específica da aplicação e acessá-la
através de APP.actions.
Manifest, instalação, Service Worker, cache e estrutura necessária para trabalhar com Progressive Web Apps.
Documentação sobre arquitetura, telas, navegação, componentes, Actions, modais, CSS, PWA, Service Worker, cache, instalação e personalização.
A documentação explica como o WebAppForge funciona e mostra como criar telas, componentes e Actions, configurar PWA e publicar o projeto.
Entenda como o núcleo APP se comunica
com telas, componentes, Actions e PWA.
Aprenda a criar novas telas HTML e carregar seus estilos específicos.
Aprenda a criar e registrar seus próprios Web Components.
Organize funcionalidades específicas
utilizando actions.js.
Configure Manifest, instalação, Service Worker e cache.
Conheça os requisitos para executar e publicar a aplicação através de HTTP/HTTPS.
Tenha o WebAppForge como ponto de partida para desenvolver suas próprias aplicações web e PWA.
O WebAppForge é uma estrutura/framework para desenvolvimento de aplicações web e Progressive Web Apps utilizando HTML, CSS, JavaScript e Web Components.
Não. Ele é uma estrutura de desenvolvimento. Você continua utilizando tecnologias web convencionais como HTML, CSS e JavaScript.
Conhecimentos de HTML, CSS e JavaScript são recomendados. O WebAppForge foi desenvolvido justamente sobre essas tecnologias.
Sim. A estrutura foi desenvolvida para ser personalizada e expandida de acordo com as necessidades de cada projeto.
Sim. O WebAppForge pode ser utilizado como ponto de partida para desenvolver aplicações web e PWA personalizadas.
Sim. Você pode criar suas próprias funções
em actions.js e acessá-las através
de APP.actions.
Sim. O WebAppForge utiliza Web Components nativos.
Você pode criar novos componentes dentro de
js/components/ e registrá-los
no projeto.
Sim. A estrutura possui Manifest, Service Worker
e sistema de instalação baseado no evento
beforeinstallprompt.
O projeto possui Service Worker e mecanismo de cache. Os recursos interceptados pelo Service Worker podem ser disponibilizados localmente conforme a configuração de cache.
A estratégia atual é Cache First: primeiro o Service Worker procura o recurso no cache e, caso não encontre, tenta buscá-lo pela rede.
Não necessariamente. Os arquivos que precisam estar disponíveis imediatamente offline devem fazer parte da configuração de recursos pré-cacheados do Service Worker.
Sim. A documentação aborda arquitetura, estrutura do projeto, inicialização, classe App, telas, navegação, Web Components, Actions, modais, CSS, PWA, Service Worker, cache, instalação, criação de telas, componentes, Actions e publicação.
Sim. De acordo com a licença do WebAppForge, as aplicações desenvolvidas utilizando a estrutura podem ser distribuídas e comercializadas. A redistribuição ou comercialização do próprio WebAppForge como produto independente possui restrições previstas na licença.
Não. O WebAppForge é uma estrutura para a camada de aplicação web e seus recursos relacionados. Serviços de backend, banco de dados, APIs, autenticação e outras funcionalidades podem ser adicionados conforme as necessidades do projeto.
Desenvolva suas próprias aplicações utilizando HTML, CSS, JavaScript, Web Components e recursos PWA a partir de uma estrutura organizada.
