Tais Rocha
Tais Rocha21/08/2023 19:56
Compartilhe

Storyboard, xib ou view code? (UIKit)

  • #Swift

E aí pessoal!

(não irei abordar SwiftUI neste tópico pois ainda não possuo familiaridade com o framework)

Quando estamos lidando com o UIKit, que é o framework da Apple anterior ao SwiftUI (porém ainda muito utilizado nacionalmente), temos 3 diferentes maneiras de construir a interface do nosso aplicativo: Storyboard, xib e viewcode. As três maneiras podem ser utilizadas para definição de elementos de layout tanto em relação a view controller quanto em relação aos componentes separadamente (UITextField, UIImageView, tableView header, etc.). Vamos entender cada uma delas de forma bem resumida para compreendermos qual é a melhor forma de construirmos o layout do nosso app.

1. Storyboard:

Conceito: Dentro de um arquivo .storyboard no Xcode, podemos construir vários layouts de tela de forma totalmente visual e rápida. No storyboard, você consegue adicionar botões, imagens, caixas de texto, alterar fontes, tamanhos, cores, etc.

👎 Desvantagens:

 - Por trás das telas visuais, existe uma base de código única (código xml), e isso é um problema pois toda vez que você quiser editar uma tela, o processador terá que renderizar todas as telas, fazendo com que o Xcode fique lento ou até mesmo trave;

- Dificulta o code review, pois é o código xml que irá aparecer para revisão e ele não é human friendly/bom de ler;

- Dificulta a gestão de alterações nas telas em ferramentas de versionamento (git), pois todas as alterações de diferentes equipes serão feitas na mesma base de código;

- Não é possível reutilizar views como componentes.

2. Xib:

Conceito: Arquivo .xib possui a mesma forma de construir layout que o storyboard (arrastando elementos e visualizando a construção). A única diferença é que para cada view controller/view, terá um arquivo .xib dedicado.

👍 Vantagens:

- Não possui uma base de código única para todas as telas, cada tela tem a sua própria e isso remove as desvantagens de gestão de git e lentidão do Xcode.

👎 Desvantagens:

- Possui o mesmo problema em relação ao code review citado no Storyboard;

- Dificulta a utilização de design system no caso de aplicativos mais maduros que ja tenham regras estabelecidas e específicas de cores, fontes, tamanhos, etc. 

3. View Code:

Conceito: Você pode determinar os elementos de layout do seu aplicativo através de código. Aqui, não usamos mais storyboard nem xib, e, portanto, não conseguimos acompanhar de forma instantânea e visual os elementos de layout que estamos definindo para o nosso aplicativo, para vermos como nossa interface está ficando precisamos rodar o aplicativo. As possibilidades de aplicação de elementos de layout também são muito maiores do que as oferecidas no painel de atributos pertencentes ao xib e storyboard, ampliando as opções de design.

👍 Vantagens:

- Facilidade em adotar um design system (padronização de cores, fontes, espaçamentos, etc.);

- Facilidade no code review por estar em linguagem swift e não em xml;

- Facilita a reutilização de componentes;

- Aumenta o conhecimento sobre os elementos nativos.

👎 Desvantagens:

- É necessário um maior conhecimento de programação e linguagem para utilizar o view code, uma vez que tudo será feito programaticamente;

- Um ponto de atenção é em relação ao tamanho do código, uma vez que dependendo da tela o código terá muitas linhas, sendo necessário componentizar os elementos UI.

E qual é o melhor?

Depende, rs.

O ideal é nunca utilizar storyboard em razão de suas desvantagens problemáticas.

Caso esteja começando e/ou em uma equipe pequena de baixa senioridade, o xib é uma alternativa interessante por ser rápido, seguro, visual e possuir poucas desvantagens.

No entanto, o mais recomendado mesmo é, sem dúvida, o view code. Perfeito para equipes maiores e para empresas que querem ter maior controle sobre sua identidade visual através do aplicativo.

Compartilhe
Comentários (1)

TO

Tiago Oliveira - 21/08/2023 20:16

muito bom, traga mais conteúdos como este para comunidade!