de Nate Wang

Vă prezentăm Rekit Studio: un IDE real pentru dezvoltarea React și Redux

Suntem foarte încântați să anunțăm lansarea stabilă a Rekit Studio, un IDE complet pentru dezvoltarea React, Redux și React Router! Deși este un lucru nou pentru unii dintre voi, ne-a ajutat să construim aplicații web complicate de mai bine de un an.

Va prezentam Rekit Studio un IDE real pentru dezvoltarea React
Rekit Studio

Versiunea anterioară a Rekit Studio a fost Rekit Portal, care nu are capacitatea de a edita codul. Acum, datorită Editor Monaco (care de asemenea are puteri Cod VS) și mai frumoasă (un instrument uimitor pentru formatarea codului), Rekit Studio oferă o experiență excelentă pentru codificare. De aceea, l-am redenumit din „portal” în „studio”.

Ca IDE, pe lângă editarea codului, Rekit Studio oferă capacitatea de generare a codului, diagramarea dependenței, refactorizarea, construirea, testele unitare și un mod semnificativ de navigare a codului.

Nu vă va mai interesa cum să configurați proiectul, să configurați webpack-ul sau să vă organizați structura folderelor. Rekit Studio oferă o modalitate integrată de gestionare a întregului proiect. Acesta este ceea ce face Rekit Studio diferit de alți editori de coduri, cum ar fi Sublime Text și VS Code.

Vedeți demo-ul rapid

Înainte de introducere, vă recomandăm să vedeți un videoclip demo rapid despre cum să utilizați Rekit Studio pentru a gestiona acțiunile Redux.

Din videoclip, putem vedea că nu ne pasă decât de logica afacerii decât de codul detaliat.

Încercați acum

Cel mai bun mod de a parcurge următoarea introducere este ca Rekit Studio să ruleze alături, astfel încât să puteți încerca funcțiile dvs. în timp real. Este foarte ușor cu oricare dintre aceste două moduri:

  1. Accesați demo-ul live: http://demo.rekit.org . Este o instanță Rekit Studio care rulează în modul readonly. Deci, nu puteți efectua nicio modificare a proiectului pe care îl gestionează (codul Rekit Studio în sine!).
  2. Creați o aplicație Rekit în 3 pași:
1611440050 195 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Apoi accesați http: // localhost: 6075 pentru aplicația dvs. http: // localhost: 6076 pentru Rekit Studio în mod implicit.

Da, Rekit Studio este un pachet npm în proiectul dvs. și rulează într-un browser. Acest mecanism asigură faptul că fiecare aplicație are propriul Rekit Studio, astfel încât să nu existe niciodată probleme de compatibilitate a versiunii.

Afișați codul dvs. într-un mod semnificativ

Aproape toate IDE-urile pentru dezvoltarea front-end afișează doar fișiere în același mod ca și structura folderelor. Oamenii se plâng că navigarea între fișiere este frustrantă. Pentru a înrăutăți lucrurile, se pare că nu există nicio modalitate de îmbunătățire, deoarece editorii de cod nu știu ce fișier este o componentă, care este o acțiune, ce fișier de stil aparține cărei componente, unde sunt definite regulile de rutare etc. . În timp ce structura proiectului este în stil liber, aceasta nu va fi niciodată îmbunătățită.

Acum Rekit urmează modelul organizării unei aplicații web scalabile. Și pe baza acestui fapt, Rekit Studio vă înțelege proiectul. Am introdus practicile în Două anterior articole.

Pe baza modelului, Rekit Studio știe ce fișiere sunt componente, care sunt acțiuni, unde sunt definite regulile de rutare și așa mai departe. Apoi, exploratorul de proiecte poate arăta structura proiectului într-un mod semnificativ, astfel:

1611440050 208 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React
Project Explorer

Rekit Studio cunoaște caracteristicile acelor elemente ale proiectului, cum ar fi acțiunile asincrone (cu semnul albastru „A”), ce componente se conectează la magazinul Redux (cu semnul verde „C”) și ce componente sunt gestionate de React Router ( cu marca portocalie „R”) care sunt utilizate în unele reguli de rutare.

Cu acest explorator de proiecte, puteți naviga cu ușurință între elementele proiectului. De asemenea, puteți obține mai multe informații despre un element fără a-l deschide și a căuta codul.

Un lucru de subliniat este că exploratorul de proiecte afișează numai fișierele din folderul src din proiect, astfel încât să aibă performanțe bune. Deci, dacă doriți să editați fișiere din folderul src, cum ar fi package.json sau .gitignore, este posibil să aveți nevoie de un alt editor de text.

Generarea codului

La fel ca alte IDE adevărate, cum ar fi Eclipse pentru Java sau Visual Studio pentru .Net, Rekit Studio ajută la crearea de cazane de cod cu interfața sa de utilizare intuitivă, fără costuri de învățare. De exemplu, pentru a crea o componentă, faceți clic dreapta pe un nod de funcționalitate din exploratorul de proiecte și faceți clic pe `Adăugați o componentă`.

