{"id":212558,"date":"2021-12-02T13:59:45","date_gmt":"2021-12-02T12:59:45","guid":{"rendered":"https:\/\/blog.jetbrains.com\/kotlin\/2021\/12\/compose-multiplatform-1-0-is-going-live\/"},"modified":"2021-12-13T11:17:22","modified_gmt":"2021-12-13T10:17:22","slug":"compose-multiplatform-1-0-est-pret","status":"publish","type":"kotlin","link":"https:\/\/blog.jetbrains.com\/fr\/kotlin\/2021\/12\/compose-multiplatform-1-0-est-pret\/","title":{"rendered":"Compose Multiplatform 1.0 est pr\u00eat !"},"content":{"rendered":"\n<p>Compose Multiplatform, le framework d\u00e9claratif d&#8217;interface utilisateur pour Kotlin con\u00e7u par JetBrains, est disponible en version 1.0, ce qui signifie qu&#8217;il est peut maintenant \u00eatre utilis\u00e9 en production&nbsp;! Voici quelques-unes des fonctionnalit\u00e9s cl\u00e9s de ce framework :<\/p>\n\n\n\n<ul><li><a href=\"#desktop\" class=\"ek-link\">Sur desktop<\/a>, il est maintenant possible de cr\u00e9er des applications Kotlin avec des interfaces esth\u00e9tiques rapidement et efficacement.<\/li><li><a href=\"#web\" class=\"ek-link\">Pour le web<\/a>, vous pouvez maintenant cr\u00e9er des exp\u00e9riences web dynamiques et de qualit\u00e9 en utilisant l&#8217;API DOM stable de Compose for Web, qui est interop\u00e9rable avec toutes les API de navigateur. La prise en charge des widgets pour Material UI sera disponible dans une future version.<\/li><li>Globalement, <a href=\"#sharing\" class=\"ek-link\">le partage de connaissances et de code<\/a> entre les diff\u00e9rentes plateformes (y compris Android, en utilisant la compatibilit\u00e9 avec Jetpack Compose par Google) est maintenant beaucoup plus simple.<\/li><\/ul>\n\n\n\n<p>Examinons ces points un par un.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Compose Multiplatform 1.0 Goes Live!\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JKjN5mmnSX0?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p align=\"center\"><a class=\"ek-link jb-download-button\" title=\"CTA\" href=\"https:\/\/www.jetbrains.com\/lp\/compose-mpp\/\" target=\"_blank\" rel=\"noopener\">Visiter le site web<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"desktop\">Interface Utilisateur Kotlin pour Desktop<\/h2>\n\n\n\n<p>Auparavant, si vous vouliez cr\u00e9er une interface utilisateur pour votre application de bureau Kotlin, vous deviez utiliser les frameworks d&#8217;interface Java traditionnels, car aucune biblioth\u00e8que Kotlin n&#8217;offrait un style de d\u00e9veloppement d&#8217;interface pour bureau moderne. Nous y avons rem\u00e9di\u00e9 \u00e0 cela avec Compose Multiplatform. Voyons comment ce framework am\u00e9liore l&#8217;exp\u00e9rience d&#8217;\u00e9criture d&#8217;interfaces utilisateur pour les applications Kotlin.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Approche d\u00e9clarative de la cr\u00e9ation d&#8217;interfaces utilisateur<\/h3>\n\n\n\n<p>Compose Multiplatform \u00e9tant d\u00e9claratif, votre code refl\u00e8te la structure de l&#8217;interface de votre application. Vous n&#8217;avez donc pas \u00e0 vous soucier d&#8217;\u00e9l\u00e9ments tels que la copie des donn\u00e9es d&#8217;un mod\u00e8le dans la vue ou le d\u00e9veloppement de la logique d&#8217;actualisation de l&#8217;interface. Le framework s&#8217;occupe de tout cela \u00e0 votre place et le d\u00e9veloppement d&#8217;interfaces utilisateur devient un v\u00e9ritable plaisir. Dans cet exemple, le contenu de la balise <code>Text<\/code> sera mis \u00e0 jour une fois le contenu de <code>TextField<\/code> modifi\u00e9, sans code suppl\u00e9mentaire :<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"kotlin-code\" data-highlight-only=\"true\" theme=\"idea\" indent=\"4\" style=\"visibility: hidden; padding: 36px 0;\"> var text by remember { mutableStateOf(&quot;Hello, World!&quot;) } Column { Text(text) \/\/text label TextField(text, {text = it}) \/\/text field } <\/pre>\n\n\n\n<p>La prise en main de Compose Multiplatform est simple, surtout si vous avez d\u00e9j\u00e0 utilis\u00e9 un framework d&#8217;interface utilisateur d\u00e9claratif tel que <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">React<\/a> ou <a href=\"https:\/\/developer.android.com\/jetpack\/compose\" target=\"_blank\" rel=\"noopener\">Jetpack Compose<\/a> par Google. Compose Multiplatform utilise en grande partie les m\u00eames concepts, vous vous sentirez donc tout de suite tr\u00e8s \u00e0 l&#8217;aise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Excellentes performances d&#8217;ex\u00e9cution gr\u00e2ce \u00e0 l&#8217;acc\u00e9l\u00e9ration mat\u00e9rielle<\/h3>\n\n\n\n<p>La performance est un crit\u00e8re cl\u00e9 pour les interfaces utilisateur modernes, c&#8217;est pourquoi nous avons rendu Compose Multiplatform plus rapide. Il s&#8217;appuie sur <a href=\"https:\/\/skia.org\/\" target=\"_blank\" rel=\"noopener\">Skia<\/a>, une biblioth\u00e8que graphique consid\u00e9rablement optimis\u00e9e qui est utilis\u00e9e par de nombreuses applications sensibles aux performances, notamment les navigateurs modernes. Compose Multiplatform prend ainsi en charge tous les principaux moteurs d&#8217;acc\u00e9l\u00e9ration mat\u00e9rielle sur desktop, tels que DirectX, Metal et OpenGL. Pour les environnements pour lesquels l&#8217;acc\u00e9l\u00e9ration mat\u00e9rielle n&#8217;est pas disponible, Compose fournit un rendu logiciel optimis\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cycles courts d&#8217;it\u00e9ration via l&#8217;outil d&#8217;aper\u00e7u Preview<\/h3>\n\n\n\n<p>L&#8217;une des t\u00e2ches les plus chronophages lors du d\u00e9veloppement d&#8217;interface utilisateur est la reconstruction d&#8217;une application pour tenter de lui donner une apparence parfaite. Le <a href=\"https:\/\/plugins.jetbrains.com\/plugin\/16541-compose-multiplatform-ide-support\" target=\"_blank\" rel=\"noopener\">plugin<\/a> Compose Multiplatform IDEA optimise ce processus. Sa fonctionnalit\u00e9 d&#8217;aper\u00e7u en direct int\u00e9gr\u00e9 vous permet d&#8217;optimiser les composants et \u00e9l\u00e9ments de l&#8217;interface utilisateur et d&#8217;en cr\u00e9er plusieurs it\u00e9rations sans avoir \u00e0 reconstruire ou red\u00e9marrer l&#8217;application. Cela r\u00e9duit consid\u00e9rablement la dur\u00e9e du cycle de d\u00e9veloppement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Livraison d&#8217;applications de bureau facilit\u00e9e gr\u00e2ce \u00e0 la cr\u00e9ation automatique de packages<\/h3>\n\n\n\n<p>Mettre une application \u00e0 la disposition des utilisateurs requiert non seulement de d\u00e9velopper mais aussi de cr\u00e9er des packages. Compose Multiplatform peut vous aider pour cela aussi. Son plugin Gradle prend en charge la <a href=\"https:\/\/github.com\/JetBrains\/compose-jb\/tree\/master\/tutorials\/Native_distributions_and_local_execution\" target=\"_blank\" rel=\"noopener\">cr\u00e9ation de packages d&#8217;application<\/a> aux formats <code>msi<\/code>, <code>dmg<\/code> et <code>deb<\/code>, ce qui inclut la <a href=\"https:\/\/github.com\/JetBrains\/compose-jb\/blob\/master\/tutorials\/Signing_and_notarization_on_macOS\/README.md\" target=\"_blank\" rel=\"noopener\">signature et la notarisation pour MacOS<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interop\u00e9rabilit\u00e9 avec Jetpack Compose sous Android et les frameworks d&#8217;interface utilisateur Java<\/h3>\n\n\n\n<p>Jetpack Compose, le kit d&#8217;outils d&#8217;Android pour la cr\u00e9ation d&#8217;interfaces utilisateur natives de Google, est de plus en plus populaire parmi les d\u00e9veloppeurs d&#8217;applications mobiles. Si vous l&#8217;avez d\u00e9j\u00e0 utilis\u00e9, il vous sera tr\u00e8s facile d&#8217;utiliser Compose Multiplatform, car les API de ces deux frameworks sont en grande partie identiques.<\/p>\n\n\n\n<p>Si vous travaillez sur des applications de bureau dont l&#8217;interface utilisateur a d\u00e9j\u00e0 \u00e9t\u00e9 con\u00e7ue \u00e0 l&#8217;aide de frameworks d&#8217;interface utilisateur Java classiques, vous n&#8217;avez pas besoin de r\u00e9\u00e9crire tout votre code pour qu&#8217;il fonctionne avec Compose Multiplatform. Nous offrons une excellente interop\u00e9rabilit\u00e9, ce qui signifie que vous pouvez ajouter des composants d&#8217;interface utilisateur \u00e9crits avec Compose dans votre interface utilisateur Java existante. Vous pouvez \u00e9galement ajouter vos contr\u00f4les Java existants \u00e0 une application que vous cr\u00e9ez avec Compose Multiplatform.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Soyez rapidement op\u00e9rationnel avec les assistants Compose Multiplatform<\/h3>\n\n\n\n<p>La prise en main de Compose Multiplatform est tr\u00e8s simple. Dans <a href=\"https:\/\/www.jetbrains.com\/idea\/\" target=\"_blank\" rel=\"noopener\">IntelliJ IDEA<\/a> 2021.1 et ses version ult\u00e9rieures, vous pouvez cr\u00e9er un projet Compose Multiplatform simple en quelques clics.<\/p>\n\n\n\n\n\n<p>Nous proposons \u00e9galement de <a href=\"https:\/\/github.com\/JetBrains\/compose-jb\/tree\/master\/tutorials\" target=\"_blank\" rel=\"noopener\">nombreux tutoriels<\/a> pour vous aider \u00e0 travailler sur des applications de bureau avec Compose Multiplatform.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"web\">Compose for Web<\/h2>\n\n\n\n<p>Au-del\u00e0 du bureau, Compose Multiplatform vous apporte une API Kotlin\/JS puissante et d\u00e9clarative pour travailler avec le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\" target=\"_blank\" rel=\"noopener\">DOM<\/a>.<\/p>\n\n\n\n<p>Il fournit toutes les fonctions indispensables dans un framework web moderne, notamment une API DOM compl\u00e8te, la prise en charge int\u00e9gr\u00e9e de CSS-in-JS, la prise en charge de SVG, les entr\u00e9es typ\u00e9es. La cible web de Compose Multiplatform est \u00e9crite en Kotlin pur, les d\u00e9veloppeurs peuvent donc utiliser toutes les capacit\u00e9s du syst\u00e8me de types et des idiomes de ce langage. Vous pouvez ainsi utiliser le m\u00eame workflow de d\u00e9veloppement que celui que vous utilisez peut-\u00eatre d\u00e9j\u00e0 pour vos autres cibles Kotlin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sharing\">Prise en charge multiplateforme<\/h2>\n\n\n\n<p>Avec Compose Multiplatform, vous n&#8217;\u00eates pas limit\u00e9\u00b7e au ciblage des plateformes de bureau et web (qui sont prises en charge directement). Vous pouvez \u00e9galement cibler Android avec Jetpack Compose, le framework d&#8217;interface utilisateur d\u00e9velopp\u00e9 par Google. Ces deux frameworks partagent une API et un noyau communs, ce qui garantit une interop\u00e9rabilit\u00e9 parfaite. Ainsi, vous n&#8217;aurez pas \u00e0 r\u00e9\u00e9crire le code commun de l&#8217;interface utilisateur commune ou de la gestion d&#8217;\u00e9tat. Une fois qu&#8217;il est \u00e9crit, vous pouvez le r\u00e9utiliser sur autant de plateformes que n\u00e9cessaire.<\/p>\n\n\n\n<p>Si vous souhaitez transf\u00e9rer une application Android existante sur le bureau ou sur le web, Compose Multiplatform vous aide \u00e0 le faire avec un minimum d&#8217;efforts. Il vous permet de g\u00e9rer toutes les cibles de votre application \u00e0 partir d&#8217;un seul projet Kotlin.<\/p>\n\n\n\n<p>Pour d\u00e9marrer rapidement la cr\u00e9ation d&#8217;une application ciblant plusieurs plateformes avec Compose, vous pouvez utiliser l&#8217;assistant de projet Kotlin dans IntelliJ IDEA 2021.1 et ses versions ult\u00e9rieures.<\/p>\n\n\n\n<p>M\u00eame si vous n&#8217;avez pas besoin de d\u00e9velopper une application multiplateforme actuellement, les connaissances et l&#8217;exp\u00e9rience acquises sur une plateforme vous serviront \u00e9galement sur les autres.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu&#8217;est-ce qui a chang\u00e9 depuis la version b\u00eata ?<\/h2>\n\n\n\n<p>Pour Compose Multiplatform 1.0, nous avons tenu \u00e0 nous assurer que le framework est v\u00e9ritablement pr\u00eat \u00e0 \u00eatre utilis\u00e9 dans votre application de production. Par cons\u00e9quent, cette nouvelle version porte essentiellement sur la qualit\u00e9 et la stabilit\u00e9, tout en r\u00e9solvant des probl\u00e8mes et bugs critiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Exp\u00e9rience de production r\u00e9elle<\/h2>\n\n\n\n<p>M\u00eame si Compose Multiplatform vient juste d&#8217;\u00eatre lanc\u00e9 officiellement, certaines applications de production l&#8217;utilisaient d\u00e9j\u00e0. Par exemple, chez JetBrains nous avions d\u00e9j\u00e0 adopt\u00e9 Compose Multiplatform dans Jetbrains Toolbox App (<a href=\"https:\/\/www.jetbrains.com\/toolbox-app\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.jetbrains.com\/toolbox-app\/<\/a>) d\u00e8s le d\u00e9but de 2021. Cette application de gestion pour les IDE de JetBrains est utilis\u00e9e par plus d&#8217;un million d&#8217;utilisateurs actifs chaque mois et a \u00e9t\u00e9 int\u00e9gralement migr\u00e9e de C++ et Electron vers Compose Multiplatform il y a 4 mois.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Avec Compose Multiplatform, les d\u00e9veloppeurs Kotlin disposent d\u00e9sormais d&#8217;un framework puissant pour cr\u00e9er des interfaces utilisateur esth\u00e9tiques, aussi bien pour les applications de bureau que pour les applications web.<\/p>\n\n\n\n<p>Essayez Compose Multiplatform sans tarder ! Pour commencer, nous vous invitions \u00e0 consulter l&#8217;un des <a href=\"https:\/\/github.com\/JetBrains\/compose-jb\/tree\/master\/tutorials\" target=\"_blank\" rel=\"noopener\">tutoriels<\/a> officiels. En utilisant l&#8217;assistant de projet Kotlin qui est int\u00e9gr\u00e9 dans IntelliJ IDEA 2021.1 et ses versions ult\u00e9rieures, vous pouvez cr\u00e9er votre premier projet Compose Multiplatform et commencer \u00e0 construire des interfaces utilisateur d\u00e9claratives avec Kotlin.<\/p>\n\n\n\n<p>Nous esp\u00e9rons que vous appr\u00e9cierez\u00a0l&#8217;exp\u00e9rience !<\/p>\n\n\n\n<p><em>Auteur de l&#8217;article original en anglais :<\/em><\/p>\n\n\n    <div class=\"about-author \">\n        <div class=\"about-author__box\">\n            <div class=\"row\">\n                <div class=\"about-author__box-img\">\n                    <img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=200&#038;r=g\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\"  class=\"avatar avatar-200 wp-user-avatar wp-user-avatar-200 photo avatar-default\">\n                <\/div>\n                <div class=\"about-author__box-text\">\n                                                        <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"author":813,"featured_media":212568,"comment_status":"closed","ping_status":"closed","template":"","categories":[89],"tags":[6481,6705,6706],"cross-post-tag":[6256],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/kotlin\/212558"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/kotlin"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/kotlin"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=212558"}],"version-history":[{"count":8,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/kotlin\/212558\/revisions"}],"predecessor-version":[{"id":212593,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/kotlin\/212558\/revisions\/212593"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/212568"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=212558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=212558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=212558"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=212558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}