Gan weithio ar brosiect cymhleth, p'un a ydych chi'n rhaglennydd profiadol neu'n ddyn newydd, mae'n debyg y byddwch chi'n dod ar draws problemau. Pan fyddwch chi'n rhannu'ch prosiect yn nifer o fodiwlau, mae problemau'n codi, sy'n ei gwneud hi'n anoddach olrhain gwallau a dod o hyd i atebion. Mewn amgylchiadau eraill, gall dadfygio achosion unigol fod yn anodd oherwydd nad ydych wedi darganfod yr ateb cywir i'r broblem yr ydych wedi bod yn gweithio arni.
Mae hefyd yn digwydd fel darn o god weithiau, a all edrych yn gymhleth ar y pryd. Mae JavaScript yn un o'r ieithoedd ar y we sy'n hynod o syml i'w dysgu. Yn syml, lansiwch eich porwr bwrdd gwaith a llywio i Developer Tools (F12 fel arfer), ac rydych chi wedi gorffen! Yna gallwch arbrofi gyda JS heb fod angen gosod neu redeg unrhyw feddalwedd cymhleth.
I ddechrau, y cyfan sydd ei angen arnoch chi yw porwr. Mae'n wych cael yr holl symlrwydd hwn allan o'r bocs, ond mae yna adegau pan fydd angen mwy arnoch chi. Er enghraifft, mae'n debyg eich bod am arbrofi gydag API Gwe newydd yr ydych wedi'i ddarganfod yn ddiweddar ond nad ydych am ddechrau prosiect newydd.
Yn y swydd hon, byddwn yn cymharu ac yn cyferbynnu'r tri maes chwarae JS mwyaf poblogaidd, CodePen, CodeSandbox, a StackBlitz. Gadewch i ni ddechrau!
CodePen
Mae offer datblygu gwe Frontend bob amser yn esblygu, ac mae golygyddion testun yn elfen fawr o'r technolegau diweddaraf sy'n gwneud bywyd datblygwr yn symlach. Ar wahân i olygyddion testun annibynnol fel Atom neu Notepad ++, bu ffrwydrad o olygyddion porwr yn ystod y blynyddoedd diwethaf nad oes angen gosod rhaglenni arnynt ac sy'n hyrwyddo mwy o gydweithio.
Mae CodePen yn “gymuned ar-lein ar gyfer profi a chyflwyno pytiau cod HTML, CSS a JavaScript a grëwyd gan ddefnyddwyr” sy'n cynnig cyfleoedd gwych i ddysgu sut i ysgrifennu tudalennau gwe blaen yn well.
Mae CodePen yn rhoi dau “ddull.” Y cyntaf a'r mwyaf cyffredin a ddefnyddir yw'r Pen. Mae mor syml â chlicio botwm a chael eich cludo'n syth at y golygydd. O'r fan honno, gallwch gael mynediad at banel rhagolwg yn ogystal â ffenestri golygu HTML, CSS a JS sylfaenol.
Does dim “system ffeil,” “IntelliSense,” nac unrhyw beth arall – dim ond amlygu cystrawen syml a gorchmynion cyflym fel prettify. Yn y tab opsiynau, gallwch ddewis o ystod gyfyngedig o ragbroseswyr ar gyfer y tair iaith (fel TypeScript ar gyfer JS) neu ychwanegu cysylltiadau at ffynonellau allanol.
Os mai dim ond angen unrhyw beth wedi'i wneud am ddim sydd ei angen arnoch, bydd y naill olygydd neu'r llall yn ddigon. Byddwn yn awgrymu CodePen ar gyfer unrhyw beth nad oes angen llawer o setup neu lyfrgelloedd arno - yn syml HTML, CSS, a JS gyda rhag-broseswyr dewisol ar ei ben. Os ydych chi am ddefnyddio'r maes chwarae i wella'ch presenoldeb cyfryngau cymdeithasol neu ddatblygu portffolio personol, mae CodePen yn opsiwn gwell.
Fersiwn Premiwm
Mae gennych ychydig mwy o ddewisiadau amgen i ddewis ohonynt ar CodePen. Os ydych chi'n talu'n flynyddol, gallwch gael un o dri chynllun premiwm am $12, $19, neu $39 bob mis. Gallwch greu nifer anfeidrol o beiros, postiadau a chasgliadau preifat ar unrhyw un o'r tair haen.
Byddwch hefyd yn derbyn y bathodyn Pro (hwb cymdeithasol), mynediad modd cydweithio byw, dim hysbysebu, a mwy. Mae yna hefyd rai strategaethau tîm-benodol a gwahaniaethau traws-haen eraill. Edrychwch ar eu bwrdd bilio swyddogol am ragor o wybodaeth.
Nodweddion allweddol
Ar wahân i greu HTML, CSS, a JavaScript yn CodePen, mae yna ychydig mwy o bethau sy'n ei osod ar wahân.
- Mae'n bosibl gweld eich cod mewn amser real. Nid oes angen ei lunio.
- Mae arbrofi yn eich galluogi i ddysgu pethau newydd.
- Creu achosion prawf bach iawn i chwilio am broblemau a mynd i'r afael â nhw.
- Arddangoswch eich gweithiau gwych.
- Creu a storio pinnau ysgrifennu i'w defnyddio'n ddiweddarach.
- Rhowch gynnig ar god datblygwyr eraill a'i weld ar waith.
manteision
- I ddechrau, nid oes unrhyw gost.
- Adnoddau dysgu adeiledig.
- Cydweithio ag eraill a chymharu prosiectau i weld lle gallant fynd yn y dyfodol.
- Mae'r UI yn syml i'w ddefnyddio ac yn syml.
Anfanteision
- Mae'r llyfrgell god yn fach, mae cwblhau'r cod auto yn annigonol. Mae'n dda ar gyfer prosiectau un dudalen ac ni all drin unrhyw beth mwy.
- Ar CodePen, gallwch greu beiros preifat, ond bydd angen i chi uwchraddio i aelodaeth Pro ($ 9 / mis).
blwch tywod cod
Mae CodeSandbox yn olygydd cod ar y we. Mae'n awtomeiddio rheoli trydarthol, pecynnu a dibyniaeth i chi, gan ganiatáu ichi adeiladu prosiect newydd gydag un clic. Ar ôl i chi greu rhywbeth hynod ddiddorol, gallwch ei rannu ag eraill trwy rannu'r wefan yn unig.
Mae'r golygydd yn gydnaws ag unrhyw brosiectau JavaScript, er ei fod yn cynnwys rhai nodweddion React-benodol, megis yr opsiwn i achub y prosiect mewn templed creu-ymateb-app.
Mae unrhyw brosiect rydych chi'n ei adeiladu yn CodeSandbox yn dechrau gyda thempled. Gall naill ai ymwneud â llyfrgell, fframwaith, neu amser rhedeg penodol (gan gynnwys Node.js) neu ddefnyddio technolegau gwe safonol yn unig. Ar ôl dewis templed, fe'ch anfonir at y golygydd, lle byddwch yn dod o hyd i'r holl ffeiliau angenrheidiol a'r ffenestr rhagolwg eisoes ar agor.
Mae gennych fynediad i “system ffeil” ym mhob Blwch Tywod, sy'n golygu y gallwch greu ffeiliau newydd, defnyddio modiwlau (gan gynnwys pecynnau NPM), a rhyngweithio ag asedau sefydlog. Mae cyfle hefyd i addasu'r ffeiliau ffurfweddu templed-benodol.
Efallai y byddwch hyd yn oed yn adeiladu eich templedi eich hun ar gyfer eich achos defnydd unigryw, ynghyd â strwythur ffeiliau a dibyniaethau, yn debyg iawn i DRhA. Oherwydd bod yr offeryn yn gysylltiedig â Github, gallwch chi gynhyrchu ymrwymiadau ac agor cysylltiadau cyhoeddus yn gyflym. Gallwch anfon eich cais i ZEIT neu Netlify ar unwaith.
Tîm CodeSandbox Pro
Mae CodeSandbox, busnes o'r Iseldiroedd sy'n caniatáu i ddatblygwyr adeiladu blwch tywod datblygu apiau gwe yn seiliedig ar borwr, wedi rhyddhau'n swyddogol lwyfan cydweithredu sy'n caniatáu i dimau weithio ar god yn y cwmwl. Mae'r cynnyrch newydd, Team Pro, yn ddatrysiad heb god a adeiladwyd ar gyfer timau cynnyrch cyflawn, yn amrywio o ddylunwyr a rheolwyr i dimau sicrhau ansawdd (SA) a thu hwnt.
Darperir prosiectau mewn rhyngwyneb hawdd ei ddefnyddio ar gyfer unrhyw un sy'n dymuno gwneud neu dderbyn newidiadau i raglen we, gan osgoi dulliau amgen megis anfon nodiadau ac argymhellion i ddatblygwyr i weithredu'r newidiadau, eu dychwelyd i'w trafod, ac ailadrodd y broses.
Nodweddion allweddol
- Golygydd cod ar y we ac offeryn prototeip.
- Ar gyfer defnydd lleol, gellir lawrlwytho blwch tywod yn hawdd mewn ffeil zip.
- Rhaglennu yn cael ei wneud mewn blychau tywod, y gellir eu rhannu'n hawdd â chydweithwyr.
manteision
- Gwell profiad defnyddiwr a mwy o reolaeth dros y golygydd.
- Gellir addasu'r nodwedd rhagolwg byw a'i weld mewn ffenestr ar wahân.
- Mae'r cod yn cael ei fformatio'n awtomatig ac mae'n cynnwys CLI (codesandbox-cli)
- Cefnogaeth ar gyfer modiwlau npm uwch.
- Negeseuon gwall hyfryd gydag argymhellion.
- Mae'n gwella'r profiad dadfygio trwy ddarparu gwell terfynell, gwyliwr prawf, a gwyliwr mater.
Anfanteision
- Mae'r defnyddiwr terfynol yn agored i lawer o bersonoliadau.
- Nid yw llusgo a gollwng ffeiliau o gyfrifiadur lleol yn gweithredu'n iawn.
- Rhaid dilyn strwythur ffolder penodol yn CodeSandbox.
- Mae ymarferoldeb blwch tywod preifat ar gael i gwsmeriaid yn unig.
StackBlitz
Mae StackBlitz yn DRhA ar-lein sy'n cael ei bweru gan God Studio Visual ar gyfer cymwysiadau gwe. Mae'r platfform mor ymatebol ac addasadwy â'r fersiwn bwrdd gwaith. DRhA ar-lein yw StackBlitz sy'n dod wedi'i lwytho ymlaen llaw Angular ac Adwaith offer datblygu.
Adeiladodd Thinkster.io y prosiect gwych hwnnw i'w wneud mor syml â phosibl i ddechrau gyda'ch prosiect Angular neu React heb orfod poeni am osod dibyniaeth neu osod gosodiadau. Mae StackBlitz yn darparu llawer o nodweddion anhygoel ac unigryw nad oes gan unrhyw olygydd cod ar-lein arall ar hyn o bryd. O ganlyniad, mae'n werth ymchwilio ymhellach i StackBlitz a darganfod beth sydd gan y DRhA ar-lein hwn i'w gynnig.
Mae Stackblitz yn hynod debyg i'r DRhA cyflawn, yn enwedig os na allwch chi ffarwelio â chod VS oherwydd bod yr offeryn yn seiliedig arno. Mae gan y pecyn amrywiaeth o nodweddion sy'n eich galluogi i ddechrau a pharhau i greu cymhwysiad pentwr llawn.
Mae'r rhaglen yn cael ei phweru gan Visual Studio, sy'n adnabyddus ymhlith datblygwyr. Golygu all-lein yw nodwedd amlwg y prosiect. I wneud hyn yn bosibl, creodd tîm Stackblitz weinydd gwe o fewn y porwr. Wrth i chi deipio, mae'n gosod dibyniaethau yn awtomatig, yn llunio, yn bwndelu, ac yn ail-lwytho'n boeth.
Fersiwn Premiwm
Mae Cadetiaid, Gofodwr a Chomander ar gael am ddim, $8/mis, a $29/mis, yn y drefn honno. Mae gofodwr a chomander yn cynnwys nifer o nodweddion fel prosiectau preifat diderfyn, uwchlwythiadau ffeiliau anghyfyngedig, gwahoddiad i sianel slac tîm craidd, ac ati. I gael rhagor o wybodaeth, gweler y bwrdd bilio swyddogol.
Nodweddion allweddol
- Ychwanegu pecynnau NPM at eich prosiect.
- Diolch i weinydd datblygu mewn-porwr newydd, gallwch olygu tra all-lein.
- URL ap a gynhelir sy'n ein galluogi i gyrchu (a rhannu) ein app byw ar unrhyw adeg.
- Mae nodweddion Cod Stiwdio Gweledol nodedig eraill yn cynnwys Intellisense, Project Search (Cmd/Ctrl+P), Ewch i Diffiniad, ac eraill.
manteision
- Galluoedd Firebase ar gyfer defnyddio.
- Mae'r golygydd yn hawdd iawn i'w ddefnyddio ac yn hynod o gyflym.
- Mae gan ddefnyddwyr fynediad i pack.json, index.html, a index.js.
- Cod ffynhonnell y gellir ei rannu y gellir ei fewnosod hefyd.
- Rhagolwg byw ar ran fawr o'r dudalen, gyda'r opsiwn i agor ar dudalen arall os oes angen.
- Tra All-lein, Golygu
- Cwblhad clyfar a gwell Intellisense.
- Craidd Stackblitz yw ffynhonnell agored.
Anfanteision
- Nid oes gennych chi ddylanwad dros yr adeilad na'r gweinydd datblygwr oherwydd mae'r rheini'n cael eu rheoli gan y gorchymyn creu-react-app.
- Yn React, dylid cadw at strwythur ffolderi sylfaenol.
- Nid yw'n bosibl fformatio cod yn awtomatig, er ei bod yn bosibl ei wneud â llaw.
Casgliad
Y dyddiau hyn, gellir defnyddio maes chwarae codio fel y rhai a welsom uchod i adeiladu unrhyw brosiect gwe yn llwyr. Nid oes angen gosod IDEs beichus ar eich cyfrifiadur pan allwch chi adeiladu, dadfygio, profi a defnyddio'n uniongyrchol o'ch porwr gwe.
Yn fy marn i, StackBlitz fyddai'r gorau yn eu plith oherwydd ei fod yn IDE ar y we sy'n caniatáu JavaScript, Angular, a phrosiectau datblygu eraill allan o'r bocs, heb unrhyw angen gosod unrhyw amgylcheddau datblygu lleol fel Node.js, npm, neu Angular. Mae'n darparu'r un profiad â defnyddio Visual Studio Code yn lleol. Mewn gwirionedd, oherwydd bod StackBlitz yn cael ei yrru gan Visual Studio Code, mae'n teimlo mor gyflym ac amlbwrpas â'r fersiwn bwrdd gwaith.
Pa un o CodePen, CodeSandbox, a StackBlitz yw eich teclyn mynd-i? Rhowch wybod i ni yn y sylwadau.
Abbatyya
Diolch am yr erthygl wych hon, ar ôl i mi weld stackblitz.com, dwi'n gwybod mai dyma rydw i ei eisiau.