1611440050 308 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React
Adăugați o componentă

În afară de a-i da un nume, puteți seta dacă se conectează la magazinul Redux sau dacă este utilizat într-o regulă React Router. După ce faceți clic pe „Ok”, acesta generează toate codurile și configurațiile necesare. Puteți vedea ce face în spatele acestuia prin jurnalul de operații. Creează un fișier less / scss pentru styling, un fișier de testare pentru testare, adaugă o regulă React Router pentru a-l accesa prin URL (dacă este setată calea URL) și așa mai departe.

Nu există nicio magie în spate – Rekit Studio vă ajută doar să faceți automat ceea ce trebuia făcut manual înainte. Și știi întotdeauna ce s-a întâmplat verificând jurnalele.

Pentru a crea o acțiune asincronizată Redux, Rekit Studio folosește în mod implicit redux-thunk pentru a crea reductoare și acțiuni:

1611440051 771 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React
Adăugați o acțiune asincronizată

Alternativ, puteți crea acțiuni asincronizate folosind `redux-saga` instalând pluginul` rekit-plugin-redux-saga`. Consultați capitolul plugin pentru mai multe informații.

Toate numele fișierelor, numele funcțiilor sau numele variabilelor generate de Rekit sunt forțate să respecte regulile predefinite așa cum este descris aici. Deci, chiar dacă introduceți un nume precum „componenta mea” în câmpul de nume, Rekit îl va converti în „Componenta mea”. Prin această abordare, toate numele din proiect sunt întotdeauna coerente.

Aceste plăci de cod sunt create după cele mai bune practici generale. Trebuie doar să completați logica de afaceri în interiorul lor, fără a fi nevoie să scrieți manual codul detaliat. Odată generat codul, îl puteți edita gratuit.

Refactorizarea este importantă

Atunci când creați o aplicație mare, refactorizarea este foarte importantă pentru a face codul să fie curat, lizibil și apoi menținut. Unele dintre principalele părți ale refactorizării sunt redenumirea, mutarea și ștergerea elementelor proiectului. Cu tehnologiile front-end moderne, această lucrare devine excesiv de dificilă.

De exemplu, dacă dorim să redenumim o acțiune asincronizată, de obicei trebuie să atingă mai multe fișiere și să modifice zeci de coduri în locuri diferite. Spuneți că dorim să redenumim o acțiune asincronă din „fetchTopics” în „fetchTopicList”, are nevoie de aceste modificări:

1611440051 847 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Pare atât de nebunesc încât nu ai vrea niciodată să o faci manual, nu? Aceeași durere există în mișcarea și ștergerea componentelor și acțiunilor. Fără ajutorul instrumentului, această durere ne împiedica pe mulți dintre noi să refactorizăm codul nostru. Acest lucru a făcut ca proiectul nostru să devină greu de întreținut într-un timp scurt.

Acum, cu Rekit Studio, puteți să faceți clic dreapta pe o componentă sau acțiune pentru a vă muta și să o redenumiți sau să o ștergeți așa cum faceți cu alte IDE, cum ar fi Eclipse pentru Java sau Visual Studio pentru .Net. Rekit Studio va face toate lucrurile automat și puteți verifica jurnalele pentru a vedea ce face în spate.

1611440051 802 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Examinați-vă proiectul cu diagrame intuitive

Când proiectul dvs. crește, relația de dependență a modulelor devine complicată. Acest lucru duce adesea la probleme de regresie dacă nu le luați în considerare în totalitate. Este o bună practică să păstrezi întotdeauna relația simplă, astfel încât codul să fie întotdeauna de înțeles. Rekit Studio oferă două tipuri de diagrame pentru a revizui dependențele:

1. Diagrama generală
Este afișat pe pagina tabloului de bord (pagina de pornire), cu care putem vedea nu numai dependențele dintre caracteristici (un concept de nivel înalt al aplicațiilor Rekit), ci și module normale, cum ar fi componentele și acțiunile. Așadar, ați putea găsi cu ușurință ce module sunt periculoase pentru refactorizare (cu multe deps) și care sunt ușor de refactorizat (cu mai puține deps).

1611440051 440 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Această diagramă vă ajută, de asemenea, să găsiți acele module neutilizate – de exemplu, două componente ale caracteristicii `home` nu mai sunt folosite în proiect așa cum se arată în diagrama de mai sus. Le puteți elimina în siguranță. Eliminarea codului inutil ajută la reducerea complexității proiectului împreună cu dimensiunea pachetului aplicației.

2. Diagrama elementelor

Deschideți un element din project explorer, apoi puteți vedea diagrama elementelor sub fila diagramă. Oferă o vedere foarte intuitivă a modului în care un element este creat sau utilizat de alții. Aceasta este complicația unui modul.

1611440052 234 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

De exemplu, SidePanel este o componentă complicată care folosește multe alte componente și acțiuni. Și are dependențe de alte caracteristici. Poate că este o componentă a refactorizării pentru a deveni simplu și ușor de înțeles.

Construiți și testați

