
Et ça y est le web2day touche Ă sa fin. 3 jours qui sont passĂ©s comme chaque annĂ©e Ă une grande vitesse, pour faire dans lâoriginal
Chez DevToBeCurious, vous le savez maintenant, nous aimons autant pousser un langage pour dĂ©couvrir ses nouveautĂ©s, ou ses particularitĂ©s, nous aimons aussi dĂ©couvrir toujours plus dâoutils, de langages, de frameworks.
Et cette annĂ©e encore, on a reçu de beaux cadeaux (et câest mĂȘme pas encore noĂ«l).
Des précompilateurs, des frameworks
Ca fait plusieurs mois quâon se prĂ©pare chez Dev to be curious pour dĂ©couvrir les concurrents dâAngular. Nous vous avions dâailleurs prĂ©sentĂ© un framework bien sympa : Quasar, avec Vue.js.
NuxtJs, un framework pour Vue.js
Nous avons lâopportunitĂ© dâavoir une confĂ©rence faite par le crĂ©ateur de Nuxt.js : un framework utilisant Vue.js.
Son but, tout comme Quasar, câest de dĂ©velopper des applications universelles, avec du javascript.
Et la prĂ©sentation nous a donnĂ© bien envie dâaller nous pencher plus en dĂ©tail sur ce framework, et le comparer avec Quasar.
React native
Ce framework permet de faire des applications mobiles, avec du React ! Pour les fans de React, câest sĂ»r, câest lâidĂ©al.
Nous avons des retours dâexpĂ©riences pour lâutilisation de ce moteur, dans la crĂ©ation dâapplications mobiles.
En rĂ©sumĂ©, nous avons la crĂ©ation pour une mĂȘme application de :
– un projet android
– un projet xcode
– un projet react / js
Et il existe des bridges qui permettent de faire la conversion entre le code natif React Js vers le code natif de lâOS (android ou iPhone).
A priori, de ce que nous avons retenu, câest un bon outil qui tient ses promesses Ă plus de 90%.
Cependant, quelques problÚmes ont été relevés durant les conférences autour de React native :
– quand problĂšme : par moment, avoir les 3 compĂ©tences react / android / ios
– perfs dĂ©cevantes sous android : si code mal ecrit : ça se ressent bcp sous android (react native a Ă©tĂ© fait de base pour ios ?).
De plus, le temps de chargement js s’ajoute au temps de chargement de l’appli.
(aller voir l’idĂ©e de webpack : dĂ©couper le chargement des fichiers, suivant les besoins)
– api dĂ©cevantes : react navigation tente de corriger les problemes
– problĂšmes de montĂ©es en version : on multiplie par 3 les prob
en plus, dépendant de babel (exemple quand on est passé à Babel 7)
– certains moments : environnement pas stable
Son concurrent : Flutter
VoilĂ quelques semaines, nous nous Ă©tions fixĂ©s comme challenge dâinstaller Flutter. Lâinstallation sâĂ©tait avĂ©rĂ©e un peu douloureuse ⊠surtout durant lâinstallation des extensions, et de lâinstallation dâAndroid Studio.
Cependant, en comparaison de React Native, une autre confĂ©rence nous a confirmĂ© que, une fois passĂ© le cap quâon code en dart, lâexpĂ©rience de dĂ©veloppement avec Flutter est beaucoup plus agrĂ©able.
Si lâon devait mettre en place match entre les deux plateformes, selon le speaker que lâon a vu, câest bien Flutter qui gagnerait, pour ces raisons :
– câest mieux pensĂ© pour une application de base, pour des pocs, pour une application startup
– ca va de paire : il existe dĂ©jĂ de nombreux composants prĂ©créés pour nous
– les performances seraient meilleures que React native
– la prise en compte de tout le workflow de dĂ©veloppement se passe vraiment bien (intĂ©gration dâoutils dĂ©jĂ prĂ©vus, propre Ă Flutter)
La dĂ©couverte dâun nouveau monde CSS
Chez Dev to be curious, nous adorons le web, bootstrap, le js, les frameworks javascript (Vue.js, React et Angular), le css 3, âŠ
Et pourtant durant la conférence sur la rétrospective du CSS, nous avons pris une claque !
Nous avons dĂ©couvert tout un monde nouveau, qui sâoriente de plus en plus vers du DEVoCSS que tu CSS pur.
Vous connaissez sans doute LESS, SASS.
Nous avons découvert un monde web du cÎté intégration HTML/CSS extraordinaire :
post css
nanocss
design tokens
emotion
Des concepts, des bonnes pratiques
Améliorer les notifications de nos applications
Aujourdâhui, nous recevons tellement de notifications que cela devient une souffrance. Nous subissons ces sollicitations, et donc on fait comme si nous devions les accepter.
Rappelons ici une stat annoncĂ©e par le confĂ©rencier : 71% des utilisateurs dĂ©sinstallent app Ă cause notifs. Câest Ă©norme !
Le conférencier nous a apporté des notions essentielles pour mieux notifier :
- Cherchez Ă nâutiliser que 16 mots : une sorte de ligne directrice
- Ne notifier que quand câest essentiel et nĂ©cessaire (les infos de mise Ă jour auto du serveur ne servent Ă rien)
- Notifier par rapport Ă un contexte (sâil pleut par exemple, ne pas me demander de sortir pour jouer Ă un jeu type RĂ©alitĂ© augmentĂ©e)
- Personnaliser au plus possible les messages
- Regrouper par mĂȘme type de message, plutĂŽt que de polluer par info reçu du serveur
- Changer les styles suivant les notification
- Choisir le moment adĂ©quat : mercredi, samedi dimanche sont les jours Ă priori les plus attendus (au risque de ne pas ĂȘtre lues ?)
Enfin, il est important de laisser une sensation de contrĂŽle Ă lâutilisateur sur les notifications quâil va recevoir :
- pouvoir choisir quand il va les recevoir
- dĂ©cider sâil veut ou non les recevoir
- et surtout que lâaccĂšs Ă ce paramĂ©trage ne soit pas complexe, pas dĂ©courageant
Un exemple pour finir :
Lorsque nous nous inscrivons depuis une application mobile, souvent nous recevons une notification de rĂ©ception dâemail pour valider notre compte.
Mieux vaut Ă©viter et temporiser 15-20 minutes plus tard ! Ainsi lâexpĂ©rience de dĂ©couverte de lâapplication nâest pas cassĂ©e.
Penser micro-intéractions
Enfin, nous nous arrĂȘterons sur la notion de UX par micro-intĂ©raction. A mettre en opposition avec les macro-intĂ©ractions.
Pourquoi il est intĂ©ressant dây penser ?
Ici, micro-intéraction rime avec composant !
Et dans le monde du web, tout sâoriente vers les Web Component : HTML, et les applications SPA.
Câest le POC : Programmation OrientĂ© Composant.
Â
Gardons ici la notion de brique de lego.
5 grandes étapes permettent de créer des micro-intéractions, nous rappelle le speaker :
– signal : ce qui dĂ©clenche lâintĂ©raction.
– regles : elles doivent ĂȘtre comprĂ©hensibles
– feedback : gĂ©nĂ©rer dopamine, chercher le positif
– boucles et mode : revenir sur la micro interaction X fois (si on revient plusieurs fois sur la meme : on reduit la taille, on la stop ?
– personnalitĂ© : chercher Ă construire un produit comme une personne (voice and tone) => branding cards
Pour les concevoir, nous pourrons utiliser :
– principle for mac
– framerx
Tellement de trÚs bonnes conférences à cette session 2019 du Web219 !
Nous avons beaucoup appris, beaucoup Ă©changĂ©. Une trĂšs grande hĂąte pour celui de lâannĂ©e prochaine !
A trĂšs vite !