Dans le monde du d\u00e9veloppement des interfaces, il existe un concept commun – “Pixel parfait dans le lodge” <\/b>. Cela implique la reproduction la plus pr\u00e9cise de la machine de conception au plus petit pixel. Pendant longtemps, c’\u00e9tait une \u00e9talon-or, en particulier \u00e0 l’\u00e8re d’une conception Web classique. Cependant, avec l’arriv\u00e9e du mile d\u00e9clarant et la croissance rapide de la vari\u00e9t\u00e9 des appareils, le principe de “Pixel parfait” devient plus \u00e9ph\u00e9m\u00e8re. Essayons de comprendre pourquoi.<\/p>\n Imperial Wysiwyg vs code d\u00e9claratif: Quelle est la diff\u00e9rence? <\/h2>\n
Traditionnellement, de nombreuses interfaces, en particulier de bureau, ont \u00e9t\u00e9 cr\u00e9\u00e9es en utilisant des approches imp\u00e9ratives ou Wysiwyg (ce que vous voyez est ce que vous obtenez) des \u00e9diteurs. Dans de tels outils, le concepteur ou le d\u00e9veloppeur manipule directement avec des \u00e9l\u00e9ments, en les pla\u00e7ant sur toile avec une pr\u00e9cision au pixel. Il est similaire \u00e0 travailler avec un \u00e9diteur graphique – vous voyez \u00e0 quoi ressemble votre \u00e9l\u00e9ment, et vous pouvez certainement le positionner. Dans ce cas, la r\u00e9alisation de “Pixel Perfect” \u00e9tait un objectif tr\u00e8s r\u00e9el.<\/p>\n
Cependant, le d\u00e9veloppement moderne est de plus en plus bas\u00e9 sur miles d\u00e9claratifs <\/b>. Cela signifie que vous ne dites pas \u00e0 l’ordinateur de “mettre ce bouton ici”, mais d\u00e9crivez ce que vous voulez obtenir. Par exemple, au lieu d’indiquer les coordonn\u00e9es sp\u00e9cifiques de l’\u00e9l\u00e9ment, vous d\u00e9crivez ses propri\u00e9t\u00e9s: “Ce bouton doit \u00eatre rouge, avoir des indentations 16px de tous les c\u00f4t\u00e9s et \u00eatre au centre du conteneur.” Freimvorki comme React, Vue, Swiftui ou Jetpack composent simplement ce principe.<\/p>\n Pourquoi “Pixel Perfect” ne fonctionne pas avec un mile d\u00e9claratif pour de nombreux appareils <\/h2>\n
Imaginez que vous cr\u00e9ez une application qui devrait \u00eatre tout aussi bonne sur l’iPhone 15 Pro Max, Samsung Galaxy Fold, iPad Pro et une r\u00e9solution 4K. Chacun de ces appareils a une r\u00e9solution d’\u00e9cran diff\u00e9rente, une densit\u00e9 de pixels, des parties et des tailles physiques.<\/p>\n
Lorsque vous utilisez l’approche d\u00e9clarative, le syst\u00e8me lui-m\u00eame d\u00e9cide comment afficher votre interface d\u00e9crite sur un appareil particulier, en tenant compte de tous ses param\u00e8tres. Vous d\u00e9finissez les r\u00e8gles et les d\u00e9pendances, pas les coordonn\u00e9es s\u00e9v\u00e8res.<\/p>\n
* Adaptabilit\u00e9 et r\u00e9activit\u00e9: <\/b> L’objectif principal des miles d\u00e9claratifs est de cr\u00e9er des interfaces adaptatives et r\u00e9actives <\/b>. Cela signifie que votre interface doit s’adapter automatiquement \u00e0 la taille et \u00e0 l’orientation de l’\u00e9cran sans se casser et maintenir la lisibilit\u00e9. Si nous cherchions \u00e0 \u00abPixel parfait\u00bb sur chaque appareil, nous devions cr\u00e9er d’innombrables options pour la m\u00eame interface, ce qui nivellera compl\u00e8tement les avantages de l’approche d\u00e9clarative.
\n* densit\u00e9 de pixels (dpi \/ ppi): <\/b> Les appareils ont une densit\u00e9 de pixels diff\u00e9rente. Le m\u00eame \u00e9l\u00e9ment avec la taille de 100 pixels “virtuels” sur un appareil \u00e0 haute densit\u00e9 sera beaucoup plus petit que sur un dispositif \u00e0 faible densit\u00e9, si vous ne prenez pas en compte la mise \u00e0 l’\u00e9chelle. Les cadres d\u00e9claratifs sont r\u00e9sum\u00e9s par des pixels physiques, en travaillant avec des unit\u00e9s logiques.
\n* Contenu dynamique: <\/b> Le contenu dans les applications modernes est souvent dynamique – son volume et sa structure peuvent varier. Si nous d\u00e9tendions durement les pixels, tout changement de texte ou d’image entra\u00eenerait “l’effondrement” de la mise en page.
\n* diverses plates-formes: <\/b> En plus de la vari\u00e9t\u00e9 des appareils, il existe diff\u00e9rents syst\u00e8mes d’exploitation (iOS, Android, Web, Desktop). Chaque plate-forme a sa propre conception, ses commandes standard et ses polices. Une tentative de faire une interface parfaite absolument identique et parfaite sur toutes les plates-formes conduirait \u00e0 un type non naturel et \u00e0 une mauvaise exp\u00e9rience utilisateur.<\/p>\n Les anciennes approches n’ont pas disparu, mais ont \u00e9volu\u00e9 <\/h2>\n
Il est important de comprendre que l’approche des interfaces n’est pas un choix binaire entre “imp\u00e9ratif” et “d\u00e9claratif”. Historiquement, pour chaque plate-forme, il y avait ses propres outils et approches de la cr\u00e9ation d’interfaces.<\/p>\n
* Fichiers d’interface natif: <\/b> Pour iOS, c’\u00e9tait XIB \/ storyboards, pour les fichiers de marquage Android-XML. Ces fichiers sont une disposition WYSIWYG parfaite avec pixel, qui est ensuite affich\u00e9e \u00e0 la radio comme dans l’\u00e9diteur. Cette approche n’a disparu nulle part, elle continue de se d\u00e9velopper, s’int\u00e9grant \u00e0 des cadres d\u00e9claratifs modernes. Par exemple, Swiftui dans Apple et Jetpack composent dans Android se d\u00e9roulent sur le chemin d’un code purement d\u00e9claratif, mais en m\u00eame temps, a conserv\u00e9 l’opportunit\u00e9 d’utiliser une disposition classique.
\n* Solutions hybrides: <\/b> Souvent dans les projets r\u00e9els, une combinaison d’approches est utilis\u00e9e. Par exemple, la structure de base de l’application peut \u00eatre mise en \u0153uvre de mani\u00e8re d\u00e9clarative et, pour un positionnement pr\u00e9cis des \u00e9l\u00e9ments, des m\u00e9thodes imp\u00e9ratives de niveau inf\u00e9rieur peuvent \u00eatre utilis\u00e9es ou des composants natifs d\u00e9velopp\u00e9s en tenant compte des sp\u00e9cificit\u00e9s de la plate-forme.<\/p>\n
Le monde des interfaces num\u00e9riques a subi d’\u00e9normes changements au cours des derni\u00e8res d\u00e9cennies. Des ordinateurs stationnaires avec des permis fixes, nous sommes arriv\u00e9s \u00e0 l’\u00e8re de la croissance exponentielle de la vari\u00e9t\u00e9 des appareils utilisateur <\/b>. Aujourd’hui, nos applications devraient fonctionner aussi bien sur:<\/p>\n * Smartphones <\/b> de tous les facteurs de forme et tailles d’\u00e9cran. Chacun de ces appareils a ses propres fonctionnalit\u00e9s uniques: dimensions physiques, rapport des parties, densit\u00e9 de pixels, m\u00e9thodes d’entr\u00e9e (\u00e9cran tactile, souris, contr\u00f4leurs, gestes, commandes vocales) et, surtout, les subtilit\u00e9s de l’environnement utilisateur <\/b>. Par exemple, un VR Shlesh n\u00e9cessite une immersion profonde, et un travail rapide et intuitif pour les smartphones en d\u00e9placement, tandis que l’interface du r\u00e9frig\u00e9rateur doit \u00eatre aussi simple et grande pour une navigation rapide.<\/p>\n \u00c0 l’\u00e8re de la domination des ordinateurs de bureau et des premiers appareils mobiles, l’activit\u00e9 habituelle \u00e9tait la cr\u00e9ation et la prise en charge de de fichiers d’interface individuels ou m\u00eame un code d’interface compl\u00e8tement s\u00e9par\u00e9 pour chaque plate-forme <\/b>.<\/p>\n * D\u00e9veloppement sous iOS <\/b> n\u00e9cessite souvent l’utilisation de storyboards ou de fichiers XIB dans Xcode, en \u00e9crivant du code sur objectif-c ou Swift. Cette approche a assur\u00e9 un contr\u00f4le maximal sur chaque plate-forme, vous permettant de prendre en compte toutes ses caract\u00e9ristiques sp\u00e9cifiques et ses \u00e9l\u00e9ments indig\u00e8nes. Cependant, il a eu un \u00e9norme inconv\u00e9nient: duplication des efforts et des co\u00fbts \u00e9normes de soutien <\/b>. Le moindre changement de conception ou de fonctionnalit\u00e9 a n\u00e9cessit\u00e9 l’introduction d’un droit \u00e0 plusieurs bases de code ind\u00e9pendantes, en fait. Cela s’est transform\u00e9 en un vrai cauchemar pour les \u00e9quipes de d\u00e9veloppeurs, ralentissant la sortie des nouvelles fonctions et augmentant la probabilit\u00e9 d’erreurs.<\/p>\n C’est en r\u00e9ponse \u00e0 cette complication rapide que les miles d\u00e9claratifs <\/b> sont apparus comme le paradigme dominant. Les framws comme react, vue, swiftui, jetpack compose <\/b> et d’autres ne sont pas seulement une nouvelle fa\u00e7on d’\u00e9crire du code, mais un changement fondamental dans la pens\u00e9e.<\/p>\n L’id\u00e9e principale de l’approche d\u00e9clarative <\/b>: Au lieu de dire que le syst\u00e8me \u00abcomment\u00bb de dessiner chaque \u00e9l\u00e9ment (imp\u00e9ratif), nous d\u00e9crivons \u00abce que\u00ab nous voulons voir (d\u00e9claratif). Nous d\u00e9finissons les propri\u00e9t\u00e9s et l’\u00e9tat de l’interface, et le cadre d\u00e9cide comment l’afficher au mieux sur un appareil particulier.<\/p>\n Cela est devenu possible gr\u00e2ce aux principaux avantages suivants:<\/p>\n 1. L’abstraction des d\u00e9tails de la plate-forme: <\/b> Les Fraimvorki d\u00e9claratifs sont sp\u00e9cialement con\u00e7us pour oublier les d\u00e9tails de bas niveau <\/b> de chaque plate-forme. Le d\u00e9veloppeur d\u00e9crit les composants et leurs relations \u00e0 un niveau d’abstraction plus \u00e9lev\u00e9, en utilisant un seul code transf\u00e9r\u00e9. Le mile d\u00e9claratif n’est pas seulement une tendance de la mode, mais l’\u00e9tape \u00e9volutive n\u00e9cessaire <\/b> caus\u00e9e par le d\u00e9veloppement rapide des appareils utilisateur, y compris la sph\u00e8re l’Internet des objets (IoT) <\/b> et les appareils de m\u00e9nage intelligents. Il permet aux d\u00e9veloppeurs et aux concepteurs de cr\u00e9er des interfaces complexes, adaptatives et uniformes, sans se noyer dans des impl\u00e9mentations sp\u00e9cifiques sans fin pour chaque plate-forme. La transition du contr\u00f4le imp\u00e9ratif de chaque pixel \u00e0 la description d\u00e9clarative de l’\u00e9tat souhait\u00e9 est une reconnaissance que dans le monde des futures interfaces devrait \u00eatre flexible, transf\u00e9r\u00e9 et intuitif <\/b> quel que soit l’\u00e9cran qu’ils sont affich\u00e9s.<\/p>\n Les programmeurs, les concepteurs et les utilisateurs doivent apprendre \u00e0 vivre dans ce nouveau monde. <\/b> Les d\u00e9tails suppl\u00e9mentaires du Pixel Perfect, con\u00e7u pour un appareil ou une r\u00e9solution particuli\u00e8re, conduisent \u00e0 des co\u00fbts de temps inutiles pour le d\u00e9veloppement et le support. De plus, de telles dispositions s\u00e9v\u00e8res peuvent tout simplement ne pas fonctionner sur des appareils avec des interfaces non standard, telles que les t\u00e9l\u00e9viseurs d’entr\u00e9e limit\u00e9s, les changements VR et AR, ainsi que d’autres appareils du futur, que nous ne connaissons m\u00eame pas aujourd’hui. Flexibilit\u00e9 et adaptabilit\u00e9 – Ce sont les cl\u00e9s de la cr\u00e9ation d’interfaces r\u00e9ussies dans le monde moderne.<\/p>\n","protected":false},"excerpt":{"rendered":" Dans le monde du d\u00e9veloppement des interfaces, il existe un concept commun – “Pixel parfait dans le lodge” . Cela implique la reproduction la plus pr\u00e9cise de la machine de conception au plus petit pixel. Pendant longtemps, c’\u00e9tait une \u00e9talon-or, en particulier \u00e0 l’\u00e8re d’une conception Web classique. Cependant, avec l’arriv\u00e9e du mile d\u00e9clarant etContinue reading “Pixel Perfect: Mythe ou r\u00e9alit\u00e9 \u00e0 l’\u00e8re de la d\u00e9clarativit\u00e9?”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49,61,52],"tags":[],"class_list":["post-4205","post","type-post","status-publish","format-standard","hentry","category-blog","category-techie","category-tutorials","entry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"fr","enabled_languages":["en","ru","zh","de","fr","ja","pt"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":true,"content":true,"excerpt":false},"zh":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"fr":{"title":true,"content":true,"excerpt":false},"ja":{"title":true,"content":true,"excerpt":false},"pt":{"title":true,"content":true,"excerpt":false}}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/4205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=4205"}],"version-history":[{"count":5,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/4205\/revisions"}],"predecessor-version":[{"id":4210,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/4205\/revisions\/4210"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=4205"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=4205"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=4205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n* tablettes <\/b> avec leurs modes d’orientation uniques et un \u00e9cran s\u00e9par\u00e9.
\n* ordinateurs portables et ordinateurs de bureau <\/b> avec divers permis de moniteurs.
\n* TVS et centres de m\u00e9dias <\/b>, contr\u00f4l\u00e9s \u00e0 distance. Il est \u00e0 noter que m\u00eame pour les t\u00e9l\u00e9viseurs, dont les remarques peuvent \u00eatre simples en tant que Apple TV Remote <\/b> avec un minimum de boutons, ou vice versa, surcharg\u00e9e de nombreuses fonctions, les exigences modernes pour les interfaces sont telles que le code ne doit pas n\u00e9cessiter une adaptation sp\u00e9cifique pour ces caract\u00e9ristiques d’entr\u00e9e. L’interface doit fonctionner “comme si elle-m\u00eame”, sans une description suppl\u00e9mentaire de ce que “comment” interagir avec une t\u00e9l\u00e9commande sp\u00e9cifique.
\n* montres intelligentes et appareils portables <\/b> avec des \u00e9crans minimalistes.
\n* Casques de r\u00e9alit\u00e9 virtuelle (VR) <\/b>, n\u00e9cessitant une approche compl\u00e8tement nouvelle d’une interface spatiale.
\n* Dispositifs de r\u00e9alit\u00e9 augment\u00e9s (AR) <\/b>, appliquant des informations sur le monde r\u00e9el.
\n* Informations automobiles et syst\u00e8mes de divertissement <\/b>.
\n* Et m\u00eame appareils m\u00e9nagers <\/b>: des r\u00e9frig\u00e9rateurs avec des \u00e9crans sensoriels et des machines \u00e0 laver avec des \u00e9crans interactifs aux fours et syst\u00e8mes intelligents de la maison intelligente.<\/p>\n Approche classique: le fardeau de soutenir les interfaces individuelles <\/h2>\n
\n* Pour Android <\/b> Les fichiers de marquage XML et le code sur Java ou Kotlin ont \u00e9t\u00e9 cr\u00e9\u00e9s.
\n* Les interfaces Web activ\u00e9es sur HTML \/ CSS \/ JavaScript.
\n* Pour les applications C ++ <\/b> sur diverses plates-formes de bureau, leurs cadres et outils sp\u00e9cifiques ont \u00e9t\u00e9 utilis\u00e9s:
\n* Dans Windows <\/b> il s’agissait de MFC (classes Microsoft Foundation), de l’API WIN32 avec des \u00e9l\u00e9ments de dessin manuel ou \u00e0 l’aide de fichiers de ressources pour les fen\u00eatres de dialogue et les \u00e9l\u00e9ments de contr\u00f4le.
\n* Le cacao (objectif-c \/ swift) ou l’ancienne API carbone pour le contr\u00f4le direct de l’interface graphique a \u00e9t\u00e9 utilis\u00e9 dans macOS <\/b>.
\n* Dans Systems de type Linux \/ Unix <\/b>, des biblioth\u00e8ques comme GTK + ou QT ont souvent \u00e9t\u00e9 utilis\u00e9es, ce qui a fourni leur ensemble de widgets et de m\u00e9canismes pour cr\u00e9er des interfaces, souvent via des fichiers de marquage de type XML (par exemple, des fichiers .UI dans le concepteur QT) ou une cr\u00e9ation de logiciels directs d’\u00e9l\u00e9ments.<\/p>\n Miles d\u00e9claratifs: une seule langue pour la diversit\u00e9 <\/h2>\n
\n2. Adaptation et r\u00e9activit\u00e9 automatique: <\/b> Freimvorki assumez la responsabilit\u00e9 de la mise \u00e0 l’\u00e9chelle automatique, de la mise en page et de l’adaptation des \u00e9l\u00e9ments <\/b> en diff\u00e9rentes tailles d’\u00e9crans, de densit\u00e9 de pixels et de m\u00e9thodes d’entr\u00e9e. Ceci est r\u00e9alis\u00e9 gr\u00e2ce \u00e0 l’utilisation de syst\u00e8mes de disposition flexibles, tels que Flexbox ou Grid, et des concepts similaires aux “pixels logiques” ou “DP”.
\n3. Coh\u00e9rence de l’exp\u00e9rience utilisateur: <\/b> Malgr\u00e9 les diff\u00e9rences externes, l’approche d\u00e9clarative vous permet de maintenir une seule logique de comportement et d’interaction <\/b> dans toute la famille des appareils. Cela simplifie le processus de test et offre une exp\u00e9rience utilisateur plus pr\u00e9visible.
\n4. Acc\u00e9l\u00e9ration du d\u00e9veloppement et r\u00e9duction des co\u00fbts: <\/b> Avec le m\u00eame code capable de travailler sur de nombreuses plateformes, est consid\u00e9rablement r\u00e9duit par le temps et le co\u00fbt de d\u00e9veloppement et de soutien <\/b>. Les \u00e9quipes peuvent se concentrer sur la fonctionnalit\u00e9 et la conception, et non sur la r\u00e9\u00e9criture r\u00e9p\u00e9t\u00e9e de la m\u00eame interface.
\n5. Pr\u00e9pit\u00e9 pour l’avenir: <\/b> La capacit\u00e9 de r\u00e9sumer des sp\u00e9cificit\u00e9s des appareils actuels rend le code d\u00e9claratif plus plus r\u00e9sistant \u00e0 l’\u00e9mergence de nouveaux types de dispositifs et de facteurs de forme <\/b>. Freimvorki peut \u00eatre mis \u00e0 jour pour prendre en charge les nouvelles technologies, et votre code d\u00e9j\u00e0 \u00e9crit recevra ce support relativement transparent.<\/p>\n Conclusion <\/h2>\n