C’est bon, tu as eu le temps de faire une petite pause avant de continuer ?
Ce que je te propose c’est qu’on puisse voir ensemble comment améliorer le code que tu as fait pour les 4 tickets.
Allez c’est parti !
Il existe plusieurs façons de rendre son code encore mieux. D’ailleurs, ça veut dire quoi mieux ? Lorsqu’on parle d'améliorer le code, on cherche à l’optimiser d’un point de vue :
1. machine
L’objectif d’un code optimisé est qu’il soit plus rapide à s'exécuter et qu’il prenne le moins d'énergie possible à la machine.
2. humain
L’objectif est le même car on veut qu’il soit facilement lisible et compréhensible par l’humain afin de gagner en temps et en énergie.
L’optimisation côté matériel est potentiellement plus complexe, commençons déjà par optimiser l’organisation du code.
Créez votre premier composant
La première amélioration et la plus simple que vous pouvez faire, c’est en cherchant les répétitions. Une vue qui se répète c’est du code qui peut être optimisé.
Par exemple, lorsque vous créez un composant Text, vous n’avez pas à recoder tout ou à préciser tout. Vous avez déjà une taille, une police, tout est choisi pour une utilisation simple et potentiellement en une seule ligne.
Vous allez faire pareil !
Écran présentant des éléments répétés
En regardant cet écran, quel élément se répète ?
Vous devriez en voir 4 :
Les dates
Les métiers
Les nationalités
Les réussites
Le plus intéressant à voir ici c’est sûrement les réussites.
Voyons ensemble comment créer un composant pour représenter ces 2 champs :
Créez dans un nouveau fichier qui contient une nouvelle vue de type View que vous appellerez BubbleView.
Dans cette nouvelle vue, répétez le code que vous aviez dans ContentView.
Pour le moment, remplacez le contenu à afficher par une valeur en dur.
Remplacez le code de ContentView que vous avez copié par l’appel à la structure BubbleView.
Désormais dans votre projet, vous avez un composant BubbleView que vous pouvez appeler partout ou vous le souhaitez sans avoir à tout réécrire à chaque fois !
Rendez le composant réutilisable
Bon, vous commencez à connaître la chanson.
Actuellement vous affichez 2 fois exactement la même vue.
Tout comme ContentView dans le chapitre précédent, votre composant n’est pas réutilisable facilement en l'état car son code n’est pas dynamique.
Voici les étapes pour y arriver :
Ajoutez une variable “titre” de type String à votre BubbleView.
Remplacez le champ texte du body en dur par la variable que vous venez de créer.
Ajoutez une valeur d’exemple en paramètre de l’appel à BubbleView dans la preview.
Ajoutez la valeur de la réussite en paramètre de l’appel à BubbleView dans la boucle des réussites de “ContentView”.
Simplifiez la compréhension de votre code
Une autre approche pour optimiser votre code, c’est d’essayer de le découper pour qu’il soit plus facile à lire et à comprendre.
Il y a autant de façons de segmenter du code que de personnes qui font du développement. Malgré tout, vous pouvez suivre quelques règles.
Une des plus simples, c’est de regrouper ce qui va visuellement ensemble. Par exemple, vous pouvez vous servir des stacks pour délimiter des bouts de code ou tout simplement découper votre interface en plusieurs grandes parties.
Sur l'écran de détail, on pourrait par exemple faire une nouvelle vue qui contiendrait le nom et les dates :
Vue contenant nom et dates
On pourrait la nommer TitleView car c’est l’encart qui contient le titre de notre page.
Sur l’écran de la liste, il y a clairement une vue qui se répète puisque c’est le principe d’une boucle dans un composant List. Ce sont nos cellules :
Liste composée de cellules
Une bonne pratique est donc de faire de votre cellule, une vue à part qui sera appelée dans la boucle.
Aujourd’hui, cette vue n’est utilisée que dans la page du listing. Le fichier ne comporte pas beaucoup de lignes, et notre future vue n’en contiendra pas non plus beaucoup.
Il est donc possible de ne pas créer un nouveau fichier, mais de rajouter la déclaration d’une nouvelle vue directement dans le même fichier.
Voyons où et comment le faire ensemble :
Voici les étapes :
Déclarez une nouvelle structure View entre ListingView et #Preview.
Nommez-la CellView.
Déplacez le code qui se trouve dans le label du NavigationLink et qui représente le contenu de la cellule pour le mettre dans le body de votre nouvelle vue.
Déclarez une variable femme de type Femme dans la nouvelle structure pour la rendre dynamique.
Appelez CellView avec son paramètre femme là où se trouvait le code que vous avez déplacé à l’étape 3.
Restreignez l'accès à vos éléments
À la dernière réunion des développeurs iOS de l’entreprise à laquelle vous avez participé, un point d’honneur était remonté mais vous n’aviez pas tout compris. Pour des questions de sécurité et de compréhension du code, il a été demandé à tout le monde de faire plus attention aux access control.
Mais concrètement, ça veut dire quoi ?
Même si vous avez écrit le code de la cellule dans le fichier ListingView , la structure reste accessible partout dans le projet.
En effet, il est possible de restreindre ou d’ouvrir l'accès de certaines variables, fonctions ou de certaines structures. On appelle cela l’access control.
Concrètement, quelqu’un qui travaille sur un fichier pourrait voir ses variables modifiées par un autre s’il ne les protège pas.
Il existe 4 access control en Swift :
1. open ou public
C’est le plus grand niveau d'accès. Il permet de retirer toutes les barrières et rendre votre code accessible à l'extérieur du projet pour des cas spécifiques. Par exemple, si vous utilisez un projet à l'intérieur d’un autre projet.
Pas très utile pour vous ici.
2. internal
C’est celui par défaut. Si vous ne précisez rien, c’est avec ce niveau d'accès qu’Xcode va l'interpréter. Il permet l’accessibilité du code depuis tout le projet.
Actuellement toutes vos variables et structures sont donc accessibles dans tout le projet.
3. fileprivate
Son nom est assez explicite car il restreint l’utilisation du code uniquement dans le fichier dans lequel il a été déclaré.
Si vous déclarez BubbleView en fileprivate, vous ne pourrez pas l’utiliser dans ContentView. Donc inutile de faire ce changement.
En revanche, vu que la structure CellView est utilisée uniquement dans le fichier ListingView, vous pouvez la rendre fileprivate en l’ajoutant en début de la ligne de la déclaration, donc avant le mot-clé struct.
4. private
C’est le niveau le plus restrictif. Il permet de réduire l’utilisation du code au scope dans lequel il est.
Par exemple, si vous êtes dans une fonction et que vous y déclarez une variable en private, celle-ci ne sera accessible qu'à l'intérieur de la fonction.
Vous ne pouvez pas l’utiliser ici pour la déclaration de la variable femme dans la structure CellView car vous l’utilisez dans l’appel de celle-ci dans ListingView.
Mais vous pouvez le rajouter à la déclaration de la variable listFemmes dans la structure de listing car c’est le seul endroit où on l’appelle.
Cette étape permet d’expliciter où et comment utiliser votre code. C’est une manière de le sécuriser et faciliter sa compréhension.
À vous de jouer
Contexte
Comme vous commencez à prendre en autonomie, Samira vous propose un petit défi :
Pour le POC 2, il serait judicieux de refaire les mêmes optimisations de code que ce que nous avons vu ensemble. C’est-à-dire les BubbleViews et les cellules de la liste. Il n’y aura qu'à faire un copier-coller.
Mais, j’aimerais que tu fasses une autre optimisation avec du code qui se répète.
Tu l’as trouvé ?
Oui ce sont les petites cartes :
Cartes d’informations à créer
Fais ce qu’il faut pour qu’elles soient dynamiques. Pense bien à regarder ce qui change sur chacune des cartes pour en faire des variables.
Je te laisse avancer et on corrige ensemble.
Consignes
Vous devrez créer une nouvelle structure de type View pour les cartes d’informations. Voici les étapes :
Identifiez le code qui se répète et qui constitue une carte.
Créez une nouvelle structure de type View dans un nouveau fichier afin d'alléger le nombre de lignes de code de la vue ContentView. Vous la nommerez “CardView”.
Déplacez le code qui se répète dans votre nouvelle vue.
Rendez le code dynamique afin de pouvoir l’utiliser plusieurs fois avec des cas différents. Vous devriez avoir 3 variables dans votre nouvelle vue :
content pour le contenu écrit sous forme de tableau de chaînes de caractères.
pictoName pour le nom du pictogramme en chaîne de caractères.
width pour la largeur des cartes en CGFloat.
Utilisez votre nouvelle vue :
Adaptez le code de la preview en conséquence.
Remplacez le code déplacé, par l’appel de la structure que vous venez de créer.
Vous ne devriez pas avoir à changer les access controls ici.
En résumé
Un code optimisé c’est avant tout un code facile à lire.
Éviter les répétitions et découper son code en plusieurs structures, c’est la base d’un code optimisé.
Vous pouvez créer autant de vues que vous le souhaitez, qu’elles soient dynamiques ou non.
Il existe plusieurs niveaux de restriction d'accès pour vos variables, fonctions et structures en Swift : open / public, internal, fileprivate, private
Si vous arrivez à prendre de bonnes habitudes de découpage de code dès maintenant vous aurez fait un grand pas dans le monde des développeurs !
Mais ce n’est pas fini, Samira vous propose d’aller encore plus loin, on y va ?
