İster deneyimli bir programcı olun, ister birinci sınıf öğrencisi olun, karmaşık bir proje üzerinde çalışırken, büyük olasılıkla sorunlarla karşılaşacaksınız. Projenizi birçok modüle böldüğünüzde sorunlar ortaya çıkar ve bu da hataları izlemeyi ve çözüm bulmayı zorlaştırır. Diğer durumlarda, üzerinde çalıştığınız soruna uygun çözümü bulamadığınız için tek tek örneklerde hata ayıklamak zor olabilir.
Aynı zamanda, zaman zaman karmaşık görünebilecek bir kod parçası olarak da ortaya çıkar. JavaScript, öğrenmesi son derece basit olan Web tabanlı dillerden biridir. Basitçe masaüstü tarayıcınızı başlatın ve Geliştirici Araçları'na (genellikle F12) gidin ve işiniz bitti! Daha sonra herhangi bir karmaşık yazılım yüklemeye veya çalıştırmaya gerek kalmadan JS ile deneme yapabilirsiniz.
Başlamak için tek ihtiyacınız olan bir tarayıcıdır. Tüm bu sadeliğin kutudan çıktığı anda olması harika, ancak daha fazlasına ihtiyacınız olduğu durumlar da vardır. Örneğin, yakın zamanda keşfettiğiniz yeni bir Web API'sini denemek istediğinizi ancak yeni bir proje başlatmak istemediğinizi varsayalım.
Bu yazıda, en popüler üç JS oyun alanını, CodePen, CodeSandbox ve StackBlitz'i karşılaştıracağız. Başlayalım!
CodePen
Ön uç web geliştirme araçları her zaman gelişmektedir ve metin editörleri, bir geliştiricinin hayatını kolaylaştıran en son teknolojilerin büyük bir bileşenidir. Atom veya Notepad ++ gibi bağımsız metin düzenleyicilerin yanı sıra, son yıllarda program kurulumu gerektirmeyen ve daha fazla işbirliğini destekleyen tarayıcı tabanlı düzenleyicilerde bir patlama oldu.
CodePen, ön uç web sayfalarının nasıl daha iyi yazılacağını öğrenmek için harika fırsatlar sunan, "kullanıcı tarafından oluşturulan HTML, CSS ve JavaScript kod parçacıklarını test etmek ve sunmak için çevrimiçi bir topluluktur".
CodePen size iki "mod" sunar. İlk ve en yaygın olarak kullanılan Kalem'dir. Bir düğmeye tıklamak ve doğrudan editöre taşınmak kadar basit. Buradan bir önizleme paneline ve temel HTML, CSS ve JS düzenleme pencerelerine erişebilirsiniz.
"Dosya sistemi", "IntelliSense" veya başka bir şey yok - yalnızca basit sözdizimi vurgulama ve güzelleştirme gibi hızlı komutlar. Seçenekler sekmesinde, her üç dil için (JS için TypeScript gibi) sınırlı sayıda ön işlemci arasından seçim yapabilir veya harici kaynaklara bağlantılar ekleyebilirsiniz.
Sadece ücretsiz bir şeye ihtiyacınız varsa, editörlerden herhangi biri yeterli olacaktır. Çok fazla kurulum veya kitaplık gerektirmeyen herhangi bir şey için CodePen'i öneririm - yalnızca isteğe bağlı ön işlemcilerle birlikte HTML, CSS ve JS. Sosyal medya varlığınızı geliştirmek veya kişisel bir portföy geliştirmek için oyun alanını kullanmak istiyorsanız, CodePen daha iyi bir seçenektir.
Prim Sürüm
CodePen'de seçebileceğiniz birkaç alternatifiniz daha var. Yıllık ödeme yaparsanız, her ay 12 $, 19 $ veya 39 $ için üç premium plandan birini alabilirsiniz. Üç katmandan herhangi birinde sonsuz sayıda özel kalem, gönderi ve koleksiyon oluşturabilirsiniz.
Ayrıca Pro rozeti (sosyal destek), canlı ortak çalışma modu erişimi, reklamsız ve daha fazlasını alacaksınız. Ayrıca takıma özgü belirli stratejiler ve diğer çapraz katman ayrımları da vardır. Daha fazla bilgi için resmi fatura panolarına bakın.
Ana Özellikler
CodePen'de HTML, CSS ve JavaScript oluşturmanın yanı sıra onu farklı kılan birkaç şey daha var.
- Kodunuzun gerçek zamanlı olarak görüntülenmesi mümkündür. Derleme gerektirmez.
- Deney yapmak, yeni şeyler öğrenmenizi sağlar.
- Sorunları aramak ve çözmek için küçük test senaryoları oluşturun.
- Harika işlerinizi sergileyin.
- Daha sonra kullanmak üzere Kalemler oluşturun ve saklayın.
- Diğer geliştiricilerin kodunu deneyin ve çalışırken görün.
Avantajlar
- Başlamak için hiçbir maliyeti yoktur.
- Yerleşik öğrenme kaynakları.
- Başkalarıyla işbirliği yapın ve gelecekte nereye gidebileceklerini görmek için projeleri karşılaştırın.
- Kullanıcı arayüzünün kullanımı basit ve basittir.
Dezavantajlar
- Kod kitaplığı küçüktür, otomatik kod tamamlama yetersizdir. Sadece tek sayfalık projeler için iyidir ve daha büyük bir şeyi kaldıramaz.
- CodePen'de özel kalemler oluşturabilirsiniz, ancak bir Pro üyeliğine (aylık 9 ABD doları) yükseltmeniz gerekir.
KodSandbox
CodeSandbox, web tabanlı bir kod düzenleyicisidir. Aktarma, paketleme ve bağımlılık yönetimini sizin için otomatikleştirerek tek bir tıklamayla yeni bir proje oluşturmanıza olanak tanır. Büyüleyici bir şey oluşturduktan sonra, web sitesini paylaşarak başkalarıyla paylaşabilirsiniz.
Düzenleyici, projeyi bir create-react-app şablonuna kaydetme seçeneği gibi belirli React'e özgü özellikleri içermesine rağmen, herhangi bir JavaScript projesiyle uyumludur.
CodeSandbox'ta oluşturduğunuz herhangi bir proje bir şablonla başlar. Belirli bir kitaplık, çerçeve veya çalışma zamanı (Node.js dahil) ile ilgili olabilir veya yalnızca standart web teknolojilerini kullanabilir. Bir şablon seçtikten sonra, gerekli tüm dosyaları bulacağınız ve önizleme penceresinin zaten açık olduğu düzenleyiciye gönderilirsiniz.
Tüm Sandbox'larda bir "dosya sistemine" erişiminiz vardır; bu, yeni dosyalar oluşturabileceğiniz, modülleri (NPM paketleri dahil) kullanabileceğiniz ve statik varlıklarla etkileşime girebileceğiniz anlamına gelir. Ayrıca şablona özgü yapılandırma dosyalarını değiştirme olanağı da vardır.
Hatta bir IDE'de olduğu gibi, dosya yapısı ve bağımlılıkları ile birlikte benzersiz kullanım durumunuz için kendi şablonlarınızı bile oluşturabilirsiniz. Araç Github'a bağlı olduğundan, hızlı bir şekilde taahhütler oluşturabilir ve PR'leri açabilirsiniz. Uygulamanızı hemen ZEIT veya Netlify'a dağıtabilirsiniz.
CodeSandbox Takım Pro
Geliştiricilerin tarayıcı tabanlı bir web uygulaması geliştirme sanal alanı oluşturmasına olanak tanıyan Hollandalı bir işletme olan CodeSandbox, ekiplerin bulutta kod üzerinde çalışmasına olanak tanıyan bir işbirliği platformunu resmi olarak yayınladı. Yeni ürün Team Pro, tasarımcılar ve yöneticilerden kalite güvence (QA) ekiplerine ve ötesine uzanan eksiksiz ürün ekipleri için oluşturulmuş kodsuz bir çözümdür.
Projeler, bir web uygulamasında değişiklik yapmak veya değişiklik kabul etmek isteyen herkes için kullanıcı dostu bir arayüzde sunulur; değişiklikleri uygulamak için geliştiricilere notlar ve öneriler göndermek, bunları tartışmak için geri iletmek ve işlemi tekrarlamak gibi alternatif yöntemlerden kaçınılır.
Ana Özellikler
- Web tabanlı bir kod düzenleyici ve prototip aracı.
- Yerel kullanım için, bir korumalı alan bir zip dosyasında kolayca indirilebilir.
- Programlama iş arkadaşlarıyla kolayca paylaşılabilen sanal alanlarda yapılır.
Avantajlar
- İyileştirilmiş bir kullanıcı deneyimi ve düzenleyici üzerinde daha fazla kontrol.
- Canlı önizleme özelliği değiştirilebilir ve ayrı bir pencerede görüntülenebilir.
- Kod otomatik olarak biçimlendirilir ve bir CLI (codesandbox-cli) içerir
- Gelişmiş npm modülleri için destek.
- Öneriler içeren güzel hata mesajları.
- Daha iyi bir terminal, test görüntüleyici ve sorun görüntüleyici sağlayarak hata ayıklama deneyimini geliştirir.
Dezavantajlar
- Nihai tüketici birçok kişiselleştirmeye maruz kalmaktadır.
- Dosyaları yerel bir bilgisayardan sürükleyip bırakmak düzgün çalışmıyor.
- CodeSandbox'ta belirli bir klasör yapısı izlenmelidir.
- Özel bir sanal alanın işlevselliği yalnızca kullanıcılar tarafından kullanılabilir.
Yığın Blitz
StackBlitz, web uygulamaları için Visual Studio Code destekli bir çevrimiçi IDE'dir. Platform, masaüstü sürümü kadar duyarlı ve uyarlanabilir. StackBlitz, önceden yüklenmiş olarak gelen çevrimiçi bir IDE'dir. Açısal ve Tepki Geliştirme araçları.
Thinkster.io, bağımlılık kurulumu veya yapı ayarları konusunda endişelenmenize gerek kalmadan Angular veya React projenize başlamayı mümkün olduğunca basit hale getirmek için bu harika projeyi oluşturdu. StackBlitz, şu anda başka hiçbir çevrimiçi kod düzenleyicide olmayan birçok şaşırtıcı ve benzersiz özellik sunar. Sonuç olarak, StackBlitz'i daha fazla araştırmaya ve bu çevrimiçi IDE'nin neler sunabileceğini keşfetmeye değer.
Stackblitz, tam IDE ile son derece karşılaştırılabilir, özellikle de araç buna dayalı olduğu için VS koduna veda edemiyorsanız. Paket, tam yığın bir uygulama oluşturmaya başlamanıza ve devam etmenize olanak tanıyan çeşitli özelliklere sahiptir.
Program, geliştiriciler arasında iyi bilinen Visual Studio tarafından desteklenmektedir. Çevrimdışı düzenleme, projenin öne çıkan özelliğidir. Bunu mümkün kılmak için Stackblitz ekibi bir tarayıcı içi web sunucusu oluşturdu. Siz yazarken, otomatik olarak bağımlılıkları kurar, derler, paketler ve sıcak yeniden yükleme yapar.
Prim Sürüm
Cadet, Astronot ve Commander sırasıyla ücretsiz, ayda 8 ABD Doları ve ayda 29 ABD Doları karşılığında mevcuttur. Astronaut and Commander, sınırsız özel proje, sınırsız dosya yükleme, çekirdek ekip gevşek kanalına davet etme gibi bir dizi özellik içerir. Daha fazla bilgi için resmi fatura panosuna bakın.
Ana Özellikler
- Projenize NPM paketleri ekleme.
- Yeni bir tarayıcı içi geliştirme sunucusu sayesinde, çevrimdışıyken düzenleme yapabilirsiniz.
- Canlı uygulamamıza istediğimiz zaman erişmemizi (ve paylaşmamızı) sağlayan barındırılan bir uygulama URL'si.
- Diğer dikkate değer Visual Studio Code özellikleri arasında Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition ve diğerleri bulunur.
Avantajlar
- Firebase'in dağıtım yetenekleri.
- Editörün kullanımı gerçekten çok kolay ve son derece hızlı.
- Kullanıcıların package.json, index.html ve index.js'ye erişimi vardır.
- Ayrıca gömülebilen paylaşılabilir kaynak kodu.
- Gerekirse farklı bir sayfada açma seçeneği ile sayfanın büyük bir bölümünde canlı önizleme.
- Çevrimdışıyken, Düzenleme
- Akıllı tamamlamalar ve geliştirilmiş Intellisense.
- Stackblitz'in özü açık kaynak.
Dezavantajlar
- Oluşturma-tepki-app komutu tarafından yönetildiğinden, bina veya geliştirici sunucusu üzerinde etkiniz yoktur.
- React'te temel bir klasör yapısı gözetilmelidir.
- Manuel olarak yapmak mümkün olsa da, kodu otomatik olarak biçimlendirmek mümkün değildir.
Sonuç
Günümüzde, yukarıda gördüğümüz gibi bir kodlama oyun alanı, herhangi bir web projesini tamamen oluşturmak için kullanılabilir. Doğrudan web tarayıcınızdan oluşturabileceğiniz, hata ayıklayabileceğiniz, test edebileceğiniz ve dağıtabileceğiniz zaman, bilgisayarınıza hantal IDE'ler yüklemenize gerek yoktur.
Bence StackBlitz aralarında en iyisi olacaktır çünkü JavaScript, Angular ve diğer geliştirme projelerine Node.js, npm, veya Açısal. Visual Studio Code'u yerel olarak kullanmakla aynı deneyimi sağlar. Gerçekte, StackBlitz Visual Studio Code tarafından çalıştırıldığından, masaüstü sürümü kadar hızlı ve çok yönlüdür.
Gideceğiniz araç CodePen, CodeSandbox ve StackBlitz'den hangisi? Yorumlarda bize bildirin.
Abbatiya
Bu harika makale için teşekkürler, stackblitz.com'u gördüğümde istediğimin bu olduğunu anladım.