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 qui m’obligent à é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 plug and play et il faut souvent la majeure partie d’une journée de travail pour que tout soit parfait.
Il y a beaucoup de pièces mobiles dans un projet, n’est-ce pas ? Tout, depuis l’intégration d’un framework et l’établissement d’une bibliothèque de composants jusqu’à la collaboration et les 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.
Cela met en place ce que je pense être une assez 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. Cela s’appelle Codux, et si vous restez avec moi un instant, je pense que vous conviendrez que Codux pourrait être votre guichet unique pour tout ce dont vous avez besoin pour créer des applications React prêtes pour la production.
Codux est plus « votre code » que « low code »
Je sais que je sais. « Oui, 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 avoir à faire de développement.
Ce n’est pas le cas avec Codux. En fait, il existe de nombreuses possibilités « low-code » qui pourraient habiliter les non-développeurs, mais ce n’est pas la principale caractéristique 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 éléments de base de votre projet tout en améliorant l’expérience du développeur plutôt que 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 « Enregistrer ». Mais je peux toujours écrire du code au même endroit, comme je le souhaite.
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 son processus de construction. Et il se trouve qu’il dispose de commandes d’édition visuelles incroyablement puissantes qui sont entièrement intégrées à son éditeur de code.
C’est pourquoi il est plus logique d’appeler Codux « votre code » au lieu des outils d’édition visuels typiques à faible code ou sans code. Ceux-ci sont conçus pour les non-développeurs. Codux, en revanche, est fabriqué pour les développeurs.
En fait, voici quelque chose de vraiment amusant à 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 dans le même composant. Faites un petit changement CSS ou quelque chose et regardez le rendu de prévisualisation et mise à jour du code instantanément dans Codux.
Est ce étroitement intégré.
C’est votre guide visuel pour réagir
C’est vraiment le cœur de Codux. Réellement 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 montre où et comment les pièces sont utilisées tout au long de l’application. Heck, c’est tout aussi bon (sinon mieux !) pour faire des trucs DevTools que DevTools lui-même.
Tableaux de bord visuels, arborescences de composants, intégration Git, débogage… Codux les a tous et plus encore, ce qui en fait un guichet unique pour tout ce qui concerne le projet. J’ai comparé Codux à CodePen plus tôt, mais c’est vraiment plus 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 m’arrive souvent d’apporter une modification à un composant, de le prévisualiser, puis de repérer un problème ailleurs. Il n’y a pas de moyen simple de trouver où se trouve le code pour ce problème autre que de cliquer sur DevTools pour inspecter un élément donné. 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 faire des recherches à l’avance.
En tant que tel, je n’ai souvent aucune idée de comment ou si le code que j’écris affectera quoi que ce soit d’autre dans l’application. La modification de cette pièce dans un composant affectera-t-elle la même pièce dans un autre composant ? En mettant à jour l’état ou le comportement du composant ici, est-ce que j’active par inadvertance un autre état qui ne devrait pas être affecté ?
Codux permet de parcourir le code visuellement. Vos aperçus sont là dans l’application, et avec une intégration étroite entre les capacités d’édition visuelle et de code, trouver un extrait est aussi simple que de cliquer sur l’élément. Cela vous amè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 votre code pour résoudre un problème ou rechercher une valeur calculée.
Ce n’est qu’une de ces possibilités qui améliore vraiment l’expérience du développeur. N’importe qui d’autre pourrait manquer quelque chose comme ça, mais en tant que développeur, vous savez combien de temps gagné quelque chose comme ça peut représenter.
Coder, inspecter et déboguer enfin ensemble
D’autres possibilités s’offrent à vous lors de la sélection d’un élément sur la scène interactive de Codux :
- POUR volet de style pour modifier 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 le son code, qui est visible pour vous à tout moment, soit directement dans Codux, soit dans votre IDE.
- POUR volet des 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, comme la taille de l’écran ou du canevas, ainsi que le style.
Peut-être que vous donnerez un tour à Codux
C’est plutôt cool de pouvoir 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 avant en regardant Codux, j’aurais dit que c’était trop pour une application à gérer ; ce serait une interface utilisateur encombrée qui est plus ambitieuse qu’un hub libérateur de productivité de développement.
Pas de mensonges. 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 de regrouper tout cela au même endroit.
Mais ils l’ont fait, et j’avais tort. Codux est assez génial. Et apparemment, ça va être encore plus génial parce que la FAQ parle d’un tas de nouvelles fonctionnalités en préparation, comme la prise en charge complète du framework. Le plus important est une version en ligne qui éliminera complètement la nécessité de configurer des environnements de développement chaque fois que quelqu’un rejoint l’équipe ou qu’une partie intéressée souhaite accéder à une version de travail de l’application. Encore une fois, tout est en cours, 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 créé pour se débarrasser de ses propres points faibles dans le processus de développement. En l’occurrence, leurs frustrations sont les mêmes que celles partagées par beaucoup d’entre nous dans la communauté, faisant de Codux une considération légitime pour tout développeur ou équipe.
Oh, et c’est gratuit. Vous pouvez le télécharger dès maintenant et il est compatible avec Windows, Mac et Linux. En d’autres termes, vous pouvez l’essayer sans rien acheter.
(Illinois)
