Taħdem fuq proġett kumpless, kemm jekk int programmatur b'esperjenza jew raġel tal-bidu, prattikament x'aktarx ikollok problemi. Meta taqsam il-proġett tiegħek f'ħafna moduli, jinqalgħu kwistjonijiet, li jagħmluha aktar diffiċli biex jintraċċaw l-iżbalji u ssib soluzzjonijiet. F'ċirkostanzi oħra, id-debugging ta' każijiet individwali jista' jkun diffiċli għax ma skoprejtx is-soluzzjoni xierqa għall-problema li kont qed taħdem fuqha.
Jiġri wkoll bħala biċċa kodiċi f'okkażjoni, li tista 'tidher kumplessa f'dak iż-żmien. JavaScript hija waħda mil-lingwi bbażati fuq il-Web li hija estremament sempliċi biex titgħallem. Sempliċement iniedi l-browser tad-desktop tiegħek u naviga għal Developer Tools (ġeneralment F12), u lest! Tista' mbagħad tesperimenta bil-JS mingħajr ma jkollok bżonn tinstalla jew tħaddem xi softwer ikkumplikat.
Biex tibda, kulma għandek bżonn huwa browser. Hija ħaġa sabiħa li jkollok din is-sempliċità kollha dritt barra mill-kaxxa, iżda hemm okkażjonijiet meta għandek bżonn aktar. Pereżempju, ejja ngħidu li trid tesperimenta b'API Web ġdida li skoprejt dan l-aħħar iżda ma tridx tibda proġett ġdid.
F'din il-kariga, aħna ser inqabblu u nikkuntrastaw it-tliet playgrounds tal-JS l-aktar popolari, CodePen, CodeSandbox, u StackBlitz. Ejja nibdew!
CodePen
Għodod għall-iżvilupp tal-web frontend dejjem qed jevolvu, u l-edituri tat-testi huma komponent kbir tal-aħħar teknoloġiji li jagħmlu l-ħajja tal-iżviluppatur aktar sempliċi. Minbarra edituri tat-test waħedhom bħal Atom jew Notepad ++, kien hemm splużjoni ta 'edituri bbażati fuq browser f'dawn l-aħħar snin li ma jeħtiġux installazzjoni ta' programmi u jippromwovu kollaborazzjoni akbar.
CodePen hija "komunità onlajn għall-ittestjar u l-preżentazzjoni ta' snippets ta' kodiċi HTML, CSS, u JavaScript maħluqa mill-utent" li toffri opportunitajiet meraviljużi biex titgħallem kif tikteb paġni web frontend aħjar.
CodePen jagħtik żewġ "modi." L-ewwel u l-aktar użata hija l-Pinna. Huwa sempliċi daqs li tikklikkja buttuna u tiġi ttrasportata dritt lejn l-editur. Minn hemm, tista 'taċċessa panel ta' preview kif ukoll twieqi bażiċi tal-editjar HTML, CSS, u JS.
M'hemm l-ebda "sistema ta 'fajls," "IntelliSense," jew xi ħaġa oħra - sempliċiment jenfasizzaw sintassi sempliċi u kmandi veloċi bħal prettify. Fit-tab tal-għażliet, tista' tagħżel minn firxa ristretta ta' preproċessuri għat-tliet lingwi kollha (bħal TypeScript għal JS) jew iżżid konnessjonijiet ma' sorsi esterni.
Jekk għandek bżonn biss xi ħaġa li ssir b'xejn, wieħed mill-edituri jkun biżżejjed. Nissuġġerixxi CodePen għal kull ħaġa li ma teħtieġx ħafna setup jew libreriji - sempliċement HTML, CSS, u JS bi pre-proċessuri fakultattivi fuq nett. Jekk trid tutilizza l-bitħa biex ittejjeb il-preżenza tiegħek fil-midja soċjali jew tiżviluppa portafoll personali, CodePen hija għażla aħjar.
Verżjoni Premium
Għandek ftit alternattivi oħra minn fejn tagħżel fuq CodePen. Jekk tħallas kull sena, tista 'tikseb wieħed minn tliet pjanijiet premium għal $12, $19, jew $39 kull xahar. Tista' toħloq numru infinit ta' pinen privati, arbli, u kollezzjonijiet fuq kwalunkwe mit-tliet saffi.
Int ser tirċievi wkoll il-badge Pro (spinta soċjali), aċċess għall-mod ta' kollaborazzjoni live, l-ebda reklamar, u aktar. Hemm ukoll ċerti strateġiji speċifiċi għat-tim u distinzjonijiet oħra bejn il-livelli. Iċċekkja l-bord tal-kontijiet uffiċjali tagħhom għal aktar informazzjoni.
Karatteristiċi ewlenin
Minbarra li toħloq HTML, CSS u JavaScript f'CodePen, hemm ftit affarijiet oħra li jiddistingwuha.
- Il-wiri fil-ħin reali tal-kodiċi tiegħek huwa possibbli. Ma teħtieġx kumpilazzjoni.
- L-esperimentazzjoni tippermettilek titgħallem affarijiet ġodda.
- Oħloq każijiet tat-test żgħar biex tfittex u tindirizza l-problemi.
- Uri x-xogħlijiet meraviljużi tiegħek.
- Oħloq u aħżen Pinen għal użu aktar tard.
- Ipprova l-kodiċi ta 'żviluppaturi oħra u araha fl-azzjoni.
vantaġġi
- Biex tibda, m'hemm l-ebda spiża.
- Riżorsi ta’ tagħlim integrati.
- Ikkollabora ma 'oħrajn u qabbel proġetti biex tara fejn jistgħu jmorru fil-futur.
- L-UI hija sempliċi biex tużah u sempliċi.
Żvantaġġi
- Il-librerija tal-kodiċi hija żgħira, it-tlestija tal-kodiċi awtomatiku hija inadegwata. Huwa biss tajjeb għal proġetti ta 'paġna waħda u ma jistax jimmaniġġja xi ħaġa akbar.
- Fuq CodePen, tista 'toħloq pinen privati, iżda jkollok bżonn taġġorna għal sħubija Pro ($ 9/xahar).
kodiċi sandbox
CodeSandbox huwa editur tal-kodiċi bbażat fuq il-web. Jawtomatizza l-immaniġġjar tat-transpirazzjoni, l-ippakkjar u d-dipendenza għalik, li jippermettilek tibni proġett ġdid bi klikk waħda. Wara li tkun ħloqt xi ħaġa affaxxinanti, tista' taqsamha ma' oħrajn billi sempliċement taqsam il-websajt.
L-editur huwa kompatibbli ma 'kwalunkwe proġett JavaScript, għalkemm jinkludi ċerti karatteristiċi speċifiċi għal React, bħall-għażla li tissejvja l-proġett f'mudell ta' create-react-app.
Kwalunkwe proġett li tibni f'CodeSandbox jibda b'mudell. Jista 'jew jirrelata ma' librerija speċifika, qafas, jew runtime (inkluż Node.js) jew juża sempliċement teknoloġiji tal-web standard. Wara li tagħżel mudell, int mibgħut lill-editur, fejn issib il-fajls kollha meħtieġa u t-tieqa tal-preview diġà miftuħa.
Għandek aċċess għal "sistema ta' fajls" fis-Sandboxes kollha, li jfisser li tista' toħloq fajls ġodda, tutilizza moduli (inklużi pakketti NPM), u tinteraġixxi ma' assi statiċi. Hemm ukoll l-opportunità li timmodifika l-fajls tal-konfigurazzjoni speċifiċi għall-mudelli.
Tista' anki tibni l-mudelli tiegħek għall-każ ta' użu uniku tiegħek, kompluti bl-istruttura tal-fajls u d-dipendenzi, bħal f'IDE. Minħabba li l-għodda hija marbuta ma 'Github, tista' malajr tiġġenera impenji u tiftaħ PRs. Tista' tuża l-applikazzjoni tiegħek ma' ZEIT jew Netlify minnufih.
CodeSandbox Team Pro
CodeSandbox, negozju Olandiż li jippermetti lill-iżviluppaturi jibnu sandbox ta' żvilupp ta' app tal-web ibbażat fuq browser, ħarġet uffiċjalment pjattaforma ta' kollaborazzjoni li tippermetti li timijiet jaħdmu fuq kodiċi fil-cloud. Il-prodott il-ġdid, Team Pro, huwa soluzzjoni bla kodiċi mibnija għal timijiet kompluti ta 'prodotti, li jvarjaw minn disinjaturi u maniġers sa timijiet ta' assigurazzjoni tal-kwalità (QA) u lil hinn.
Il-proġetti huma pprovduti f'interface faċli għall-utent għal kull min jixtieq jagħmel jew jaċċetta bidliet f'applikazzjoni tal-web, filwaqt li jevita metodi alternattivi bħal li jintbagħtu noti u rakkomandazzjonijiet lill-iżviluppaturi biex iwettqu l-bidliet, jgħadduhom lura għad-diskussjoni, u jirrepetu l-proċess.
Karatteristiċi ewlenin
- Editur tal-kodiċi u għodda prototip ibbażata fuq il-web.
- Għall-użu lokali, sandbox jista 'jitniżżel faċilment f'fajl zip.
- Programmazzjoni isir f'kaxxi tar-ramel, li jistgħu jiġu kondiviżi faċilment mal-kollegi.
vantaġġi
- Esperjenza mtejba tal-utent u kontroll akbar fuq l-editur.
- Il-karatteristika ta 'previżjoni diretta tista' tiġi modifikata u tidher f'tieqa separata.
- Il-kodiċi huwa fformattjat awtomatikament u jinkludi CLI (codesandbox-cli)
- Appoġġ għal moduli npm avvanzati.
- Messaġġi ta 'żball sbieħ b'rakkomandazzjonijiet.
- Ittejjeb l-esperjenza tad-debugging billi tipprovdi terminal aħjar, telespettatur tat-test, u telespettatur tal-ħruġ.
Żvantaġġi
- Il-konsumatur aħħari huwa espost għal ħafna personalizzazzjonijiet.
- Iddreggja u qatra fajls minn kompjuter lokali ma taħdimx kif suppost.
- Ċerta struttura ta' folder trid tiġi segwita f'CodeSandbox.
- Il-funzjonalità ta 'sandbox privat hija disponibbli biss għall-patruni.
StackBlitz
StackBlitz huwa IDE onlajn li jaħdem bil-Visual Studio Code għall-applikazzjonijiet tal-web. Il-pjattaforma hija responsiva u adattabbli daqs il-verżjoni tad-desktop. StackBlitz huwa IDE onlajn li jiġi mgħobbi minn qabel Angolari u Reaġixxi għodod għall-iżvilupp.
Thinkster.io bena dak il-proġett meraviljuż biex jagħmilha sempliċi kemm jista 'jkun biex tibda bil-proġett Angular jew React tiegħek mingħajr ma jkollok għalfejn tinkwieta dwar l-installazzjoni tad-dipendenza jew tibni settings. StackBlitz jipprovdi ħafna karatteristiċi tal-għaġeb u uniċi li l-ebda editur tal-kodiċi online ieħor ma għandu bħalissa. Bħala riżultat, huwa utli li tinvestiga aktar StackBlitz u tiskopri x'għandu x'joffri dan l-IDE online.
Stackblitz huwa estremament komparabbli mal-IDE komplut, speċjalment jekk ma tistax tgħid addiju għall-kodiċi VS minħabba li l-għodda hija bbażata fuqha. Il-pakkett għandu varjetà ta 'karatteristiċi li jippermettulek tibda u tkompli toħloq applikazzjoni full-stack.
Il-programm huwa mħaddem minn Visual Studio, li huwa magħruf sew fost l-iżviluppaturi. L-editjar offline huwa l-karatteristika li tispikka tal-proġett. Biex dan ikun possibbli, it-tim Stackblitz ħoloq webserver fil-browser. Hekk kif ittajpja, awtomatikament jinstalla dipendenzi, jikkompila, qatet, u jagħmel tagħbija mill-ġdid sħuna.
Verżjoni Premium
Kadetti, Astronawti, u Kmandant huma disponibbli b'xejn, $ 8 / xahar, u $ 29 / xahar, rispettivament. L-astronawt u l-Kmandant jinkludi numru ta 'karatteristiċi bħal proġetti privati illimitati, uploads ta' fajls illimitati, tistieden lill-kanal slack tat-tim ewlieni, eċċ. Għal aktar informazzjoni, ara l-bord uffiċjali tal-kontijiet.
Karatteristiċi ewlenin
- Iżżid pakketti NPM mal-proġett tiegħek.
- Grazzi għal server dev ġdid fil-browser, tista' teditja waqt li tkun offline.
- URL tal-app ospitat li jippermettilna naċċessaw (u naqsmu) l-app diretta tagħna fi kwalunkwe ħin.
- Karatteristiċi notevoli oħra tal-Kodiċi tal-Visual Studio jinkludu Intellisense, Tiftix tal-Proġett (Cmd/Ctrl + P), Mur fid-Definizzjoni, u oħrajn.
vantaġġi
- Il-kapaċitajiet ta' Firebase għall-iskjerament.
- L-editur huwa verament faċli biex tużah u estremament malajr.
- L-utenti għandhom aċċess għal package.json, index.html, u index.js.
- Kodiċi sors qsim li jista 'wkoll jiġi inkorporat.
- Preview live fuq sezzjoni kbira tal-paġna, bl-għażla li tiftaħ fuq paġna differenti jekk meħtieġ.
- Filwaqt li Offline, Editjar
- Tlestimenti intelliġenti u Intellisense mtejba.
- Il-qalba ta 'Stackblitz hija sors miftuħ.
Żvantaġġi
- M'għandekx influwenza fuq il-bini jew is-server tal-iżviluppatur minħabba li dawk huma ġestiti mill-kmand create-react-app.
- F'React, għandha tiġi osservata struttura fundamentali tal-folders.
- Mhuwiex possibbli li tifformattja l-kodiċi awtomatikament, għalkemm huwa possibbli li tagħmel dan manwalment.
konklużjoni
Illum il-ġurnata, playground tal-kodifikazzjoni bħal dawk li rajna hawn fuq jista 'jintuża biex jinbena kompletament kwalunkwe proġett tal-web. M'hemmx għalfejn tinstalla IDEs ingombranti fuq il-PC tiegħek meta tkun tista' tibni, tiddibaggja, tittestja u tiskjera direttament mill-web browser tiegħek.
Fl-opinjoni tiegħi, StackBlitz ikun l-aħjar fosthom minħabba li huwa IDE ibbażat fuq il-web li jippermetti JavaScript, Angular, u proġetti oħra ta 'żvilupp dritt barra mill-kaxxa, mingħajr il-ħtieġa li tinstalla xi ambjenti ta' żvilupp lokali bħal Node.js, npm, jew Angolari. Jipprovdi l-istess esperjenza bħall-użu tal-Visual Studio Code lokalment. Fir-realtà, minħabba li StackBlitz huwa mmexxi minn Visual Studio Code, iħossu veloċi u versatili daqs il-verżjoni tad-desktop.
Liema minn CodePen, CodeSandbox, u StackBlitz hija l-għodda tiegħek? Għidilna fil-kummenti.
Abbatyya
Grazzi għal dan l-artikolu kbir, ladarba rajt stackblitz.com, naf li dan huwa dak li rrid.