L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
L’éditeur visuel React qui améliore l’expérience des développeurs
Personnellement, je me lasse des bouffonneries au début de tout nouveau projet. Je suis également un sous-traitant, il y a donc toujours de nouvelles dépendances que je dois adopter, des fichiers de configuration pour me forcer à écrire comme une certaine équipe l’aime et un processus de déploiement auquel je dois me connecter. Ce n’est jamais une sorte de chose qui démarre et qui démarre, et il faut souvent une bonne partie d’une journée de travail pour que tout se passe bien.
Il y a beaucoup de pièces mobiles dans un projet, n’est-ce pas ? Tout, de l’intégration d’un framework et de l’établissement d’une bibliothèque de composants à la collaboration et aux déploiements, est une partie distincte mais tout aussi importante de votre IDE. Si vous êtes comme moi, sauter entre les applications et les systèmes est une chose à laquelle vous vous habituez. Mais honnêtement, c’est un acte de Sisyphe roulant la pierre sur la montagne à chaque fois, pour le refaire lors du prochain projet.
C’est la configuration de ce que je pense être une très bonne approche pour rationaliser ce processus compliqué d’une manière qui prend en charge toute structure de projet commune et est capable de l’améliorer avec des capacités d’édition visuelle. Ça s’appelle Coduxet si vous restez avec moi un instant, je pense que vous conviendrez que Codux pourrait être le guichet unique pour tout ce dont vous avez besoin pour créer des applications React prêtes pour la production.
Codux est plus « Your-Code » que « Low-Code »
Je sais je sais. « Yay, un autre éditeur visuel ! » dit personne, jamais. La planète en est déjà pleine, et ils sont vraiment conçus pour donner aux développeurs des super pouvoirs sans faire de développement.
Ce n’est pas le cas avec Codux. Il y a en effet beaucoup d’affordances « low-code » qui pourraient habiliter les non-développeurs, mais ce n’est pas la caractéristique principale de Codux ou vraiment à qui ou à quoi il s’adresse. Au lieu de cela, Codux est un IDE entièrement intégré qui fournit les os de votre projet tout en améliorant l’expérience du développeur au lieu de l’abstraire.
Utilisez-vous CodePen ? Ce qui le rend si populaire (et si agréable à utiliser), c’est qu’il fonctionne « juste ». Il combine des frameworks, des préprocesseurs, un environnement de rendu en direct et des outils de construction modernes dans une seule interface qui effectue tout le travail sur « Save ». Mais je peux toujours écrire du code à un seul endroit, comme je l’aime.
Je vois beaucoup Codux comme ça. Mais plus grand. Pas plus grand dans le sens de plus compliqué, mais plus grand dans le sens où il est plus intégré que les frameworks et les outils de construction. Il est votre cadre. Il est votre bibliothèque de composants. Il est votre processus de construction. Et il se trouve que vous disposez de commandes d’édition visuelles incroyablement puissantes entièrement intégrées à votre éditeur de code.
C’est pourquoi il est plus logique d’appeler Codux « votre code » au lieu des outils d’édition visuels low-code ou no-code typiques. Ceux-ci sont conçus pour les non-développeurs. Codux, en revanche, est fabriqué pour les développeurs.
En fait, voici une chose assez amusante à faire. Ouvrez un fichier de composant de votre projet dans VS Code et placez la fenêtre de l’éditeur à côté de la fenêtre Codux ouverte sur le même composant. Faites un petit changement CSS ou quelque chose et regardez à la fois le rendu de prévisualisation et mise à jour du code instantanément dans Codux.
C’est ce étroitement intégré.
C’est votre guide visuel pour React
C’est vraiment le cœur de Codux. C’est vraiment est une approche visuelle du travail avec React, du moins du côté du développement. Si j’ouvre un fichier de composant, Codux me donne tout le contexte dont j’ai besoin pour éditer le code en toute confiance car il montre où et comment les pièces sont utilisées dans l’application. Heck, c’est tout aussi bon (sinon meilleur !) pour faire des choses DevTools-y que DevTools lui-même !
Tableaux visuels, arborescences de composants, intégration Git, débogage… Codux les a tous et plus encore, ce qui en fait encore plus un guichet unique pour tout ce qui concerne un projet. J’ai comparé Codux à CodePen plus tôt, mais c’est plutôt comme avoir CodePen, Figma, GitHub, VS Code et même une application de prototypage au même endroit sans jamais avoir à quitter votre code.
Explorer visuellement le code
Voici quelque chose que vous n’attendez peut-être pas d’un outil comme Codux. Il arrive souvent que j’apporte une modification à un composant, que je le prévisualise, puis que je repère un problème ailleurs. Il n’y a pas de moyen simple de trouver où se trouve le code de ce problème autre que de cliquer sur DevTools pour inspecter un certain élément. Je me retrouve constamment à deviner car il faut trop de temps pour trouver les informations ou fouiller dans les fichiers de la bibliothèque de composants pour enquêter en amont.
En tant que tel, je n’ai souvent aucune idée de comment ou si le code que j’écris va affecter quelque chose d’autre dans l’application. La modification de cette pièce dans un composant aura-t-elle un impact sur la même pièce dans un autre composant ? En mettant à jour l’état ou le comportement du composant ici, est-ce que je déclenche par inadvertance un autre état qui ne devrait pas être affecté ?
Codux vous permet de naviguer dans le code visuellement. Vos aperçus sont là dans l’application, et grâce à l’étroite intégration entre les capacités d’édition visuelle et de code, trouver un morceau de code est aussi simple que de cliquer sur l’élément. Cela vous mènera directement au code pertinent – à la fois dans l’éditeur de code intégré et votre éditeur de code. Il n’est absolument pas nécessaire de quitter le code pour résoudre un problème ou rechercher une valeur calculée.
Ce n’est qu’une de ces affordances qui améliorent vraiment l’expérience du développeur. N’importe qui d’autre pourrait ignorer quelque chose comme ça, mais en tant que développeur, vous savez combien de temps gagné peut s’additionner avec quelque chose comme ça.
Codez, inspectez et déboguez enfin ensemble
Il existe quelques autres affordances disponibles lors de la sélection d’un élément sur la scène interactive sur Codux :
- UN panneau de style pour éditer le CSS et essayer différentes mises en page. Et, encore une fois, les modifications sont apportées en temps réel, à la fois dans l’aperçu rendu et dans ton code, qui est visible pour vous tout le temps – que ce soit directement dans Codux ou dans votre IDE.
- UN panneau de propriétés qui fournit un accès facile à toutes les propriétés sélectionnées d’un composant avec des contrôleurs visuels pour les modifier (et voir les changements reflétés directement dans le code)
- Un panneau environnement qui vous permet de contrôler l’environnement de rendu du composant, tel que la taille de l’écran ou du canevas, ainsi que son style.
Donnez peut-être un tour à Codux
C’est assez génial que je puisse lancer une seule application pour accéder à ma bibliothèque de composants, mon code, ma documentation, mes aperçus en direct, mon inspecteur DOM et mon contrôle de version. Si tu avais essayé de m’expliquer ça avant en voyant Codux, j’aurais dit que c’était trop pour une application à gérer ; ce serait une interface utilisateur désordonnée qui est plus une aspiration qu’un centre libérateur de productivité de développement.
Pas de mensonge. C’est exactement ce que j’ai pensé lorsque l’équipe Wix m’en a parlé. Je ne pensais même pas que c’était une bonne idée d’emballer tout ça au même endroit.
Mais ils l’ont fait, et j’avais tort. Codux est assez génial. Et apparemment, ce sera encore plus génial parce que le La FAQ parle d’un tas de nouvelles fonctionnalités dans les travaux, des choses comme la prise en charge de cadres complets. Le plus important est une version en ligne qui supprimera complètement le besoin de configurer des environnements de développement chaque fois que quelqu’un rejoint l’équipe ou qu’un intervenant souhaite accéder à une version de travail de l’application. Encore une fois, tout est en préparation, mais cela montre à quel point Codux vise à améliorer le expérience de développeur.
Et ce n’est pas comme si vous construisiez un site Wix avec. Codux est sa propre chose – quelque chose que Wix a construit pour se débarrasser de ses propres points faibles dans le processus de développement. Il se trouve que leurs frustrations sont les mêmes que celles que beaucoup d’entre nous partagent dans la communauté, ce qui fait de Codux une considération légitime pour tout développeur ou équipe.
Oh, et c’est gratuit. Tu peux téléchargez-le maintenant, et il prend en charge Windows, Mac et Linux. En d’autres termes, vous pouvez lui donner un tour sans acheter quoi que ce soit.
(il)
Source link