1 pièce(s) jointe(s)
React Native 0.63 s'accompagne d'une amélioration de LogBox
Le framework pour le développement des applications mobile React Native 0.63 s'accompagne d'une amélioration de LogBox,
pour un débogage d'erreur plus facile
Développé par Facebook, React Native est un framework de développement d’applications mobiles basé sur la librairie web React et utilise le langage de programmation JavaScript. Sa particularité est qu’il permet de développer et déployer simultanément votre application pour les plateformes iOS et Android avec une base de code unique.
Dans sa version React Native 0.63, le framework s'accompagne d'une mise à jour de LogBox. LogBox répond aux plaintes selon lesquelles les erreurs et les avertissements étaient trop verbeux, mal formatés ou inutilisables en se concentrant sur trois objectifs principaux :
- Concis : les journaux doivent fournir le minimum d'informations nécessaires pour déboguer un problème.
- Formaté : les journaux doivent être formatés afin que vous puissiez trouver rapidement les informations dont vous avez besoin.
- Actionnable : les journaux doivent être actionnables, afin que vous puissiez résoudre le problème et continuer.
Pour atteindre ces objectifs, LogBox comprend:
- Des notifications de journal : l'équipe a repensé les notifications d'avertissement et ajouté la prise en charge des erreurs afin que tous les messages console.warn et console.log apparaissent sous forme de notifications au lieu de couvrir votre application.
- Des cadres (frames) de code : chaque erreur et avertissement comprend désormais un cadre de code qui affiche le code source du journal directement dans l'application, vous permettant d'identifier rapidement la source de votre problème.
- Des piles de composants : toutes les piles de composants sont désormais supprimées des messages d'erreur et placées dans leur propre section avec les trois cadres supérieurs visibles. Cela vous donne un espace unique et cohérent pour vous attendre à des informations de trame de pile qui n'encombrent pas le message du journal.
- Une réduction du cadre (frame) de la pile: par défaut, l'outil réduit désormais les cadres de la pile des appels non liés au code de votre application afin que vous puissiez voir rapidement le problème dans votre application et ne pas passer au crible les éléments internes React Native.
- Formatage des erreurs de syntaxe : l'équipe a amélioré le formatage des erreurs de syntaxe et ajouté des cadres de code avec mise en évidence de la syntaxe afin que vous puissiez voir la source de l'erreur, la corriger et continuer à coder sans que React Native ne vous gêne.
Avec ce changement, l'équipe déconseille également YellowBox au profit des API LogBox:
- LogBox.ignoreLogs(): cette fonction remplace YellowBox.ignoreLogs([]) comme un moyen de désactiver tous les journaux qui correspondent aux chaînes ou expressions régulières données.
- LogBox.ignoreAllLogs(): cette fonction remplace console.disableYellowBox comme moyen de désactiver les notifications d'erreur ou d'avertissement. Remarque: cela désactive uniquement les notifications, les erreurs non détectées ouvriront toujours une LogBox en plein écran.
Pressable
React Native est conçu pour permettre aux applications de répondre aux attentes des utilisateurs de la plateforme. Cela implique d'éviter les « récits » - de petits éléments qui révèlent que l'expérience a été créée avec React Native. Une des principales sources de ces récits a été les composants Touchable : Button, TouchableWithoutFeedback, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback et TouchableBounce. Ces composants rendent votre application interactive en vous permettant de fournir un retour visuel aux interactions des utilisateurs. Cependant, comme ils incluent des styles et des effets intégrés qui ne correspondent pas à l'interaction de la plateforme, les utilisateurs peuvent savoir quand les expériences sont écrites avec React Native.
De plus, comme React Native a grandi et que la barre pour les applications de haute qualité a augmenté, ces composants n'ont malheureusement pas suivi cette évolution. React Native prend désormais en charge des plateformes telles que le Web, le desktop et la télévision, mais la prise en charge de modalités d'entrée supplémentaires faisait défaut. React Native doit prendre en charge des expériences d'interaction de haute qualité sur toutes les plateformes.
Pour résoudre ces problèmes, l'équipe a lancé un nouveau composant de base appelé Pressable. Ce composant peut être utilisé pour détecter différents types d'interactions. L'API a été conçue pour fournir un accès direct à l'état actuel de l'interaction sans avoir à maintenir l'état manuellement dans un composant parent. Il a également été conçu pour permettre aux plateformes d'étendre ses capacités pour inclure le survol, le flou, la mise au point, etc. L'équipe s'attend à ce que la plupart des gens construisent et partagent des composants en utilisant Pressable sous le capot au lieu de compter sur l'expérience par défaut d'éléments comme TouchableOpacity.
Ci-dessous, un exemple du composant Pressable en action :
Code:
1
2
3
4
5
6
7
8
9
10
11
| import { Pressable, Text } from 'react-native';
<Pressable
onPress={() => {
console.log('pressed');
}}
style={({ pressed }) => ({
backgroundColor: pressed ? 'lightskyblue': 'white'
})}>
<Text style={styles.text}>Press Me!</Text>
</Pressable>; |
Couleurs natives (PlatformColor, DynamicColorIOS)
Chaque plateforme native a le concept de couleurs définies par le système. Couleurs qui répondent automatiquement aux paramètres de thème du système tels que le mode clair ou foncé, aux paramètres d'accessibilité tels que le mode contraste élevé et même à son contexte dans l'application, tels que les traits d'une vue ou d'une fenêtre contenant.
Bien qu'il soit possible de détecter certains de ces paramètres via l'API Appearance et/ou AccessibilityInfo et de définir vos styles en conséquence, ces abstractions sont non seulement coûteuses à développer, mais ne font qu'approcher l'apparence des couleurs natives. Ces incohérences sont particulièrement visibles lorsque vous travaillez sur une application hybride, où les éléments React Native coexistent à côté des éléments natifs.
React Native fournit désormais une solution prête à l'emploi pour utiliser ces couleurs système. PlatformColor() est une nouvelle API qui peut être utilisée comme n'importe quelle autre couleur dans React Native.
Par exemple, sur iOS, le système fournit une couleur appelée labelColor. Elle peut être utilisée dans React Native avec PlatformColor comme ceci:
Code:
1
2
3
4
5
| import { Text, PlatformColor } from 'react-native';
<Text style={{ color: PlatformColor('labelColor') }}>
This is a label
</Text>; |
Android, d'autre part, fournit des couleurs comme colorButtonNormal. Vous pouvez utiliser cette couleur dans React Native avec:
Code:
1
2
3
4
5
6
7
8
| import { View, Text, PlatformColor } from 'react-native';
<View
style={{
backgroundColor: PlatformColor('?attr/colorButtonNormal')
}}>
<Text>This is colored like a button!</Text>
</View>; |
DynamicColorIOS est une API qui cible uniquement iOS et qui vous permet de définir la couleur à utiliser en mode clair et sombre. Semblable à PlatformColor, elle peut être utilisée partout où vous pouvez utiliser des couleurs. DynamicColorIOSutilise colorWithDynamicProvider d'iOS sous le capot.
Code:
1
2
3
4
5
6
7
8
9
10
| import { Text, DynamicColorIOS } from 'react-native';
const customDynamicTextColor = DynamicColorIOS({
dark: 'lightskyblue',
light: 'midnightblue'
});
<Text style={{ color: customDynamicTextColor }}>
This color changes automatically based on the system theme!
</Text>; |
Suppression de la prise en charge d'iOS 9 et de Node.js 8
Après plus de quatre ans depuis sa sortie, l'équipe a décidé d'abandonner la prise en charge d'iOS 9. Selon elle, cette modification lui permettra d'aller plus vite en étant en mesure de réduire le nombre de vérifications de compatibilité qui doivent être placées dans le code natif pour détecter si une fonctionnalité donnée était prise en charge sur une certaine version iOS. Avec sa part de marché de 1 %, il ne devrait pas avoir beaucoup d'impact négatif sur vos clients.
Dans le même temps, elle a décidé d'abandonner la prose en charge de Node.js 8. Son cycle de maintenance LTS a expiré en décembre 2019. Le LTS actuel est le Node.js 10 et c'est maintenant la version que l'équipe vise. Si vous utilisez toujours Node 8 pour le développement d'applications React Native, vous êtes encouragés à effectuer une mise à niveau afin de recevoir tous les derniers correctifs et mises à jour de sécurité.
De plus, React Native 0.63 a été modifié pour se conformer à la nouvelle exigence d'Apple selon laquelle « toutes les applications soumises à l'App Store doivent utiliser un storyboard Xcode pour fournir l'écran de lancement de l'application et toutes les applications iPhone doivent prendre en charge tous les écrans iPhone ». Cela s'applique depuis le 30 avril.
Source : React Native
Et vous ?
:fleche: Utilisez-vous un framework pour développer vos applications mobiles ou préférez-vous vous en passer ?
:fleche: Si vous en utilisez un, lequel est-ce ? L'avez-vous choisi ou votre entreprise vous l'a-t-il imposé ?
:fleche: Quels seraient, selon vous, les avantages d'un framework sur du natif et vice-versa ? Lequel des deux a votre préférence ? Dans quelle mesure ?
:fleche: Que pensez-vous de React Native ?
:fleche: Quels sont les éléments apportés par la nouvelle version qui vous intéressent le plus ?
Voir aussi :
:fleche: La version 0.62 de React Native, un framework d'applications mobiles open source, est disponible, et inclut Flipper, un outil pour le débogage des applications mobiles
:fleche: Flutter, le framework UI de Google, serait-il meilleur que React Native de Facebook pour le développement d'applications multiplateformes ?
:fleche: Facebook publie en open source Hermes, un moteur JavaScript léger optimisé pour exécuter React Native sur Android
