Apresentando o AloeStackView para iOS

Uma classe simples e de código aberto para o layout de uma coleção de visualizações com uma API conveniente.

Marli Oshlack Blocked Desbloquear Seguir Seguindo 30 de outubro de 2018 Algumas das ~ 200 telas do aplicativo Airbnb iOS construídas usando o AloeStackView.

Na Airbnb, estamos sempre procurando maneiras de melhorar a eficiência dos produtos de construção.

Nos últimos anos, nossos esforços de desenvolvimento de dispositivos móveis aumentaram em uma taxa dramática. Somente no ano passado, adicionamos mais de 260 telas ao nosso aplicativo para iOS. Ao mesmo tempo, mais e mais pessoas começaram a adotar nossos aplicativos móveis nativos. Essas tendências não mostram sinais de desaceleração.

Cerca de dois anos atrás, nos sentamos e observamos como desenvolvemos produtos no iOS para ver se havia espaço para melhorar nossa eficiência de desenvolvimento. Um grande problema que descobrimos foi que a implementação de uma nova tela em nosso aplicativo para iOS levou vários dias e, às vezes, semanas de esforço de desenvolvimento.

Então nós decidimos mudar isso. Queríamos encontrar uma maneira de construir telas mais rápido do que pensávamos. Queríamos que os engenheiros pudessem adicionar uma nova tela ao aplicativo para iOS em questão de minutos ou horas, não dias ou semanas.

Nos últimos dois anos, aprendemos muitas lições quando se trata de criar uma interface de usuário do iOS rapidamente e com um alto grau de qualidade.

Com base em alguns desses aprendizados, estamos realmente animados para apresentar uma das ferramentas que desenvolvemos na Airbnb para ajudar a escrever a interface do usuário do iOS de maneira rápida, fácil e eficiente.

Apresentando o AloeStackView

Nós começamos a usar o AloeStackView na Airbnb em nosso aplicativo para iOS em 2016 e, desde então, o utilizamos para implementar quase 200 telas no aplicativo. Os casos de uso são bastante variados: tudo, desde telas de configurações, até formulários para criar uma nova listagem, até a folha de compartilhamento de listagem.

O AloeStackView é uma classe que permite que uma coleção de visualizações seja exibida em uma lista vertical. Em um sentido amplo, é semelhante ao UITableView, mas sua implementação é bem diferente e faz um conjunto diferente de trade-offs.

O AloeStackView se concentra principalmente em tornar a interface do usuário muito rápida, simples e direta de implementar. Isso é feito de duas maneiras:

  • Ele aproveita o poder do Layout automático para atualizar automaticamente a interface do usuário ao fazer alterações nas visualizações.
  • Ele ignora alguns recursos do UITableView, como a reciclagem de visualizações, para obter uma API muito mais simples e segura.

Simplificando o desenvolvimento da interface do usuário do iOS

Uma das primeiras coisas que percebemos quando analisamos como melhorar a eficiência do desenvolvimento no iOS era quanto trabalho estava envolvido para implementar até mesmo as menores telas do aplicativo.

Acontece que as abstrações projetadas para lidar com telas grandes e complexas podem às vezes ser um fardo para telas menores, devido à sobrecarga de desenvolvimento que elas introduzem.

Frequentemente, telas menores não se beneficiam das vantagens que essas abstrações fornecem. Por exemplo, se uma interface de usuário se encaixa totalmente em uma única tela, ela não se beneficiará com a reciclagem de visualizações. No entanto, se construirmos essa tela usando uma abstração orientada para a reciclagem de visualizações, ainda teremos que pagar o preço da complexidade que essa funcionalidade adiciona à API.

Para resolver isso, começamos procurando formas mais simples de escrever telas. Uma técnica muito eficaz que encontramos foi a criação de telas usando um UIStackView aninhado dentro de um UIScrollView. Essa abordagem se tornou o alicerce sobre o qual construímos o AloeStackView.

O que torna essa técnica incrivelmente útil é permitir que você mantenha referências fortes a visualizações e altere dinamicamente suas propriedades a qualquer momento, enquanto o Auto Layout mantém automaticamente a interface do usuário atualizada.

No Airbnb, encontramos essa técnica bem adequada para telas que aceitam a entrada do usuário, como formulários. Nessas situações, geralmente é conveniente manter uma forte referência aos campos que um usuário está editando e atualizar diretamente a interface do usuário com o feedback de validação.

