Ngerjakeun proyek anu rumit, naha anjeun programmer anu berpengalaman atanapi mahasiswa anyar, anjeun sigana bakal ngalaman masalah. Nalika anjeun ngabagi proyék anjeun kana seueur modul, timbul masalah, janten langkung hese pikeun ngalacak kasalahan sareng milarian solusi. Dina kaayaan sejen, debugging instansi individu bisa jadi tangguh sabab teu manggihan solusi ditangtoskeun pikeun masalah anjeun geus dipake dina.
Éta ogé lumangsung salaku sapotong kode dina kasempetan, anu tiasa katingali rumit dina waktos éta. JavaScript mangrupikeun salah sahiji basa basis wéb anu saderhana pisan pikeun diajar. Kantun jalankeun browser desktop anjeun sareng arahkeun ka Alat Pangembang (biasana F12), sareng anjeun parantos réngsé! Anjeun teras tiasa ékspérimén sareng JS tanpa kedah masang atanapi ngajalankeun parangkat lunak anu rumit.
Pikeun ngamimitian, sadaya anu anjeun peryogikeun nyaéta browser. Éta saé gaduh sadayana kesederhanaan ieu langsung tina kotakna, tapi aya waktos nalika anjeun peryogi langkung seueur. Contona, anggap anjeun hoyong ékspérimén sareng API Wéb énggal anu nembé anjeun mendakan tapi henteu hoyong ngamimitian proyék énggal.
Dina postingan ieu, urang bakal ngabandingkeun sareng kontras tilu tempat kaulinan JS anu pang populerna, CodePen, CodeSandbox, sareng StackBlitz. Hayu urang ngamimitian!
CodePen
Alat pamekaran wéb frontend sok mekar, sareng éditor téks mangrupikeun komponén ageung tina téknologi pangénggalna anu ngajantenkeun kahirupan pamekar langkung saderhana. Salian ti éditor téks anu mandiri sapertos Atom atanapi Notepad ++, aya ledakan éditor dumasar browser dina taun-taun ayeuna anu henteu ngabutuhkeun pamasangan program sareng ngamajukeun kolaborasi anu langkung ageung.
CodePen mangrupikeun "komunitas online pikeun nguji sareng nampilkeun snippét kode HTML, CSS, sareng JavaScript anu diciptakeun ku pangguna" anu nawiskeun kasempetan anu saé pikeun diajar kumaha nyerat halaman wéb anu langkung saé.
CodePen masihan anjeun dua "modus". Anu pangheulana sareng anu paling sering dianggo nyaéta Pen. Éta sagampil ngaklik tombol sareng diangkut langsung ka éditor. Ti dinya, anjeun tiasa ngaksés panel sawangan ogé HTML dasar, CSS, sareng windows éditan JS.
Henteu aya "sistem file," "IntelliSense," atanapi naon waé - ngan ukur panyorot sintaksis sareng paréntah gancang sapertos prettify. Dina tab pilihan, Anjeun bisa milih ti rentang diwatesan of preprocessors pikeun sakabéh tilu basa (saperti TypeScript pikeun JS) atawa nambahkeun sambungan ka sumber éksternal.
Upami anjeun ngan ukur peryogi naon waé anu dilakukeun gratis, salah sahiji éditor bakal cekap. Abdi nyarankeun CodePen pikeun naon waé anu henteu meryogikeun seueur setélan atanapi perpustakaan - ngan saukur HTML, CSS, sareng JS kalayan pre-processor pilihan di luhur. Upami anjeun hoyong ngagunakeun tempat kaulinan pikeun ningkatkeun ayana média sosial anjeun atanapi ngembangkeun portopolio pribadi, CodePen mangrupikeun pilihan anu langkung saé.
Vérsi Premium
Anjeun gaduh sababaraha alternatif pikeun milih tina CodePen. Upami anjeun mayar taunan, anjeun tiasa nampi salah sahiji tina tilu rencana premium pikeun $12, $19, atanapi $39 unggal bulan. Anjeun tiasa nyiptakeun pulpén, tulisan, sareng koleksi pribadi anu teu terbatas dina salah sahiji tina tilu tingkatan.
Anjeun ogé bakal nampi badge Pro (dorongan sosial), aksés mode collab langsung, henteu aya iklan, sareng seueur deui. Aya ogé sababaraha strategi khusus tim sareng bédana cross-tier anu sanés. Pariksa dewan tagihan resmi maranéhanana pikeun informasi salajengna.
Fitur konci
Kumisan ti nyieun HTML, CSS, sarta JavaScript dina CodePen, aya sababaraha hal anu misahkeun eta.
- Nempoan kode anjeun sacara real-time mungkin. Teu merlukeun kompilasi.
- Experimenting ngidinan Anjeun pikeun neuleuman hal anyar.
- Jieun kasus tés leutik pikeun milarian sareng ngabéréskeun masalah.
- Témbongkeun karya éndah anjeun.
- Jieun tur nyimpen Pens pikeun pamakéan engké.
- Coba kodeu pamekar séjén sareng tingali dina aksi.
kaunggulan
- Pikeun ngamimitian, teu aya biaya.
- Diwangun-di sumberdaya learning.
- Kolaborasi sareng batur sareng ngabandingkeun proyék pikeun ningali dimana aranjeunna tiasa angkat ka hareup.
- UI téh basajan ngagunakeun tur lugas.
kalemahan
- Perpustakaan kode leutik, parantosan kode otomatis henteu cekap. Éta saé pikeun proyék hiji halaman sareng henteu tiasa ngadamel anu langkung ageung.
- Dina CodePen, anjeun tiasa nyiptakeun pulpén pribadi, tapi anjeun kedah ningkatkeun ka kaanggotaan Pro ($ 9 / sasih).
sandbox kode
CodeSandbox mangrupikeun pangropéa kode basis wéb. Éta ngajadikeun otomatis transpiring, bungkusan, sareng manajemén kagumantungan pikeun anjeun, ngamungkinkeun anjeun ngawangun proyék énggal ku hiji klik. Saatos anjeun nyiptakeun hal anu pikaresepeun, anjeun tiasa ngabagikeunana ka batur ku ngan ukur ngabagi halaman wéb.
Éditor cocog sareng proyék JavaScript naon waé, sanaos éta kalebet fitur khusus React, sapertos pilihan pikeun nyimpen proyék dina citakan nyiptakeun-réaksi-aplikasi.
Sakur proyék anu anjeun ngawangun dina CodeSandbox dimimitian ku citakan. Éta tiasa aya hubunganana sareng perpustakaan, kerangka, atanapi waktos jalan (kalebet Node.js) atanapi nganggo téknologi wéb standar. Saatos milih citakan, anjeun dikirim ka redaktur, dimana anjeun bakal mendakan sadaya file anu diperyogikeun sareng jandela tilik parantos dibuka.
Anjeun gaduh aksés ka "sistem file" dina sagala Sandboxes, nu hartina anjeun bisa nyieun file anyar, ngagunakeun modul (kaasup bungkusan NPM), sarta berinteraksi sareng aset statik. Aya ogé kasempetan pikeun ngaropea file konfigurasi template-spésifik.
Anjeun malah tiasa ngadamel témplat anjeun nyalira pikeun kasus panggunaan unik anjeun, lengkep sareng struktur file sareng katergantungan, sapertos dina IDE. Kusabab alat ieu numbu ka Github, anjeun bisa gancang ngahasilkeun commits tur muka PRs. Anjeun tiasa langsung nyebarkeun aplikasi anjeun ka ZEIT atanapi Netlify.
CodeSandbox Tim Pro
CodeSandbox, usaha Walanda anu ngamungkinkeun para pamekar ngawangun sandbox pamekaran aplikasi wéb dumasar browser, sacara resmi ngarilis platform kolaborasi anu ngamungkinkeun tim pikeun ngerjakeun kode dina méga. Produk anyar, Tim Pro, mangrupakeun solusi no-kode diwangun pikeun tim produk lengkep, mimitian ti désainer jeung manajer ngaliwatan tim jaminan kualitas (QA) jeung saterusna.
Proyék disayogikeun dina antarmuka anu ramah-pamaké pikeun saha waé anu hoyong ngadamel atanapi nampi parobihan kana aplikasi wéb, ngahindarkeun metode alternatif sapertos ngirim catetan sareng saran ka pangembang pikeun ngalaksanakeun parobihan, ngalangkunganana deui pikeun diskusi, sareng ngulang prosésna.
Fitur konci
- Pangropéa kode basis wéb sareng alat prototipe.
- Pikeun pamakéan lokal, sandbox a bisa diundeur gampang dina file pos.
- programming dipigawé dina sandboxes, nu bisa gampang dibagikeun kalawan coworkers.
kaunggulan
- Pangalaman pangguna anu ningkat sareng kontrol anu langkung ageung pikeun pangropéa.
- Fitur sawangan langsung tiasa dirobih sareng ditingali dina jandela anu misah.
- Kodeu sacara otomatis diformat sareng kalebet CLI (codesandbox-cli)
- Rojongan pikeun modul npm canggih.
- Pesen kasalahan anu saé kalayan saran.
- Éta ningkatkeun pangalaman debugging ku nyayogikeun terminal anu langkung saé, panempo tés, sareng panempo masalah.
kalemahan
- Konsumén ahir kakeunaan seueur personalisasi.
- Séred tur teundeun payil ti komputer lokal teu beroperasi leres.
- Struktur folder tangtu kudu dituturkeun dina CodeSandbox.
- Fungsi kotak keusik swasta ngan sadia pikeun patrons.
StackBlitz
StackBlitz mangrupakeun Visual Studio Code-Powered online IDE pikeun aplikasi wéb. Platformna responsif sareng adaptasi sapertos versi desktop. StackBlitz mangrupa IDE online nu asalna tos dieusian ku Sudut jeung Réaksi parabot ngembangkeun.
Thinkster.io ngawangun proyék anu saé pikeun ngajantenkeun sasederhana mungkin pikeun ngamimitian sareng proyék Angular atanapi React anjeun tanpa kedah hariwang ngeunaan pamasangan dependensi atanapi ngawangun setélan. StackBlitz nyayogikeun seueur fitur anu luar biasa sareng unik anu henteu aya pangropéa kode online anu sanés ayeuna. Hasilna, éta pantes pikeun nalungtik StackBlitz langkung jauh sareng mendakan naon anu ditawarkeun IDE online ieu.
Stackblitz pisan dibandingkeun sareng IDE lengkep, khususna upami anjeun henteu tiasa pamit ka kode VS sabab alatna dumasar kana éta. iket boga rupa-rupa fitur nu ngidinan Anjeun pikeun ngamimitian tur nuluykeun nyieun hiji aplikasi full-tumpukan.
Program ieu didamel ku Visual Studio, anu kasohor di kalangan pamekar. Éditan offline mangrupikeun fitur anu menonjol dina proyék. Jang ngalampahkeun ieu, tim Stackblitz nyiptakeun server wéb dina-browser. Nalika anjeun ngetik, éta otomatis masang dependensi, nyusun, ngabuntel, sareng ngamuat ulang panas.
Vérsi Premium
Kadet, Astronot, sareng Komandan sayogi gratis, $ 8 / sasih, sareng $ 29 / sasih, masing-masing. Astronot sareng Panglima kalebet sababaraha fitur sapertos proyék pribadi anu henteu terbatas, unggah file anu henteu terbatas, ngajak kana saluran slack tim inti, sareng saterasna. Kanggo inpo nu leuwih lengkep, tingali dewan tagihan resmi.
Fitur konci
- Nambahkeun bungkusan NPM kana proyék anjeun.
- Hatur nuhun kana server dev in-browser novel, anjeun tiasa ngédit nalika offline.
- URL aplikasi anu di-host anu ngamungkinkeun urang ngaksés (sareng ngabagi) aplikasi langsung urang iraha waé.
- Fitur Visual Studio Code kasohor lianna kaasup Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, jeung sajabana.
kaunggulan
- Kamampuhan Firebase pikeun panyebaran.
- Éditor éta gampang pisan dianggo sareng gancang pisan.
- Pamaké boga aksés ka package.json, index.html, sarta index.js.
- Kode sumber anu tiasa dibagi anu ogé tiasa dipasang.
- Tinjauan langsung dina bagian halaman anu ageung, kalayan pilihan pikeun muka halaman anu sanés upami diperyogikeun.
- Sedengkeun Offline, Edit
- Completions pinter jeung ningkat Intellisense.
- Inti Stackblitz nyaeta open source.
kalemahan
- Anjeun teu gaduh pangaruh kana gedong atanapi pangladén pangembang sabab éta diurus ku paréntah create-react-app.
- Dina React, struktur folder dasar kedah diperhatoskeun.
- Teu mungkin mun pormat kodeu otomatis, sanajan kasebut nyaéta dimungkinkeun pikeun ngalakukeunana sacara manual.
kacindekan
Kiwari, tempat kaulinan coding sapertos anu ku urang tingali di luhur tiasa dianggo pikeun ngawangun sadayana proyék wéb. Henteu kedah masang IDE anu pajeulit dina PC anjeun nalika anjeun tiasa ngawangun, debug, nguji, sareng nyebarkeun langsung tina browser wéb anjeun.
Dina pamanggih kuring, StackBlitz bakal pangalusna diantara aranjeunna sabab mangrupakeun IDE basis web anu ngamungkinkeun JavaScript, Sudut, sarta proyék-proyék ngembangkeun séjén katuhu out of the box, kalawan teu kudu install wae lingkungan ngembangkeun lokal kawas Node.js, npm, atanapi Angular. Éta nyayogikeun pangalaman anu sami sareng ngagunakeun Visual Studio Code sacara lokal. Kanyataanna, sabab StackBlitz didorong ku Visual Studio Code, karasa gancang sareng serbaguna sapertos versi desktop.
Mana CodePen, CodeSandbox, sareng StackBlitz mangrupikeun alat anu anjeun pikahoyong? Hayu urang terang dina komentar.
Abbatyya
Hatur nuhun pikeun artikel hébat ieu, sakali kuring nempo stackblitz.com, abdi terang ieu téh naon abdi hoyong.