Ṣiṣẹ lori iṣẹ akanṣe kan ti o nipọn, boya o jẹ pirogirama ti o ni iriri tabi alakọbẹrẹ, o ṣee ṣe ki o kọja awọn iṣoro. Nigbati o ba pin iṣẹ akanṣe rẹ si ọpọlọpọ awọn modulu, awọn ọran dide, jẹ ki o nira sii lati tọpinpin awọn aṣiṣe ati wa awọn solusan. Ni awọn ipo miiran, n ṣatunṣe aṣiṣe awọn iṣẹlẹ kọọkan le jẹ alakikanju nitori pe o ko ṣe awari ojutu to dara si iṣoro ti o ti n ṣiṣẹ lori.
O tun waye bi nkan koodu ni ayeye, eyiti o le dabi eka ni akoko naa. JavaScript jẹ ọkan ninu awọn ede orisun Ayelujara ti o rọrun pupọ lati kọ ẹkọ. Nìkan ṣe ifilọlẹ ẹrọ aṣawakiri tabili tabili rẹ ki o lilö kiri si Awọn irinṣẹ Olùgbéejáde (nigbagbogbo F12), ati pe o ti ṣetan! O le ṣe idanwo pẹlu JS laisi nilo lati fi sii tabi ṣiṣe eyikeyi sọfitiwia idiju.
Lati bẹrẹ, gbogbo ohun ti o nilo ni ẹrọ aṣawakiri kan. O jẹ ohun iyanu lati ni gbogbo ayedero yii taara lati inu apoti, ṣugbọn awọn iṣẹlẹ wa nigbati o nilo diẹ sii. Fun apẹẹrẹ, ṣebi o fẹ lati ṣe idanwo pẹlu API Wẹẹbu Wẹẹbu tuntun ti o ti ṣe awari laipẹ ṣugbọn ko fẹ bẹrẹ iṣẹ akanṣe kan.
Ninu ifiweranṣẹ yii, a yoo ṣe afiwe ati ṣe iyatọ awọn aaye ibi-iṣere JS mẹta ti o gbajumọ julọ, CodePen, CodeSandbox, ati StackBlitz. Jẹ ká bẹrẹ!
CodePen
Awọn irinṣẹ idagbasoke wẹẹbu Frontend nigbagbogbo n dagbasoke, ati awọn olootu ọrọ jẹ paati nla ti awọn imọ-ẹrọ tuntun ti o jẹ ki igbesi aye olupilẹṣẹ rọrun. Yato si awọn olootu ọrọ ti o ni imurasilẹ gẹgẹbi Atom tabi Notepad ++, bugbamu ti awọn olootu orisun ẹrọ aṣawakiri ti wa ni awọn ọdun aipẹ ti ko nilo fifi sori ẹrọ ati igbega ifowosowopo nla.
CodePen jẹ “agbegbe ori ayelujara fun idanwo ati iṣafihan olumulo-ṣẹda HTML, CSS, ati awọn snippets koodu JavaScript” ti o funni ni awọn aye ikọja lati kọ ẹkọ bii o ṣe le kọ awọn oju-iwe wẹẹbu iwaju dara julọ.
CodePen fun ọ ni “awọn ipo” meji. Akọkọ ati lilo julọ ni Pen. O rọrun bi titẹ bọtini kan ati gbigbe si ọtun si olootu. Lati ibẹ, o le wọle si nronu awotẹlẹ bi daradara bi HTML ipilẹ, CSS, ati awọn window ṣiṣatunṣe JS.
Ko si “eto faili,” “IntelliSense,” tabi ohunkohun miiran – o kan ṣe afihan sintasi ti o rọrun ati awọn aṣẹ iyara bi prettify. Ninu taabu awọn aṣayan, o le yan lati iwọn ihamọ ti awọn olupilẹṣẹ fun gbogbo awọn ede mẹta (bii TypeScript fun JS) tabi ṣafikun awọn asopọ si awọn orisun ita.
Ti o ba nilo ohunkohun ti o ṣe fun ọfẹ, boya ninu awọn olootu yoo to. Emi yoo daba CodePen fun ohunkohun ti ko nilo iṣeto pupọ tabi awọn ile-ikawe – HTML nirọrun, CSS, ati JS pẹlu awọn ilana iṣaaju-iṣaayan lori oke. Ti o ba fẹ lo aaye ibi-iṣere lati mu ilọsiwaju media media rẹ dara si tabi ṣe agbekalẹ portfolio ti ara ẹni, CodePen jẹ aṣayan ti o dara julọ.
Ere ti Ere
O ni awọn omiiran diẹ sii lati yan lati inu CodePen. Ti o ba sanwo ni ọdọọdun, o le gba ọkan ninu awọn ero Ere mẹta fun $12, $19, tabi $39 ni oṣu kan. O le ṣẹda nọmba ailopin ti awọn aaye ikọkọ, awọn ifiweranṣẹ, ati awọn akojọpọ lori eyikeyi awọn ipele mẹta naa.
Iwọ yoo tun gba baaji Pro (igbelaruge awujọ), iraye si ipo ifowosowopo ifiwe, ko si ipolowo, ati diẹ sii. Awọn ilana ẹgbẹ kan pato tun wa ati awọn iyatọ ipele-agbelebu miiran. Ṣayẹwo jade wọn osise ìdíyelé ọkọ fun alaye siwaju sii.
Key Awọn ẹya ara ẹrọ
Yato si ṣiṣẹda HTML, CSS, ati JavaScript ni CodePen, awọn nkan diẹ diẹ wa ti o ṣeto rẹ lọtọ.
- Wiwo gidi-akoko ti koodu rẹ ṣee ṣe. Ko nilo akopo.
- Idanwo gba ọ laaye lati kọ awọn nkan titun.
- Ṣẹda awọn ọran idanwo kekere lati wa ati koju awọn iṣoro.
- Ṣe afihan awọn iṣẹ iyanu rẹ.
- Ṣẹda ati tọju Awọn ikọwe fun lilo nigbamii.
- Gbiyanju koodu awọn olupilẹṣẹ miiran ki o rii ni iṣe.
Anfani
- Lati bẹrẹ, ko si iye owo.
- Awọn orisun ẹkọ ti a ṣe sinu.
- Ṣe ifowosowopo pẹlu awọn miiran ki o ṣe afiwe awọn iṣẹ akanṣe lati rii ibiti wọn le lọ ni ọjọ iwaju.
- UI rọrun lati lo ati taara.
alailanfani
- Ikawe koodu jẹ kekere, ipari koodu aifọwọyi ko pe. O kan dara fun awọn iṣẹ akanṣe oju-iwe kan ati pe ko le mu ohunkohun ti o tobi.
- Lori CodePen, o le ṣẹda awọn aaye ikọkọ, ṣugbọn iwọ yoo nilo lati ṣe igbesoke si ọmọ ẹgbẹ Pro ($ 9 fun oṣu kan).
KooduSandbox
CodeSandbox jẹ olootu koodu orisun wẹẹbu kan. O ṣe adaṣe adaṣe, iṣakojọpọ, ati iṣakoso igbẹkẹle fun ọ, gbigba ọ laaye lati kọ iṣẹ akanṣe tuntun pẹlu titẹ ẹyọkan. Lẹhin ti o ti ṣẹda nkan ti o fanimọra, o le pin pẹlu awọn miiran nipa pinpin oju opo wẹẹbu ni irọrun.
Olootu naa ni ibamu pẹlu awọn iṣẹ akanṣe JavaScript eyikeyi, botilẹjẹpe o pẹlu awọn ẹya pato-React-pato, gẹgẹbi aṣayan lati ṣafipamọ iṣẹ akanṣe ni awoṣe ẹda-ifesi-app.
Eyikeyi iṣẹ akanṣe ti o kọ ni CodeSandbox bẹrẹ pẹlu awoṣe kan. O le ṣe ibatan si ile-ikawe kan pato, ilana, tabi asiko asiko (pẹlu Node.js) tabi lo awọn imọ-ẹrọ oju opo wẹẹbu ti o rọrun. Lẹhin yiyan awoṣe kan, o firanṣẹ si olootu, nibiti iwọ yoo rii gbogbo awọn faili pataki ati window awotẹlẹ ti ṣii tẹlẹ.
O ni iwọle si “eto faili” ni gbogbo awọn apoti Sandbox, eyiti o tumọ si pe o le ṣẹda awọn faili tuntun, lo awọn modulu (pẹlu awọn idii NPM), ati ṣe ajọṣepọ pẹlu awọn ohun-ini aimi. Anfani tun wa lati yipada awoṣe-pato iṣeto ni awọn faili.
O le paapaa kọ awọn awoṣe tirẹ fun ọran lilo alailẹgbẹ rẹ, ni pipe pẹlu eto faili ati awọn igbẹkẹle, bii IDE kan. Nitoripe ọpa naa ni asopọ si Github, o le ṣe ipilẹṣẹ awọn iṣẹ ni kiakia ati ṣii PRs. O le lo ohun elo rẹ si ZEIT tabi Netlify lẹsẹkẹsẹ.
CodeSandbox Egbe Pro
CodeSandbox, iṣowo Dutch kan ti o fun laaye awọn olupilẹṣẹ lati kọ apoti iyanrin idagbasoke ohun elo wẹẹbu ti o da lori ẹrọ aṣawakiri, ti ṣe ifilọlẹ ni ifowosi Syeed ifowosowopo ti o fun laaye awọn ẹgbẹ lati ṣiṣẹ lori koodu ninu awọsanma. Ọja tuntun, Ẹgbẹ Pro, jẹ ojutu koodu ti kii ṣe fun awọn ẹgbẹ ọja pipe, ti o wa lati awọn apẹẹrẹ ati awọn alakoso nipasẹ awọn ẹgbẹ idaniloju didara (QA) ati ikọja.
Awọn iṣẹ akanṣe ni a pese ni wiwo ore-olumulo fun ẹnikẹni ti o fẹ lati ṣe tabi gba awọn ayipada si ohun elo wẹẹbu kan, yago fun awọn ọna omiiran bii fifiranṣẹ awọn akọsilẹ ati awọn iṣeduro si awọn olupilẹṣẹ lati ṣe awọn ayipada, gbigbe wọn pada fun ijiroro, ati tun ilana naa ṣe.
Key Awọn ẹya ara ẹrọ
- Olootu koodu orisun wẹẹbu ati irinṣẹ apẹrẹ.
- Fun lilo agbegbe, apoti iyanrin le ṣe igbasilẹ ni irọrun ni faili zip kan.
- siseto ti ṣe ni awọn apoti iyanrin, eyiti o le ṣe pinpin ni imurasilẹ pẹlu awọn alabaṣiṣẹpọ.
Anfani
- Iriri olumulo ti ilọsiwaju ati iṣakoso nla lori olootu.
- Ẹya awotẹlẹ ifiwe le jẹ atunṣe ati wo ni window lọtọ.
- Awọn koodu ti wa ni ọna kika laifọwọyi ati pẹlu CLI kan (codesandbox-cli)
- Atilẹyin fun awọn modulu npm ti ilọsiwaju.
- Awọn ifiranṣẹ aṣiṣe to wuyi pẹlu awọn iṣeduro.
- O mu iriri n ṣatunṣe aṣiṣe dara si nipa ipese ebute to dara julọ, oluwo idanwo, ati oluwo ọrọ.
alailanfani
- Olumulo ipari ti farahan si ọpọlọpọ awọn isọdi-ara ẹni.
- Fa ati ju silẹ awọn faili lati kọnputa agbegbe ko ṣiṣẹ daradara.
- Ilana folda kan gbọdọ wa ni atẹle ni CodeSandbox.
- Iṣẹ ṣiṣe ti apoti iyanrin ikọkọ kan wa fun awọn onigbowo nikan.
StackBlitz
StackBlitz jẹ IDE ori ayelujara ti o ni agbara koodu Studio Visual fun awọn ohun elo wẹẹbu. Syeed jẹ idahun ati ibaramu bi ẹya tabili tabili. StackBlitz jẹ IDE ori ayelujara ti o wa ni iṣaaju pẹlu Angula ati React idagbasoke irinṣẹ.
Thinkster.io ṣe iṣẹ akanṣe ikọja yẹn lati jẹ ki o rọrun bi o ti ṣee ṣe lati bẹrẹ pẹlu iṣẹ akanṣe Angular tabi React laisi nini aibalẹ nipa fifi sori igbẹkẹle tabi awọn eto kọ. StackBlitz n pese ọpọlọpọ awọn ẹya iyalẹnu ati alailẹgbẹ ti ko si olootu koodu ori ayelujara miiran ni ni bayi. Bi abajade, o tọ lati ṣe iwadii StackBlitz siwaju ati ṣawari kini IDE ori ayelujara yii ni lati funni.
Stackblitz jẹ afiwera pupọ si IDE pipe, paapaa ti o ko ba le sọ o dabọ si koodu VS nitori ọpa naa da lori rẹ. Apo naa ni ọpọlọpọ awọn ẹya ti o gba ọ laaye lati bẹrẹ ati tẹsiwaju ṣiṣẹda ohun elo akopọ ni kikun.
Eto naa jẹ agbara nipasẹ Visual Studio, eyiti o jẹ olokiki laarin awọn olupilẹṣẹ. Ṣiṣatunṣe aisinipo jẹ ẹya iduro ti iṣẹ akanṣe naa. Lati jẹ ki eyi ṣee ṣe, ẹgbẹ Stackblitz ṣẹda olupin wẹẹbu ẹrọ lilọ kiri lori ayelujara kan. Bi o ṣe n tẹ, yoo fi awọn igbẹkẹle sori ẹrọ laifọwọyi, ṣajọ, awọn edidi, ati ṣe atungbejade gbona.
Ere ti Ere
Cadet, Astronaut, ati Alakoso wa fun ọfẹ, $ 8 / oṣu, ati $ 29 fun oṣu kan, lẹsẹsẹ. Astronaut ati Alakoso pẹlu nọmba awọn ẹya bii awọn iṣẹ akanṣe aladani ailopin, awọn igbejade faili ailopin, ifiwepe si ikanni slack ẹgbẹ mojuto, ati bẹbẹ lọ. Fun alaye siwaju sii, wo igbimọ ìdíyelé osise.
Key Awọn ẹya ara ẹrọ
- Ṣafikun awọn idii NPM si iṣẹ akanṣe rẹ.
- Ṣeun si aramada ni-kiri dev olupin, o le ṣatunkọ lakoko offline.
- URL app ti o gbalejo ti o fun wa laaye lati wọle si (ki o pin) ohun elo laaye nigbakugba.
- Awọn ẹya ara ẹrọ koodu wiwo wiwo miiran pẹlu Intellisense, Iwadi Project (Cmd/Ctrl+P), Lọ si Itumọ, ati awọn miiran.
Anfani
- Awọn agbara Firebase fun imuṣiṣẹ.
- Olootu jẹ gaan rọrun lati lo ati iyara pupọ.
- Awọn olumulo ni iwọle si package.json, index.html, ati index.js.
- Koodu orisun pinpin ti o tun le ṣe ifibọ.
- Awotẹlẹ laaye lori apakan nla ti oju-iwe naa, pẹlu aṣayan lati ṣii lori oju-iwe ọtọtọ ti o ba jẹ dandan.
- Lakoko Aisinipo, Ṣatunkọ
- Smart completions ati ki o dara Intellisense.
- Awọn mojuto ti Stackblitz ni orisun orisun.
alailanfani
- O ko ni ipa lori ile naa tabi olupin idagbasoke nitori pe wọn ṣakoso nipasẹ aṣẹ ṣẹda-react-app.
- Ni React, eto folda ipilẹ yẹ ki o ṣe akiyesi.
- Ko ṣee ṣe lati ṣe ọna kika koodu laifọwọyi, botilẹjẹpe o ṣee ṣe lati ṣe pẹlu ọwọ.
ipari
Ni ode oni, ibi-iṣere ifaminsi bii awọn ti a ti rii loke le ṣee lo lati kọ iṣẹ akanṣe wẹẹbu eyikeyi patapata. Ko si iwulo lati fi awọn IDE ti o lewu sori PC rẹ nigba ti o le kọ, yokokoro, idanwo, ati ran lọ taara lati ẹrọ aṣawakiri wẹẹbu rẹ.
Ni ero mi, StackBlitz yoo dara julọ laarin wọn nitori pe o jẹ IDE ti o da lori wẹẹbu ti o fun laaye JavaScript, Angular, ati awọn iṣẹ idagbasoke miiran lati inu apoti, laisi iwulo lati fi sori ẹrọ eyikeyi awọn agbegbe idagbasoke agbegbe bii Node.js, npm, tabi Angular. O pese iriri kanna bi lilo koodu Studio Visual ni agbegbe. Ni otito, nitori StackBlitz wa ni idari nipasẹ Visual Studio Code, o kan lara bi sare ati ki o wapọ bi awọn tabili version.
Ewo ninu CodePen, CodeSandbox, ati StackBlitz jẹ ohun elo lilọ-si rẹ? Jẹ ki a mọ ninu awọn asọye.
Abbatyya
O ṣeun fun nkan nla yii, ni kete ti Mo rii stackblitz.com, Mo mọ pe eyi ni ohun ti Mo fẹ.