Outro lugar que consideramos útil para essa técnica é em telas menores, compostas de um conjunto heterogêneo de visualizações, com menos de uma tela ou duas de conteúdo. Simplesmente declarar uma lista das visualizações na interface do usuário de maneira direta, muitas vezes torna a implementação dessas telas mais rápida e fácil.

Na prática, descobrimos que um grande número de telas em nosso aplicativo para iOS se enquadra nessas categorias. A API direta e flexível do AloeStackView nos permitiu criar muitas telas de maneira rápida e fácil, tornando-a uma ferramenta útil para se ter em nossa caixa de ferramentas.

Reduzindo Erros

Outra maneira de aumentar a eficiência do desenvolvedor foi focar em tornar o desenvolvimento da interface do iOS mais fácil de ser executado corretamente. Um objetivo principal da API do AloeStackView é garantir a segurança por projeto, para que os engenheiros gastem mais tempo criando produtos e menos tempo rastreando bugs.

O AloeStackView não possui o método reloadData nem qualquer maneira de notificá-lo sobre alterações nas visualizações. Isso torna menos propenso a erros e mais fácil de depurar do que uma classe como UITableView. Por exemplo, o AloeStackView nunca pode travar devido a alterações nos dados subjacentes das visualizações que ele gerencia.

Como o AloeStackView usa o UIStackView sob o capô, ele não recicla as visualizações enquanto você rola. Isso elimina erros comuns causados por não reciclar visualizações corretamente. Ele também fornece a vantagem adicional de não precisar manter independentemente o estado das visualizações, pois o usuário interage com elas. Isso pode tornar algumas IUs mais simples de implementar e reduz a área de superfície onde os bugs podem se infiltrar.

Pesando Trade-Offs

Embora o AloeStackView seja conveniente e útil, descobrimos que não é adequado em todas as situações.

Por exemplo, o AloeStackView coloca toda a interface do usuário em uma única passagem quando a tela é carregada. Dessa forma, telas maiores podem ver um atraso antes que a interface do usuário seja exibida pela primeira vez. Portanto, o AloeStackView é mais adequado para implementar a interface do usuário com menos de uma tela ou dois de conteúdo.

Recusar a reciclagem de visualizações também é uma desvantagem: enquanto o AloeStackView é mais rápido para escrever UI e menos propenso a erros, ele não funciona tão bem e pode usar mais memória para telas mais longas do que uma classe como UITableView. Assim, classes como UITableView e UICollectionView permanecem boas escolhas para telas que contêm muitas visualizações do mesmo tipo, todas mostrando dados semelhantes.

Apesar dessas limitações, encontramos o AloeStackView adequado para um número surpreendentemente grande de casos de uso. O AloeStackView provou ser muito produtivo e eficiente para implementar a interface do usuário e nos ajudou no objetivo de aumentar a eficiência do desenvolvimento no iOS.

Mantendo o código gerenciável

Um problema que as dependências de terceiros geralmente introduzem em um aplicativo é o aumento do tamanho dos binários. Isso é algo que queríamos evitar com o AloeStackView. A biblioteca inteira tem menos de 500 linhas de código sem dependências externas, o que aumenta o tamanho dos binários para um mínimo.

Uma pequena pegada de código também ajuda de outras maneiras: torna a biblioteca mais simples de entender, mais rápida de integrar em aplicativos existentes, fácil de depurar e mais fácil de contribuir.

Outro problema que às vezes surge com dependências de terceiros é uma incompatibilidade entre a biblioteca e como seu aplicativo atualmente faz as coisas. Para atenuar esse problema, o AloeStackView coloca o mínimo possível de restrições sobre como ele é usado. Qualquer UIView pode ser usado com o AloeStackView, o que facilita a integração com os padrões que você usa atualmente para criar a interface do usuário no seu aplicativo.

Todas essas coisas se combinam para tornar o AloeStackView incrivelmente fácil e seguro de experimentar. Se estiver interessado, experimente -nos e deixe-nos saber o que pensa.

O AloeStackView não é a única infraestrutura que usamos para construir a interface do iOS no Airbnb, mas foi valioso para nós em muitas situações. Esperamos que você ache útil também!

Começando

Estamos muito animados para compartilhar o AloeStackView. Se você quiser saber mais, visite o repositório do GitHub para começar.

Gostaríamos muito de saber se você ou sua empresa acharam essa biblioteca útil. Se quiser entrar em contato, envie um e-mail para os mantenedores (você pode nos encontrar no GitHub ), ou entre em contato pelo e- mail aloestackview@airbnb.com .