Seznamte se s React Buddy – IDE plugin zvyšující produktivitu vývoje React!

Ahoj světe! Jsem rád, že vám mohu představit React Buddy – plugin pro Jetbrains IDE, jehož cílem je zvýšit rychlost a efektivitu vývoje Reactu.

Beta verzi jsme zveřejnili v říjnu 2021 a nyní, po několika měsících ladění, je první stabilní verze dostupná pro každého! Plugin lze použít v jakémkoli JetBrains IDE, které podporuje JavaScript – primárně mluvíme o WebStorm a IJ Ultimate.

Příběh

Náš tým také pracuje na platformě pro rychlý vývoj obchodních aplikací. Myšlenkou této platformy je poskytnout alternativu k řešením s nízkým kódem/bez kódu s podobnou účinností, pokud jde o typické vývojové úlohy, ale s plně transparentním generováním kódu pro osvědčený zásobník, namísto proprietárních abstrakcí na vysoké úrovni a DSL. . Jednou z nedílných součástí platformy je vývoj uživatelského rozhraní. Udělali jsme RnD a uvědomili jsme si, že je možné přenést vizuální nástroje přímo do IDE, čímž se zaplní mezera mezi editory WYSIWIG. Rozhodující je, že vývojáři stále zůstávají na známé a pohodlné půdě svého oblíbeného IDE.

Navzdory tomu, že IntelliJ poskytuje vynikající možnosti pro práci s kódem (refaktoring, dokončování kódu atd.), zdá se, že chybí specifická podpora pro React.js, kterou můžeme splnit.

Postupně jsme si uvědomili, že není fér omezovat publikum nástrojů, které vyrábíme, pouze uživateli našich zbrusu nových frameworků. Udělali jsme skromný předpoklad, že to může být užitečné pro širší publikum vývojářů.

A konečně, máme podobnou, velmi úspěšnou zkušenost s extrahováním vyhrazených rámcových nástrojů do generického pluginu pro široké publikum uživatelů Java Persistence. Plugin JPA Buddy se osvědčil jako užitečný pro stovky tisíc vývojářů.

Tak se zrodila myšlenka pluginu React Buddy.

Poslání

Zformulovali jsme několik cílů a principů, kterými se řídí naše hnutí:

  • Urychlete vývoj snížením množství standardního kódu, který je třeba ručně kódovat
  • Udělejte kód -> vizuální reprezentaci (vizuální testování) a naopak co nejplynulejší
  • Poskytnout prostředky k využití opakovaně použitelných součástí
  • Zůstaňte neinvazivní:neporušujte stávající kód, nenuťte používat žádné (kódovací) konvence, jinými slovy ponechejte co největší svobodu volby
  • Pomocí napsat správný kód

Rozsah

Náhled součásti

Jednou z hlavních funkcí pluginu je živý náhled komponent přímo v IDE. Náhled je založen na vývojovém serveru projektu a vyžaduje minimální nastavení.

  • Pomocí ikony okapu můžete přepnout náhled konkrétní součásti
  • Náhled má možnosti introspekce:kliknutím na libovolný prvek uživatelského rozhraní přejdete do zdrojového kódu a naopak
  • Vybraná součást je zvýrazněna v náhledu
  • Vykreslenou komponentu můžeme vidět vedle sebe s kódem nebo oddělit okno náhledu

Aby náhled fungoval, měli bychom přidat @react-buddy/ide-toolbox závislost na projektu a vložit <DevSupport> tag do stromu kořenové komponenty. Plugin pomáhá tento proces automatizovat provedením všech nezbytných kroků.

Paleta

Obvykle, když se používá nějaký UI Kit, vývojáři často nahlížejí do dokumentace, aby našli vhodnou komponentu a ve většině případů zkopírovali a vložili ukázkový kód. Paleta je nástrojové okno obsahující tyto opakovaně použitelné komponenty – především prvky UI Kit. Může však obsahovat jakýkoli JSX – berte to jako stavební kameny.

