Este fim de semana é o primeiro 2018 Philadelphia Code Camp no Microsoft Malvern AP MTC. Estou ensinando um Progressive Web App (PWA) de um dia inteiro na sexta-feira.
No sábado, estou oferecendo duas sessões, uma em Progressive Web Apps e outro na criação de um aplicativo sem servidor na AWS .
Existem mais de 60 sessões adicionais que abrangem uma ampla gama de desenvolvedores tópicos. E, as sessões de sábado são todas gratuitas e, claro,’esgotadas’.
Como a maioria, eu queria saber quando minhas sessões de sábado foram e quais outros tópicos estão sendo abordados. Então fui para a página de programação do acampamento de código . E bem, eu não fiquei nem um pouco impressionado.
Eu sei que Bill Wolff fez o seu melhor para montar uma grade de sessão funcional. Mas, como muitos sites, ele não carregou rápido o suficiente para mim e deixou um pouco de usabilidade sobre a mesa.
Confira o artigo irmão sobre como o o service worker do aplicativo trabalha
Então, me motivou.
Quer dizer, não posso reclamar se não quiser fazer algo a respeito, certo?
Então liguei para Bill e disse a ele que criaria um aplicativo da Web progressivo de programação de acampamento .
É uma coisa boa que Bill seja um bom esportista e parecia feliz por eu ter empreendido o esforço.
Foi uma coisa boa, porque eu já tinha traçado meu plano de projeto!
O que há de errado com a página de cronograma inicial?
- Lento
- É difícil para mim ler
- Sem pesquisa
- Sem filtragem
- Nenhuma maneira de salvar sua programação
- Não é HTTPS e HTTP/2
- Não é um PWA
Posso provar que foi lento?
Duh, claro que posso!
Fiz alguns testes de desempenho, Lighthouse e WebPageTest .
Acho que os problemas de desempenho que encontrei com o site foram uma combinação de um servidor adormecido e Angular .
Alguns dos’testes iniciais’Corri mostrou um tempo para o primeiro byte (TTFB) em 2 segundos. Isso é um sinal de que há problemas com o servidor.
Acho que eles precisam alterar uma configuração para mantê-lo funcionando quando há pouco ou nenhum tráfego.
Alguns outros problemas se destacaram para mim, insecure , muito JavaScript e problemas gerais de usabilidade.
A imagem da cachoeira WebPageTest mostra a lesma amarela gigante causada pelo Angular. É aqui que a página está usando JavaScript demais e cria uma grande seção de haste dourada no perfil da CPU.
Compare isso com meu PWA, que quase não tem haste dourada.
A grade de programação original não tinha recursos de filtragem ou pesquisa integrados. Basta apertar os olhos e procurar para encontrar as sessões que deseja.
Eu adicionei uma pesquisa e um filtro facetado à versão do PWA. Também é possível salvar sua programação ou sessões das quais deseja participar. Observação : isso não era funcional na versão inicial, mas será adicionado no próximo dia ou dois.
A programação original também não funciona offline.
Os recursos do Progressive Web App
O PWA de programação que criei apresenta a capacidade de pesquisar e filtrar sessões. Existem 2 tipos de página:
- página inicial
- detalhes da sessão
A página inicial apresentando toda a programação de sábado. A página de detalhes da sessão se concentra na sessão e adiciona a descrição da sessão. Existe um botão para adicioná-lo à sua programação.
A programação pessoal é mantida localmente. Os dados são persistidos em IndexedDB para que sejam acessíveis no service worker.
O menu do aplicativo é uma coleção de uma pesquisa que filtra automaticamente quando você insere o quarto caractere (preciso acionar a tecla Enter). Os títulos e corpos das sessões são usados. Se uma frase corresponder, a sessão será renderizada.
Os tempos da sessão são listados logo abaixo do campo de pesquisa. Eles são uma coleção de caixas de seleção e etiquetas decoradas. Clicar em um horário alternará seu uso na programação.
Se a hora for selecionada, uma marca de verificação verde será exibida à sua esquerda. Se não estiver marcada, um quadrado branco será renderizado. Apenas horários selecionados são usados para renderizar a lista de agendamento.
Os tempos de sessão são persistidos no BID, portanto, suas seleções são persistentes. A lista é filtrada em tempo real e renderizada imediatamente, sem carregamento de nova página.
O PWA também funciona offline, completamente, mesmo se você não tiver carregado a página. Qualquer página de sessão que não esteja no cache do service worker será composta no service worker.
Observação se você estiver usando um navegador que não forneceu suporte ao service worker, mas a funcionalidade offline dele limitado. O appcache fará com que funcione offline, mas os detalhes da sessão podem ser irregulares.
Inicialização
Se você se orgulha de seu aplicativo ao iniciar, você o iniciou tarde demais ou algo parecido é o ditado.
Meu lançamento inicial do Philly Code Camp PWA tem alguns bugs de layout e funcionalidade que preciso resolver.
A boa notícia é que tenho alguns dias para resolvê-los.
O código-fonte está disponível no GitHub. Não posso dizer que terei tempo para aceitar a solicitação de pull, mas sinta-se à vontade para clonar e bifurcar como quiser.
O PWA é um site estático, totalmente hospedado no Amazon AWS (desculpe o Azure ainda não tem a capacidade de hospedar sites estáticos). Ele usa S3, Route53, CloudFront e gerenciador de certificados AWS.
Honestamente, se custar mais de US $ 0,01 para hospedar, ficarei surpreso!
O Philly O Code Camp PWA está disponível e deve funcionar em todas as plataformas.
Esta postagem é apenas um anúncio geral. Estarei postando mais artigos e vídeos sobre como o aplicativo funciona. Eu também o usarei como uma demonstração para minhas sessões de sábado.
Meu workshop do aplicativo da Web progressivo de sexta-feira está completamente esgotado! Mas não se preocupe, você ainda pode se inscrever para o curso completo e fazê-lo online!
Aplicativos da Web progressivos do iniciante ao especialista inclui todo o conteúdo, mais de 21 horas a partir de hoje por apenas $ 29!
Mesmo se você estiver participando do meu workshop de dia inteiro, eu o encorajo a se inscrever para que possa acessar todo o conteúdo adicional e consultar os tópicos você precisa revisar.