Ca IDE, Rekit Studio poate, de asemenea, să construiască și să testeze proiectul cu interfețe UI intuitive. În mod implicit, Rekit Studio va încerca să ruleze comanda `npm run build` pentru a construi proiectul și va rula` npm test – [test-file-pattern]`pentru a rula teste unitare.

Pentru a construi proiectul, faceți clic pe elementul de meniu „Construiți” din meniul principal:

1611440052 125 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Apoi, puteți vedea o bară de progres și puteți crea rezultatul. Înainte de a fi implementat pe serverul de producție, puteți verifica, de asemenea, rezultatul compilării accesând serverul dist care în mod implicit rulează la: http: // localhost: 6077 .

Pentru a rula teste unitare, puteți rula toate testele făcând clic pe elementul de meniu „Rulează testele” din meniul principal sau faceți clic dreapta pe un fișier / folder care are teste. Rekit Studio va converti automat comanda pentru a testa modelul de fișier:

1611440053 83 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Mai sus este rezultatul testului caracteristicii „diagramă”. Dacă executați toate testele proiectului, acesta va genera un raport de acoperire a testelor. O puteți accesa din meniul principal:

1611440053 332 Va prezentam Rekit Studio un IDE real pentru dezvoltarea React

Sistem de plugin

Putem vedea că Rekit Studio poate crea plăci de caracteristici, acțiuni și componente. Dacă doriți să creați câteva elemente noi, cum ar fi selectoare, sau doriți să modificați codul implicit boilerplate (cum ar fi utilizarea `redux-saga` în loc de` redux-thunk` pentru acțiuni asincronizate), puteți crea pluginuri pentru a o face.

Vedeți mai multe despre sistemul de pluginuri aici.

Linia de comandă

Pe lângă Rekit Studio, există și un altul Linia de comandă pentru gestionarea unui proiect Rekit. De fapt, atât Rekit Studio, cât și Rekit CLI utilizează „rekit-core” pentru a gestiona elementele proiectului. Sistemul CLI acceptă mai multe tipuri de pluginuri. Și Rekit Studio va fi îmbunătățit în viitor pentru a oferi o interfață de utilizare unificată pentru sistemul de pluginuri.

Migrarea de la Rekit Portal la Rekit Studio

Dacă proiectul dvs. existent a folosit Rekit Portal, este foarte ușor să migrați la Rekit Studio, deoarece Rekit Studio este complet compatibil cu proiectele Rekit anterioare. Tot ce trebuie să faceți este să instalați Rekit Studio și să actualizați scriptul pentru al porni în server.js aici.

Transformarea proiectului dvs. într-un proiect Rekit

Dacă ați creat un proiect folosind React, Redux și React Router, este posibil să-l convertiți într-un proiect Rekit, astfel încât să puteți utiliza Rekit Studio pentru a-l gestiona. Nu este atât de dificil, dar subiectul are nevoie de un alt articol pentru a-l introduce corect. Îl voi scrie dacă vreți – anunțați-mă în comentarii. Punctul cheie este să vă reorganizați fișierele și codul în modul Rekit.

Ce urmeaza

Rekit Studio este încă în stadiile incipiente, deși îl folosim pentru a construi aplicații web de mult timp. Îl vom continua să-l îmbunătățim pe măsură ce îl folosim cu toții în munca noastră de zi cu zi.

Unii candidați cu prioritate ridicată sunt enumerați mai jos:

  • Evidențierea sintaxei codului mai bună.
  • Suportă reguli ESlint personalizate.
  • Completarea automată a codului este mai bună, cum ar fi instalarea numelor modulelor.
  • Deschideți rapid fișiere folosind Cmd + P.
  • Suportă mai multe fișiere ne-salvate. În prezent, un singur fișier poate fi într-o stare ne-salvată pentru a vă menține codul în siguranță.
  • Adăugați mai multe tipuri de diagrame.
  • Permiteți utilizatorilor să creeze / redenumi / șterge fișiere normale pe lângă componente și acțiuni.
  • Integrează Storybook.
  • Suport TypeScript.
  • Suportă redarea pe partea de server.

Lista ar putea fi lungă și depinde de feedbackul dvs. – vă mulțumim pentru orice aveți.

rezumat

Deși tehnologia front-end evoluează foarte repede, Rekit ca un set de instrumente, mai degrabă decât ca un cadru, a fost foarte stabil de mai bine de doi ani. Practicile pe care le urmează sunt independente de tehnologii. Acum, lansarea Rekit Studio este o nouă etapă pentru noi, pentru a ne îmbunătăți experiența de codare. Sperăm să vă placă și dumneavoastră!

În cele din urmă, vreau să subliniez că Rekit nu oferă pachete SDK sau npm pentru aplicația dvs. Este doar un instrument pentru crearea și gestionarea proiectului. Chiar și fără Rekit, puteți utiliza orice editor de text pentru a scrie cod și puteți utiliza terminalul pentru a rula scripturi pentru un proiect Rekit. Adică folosiți Rekit, dar nu depindeți de el.