Duke punuar në një projekt kompleks, pavarësisht nëse jeni një programues me përvojë apo student i parë, praktikisht do të hasni probleme. Kur e ndani projektin tuaj në shumë module, lindin probleme, duke e bërë më të vështirë gjetjen e gabimeve dhe gjetjen e zgjidhjeve. Në rrethana të tjera, korrigjimi i rasteve individuale mund të jetë i vështirë sepse nuk keni gjetur zgjidhjen e duhur për problemin për të cilin keni punuar.
Ai gjithashtu shfaqet si një pjesë e kodit me raste, e cila mund të duket komplekse në atë kohë. JavaScript është një nga gjuhët e bazuara në ueb që është jashtëzakonisht e thjeshtë për t'u mësuar. Thjesht hapni shfletuesin tuaj të desktopit dhe lundroni te Developer Tools (zakonisht F12) dhe keni mbaruar! Më pas mund të eksperimentoni me JS pa pasur nevojë të instaloni ose ekzekutoni ndonjë softuer të komplikuar.
Për të filluar, gjithçka që ju nevojitet është një shfletues. Është e mrekullueshme të kesh gjithë këtë thjeshtësi menjëherë, por ka raste kur të duhet më shumë. Për shembull, supozoni se dëshironi të eksperimentoni me një Ueb API të ri që keni zbuluar së fundmi, por nuk dëshironi të filloni një projekt të ri.
Në këtë postim, ne do të krahasojmë dhe krahasojmë tre terrenet më të njohura të lojërave JS, CodePen, CodeSandbox dhe StackBlitz. Le të fillojmë!
CodePen
Mjetet e zhvillimit të faqes në internet janë gjithmonë në zhvillim, dhe redaktuesit e tekstit janë një komponent i madh i teknologjive më të fundit që e bëjnë jetën e një zhvilluesi më të thjeshtë. Përveç redaktuesve të pavarur të tekstit si Atom ose Notepad ++, vitet e fundit ka pasur një shpërthim të redaktuesve të bazuar në shfletues që nuk kërkojnë instalim programi dhe promovojnë një bashkëpunim më të madh.
CodePen është një “komunitet në internet për testimin dhe prezantimin e copave të kodit HTML, CSS dhe JavaScript të krijuara nga përdoruesit” që ofron mundësi fantastike për të mësuar se si të shkruani më mirë faqet e faqeve në front.
CodePen ju jep dy "mode". E para dhe më e përdorura është Pena. Është po aq e thjeshtë sa të klikosh një buton dhe të transportohesh drejt e te redaktori. Nga atje, ju mund të përdorni një panel paraprak, si dhe dritaret bazë të redaktimit HTML, CSS dhe JS.
Nuk ka "sistemin e skedarëve", "IntelliSense" apo ndonjë gjë tjetër – thjesht theksim i thjeshtë sintaksor dhe komanda të shpejta si prettify. Në skedën e opsioneve, mund të zgjidhni nga një gamë e kufizuar parapërpunuesish për të tre gjuhët (si p.sh. TypeScript për JS) ose të shtoni lidhje me burime të jashtme.
Nëse ju nevojitet vetëm ndonjë gjë e bërë falas, secili prej redaktorëve do të mjaftojë. Unë do të sugjeroja CodePen për çdo gjë që nuk kërkon shumë konfigurime ose biblioteka – thjesht HTML, CSS dhe JS me para-përpunues opsional në krye. Nëse dëshironi të përdorni këndin e lojërave për të përmirësuar praninë tuaj në mediat sociale ose për të zhvilluar një portofol personal, CodePen është një opsion më i mirë.
Version Premium
Ju keni disa alternativa të tjera për të zgjedhur në CodePen. Nëse paguani çdo vit, mund të merrni një nga tre planet premium për 12 dollarë, 19 dollarë ose 39 dollarë çdo muaj. Ju mund të krijoni një numër të pafund stilolapsash, postimesh dhe koleksionesh private në cilindo nga tre nivelet.
Do të merrni gjithashtu distinktivin Pro (një nxitje sociale), akses në modalitetin e bashkëpunimit të drejtpërdrejtë, pa reklama dhe më shumë. Ekzistojnë gjithashtu disa strategji specifike për ekipin dhe dallime të tjera të ndërsjella. Shikoni bordin e tyre zyrtar të faturimit për informacione të mëtejshme.
Key Features
Përveç krijimit të HTML, CSS dhe JavaScript në CodePen, ka disa gjëra të tjera që e veçojnë atë.
- Shikimi në kohë reale i kodit tuaj është i mundur. Nuk kërkon përpilim.
- Eksperimentimi ju lejon të mësoni gjëra të reja.
- Krijoni raste të vogla testimi për të kërkuar dhe trajtuar problemet.
- Shfaqni veprat tuaja të mrekullueshme.
- Krijoni dhe ruani stilolapsa për përdorim të mëvonshëm.
- Provoni kodin e zhvilluesve të tjerë dhe shikoni atë në veprim.
Përparësitë
- Për të filluar, nuk ka asnjë kosto.
- Burime të integruara mësimore.
- Bashkëpunoni me të tjerët dhe krahasoni projektet për të parë se ku mund të shkojnë në të ardhmen.
- UI është e thjeshtë për t'u përdorur dhe e drejtpërdrejtë.
Disavantazhet
- Biblioteka e kodeve është e vogël, plotësimi i kodit automatik është i pamjaftueshëm. Është thjesht i mirë për projekte me një faqe dhe nuk mund të trajtojë asgjë më të madhe.
- Në CodePen, mund të krijoni stilolapsa privatë, por do t'ju duhet të përmirësoni në një anëtarësim Pro (9$/muaj).
sandbox kod
CodeSandbox është një redaktues kodesh i bazuar në ueb. Ai automatizon transpirimin, paketimin dhe menaxhimin e varësisë për ju, duke ju lejuar të ndërtoni një projekt të ri me një klik të vetëm. Pasi të keni krijuar diçka magjepsëse, mund ta ndani me të tjerët thjesht duke shpërndarë faqen e internetit.
Redaktori është i pajtueshëm me çdo projekt JavaScript, megjithëse ai përfshin disa veçori specifike të React, si opsioni për të ruajtur projektin në një shabllon të aplikacionit të krijuar-reagojë.
Çdo projekt që ndërtoni në CodeSandbox fillon me një shabllon. Mund të lidhet ose me një bibliotekë specifike, kornizë ose kohë ekzekutimi (përfshirë Node.js) ose të përdorë thjesht teknologji standarde të uebit. Pasi të zgjidhni një shabllon, do të dërgoheni te redaktori, ku do të gjeni të gjithë skedarët e nevojshëm dhe dritaren e shikimit tashmë të hapur.
Ju keni akses në një “skedar sistem” në të gjitha Sandboxes, që do të thotë se mund të krijoni skedarë të rinj, të përdorni module (përfshirë paketat NPM) dhe të ndërveproni me asetet statike. Ekziston gjithashtu mundësia për të modifikuar skedarët e konfigurimit specifik të shabllonit.
Ju madje mund të ndërtoni shabllonet tuaja për rastin tuaj unik të përdorimit, të kompletuar me strukturën e skedarëve dhe varësitë, njësoj si në një IDE. Për shkak se mjeti është i lidhur me Github, ju mund të gjeneroni shpejt angazhime dhe të hapni PR. Ju mund ta vendosni aplikacionin tuaj në ZEIT ose Netlify menjëherë.
CodeSandbox Team Pro
CodeSandbox, një biznes holandez që lejon zhvilluesit të ndërtojnë një sandbox të zhvillimit të aplikacioneve në internet të bazuar në shfletues, ka lëshuar zyrtarisht një platformë bashkëpunimi që lejon ekipet të punojnë me kodin në re. Produkti i ri, Team Pro, është një zgjidhje pa kod e ndërtuar për ekipe të plota të produkteve, duke filluar nga projektuesit dhe menaxherët deri tek ekipet e sigurimit të cilësisë (QA) dhe më gjerë.
Projektet ofrohen në një ndërfaqe miqësore për përdoruesit për këdo që dëshiron të bëjë ose pranojë ndryshime në një aplikacion ueb, duke shmangur metodat alternative si dërgimi i shënimeve dhe rekomandimeve te zhvilluesit për të ekzekutuar ndryshimet, kthimi i tyre për diskutim dhe përsëritja e procesit.
Key Features
- Një redaktues kodi i bazuar në ueb dhe mjet prototip.
- Për përdorim lokal, një sandbox mund të shkarkohet lehtësisht në një skedar zip.
- Programim bëhet në kuti rëre, të cilat mund të ndahen lehtësisht me kolegët.
Përparësitë
- Një përvojë e përmirësuar e përdoruesit dhe kontroll më i madh mbi redaktuesin.
- Veçoria e shikimit të drejtpërdrejtë mund të modifikohet dhe të shikohet në një dritare të veçantë.
- Kodi formatohet automatikisht dhe përfshin një CLI (codesandbox-cli)
- Mbështetje për modulet e avancuara npm.
- Mesazhe të bukura gabimi me rekomandime.
- Ai përmirëson përvojën e korrigjimit duke ofruar një terminal më të mirë, një shikues testues dhe një shikues problemi.
Disavantazhet
- Konsumatori përfundimtar është i ekspozuar ndaj shumë personalizimeve.
- Zvarritja dhe heqja e skedarëve nga një kompjuter lokal nuk funksionon siç duhet.
- Një strukturë e caktuar dosjesh duhet të ndiqet në CodeSandbox.
- Funksionaliteti i një sandbox privat është i disponueshëm vetëm për klientët.
StackBlitz
StackBlitz është një IDE në internet e mbështetur nga kodi i Visual Studio për aplikacionet në internet. Platforma është po aq e përgjegjshme dhe e adaptueshme sa versioni i desktopit. StackBlitz është një IDE në internet që vjen para-ngarkuar me Angular dhe React mjetet e zhvillimit.
Thinkster.io ndërtoi atë projekt fantastik për ta bërë sa më të thjeshtë që të jetë e mundur fillimin e projektit tuaj Angular ose React pa pasur nevojë të shqetësoheni për instalimin e varësisë ose cilësimet e ndërtimit. StackBlitz ofron shumë veçori të mahnitshme dhe unike që asnjë redaktues tjetër i kodit në internet nuk i ka tani. Si rezultat, ia vlen të hetoni më tej StackBlitz dhe të zbuloni se çfarë ofron kjo IDE në internet.
Stackblitz është jashtëzakonisht i krahasueshëm me IDE-në e plotë, veçanërisht nëse nuk mund t'i thuash lamtumirë kodit VS sepse mjeti bazohet në të. Paketa ka një sërë veçorish që ju lejojnë të filloni dhe të vazhdoni të krijoni një aplikacion të plotë.
Programi mundësohet nga Visual Studio, i cili është i njohur në mesin e zhvilluesve. Redaktimi jashtë linje është veçoria më e spikatur e projektit. Për ta bërë të mundur këtë, ekipi Stackblitz krijoi një uebserver në shfletues. Ndërsa shkruani, ai instalon automatikisht varësitë, përpilon, grumbullon dhe kryen ringarkim të nxehtë.
Version Premium
Kadet, Astronaut dhe Komandant janë në dispozicion falas, përkatësisht 8 dollarë në muaj dhe 29 dollarë në muaj. Astronaut and Commander përfshin një sërë veçorish si projekte private të pakufizuara, ngarkime të pakufizuara skedarësh, ftesë në kanalin e zbehtë të ekipit bazë, etj. Për më shumë informacion, shihni bordin zyrtar të faturimit.
Key Features
- Shtimi i paketave NPM në projektin tuaj.
- Falë një serveri të ri zhvillues në shfletues, mund të modifikoni kur jeni jashtë linje.
- Një URL e strehuar e aplikacionit që na lejon të aksesojmë (dhe ndajmë) aplikacionin tonë të drejtpërdrejtë në çdo kohë.
- Karakteristika të tjera të dukshme të Kodit Visual Studio përfshijnë Intellisense, Project Search (Cmd/Ctrl+P), Shko te Definition dhe të tjera.
Përparësitë
- Aftësitë e Firebase për vendosje.
- Redaktori është vërtet i lehtë për t'u përdorur dhe jashtëzakonisht i shpejtë.
- Përdoruesit kanë akses në package.json, index.html dhe index.js.
- Kodi burimor i ndashëm që mund të integrohet gjithashtu.
- Pamja paraprake e drejtpërdrejtë në një seksion të madh të faqes, me opsionin për të hapur në një faqe tjetër nëse është e nevojshme.
- Ndërsa jashtë linje, redaktimi
- Përfundime inteligjente dhe Intellisense e përmirësuar.
- Thelbi i Stackblitz është burim të hapur.
Disavantazhet
- Ju nuk keni ndikim mbi ndërtesën ose serverin e zhvilluesit, sepse ato menaxhohen nga komanda Cre-react-app.
- Në React, duhet të respektohet një strukturë themelore e dosjeve.
- Nuk është e mundur të formatohet kodi automatikisht, megjithëse është e mundur të bëhet me dorë.
Përfundim
Në ditët e sotme, një shesh lojërash kodimi si ato që kemi parë më sipër mund të përdoret për të ndërtuar plotësisht çdo projekt në internet. Nuk ka nevojë të instaloni IDE të rënda në kompjuterin tuaj kur mund të ndërtoni, korrigjoni, testoni dhe vendosni direkt nga shfletuesi juaj i internetit.
Sipas mendimit tim, StackBlitz do të ishte më i miri mes tyre sepse është një IDE e bazuar në ueb që lejon JavaScript, Angular dhe projekte të tjera zhvillimi menjëherë, pa pasur nevojë të instaloni ndonjë mjedis zhvillimi lokal si Node.js, npm, ose Angular. Ofron të njëjtën përvojë si përdorimi i kodit të Visual Studio në nivel lokal. Në realitet, për shkak se StackBlitz drejtohet nga Visual Studio Code, ndihet po aq i shpejtë dhe i gjithanshëm sa versioni i desktopit.
Cili nga CodePen, CodeSandbox dhe StackBlitz është mjeti juaj i preferuar? Na tregoni në komente.
Abbatyya
Faleminderit për këtë artikull të mrekullueshëm, sapo pashë stackblitz.com, e di që kjo është ajo që dua.