რთულ პროექტზე მუშაობისას, იქნება თქვენ გამოცდილი პროგრამისტი თუ პირველკურსელი, თქვენ პრაქტიკულად პრობლემების წინაშე აღმოჩნდებით. როდესაც თქვენ ყოფთ თქვენს პროექტს ბევრ მოდულად, წარმოიქმნება პრობლემები, რაც ართულებს შეცდომების თვალყურის დევნებას და გადაწყვეტილებების პოვნას. სხვა გარემოებებში, ცალკეული შემთხვევების გამართვა შეიძლება რთული იყოს, რადგან თქვენ ვერ იპოვნეთ პრობლემის სათანადო გადაწყვეტა, რომელზეც მუშაობდით.
ის ასევე ჩნდება, როგორც კოდის ნაწილი, რომელიც შეიძლება რთულად გამოიყურებოდეს იმ დროს. JavaScript არის ერთ-ერთი ვებ დაფუძნებული ენა, რომლის სწავლა ძალიან მარტივია. უბრალოდ გაუშვით თქვენი დესკტოპის ბრაუზერი და გადადით Developer Tools-ზე (ჩვეულებრივ F12) და თქვენ დაასრულეთ! შემდეგ შეგიძლიათ ექსპერიმენტი გააკეთოთ JS-ით, რაიმე რთული პროგრამული უზრუნველყოფის ინსტალაციის ან გაშვების საჭიროების გარეშე.
დასაწყებად, ყველაფერი რაც თქვენ გჭირდებათ არის ბრაუზერი. მშვენიერია მთელი ამ სიმარტივის ყოლა, მაგრამ არის შემთხვევები, როცა მეტი გჭირდება. მაგალითად, დავუშვათ, რომ გსურთ ექსპერიმენტი ჩაატაროთ ახალი ვებ API-ით, რომელიც ახლახანს აღმოაჩინეთ, მაგრამ არ გსურთ ახალი პროექტის დაწყება.
ამ პოსტში ჩვენ შევადარებთ და შევადარებთ სამ ყველაზე პოპულარულ JS სათამაშო მოედანს, CodePen, CodeSandbox და StackBlitz. Დავიწყოთ!
CodePen
Frontend ვებ განვითარების ინსტრუმენტები ყოველთვის ვითარდება და ტექსტური რედაქტორები უახლესი ტექნოლოგიების დიდი კომპონენტია, რაც დეველოპერების ცხოვრებას ამარტივებს. გარდა ცალკეული ტექსტური რედაქტორებისა, როგორიცაა Atom ან Notepad ++, ბოლო წლებში მოხდა ბრაუზერზე დაფუძნებული რედაქტორების აფეთქება, რომლებიც არ საჭიროებს პროგრამის ინსტალაციას და ხელს უწყობს უფრო მეტ თანამშრომლობას.
CodePen არის „ონლაინ საზოგადოება მომხმარებლის მიერ შექმნილი HTML, CSS და JavaScript კოდის ფრაგმენტების შესამოწმებლად და წარდგენისთვის“, რომელიც გთავაზობთ ფანტასტიკურ შესაძლებლობებს ისწავლოთ როგორ დაწეროთ წინა ვებ გვერდები უკეთესად.
CodePen გაძლევთ ორ "რეჟიმს". პირველი და ყველაზე ხშირად გამოყენებული არის კალამი. ეს ისეთივე მარტივია, როგორც ღილაკზე დაჭერა და პირდაპირ რედაქტორში ტრანსპორტირება. იქიდან შეგიძლიათ წვდომა გადახედვის პანელზე, ასევე ძირითად HTML, CSS და JS რედაქტირების ფანჯრებზე.
არ არსებობს „ფაილის სისტემა“, „IntelliSense“ ან რაიმე სხვა – უბრალოდ მარტივი სინტაქსის ხაზგასმა და სწრაფი ბრძანებები, როგორიცაა prettify. პარამეტრების ჩანართში შეგიძლიათ აირჩიოთ წინასწარი პროცესორების შეზღუდული დიაპაზონი სამივე ენისთვის (როგორიცაა TypeScript JS-ისთვის) ან დაამატოთ კავშირები გარე წყაროებთან.
თუ მხოლოდ რაიმეს გაკეთება გჭირდებათ უფასოდ, ნებისმიერი რედაქტორი საკმარისი იქნება. მე ვთავაზობ CodePen-ს ყველაფრისთვის, რაც არ საჭიროებს ბევრ კონფიგურაციას ან ბიბლიოთეკას – უბრალოდ HTML, CSS და JS არჩევითი წინასწარი პროცესორებით თავზე. თუ გსურთ გამოიყენოთ სათამაშო მოედანი თქვენი სოციალური მედიის ყოფნის გასაუმჯობესებლად ან პერსონალური პორტფოლიოს შესაქმნელად, CodePen უკეთესი ვარიანტია.
Premium ვერსია
თქვენ გაქვთ კიდევ რამდენიმე ალტერნატივა, რომელიც შეგიძლიათ აირჩიოთ CodePen-ზე. თუ ყოველწლიურად იხდით, შეგიძლიათ მიიღოთ სამი პრემიუმ გეგმიდან ერთი ყოველთვიურად $12, $19 ან $39. თქვენ შეგიძლიათ შექმნათ უსასრულო რაოდენობის პირადი კალმები, პოსტები და კოლექციები სამივე საფეხურზე.
თქვენ ასევე მიიღებთ Pro სამკერდე ნიშანს (სოციალური გაძლიერება), წვდომას პირდაპირი თანამშრომლობის რეჟიმში, რეკლამის გარეშე და სხვა. ასევე არსებობს გარკვეული გუნდის სპეციფიკური სტრატეგიები და სხვა ჯვარედინი განსხვავებები. შეამოწმეთ მათი ოფიციალური ბილინგის დაფა დამატებითი ინფორმაციისთვის.
ძირითადი თვისებები
CodePen-ში HTML, CSS და JavaScript-ის შექმნის გარდა, არის კიდევ რამდენიმე რამ, რაც განასხვავებს მას.
- თქვენი კოდის რეალურ დროში ნახვა შესაძლებელია. არ საჭიროებს შედგენას.
- ექსპერიმენტები საშუალებას გაძლევთ ისწავლოთ ახალი რამ.
- შექმენით პატარა სატესტო შემთხვევები პრობლემების მოსაძებნად და მოსაგვარებლად.
- აჩვენე შენი მშვენიერი ნამუშევრები.
- შექმენით და შეინახეთ კალმები შემდგომი გამოყენებისთვის.
- სცადეთ სხვა დეველოპერების კოდი და ნახეთ ის მოქმედებაში.
უპირატესობები
- დასაწყისისთვის, ღირებულება არ არის.
- ჩაშენებული სასწავლო რესურსები.
- ითანამშრომლეთ სხვებთან და შეადარეთ პროექტები, რომ ნახოთ სად შეიძლება წავიდნენ ისინი მომავალში.
- UI მარტივი გამოსაყენებელი და მარტივია.
ნაკლოვანებები
- კოდების ბიბლიოთეკა მცირეა, ავტომატური კოდის შევსება არაადეკვატურია. უბრალოდ კარგია ერთგვერდიანი პროექტებისთვის და უფრო დიდს ვერ უმკლავდება.
- CodePen-ზე შეგიძლიათ შექმნათ პირადი კალმები, მაგრამ მოგიწევთ გადახვიდეთ Pro წევრობაზე ($9/თვეში).
კოდის ქვიშის ყუთი
CodeSandbox არის ვებ-ზე დაფუძნებული კოდის რედაქტორი. ის ავტომატიზირებს ტრანსპირაციის, შეფუთვისა და დამოკიდებულების მართვას თქვენთვის, რაც საშუალებას გაძლევთ შექმნათ ახალი პროექტი ერთი დაწკაპუნებით. მას შემდეგ რაც შექმნით რაიმე მომხიბვლელს, შეგიძლიათ გაუზიაროთ ის სხვებს ვებსაიტის უბრალოდ გაზიარებით.
რედაქტორი თავსებადია JavaScript-ის ნებისმიერ პროექტთან, თუმცა შეიცავს React-ის სპეციფიკურ მახასიათებლებს, როგორიცაა პროექტის შექმნა-რეაქტი-აპლიკაციის შაბლონში შენახვის შესაძლებლობა.
ნებისმიერი პროექტი, რომელსაც თქვენ აშენებთ CodeSandbox-ში, იწყება შაბლონით. ის შეიძლება ეხებოდეს კონკრეტულ ბიბლიოთეკას, ჩარჩოს ან გაშვების დროს (მათ შორის Node.js) ან გამოიყენოს უბრალოდ სტანდარტული ვებ ტექნოლოგიები. შაბლონის არჩევის შემდეგ, თქვენ გაგზავნით რედაქტორს, სადაც ნახავთ ყველა საჭირო ფაილს და უკვე გახსნილია გადახედვის ფანჯარა.
თქვენ გაქვთ წვდომა "ფაილ სისტემაზე" ყველა Sandboxes-ში, რაც ნიშნავს, რომ შეგიძლიათ შექმნათ ახალი ფაილები, გამოიყენოთ მოდულები (მათ შორის NPM პაკეტები) და ურთიერთქმედება სტატიკურ აქტივებთან. ასევე არსებობს შაბლონის სპეციფიკური კონფიგურაციის ფაილების შეცვლა.
თქვენ შეგიძლიათ შექმნათ თქვენი საკუთარი შაბლონები თქვენი უნიკალური გამოყენების შემთხვევისთვის, სრული ფაილის სტრუქტურით და დამოკიდებულებებით, ისევე როგორც IDE-ში. იმის გამო, რომ ინსტრუმენტი დაკავშირებულია Github-თან, შეგიძლიათ სწრაფად შექმნათ ვალდებულებები და გახსნათ PR-ები. შეგიძლიათ დაუყოვნებლივ განათავსოთ თქვენი აპლიკაცია ZEIT-ში ან Netlify-ზე.
CodeSandbox Team Pro
CodeSandbox, ჰოლანდიური ბიზნესი, რომელიც დეველოპერებს საშუალებას აძლევს შექმნან ბრაუზერზე დაფუძნებული ვებ აპლიკაციების განვითარების sandbox, ოფიციალურად გამოუშვა თანამშრომლობის პლატფორმა, რომელიც საშუალებას აძლევს გუნდებს იმუშაონ კოდზე ღრუბელში. ახალი პროდუქტი, Team Pro, არის კოდის გარეშე გადაწყვეტა, რომელიც შექმნილია პროდუქტის სრული გუნდებისთვის, დაწყებული დიზაინერებიდან და მენეჯერებიდან ხარისხის უზრუნველყოფის (QA) გუნდებით და მის ფარგლებს გარეთ.
პროექტები მოწოდებულია მოსახერხებელი ინტერფეისით ყველასთვის, ვისაც სურს შეიტანოს ან მიიღოს ცვლილებები ვებ აპლიკაციაში, თავიდან აიცილოს ალტერნატიული მეთოდები, როგორიცაა შენიშვნებისა და რეკომენდაციების გაგზავნა დეველოპერებისთვის ცვლილებების შესასრულებლად, მათი განხილვისთვის გადაცემა და პროცესის განმეორება.
ძირითადი თვისებები
- ვებ-ზე დაფუძნებული კოდის რედაქტორი და პროტოტიპის ინსტრუმენტი.
- ადგილობრივი გამოყენებისთვის, sandbox შეიძლება ადვილად ჩამოიტვირთოს zip ფაილში.
- პროგრამირება კეთდება ქვიშის ყუთებში, რომელიც შეიძლება ადვილად გაუზიაროს თანამშრომლებს.
უპირატესობები
- გაუმჯობესებული მომხმარებლის გამოცდილება და მეტი კონტროლი რედაქტორზე.
- ცოცხალი გადახედვის ფუნქცია შეიძლება შეიცვალოს და ნახოთ ცალკე ფანჯარაში.
- კოდი ავტომატურად ფორმატირდება და შეიცავს CLI-ს (codesandbox-cli)
- გაფართოებული npm მოდულების მხარდაჭერა.
- კარგი შეცდომის შეტყობინებები რეკომენდაციებით.
- ის აუმჯობესებს გამართვის გამოცდილებას უკეთესი ტერმინალის, სატესტო მაყურებლისა და საკითხების მაყურებლის მიწოდებით.
ნაკლოვანებები
- საბოლოო მომხმარებელი ექვემდებარება ბევრ პერსონალიზაციას.
- ადგილობრივი კომპიუტერიდან ფაილების გადათრევა და ჩამოგდება არ მუშაობს გამართულად.
- საქაღალდის გარკვეული სტრუქტურა უნდა იყოს დაცული CodeSandbox-ში.
- პირადი ქვიშის ყუთის ფუნქციონირება მხოლოდ პატრონებისთვისაა ხელმისაწვდომი.
StackBlitz
StackBlitz არის ვიზუალური სტუდიის კოდით აღჭურვილი ონლაინ IDE ვებ აპლიკაციებისთვის. პლატფორმა ისეთივე საპასუხო და ადაპტირებადია, როგორც დესკტოპის ვერსია. StackBlitz არის ონლაინ IDE, რომელიც მოყვება წინასწარ დატვირთული Angular და React განვითარების ინსტრუმენტები.
Thinkster.io-მ ააშენა ეს ფანტასტიკური პროექტი, რათა მაქსიმალურად გამარტივდეს თქვენი Angular ან React პროექტის დაწყება, დამოკიდებულების ინსტალაციის ან build პარამეტრების ფიქრის გარეშე. StackBlitz გთავაზობთ უამრავ საოცარ და უნიკალურ მახასიათებელს, რომელიც ამჟამად არცერთ ონლაინ კოდის რედაქტორს არ აქვს. შედეგად, ღირს StackBlitz-ის შემდგომი გამოკვლევა და აღმოაჩინეთ რას გვთავაზობს ეს ონლაინ IDE.
Stackblitz უკიდურესად შედარებადია სრულ IDE-სთან, განსაკუთრებით თუ ვერ დაემშვიდობეთ VS კოდს, რადგან ინსტრუმენტი მასზეა დაფუძნებული. პაკეტს აქვს სხვადასხვა ფუნქციები, რომლებიც საშუალებას გაძლევთ დაიწყოთ და გააგრძელოთ სრული დასტა აპლიკაციის შექმნა.
პროგრამა იკვებება Visual Studio-ს მიერ, რომელიც კარგად არის ცნობილი დეველოპერებში. ოფლაინ რედაქტირება არის პროექტის გამორჩეული ფუნქცია. ამის შესასრულებლად, Stackblitz-ის გუნდმა შექმნა ბრაუზერში არსებული ვებ სერვერი. აკრეფისას ის ავტომატურად აინსტალირებს დამოკიდებულებებს, აწყობს, აერთიანებს და აკეთებს ცხელ გადატვირთვას.
Premium ვერსია
კადეტი, ასტრონავტი და მეთაური ხელმისაწვდომია უფასოდ, 8$/თვეში და 29$/თვეში, შესაბამისად. Astronaut and Commander მოიცავს უამრავ ფუნქციას, როგორიცაა შეუზღუდავი კერძო პროექტები, შეუზღუდავი ფაილების ატვირთვა, მოწვევა ძირითადი გუნდის სლაკ არხზე და ა.შ. დამატებითი ინფორმაციისთვის იხილეთ ოფიციალური ბილინგის დაფა.
ძირითადი თვისებები
- NPM პაკეტების დამატება თქვენს პროექტში.
- ახალი ბრაუზერში შექმნილი დეველოპერის სერვერის წყალობით, შეგიძლიათ რედაქტირება ხაზგარეშე რეჟიმში.
- მასპინძლობს აპის URL, რომელიც საშუალებას გვაძლევს ნებისმიერ დროს მივიღოთ (და გავაზიაროთ) ჩვენი ცოცხალი აპლიკაცია.
- Visual Studio Code-ის სხვა ნიშანდობლივი ფუნქციებია Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition და სხვა.
უპირატესობები
- Firebase-ის შესაძლებლობები განლაგებისთვის.
- რედაქტორი მართლაც მარტივი გამოსაყენებელი და ძალიან სწრაფია.
- მომხმარებლებს აქვთ წვდომა package.json, index.html და index.js.
- გაზიარებადი წყარო კოდი, რომელიც ასევე შეიძლება ჩაშენდეს.
- ცოცხალი გადახედვა გვერდის დიდ მონაკვეთზე, საჭიროების შემთხვევაში სხვა გვერდზე გახსნის ოფციით.
- ხაზგარეშე რეჟიმში, რედაქტირება
- ჭკვიანი დასრულებები და გაუმჯობესებული Intellisense.
- Stackblitz-ის ბირთვი არის ღია წყაროებიდან.
ნაკლოვანებები
- თქვენ არ გაქვთ გავლენა შენობაზე ან დეველოპერის სერვერზე, რადგან ისინი იმართება create-react-app ბრძანებით.
- React-ში უნდა იყოს დაცული ფუნდამენტური საქაღალდის სტრუქტურა.
- კოდის ავტომატურად ფორმატირება შეუძლებელია, თუმცა შესაძლებელია ხელით.
დასკვნა
დღესდღეობით, კოდირების სათამაშო მოედანი, როგორც ზემოთ ვნახეთ, შეიძლება გამოყენებულ იქნას ნებისმიერი ვებ პროექტის სრულად ასაგებად. არ არის საჭირო თქვენს კომპიუტერზე უხერხული IDE-ების დაყენება, როდესაც თქვენ შეგიძლიათ შექმნათ, გამართოთ, შეამოწმოთ და განათავსოთ პირდაპირ თქვენი ბრაუზერიდან.
ჩემი აზრით, StackBlitz საუკეთესო იქნებოდა მათ შორის, რადგან ის არის ვებ-ზე დაფუძნებული IDE, რომელიც საშუალებას აძლევს JavaScript, Angular და სხვა განვითარების პროექტებს პირდაპირ აიღოს, არ საჭიროებს რაიმე ადგილობრივი განვითარების გარემოს დაყენებას, როგორიცაა Node.js, npm, ან კუთხოვანი. ის უზრუნველყოფს იგივე გამოცდილებას, როგორც Visual Studio Code-ის ადგილობრივად გამოყენებას. სინამდვილეში, რადგან StackBlitz ამოძრავებს Visual Studio Code-ს, ის ისეთივე სწრაფი და მრავალმხრივია, როგორც დესკტოპის ვერსია.
CodePen-დან, CodeSandbox-დან და StackBlitz-დან რომელია თქვენი გამოსაყენებელი ინსტრუმენტი? შეგვატყობინეთ კომენტარებში.
აბატია
მადლობა ამ შესანიშნავი სტატიისთვის, ერთხელ რომ ვნახე stackblitz.com, ვიცი, რომ ეს არის ის, რაც მინდა.