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.