Mengusahakan projek yang kompleks, sama ada anda seorang pengaturcara yang berpengalaman atau pelajar baru, anda mungkin akan menghadapi masalah. Apabila anda membahagikan projek anda kepada banyak modul, isu timbul, menjadikannya lebih sukar untuk mengesan ralat dan mencari penyelesaian. Dalam keadaan lain, menyahpepijat kejadian individu mungkin sukar kerana anda belum menemui penyelesaian yang betul untuk masalah yang anda sedang usahakan.
Ia juga berlaku sebagai sekeping kod sekali-sekala, yang mungkin kelihatan rumit pada masa itu. JavaScript ialah salah satu bahasa berasaskan Web yang sangat mudah dipelajari. Hanya lancarkan penyemak imbas desktop anda dan navigasi ke Alat Pembangun (biasanya F12), dan anda sudah selesai! Anda kemudiannya boleh bereksperimen dengan JS tanpa perlu memasang atau menjalankan sebarang perisian yang rumit.
Untuk bermula, anda hanya perlukan penyemak imbas. Sungguh mengagumkan untuk memiliki semua kesederhanaan ini di luar kotak, tetapi ada kalanya anda memerlukan lebih banyak lagi. Sebagai contoh, katakan anda ingin mencuba API Web baharu yang anda temui baru-baru ini tetapi tidak mahu memulakan projek baharu.
Dalam siaran ini, kami akan membandingkan dan membezakan tiga taman permainan JS yang paling popular, CodePen, CodeSandbox dan StackBlitz. Mari kita mulakan!
CodePen
Alat pembangunan web bahagian hadapan sentiasa berkembang dan penyunting teks ialah komponen besar teknologi terkini yang menjadikan kehidupan pembangun lebih mudah. Selain daripada penyunting teks yang berdiri sendiri seperti Atom atau Notepad ++, terdapat ledakan penyunting berasaskan penyemak imbas dalam beberapa tahun kebelakangan ini yang tidak memerlukan pemasangan program dan menggalakkan kerjasama yang lebih besar.
CodePen ialah "komuniti dalam talian untuk menguji dan mempersembahkan coretan kod HTML, CSS dan JavaScript ciptaan pengguna" yang menawarkan peluang hebat untuk mempelajari cara menulis halaman web bahagian hadapan dengan lebih baik.
CodePen memberi anda dua "mod". Yang pertama dan paling biasa digunakan ialah Pen. Ia semudah mengklik butang dan diangkut terus ke editor. Dari sana, anda boleh mengakses panel pratonton serta tetingkap pengeditan HTML, CSS dan JS asas.
Tiada "sistem fail," "IntelliSense," atau apa-apa lagi – hanya penyerlahan sintaks mudah dan arahan pantas seperti prettify. Dalam tab pilihan, anda boleh memilih daripada julat prapemproses terhad untuk ketiga-tiga bahasa (seperti TypeScript untuk JS) atau menambah sambungan ke sumber luaran.
Jika anda hanya memerlukan apa-apa yang dilakukan secara percuma, salah satu daripada editor sudah memadai. Saya akan mencadangkan CodePen untuk apa-apa sahaja yang tidak memerlukan banyak persediaan atau pustaka – hanya HTML, CSS dan JS dengan prapemproses pilihan di atas. Jika anda ingin menggunakan taman permainan untuk meningkatkan kehadiran media sosial anda atau membangunkan portfolio peribadi, CodePen ialah pilihan yang lebih baik.
Versi Premium
Anda mempunyai beberapa alternatif lagi untuk dipilih pada CodePen. Jika anda membayar setiap tahun, anda boleh mendapatkan satu daripada tiga pelan premium dengan harga $12, $19 atau $39 setiap bulan. Anda boleh membuat pen, catatan dan koleksi peribadi yang tidak terhingga pada mana-mana tiga peringkat.
Anda juga akan menerima lencana Pro (rangsangan sosial), akses mod kolaborasi langsung, tiada pengiklanan dan banyak lagi. Terdapat juga strategi khusus pasukan tertentu dan perbezaan rentas peringkat lain. Semak papan pengebilan rasmi mereka untuk maklumat lanjut.
Ciri-ciri utama
Selain daripada mencipta HTML, CSS dan JavaScript dalam CodePen, terdapat beberapa perkara lagi yang membezakannya.
- Tontonan masa nyata kod anda adalah mungkin. Ia tidak memerlukan kompilasi.
- Bereksperimen membolehkan anda mempelajari perkara baharu.
- Cipta kes ujian kecil untuk mencari dan menangani masalah.
- Tunjukkan karya-karya anda yang mengagumkan.
- Cipta dan simpan Pen untuk kegunaan kemudian.
- Cuba kod pembangun lain dan lihat ia dalam tindakan.
kelebihan
- Untuk memulakan, tiada kos.
- Sumber pembelajaran terbina dalam.
- Bekerjasama dengan orang lain dan bandingkan projek untuk melihat ke mana mereka boleh pergi pada masa hadapan.
- UI adalah mudah untuk digunakan dan mudah.
Kekurangan
- Pustaka kod kecil, penyiapan kod automatik tidak mencukupi. Ia hanya bagus untuk projek satu halaman dan tidak boleh mengendalikan apa-apa yang lebih besar.
- Pada CodePen, anda boleh membuat pen peribadi, tetapi anda perlu meningkatkan kepada keahlian Pro ($9/bulan).
kotak pasir kod
CodeSandbox ialah penyunting kod berasaskan web. Ia mengautomasikan pengurusan transpiring, pembungkusan dan pergantungan untuk anda, membolehkan anda membina projek baharu dengan satu klik. Selepas anda mencipta sesuatu yang menarik, anda boleh berkongsi dengan orang lain dengan hanya berkongsi tapak web.
Editor serasi dengan mana-mana projek JavaScript, walaupun ia termasuk ciri khusus React tertentu, seperti pilihan untuk menyimpan projek dalam templat apl cipta-reaksi.
Sebarang projek yang anda bina dalam CodeSandbox bermula dengan templat. Ia boleh sama ada berkaitan dengan perpustakaan, rangka kerja atau masa jalan tertentu (termasuk Node.js) atau hanya menggunakan teknologi web standard. Selepas memilih templat, anda dihantar ke editor, di mana anda akan menemui semua fail yang diperlukan dan tetingkap pratonton telah dibuka.
Anda mempunyai akses kepada "sistem fail" dalam semua Kotak Pasir, yang bermaksud anda boleh membuat fail baharu, menggunakan modul (termasuk pakej NPM) dan berinteraksi dengan aset statik. Terdapat juga peluang untuk mengubah suai fail konfigurasi khusus templat.
Anda juga boleh membina templat anda sendiri untuk kes penggunaan unik anda, lengkap dengan struktur fail dan kebergantungan, sama seperti dalam IDE. Oleh kerana alat itu dipautkan kepada Github, anda boleh menjana komitmen dan membuka PR dengan cepat. Anda boleh menggunakan aplikasi anda ke ZEIT atau Netlify serta-merta.
CodeSandbox Team Pro
CodeSandbox, perniagaan Belanda yang membenarkan pembangun membina kotak pasir pembangunan aplikasi web berasaskan penyemak imbas, secara rasminya telah mengeluarkan platform kerjasama yang membolehkan pasukan bekerja pada kod dalam awan. Produk baharu, Team Pro, ialah penyelesaian tanpa kod yang dibina untuk pasukan produk lengkap, daripada pereka bentuk dan pengurus melalui pasukan jaminan kualiti (QA) dan seterusnya.
Projek disediakan dalam antara muka mesra pengguna untuk sesiapa sahaja yang ingin membuat atau menerima perubahan pada aplikasi web, mengelakkan kaedah alternatif seperti menghantar nota dan cadangan kepada pembangun untuk melaksanakan perubahan, menyerahkannya kembali untuk perbincangan dan mengulangi proses.
Ciri-ciri utama
- Editor kod berasaskan web dan alat prototaip.
- Untuk kegunaan tempatan, kotak pasir boleh dimuat turun dengan mudah dalam fail zip.
- Pengaturcaraan dilakukan dalam kotak pasir, yang mungkin mudah dikongsi dengan rakan sekerja.
kelebihan
- Pengalaman pengguna yang lebih baik dan kawalan yang lebih besar ke atas editor.
- Ciri pratonton langsung boleh diubah suai dan dilihat dalam tetingkap berasingan.
- Kod diformat secara automatik dan termasuk CLI (codesandbox-cli)
- Sokongan untuk modul npm lanjutan.
- Mesej ralat yang bagus dengan pengesyoran.
- Ia meningkatkan pengalaman penyahpepijatan dengan menyediakan terminal, pemapar ujian dan pemapar isu yang lebih baik.
Kekurangan
- Pengguna akhir terdedah kepada banyak pemperibadian.
- Seret dan lepaskan fail daripada komputer tempatan tidak berfungsi dengan betul.
- Struktur folder tertentu mesti diikuti dalam CodeSandbox.
- Kefungsian kotak pasir peribadi hanya tersedia untuk pelanggan.
StackBlitz
StackBlitz ialah IDE dalam talian dikuasakan Kod Visual Studio untuk aplikasi web. Platform ini responsif dan boleh disesuaikan seperti versi desktop. StackBlitz ialah IDE dalam talian yang disertakan dengan pra-muat Sudut dan Bertindak balas alat pembangunan.
Thinkster.io membina projek hebat itu untuk menjadikannya semudah mungkin untuk memulakan projek Angular atau React anda tanpa perlu risau tentang pemasangan pergantungan atau tetapan binaan. StackBlitz menyediakan banyak ciri yang menakjubkan dan unik yang tiada editor kod dalam talian lain mempunyai sekarang. Akibatnya, adalah berbaloi untuk menyiasat StackBlitz dengan lebih lanjut dan mengetahui perkara yang ditawarkan oleh IDE dalam talian ini.
Stackblitz sangat setanding dengan IDE yang lengkap, terutamanya jika anda tidak boleh mengucapkan selamat tinggal kepada kod VS kerana alat itu berdasarkannya. Pakej ini mempunyai pelbagai ciri yang membolehkan anda memulakan dan terus mencipta aplikasi tindanan penuh.
Program ini dikuasakan oleh Visual Studio, yang terkenal di kalangan pembangun. Penyuntingan luar talian ialah ciri menonjol projek. Untuk membolehkan ini, pasukan Stackblitz mencipta pelayan web dalam penyemak imbas. Semasa anda menaip, ia secara automatik memasang kebergantungan, menyusun, menghimpun dan melakukan muat semula panas.
Versi Premium
Kadet, Angkasawan dan Komander tersedia secara percuma, masing-masing $8/bulan dan $29/bulan. Angkasawan dan Komander termasuk beberapa ciri seperti projek persendirian tanpa had, muat naik fail tanpa had, jemputan ke saluran slack pasukan teras dan sebagainya. Untuk maklumat lanjut, lihat papan pengebilan rasmi.
Ciri-ciri utama
- Menambah pakej NPM pada projek anda.
- Terima kasih kepada pelayan dev dalam penyemak imbas novel, anda boleh mengedit semasa di luar talian.
- URL apl yang dihoskan yang membolehkan kami mengakses (dan berkongsi) apl langsung kami pada bila-bila masa.
- Ciri Kod Visual Studio yang terkenal lain termasuk Intellisense, Carian Projek (Cmd/Ctrl+P), Pergi ke Definisi dan lain-lain.
kelebihan
- Keupayaan Firebase untuk penempatan.
- Editor sangat mudah digunakan dan sangat cepat.
- Pengguna mempunyai akses kepada package.json, index.html dan index.js.
- Kod sumber boleh kongsi yang juga boleh dibenamkan.
- Pratonton langsung pada bahagian besar halaman, dengan pilihan untuk membuka halaman lain jika perlu.
- Semasa Luar Talian, Mengedit
- Penyiapan pintar dan Intellisense yang dipertingkatkan.
- Teras Stackblitz ialah sumber terbuka.
Kekurangan
- Anda tidak mempunyai pengaruh ke atas bangunan atau pelayan pembangun kerana ia diuruskan oleh arahan create-react-app.
- Dalam React, struktur folder asas harus diperhatikan.
- Ia tidak mungkin untuk memformat kod secara automatik, walaupun adalah mungkin untuk melakukannya secara manual.
Kesimpulan
Pada masa kini, taman permainan pengekodan seperti yang telah kita lihat di atas boleh digunakan untuk membina sepenuhnya sebarang projek web. Tidak perlu memasang IDE yang menyusahkan pada PC anda apabila anda boleh membina, nyahpepijat, menguji dan menggunakan terus daripada penyemak imbas web anda.
Pada pendapat saya, StackBlitz adalah yang terbaik di kalangan mereka kerana ia adalah IDE berasaskan web yang membenarkan JavaScript, Angular dan projek pembangunan lain di luar kotak, tanpa perlu memasang sebarang persekitaran pembangunan tempatan seperti Node.js, npm, atau Sudut. Ia memberikan pengalaman yang sama seperti menggunakan Kod Visual Studio secara tempatan. Pada hakikatnya, kerana StackBlitz didorong oleh Visual Studio Code, ia terasa sepantas dan serba boleh seperti versi desktop.
Antara CodePen, CodeSandbox dan StackBlitz yang manakah merupakan alat pilihan anda? Beritahu kami dalam ulasan.
Abbatyya
Terima kasih atas artikel yang hebat ini, sebaik sahaja saya melihat stackblitz.com, saya tahu inilah yang saya mahukan.