Hlavním problémem, který Palette řeší, je tedy zjistitelnost UI Kit – není třeba otevírat web s dokumentací a příklady. Vývojář může iterovat seznam komponent přímo v IDE. Komponenty jsou kategorizovány a mohou mít několik variant podle případů použití. Například komponenta Button v paletě MUI má tři varianty:textovou, obsaženou a obrysovou. Libovolnou komponentu (variantu) lze také zobrazit v náhledu:

Druhou funkcí je generování kódu – stačí přetáhnout (nebo dvakrát kliknout) jakoukoli komponentu přímo do editoru zdrojového kódu a React Buddy ji vloží na odpovídající pozici. Paletu lze definovat v projektu nebo přinést jako závislost – vývojáři mohou vytvářet své vlastní palety (pro populární nebo proprietární knihovny uživatelského rozhraní) a publikovat je jako balíčky npm. Podívejte se na dva ukázkové projekty s předkonfigurovanými paletami MUI a Ant Design:

https://github.com/react-buddy/demo-mui-v5
https://github.com/react-buddy/demo-antd-v4

Obrys JSX

JSX Outline poskytuje strukturální (stromovou) reprezentaci komponent React. Cílem je pomoci odhalit složitou strukturu komponent a poskytnout navigaci ke kódu. Zobrazí následující uzly:

  • Součásti a funkce vykreslování definované v souboru
  • Háčky (a vrácené objekty)
  • Funkce obslužného programu
  • Struktura JSX:
    • podmíněné vykreslování (ochrany)
    • seznamy (mapy)
    • obslužné nástroje (s funkcí navigace na obslužné nástroje)

Není pouze pro čtení a umožňuje manipulovat s uzly JSX:kopírovat/vkládat, vyjímat a dokonce přetahovat komponenty z palety.

Pomoc s kódováním

Víme, že značný počet vývojářů nemá vůbec rád vizuální nástroje, a proto nabízíme funkce editoru kódu. Je možné generovat obslužné rutiny událostí s platným podpisem TypeScript (zadané parametry) pomocí akce generování kódu IDE a rychlé opravy.

Editor kódu je obohacen o okapové ikony označující funkce React hooks a handler. To pomáhá sledovat strukturu komponent a orientovat se v odpovídajících použitích.

Co bude dál?

Naštěstí strategie evoluce produktu vypadá relativně přímočaře:

  • Shromážděte více potřeb a bolestivých bodů vývojářů React a pokuste se usnadnit jejich řešení
  • Analyzujte nejoblíbenější přístupy a knihovny v ekosystému React a navrhněte více vizuálních nástrojů pro zvýšení efektivity.

Konkrétní plán zatím nemůžeme sdílet, ale nejbližší verze budou zahrnovat:

  • Výkonnější mechanismus palety/úryvků, který bude parametrizován a umožní generovat sofistikovanější kód na vyšší úrovni (včetně háčků, ovladačů atd.). Konečným cílem je vytvořit uživatelské rozhraní vázané na data pomocí několika kliknutí
  • Protokol metadat komponent:pomůže poskytnout smysluplnější titulky ve vlastnostech JSX Outline a ve vlastnostech skupiny v inspektoru komponent

Existuje několik nápadů na další vydání:

  • Moderní živé šablony pro React
  • Integrace s pohádkami
  • Více palet připravených k použití

Další vývoj každopádně přizpůsobíme zpětné vazbě uživatelů.

A co kód VS?

Milujeme VS Code a uvědomujeme si, že je to nejoblíbenější IDE pro vývoj React. Platforma IntelliJ však poskytuje vynikající možnosti analýzy/generování kódu, proto jsme se rozhodli vyvinout plugin primárně pro ni. Také máme omezené zdroje a musíme se nyní soustředit na jedinou platformu. Jakmile vytvoříme plně funkční a úspěšný produkt pro jednu platformu, myšlenku analogu VS Code definitivně položíme na stůl.

Závěr

Tento článek představuje nový plugin pro vývojáře React, kteří používají WebStorm (nebo IDEA Ultimate). Jsou popsány některé jedinečné vlastnosti nástroje, ale uvědomujeme si, že nás čeká dlouhá cesta leštění produktu. Zásuvný modul má být užitečný pro každého vývojáře React. Vyzkoušejte to a podělte se s námi o svou zpětnou vazbu – velmi nám to pomůže nasměrovat produkt správným směrem!