การทำงานในโครงการที่ซับซ้อน ไม่ว่าคุณจะเป็นโปรแกรมเมอร์ที่มีประสบการณ์หรือน้องใหม่ คุณก็มักจะประสบปัญหา เมื่อคุณแบ่งโปรเจ็กต์ของคุณออกเป็นหลายโมดูล ปัญหาก็เกิดขึ้น ทำให้ยากต่อการติดตามข้อผิดพลาดและค้นหาวิธีแก้ไข ในสถานการณ์อื่นๆ การดีบักอินสแตนซ์แต่ละรายการอาจทำได้ยาก เนื่องจากคุณไม่ได้ค้นพบวิธีแก้ไขปัญหาที่คุณดำเนินการอยู่อย่างเหมาะสม
นอกจากนี้ยังเกิดขึ้นเป็นโค้ดในบางครั้ง ซึ่งอาจดูซับซ้อนในขณะนั้น JavaScript เป็นหนึ่งในภาษาบนเว็บที่เรียนรู้ได้ง่ายมาก เพียงเปิดเบราว์เซอร์เดสก์ท็อปและไปที่เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (โดยปกติคือ F12) เท่านี้ก็เรียบร้อย! จากนั้น คุณสามารถทดลองกับ JS ได้โดยไม่ต้องติดตั้งหรือรันซอฟต์แวร์ที่ซับซ้อนใดๆ
ในการเริ่มต้น สิ่งที่คุณต้องมีคือเบราว์เซอร์ มันวิเศษมากที่มีความเรียบง่ายทั้งหมดนี้ทันที แต่มีโอกาสที่คุณต้องการมากกว่านี้ ตัวอย่างเช่น สมมติว่าคุณต้องการทดลองกับ Web API ใหม่ที่คุณเพิ่งค้นพบแต่ไม่ต้องการเริ่มโครงการใหม่
ในโพสต์นี้ เราจะเปรียบเทียบและเปรียบเทียบสนามเด็กเล่น JS ยอดนิยมสามแห่ง ได้แก่ CodePen, CodeSandbox และ StackBlitz มาเริ่มกันเลย!
CodePen
เครื่องมือพัฒนาเว็บส่วนหน้ามีการพัฒนาอยู่เสมอ และโปรแกรมแก้ไขข้อความเป็นองค์ประกอบสำคัญของเทคโนโลยีล่าสุดที่ทำให้ชีวิตของนักพัฒนาง่ายขึ้น นอกเหนือจากโปรแกรมแก้ไขข้อความแบบสแตนด์อโลน เช่น Atom หรือ Notepad ++ แล้ว มีตัวแก้ไขบนเบราว์เซอร์จำนวนมากขึ้นในช่วงไม่กี่ปีที่ผ่านมาซึ่งไม่จำเป็นต้องติดตั้งโปรแกรมและส่งเสริมการทำงานร่วมกันมากขึ้น
CodePen คือ "ชุมชนออนไลน์สำหรับการทดสอบและนำเสนอข้อมูลโค้ด HTML, CSS และ JavaScript ที่ผู้ใช้สร้างขึ้น" ซึ่งมอบโอกาสที่ยอดเยี่ยมในการเรียนรู้วิธีเขียนหน้าเว็บส่วนหน้าให้ดีขึ้น
CodePen ให้ "โหมด" สองแบบแก่คุณ อย่างแรกและใช้บ่อยที่สุดคือปากกา ง่ายเหมือนการคลิกปุ่มและถูกส่งไปยังเครื่องมือแก้ไขโดยตรง จากที่นั่น คุณจะเข้าถึงแผงแสดงตัวอย่างรวมถึงหน้าต่างแก้ไข HTML, CSS และ JS พื้นฐานได้
ไม่มี "ระบบไฟล์" "IntelliSense" หรืออย่างอื่น - เพียงแค่เน้นไวยากรณ์ง่ายๆ และคำสั่งที่รวดเร็วเช่น prettify ในแท็บตัวเลือก คุณสามารถเลือกจากช่วงจำกัดของตัวประมวลผลล่วงหน้าสำหรับทั้งสามภาษา (เช่น TypeScript สำหรับ JS) หรือเพิ่มการเชื่อมต่อกับแหล่งข้อมูลภายนอก
หากคุณต้องการทำอะไรฟรีๆ เพียงอย่างเดียว บรรณาธิการคนใดคนหนึ่งก็เพียงพอแล้ว ฉันขอแนะนำ CodePen สำหรับทุกอย่างที่ไม่ต้องการการตั้งค่าหรือไลบรารี่มากมาย – เพียงแค่ HTML, CSS และ JS ที่มีตัวประมวลผลล่วงหน้าที่เป็นตัวเลือกด้านบน หากคุณต้องการใช้สนามเด็กเล่นเพื่อปรับปรุงสถานะโซเชียลมีเดียของคุณหรือพัฒนาพอร์ตโฟลิโอส่วนตัว CodePen เป็นตัวเลือกที่ดีกว่า
เวอร์ชันพรีเมียม
คุณมีทางเลือกอื่นอีกสองสามทางเลือกใน CodePen หากคุณชำระเงินเป็นรายปี คุณจะได้รับแผนพรีเมียมหนึ่งในสามแผนในราคา $12, $19 หรือ $39 ต่อเดือน คุณสามารถสร้างปากกา โพสต์ และคอลเลกชั่นส่วนตัวได้ไม่จำกัดจำนวนในสามระดับ
คุณยังจะได้รับตรา Pro (การส่งเสริมทางสังคม) การเข้าถึงโหมดการทำงานร่วมกันแบบสด ไม่มีโฆษณา และอีกมากมาย นอกจากนี้ยังมีกลยุทธ์เฉพาะทีมและความแตกต่างข้ามระดับอื่นๆ ตรวจสอบกระดานการเรียกเก็บเงินอย่างเป็นทางการสำหรับข้อมูลเพิ่มเติม
Key Features
นอกเหนือจากการสร้าง HTML, CSS และ JavaScript ใน CodePen แล้ว ยังมีอีกสองสามสิ่งที่ทำให้มันแตกต่างออกไป
- สามารถดูรหัสของคุณได้แบบเรียลไทม์ ไม่ต้องการการรวบรวม
- การทดลองทำให้คุณได้เรียนรู้สิ่งใหม่ๆ
- สร้างกรณีทดสอบเล็กๆ เพื่อค้นหาและแก้ไขปัญหา
- แสดงผลงานที่ยอดเยี่ยมของคุณ
- สร้างและจัดเก็บปากกาเพื่อใช้ในภายหลัง
- ลองใช้โค้ดของนักพัฒนารายอื่นและใช้งานจริง
ข้อดี
- ในการเริ่มต้นไม่มีค่าใช้จ่าย
- แหล่งการเรียนรู้ในตัว
- ร่วมมือกับผู้อื่นและเปรียบเทียบโครงการเพื่อดูว่าพวกเขาจะไปที่ไหนได้ในอนาคต
- UI นั้นใช้งานง่ายและตรงไปตรงมา
ข้อเสีย
- ไลบรารีโค้ดมีขนาดเล็ก การเติมโค้ดอัตโนมัติไม่เพียงพอ เป็นการดีสำหรับโครงการหน้าเดียวและไม่สามารถจัดการกับสิ่งที่ใหญ่กว่านี้ได้
- ใน CodePen คุณสามารถสร้างปากกาส่วนตัวได้ แต่คุณจะต้องอัปเกรดเป็นสมาชิก Pro ($9/เดือน)
รหัสแซนด์บ็อกซ์
CodeSandbox เป็นโปรแกรมแก้ไขโค้ดบนเว็บ มันทำให้การจัดการการปรากฏ บรรจุภัณฑ์ และการพึ่งพาโดยอัตโนมัติสำหรับคุณ ช่วยให้คุณสร้างโปรเจ็กต์ใหม่ได้ด้วยคลิกเดียว หลังจากที่คุณได้สร้างบางสิ่งที่น่าสนใจแล้ว คุณสามารถแบ่งปันกับผู้อื่นได้เพียงแค่แบ่งปันเว็บไซต์
ตัวแก้ไขเข้ากันได้กับโปรเจ็กต์ JavaScript ใดๆ แม้ว่าจะมีฟีเจอร์เฉพาะของ React เช่น ตัวเลือกในการบันทึกโปรเจ็กต์ในเทมเพลต create-react-app
โครงการใดๆ ที่คุณสร้างใน CodeSandbox จะเริ่มต้นด้วยเทมเพลต มันสามารถเกี่ยวข้องกับไลบรารี เฟรมเวิร์ก หรือรันไทม์เฉพาะ (รวมถึง Node.js) หรือใช้เทคโนโลยีเว็บมาตรฐานเพียงอย่างเดียว หลังจากเลือกเทมเพลต คุณจะถูกส่งไปยังตัวแก้ไข ซึ่งคุณจะพบไฟล์ที่จำเป็นทั้งหมดและหน้าต่างแสดงตัวอย่างเปิดอยู่แล้ว
คุณสามารถเข้าถึง “ระบบไฟล์” ในแซนด์บ็อกซ์ทั้งหมด ซึ่งหมายความว่าคุณสามารถสร้างไฟล์ใหม่ ใช้โมดูล (รวมถึงแพ็คเกจ NPM) และโต้ตอบกับสินทรัพย์แบบคงที่ นอกจากนี้ยังมีโอกาสที่จะแก้ไขไฟล์การกำหนดค่าเฉพาะเทมเพลต
คุณยังสามารถสร้างเทมเพลตของคุณเองสำหรับกรณีการใช้งานเฉพาะของคุณ พร้อมด้วยโครงสร้างไฟล์และการอ้างอิง เช่นเดียวกับใน IDE เนื่องจากเครื่องมือนี้เชื่อมโยงกับ Github คุณจึงสร้างคอมมิตและเปิด PR ได้อย่างรวดเร็ว คุณสามารถปรับใช้แอปพลิเคชันของคุณกับ ZEIT หรือ Netlify ได้ทันที
CodeSandbox ทีม Pro
CodeSandbox ธุรกิจชาวดัตช์ที่อนุญาตให้นักพัฒนาสร้างแซนด์บ็อกซ์การพัฒนาเว็บแอปบนเบราว์เซอร์ ได้เปิดตัวแพลตฟอร์มการทำงานร่วมกันอย่างเป็นทางการที่ช่วยให้ทีมสามารถทำงานกับโค้ดบนคลาวด์ได้ ผลิตภัณฑ์ใหม่ Team Pro เป็นโซลูชันแบบไม่มีโค้ดที่สร้างขึ้นสำหรับทีมผลิตภัณฑ์ทั้งหมด ตั้งแต่นักออกแบบและผู้จัดการไปจนถึงทีมประกันคุณภาพ (QA) และอื่นๆ
โครงการมีให้ในอินเทอร์เฟซที่ใช้งานง่ายสำหรับทุกคนที่ต้องการทำหรือยอมรับการเปลี่ยนแปลงในแอปพลิเคชันเว็บ หลีกเลี่ยงวิธีการอื่น เช่น การส่งบันทึกย่อและคำแนะนำไปยังนักพัฒนาเพื่อดำเนินการเปลี่ยนแปลง ส่งกลับเพื่อการอภิปราย และทำซ้ำขั้นตอน
Key Features
- เครื่องมือแก้ไขโค้ดบนเว็บและเครื่องมือต้นแบบ
- สำหรับการใช้งานในพื้นที่ อาจดาวน์โหลดแซนด์บ็อกซ์อย่างง่ายดายในไฟล์ zip
- การเขียนโปรแกรม ทำในแซนด์บ็อกซ์ ซึ่งสามารถแบ่งปันกับเพื่อนร่วมงานได้อย่างง่ายดาย
ข้อดี
- ประสบการณ์ผู้ใช้ที่ได้รับการปรับปรุงและการควบคุมตัวแก้ไขที่ดียิ่งขึ้น
- ฟีเจอร์การแสดงตัวอย่างแบบสดสามารถปรับเปลี่ยนและดูได้ในหน้าต่างแยกต่างหาก
- รหัสถูกจัดรูปแบบโดยอัตโนมัติและรวม CLI (codesandbox-cli)
- รองรับโมดูล npm ขั้นสูง
- ข้อความแสดงข้อผิดพลาดที่ดีพร้อมคำแนะนำ
- ปรับปรุงประสบการณ์การดีบักโดยมอบเทอร์มินัลที่ดีกว่า ตัวแสดงการทดสอบ และตัวแสดงปัญหา
ข้อเสีย
- ผู้บริโภคปลายทางต้องเผชิญกับการปรับเปลี่ยนในแบบของคุณหลายอย่าง
- การลากและวางไฟล์จากเครื่องคอมพิวเตอร์ทำงานไม่ถูกต้อง
- ต้องปฏิบัติตามโครงสร้างโฟลเดอร์บางอย่างใน CodeSandbox
- ฟังก์ชันการทำงานของแซนด์บ็อกซ์ส่วนตัวมีให้สำหรับผู้อุปถัมภ์เท่านั้น
สแต็คบลิทซ์
StackBlitz เป็น IDE ออนไลน์ที่ขับเคลื่อนด้วย Visual Studio Code สำหรับเว็บแอปพลิเคชัน แพลตฟอร์มนี้ตอบสนองและปรับเปลี่ยนได้เหมือนกับเวอร์ชันเดสก์ท็อป StackBlitz เป็น IDE ออนไลน์ที่มาพร้อมกับ เชิงมุมและปฏิกิริยา เครื่องมือในการพัฒนา
Thinkster.io สร้างโปรเจ็กต์ที่ยอดเยี่ยมเพื่อให้ง่ายที่สุดในการเริ่มต้นโปรเจ็กต์ Angular หรือ React ของคุณ โดยไม่ต้องกังวลเกี่ยวกับการติดตั้งการพึ่งพาหรือการตั้งค่าบิลด์ StackBlitz มีคุณสมบัติที่น่าทึ่งและไม่ซ้ำใครมากมายที่ไม่มีโปรแกรมแก้ไขโค้ดออนไลน์อื่นใดในขณะนี้ ด้วยเหตุนี้ จึงคุ้มค่าที่จะตรวจสอบ StackBlitz เพิ่มเติมและค้นพบว่า IDE ออนไลน์นี้นำเสนออะไร
Stackblitz เปรียบได้กับ IDE ที่สมบูรณ์อย่างยิ่ง โดยเฉพาะอย่างยิ่งหากคุณไม่สามารถบอกลาโค้ด VS ได้ เนื่องจากเครื่องมือนี้ใช้พื้นฐานจากมัน แพ็คเกจนี้มีคุณสมบัติหลากหลายที่ช่วยให้คุณเริ่มต้นและสร้างแอปพลิเคชันฟูลสแตกต่อไปได้
โปรแกรมนี้ขับเคลื่อนโดย Visual Studio ซึ่งเป็นที่รู้จักกันดีในหมู่นักพัฒนา การแก้ไขแบบออฟไลน์เป็นคุณลักษณะที่โดดเด่นของโครงการ เพื่อให้เป็นไปได้ ทีม Stackblitz ได้สร้างเว็บเซิร์ฟเวอร์ในเบราว์เซอร์ ขณะที่คุณพิมพ์ โปรแกรมจะติดตั้งการพึ่งพา คอมไพล์ บันเดิล และโหลดซ้ำโดยอัตโนมัติ
เวอร์ชันพรีเมียม
นักเรียนนายร้อยนักบินอวกาศและผู้บัญชาการมีให้บริการฟรี 8 เหรียญต่อเดือนและ 29 เหรียญต่อเดือนตามลำดับ นักบินอวกาศและผู้บัญชาการมีคุณสมบัติหลายอย่าง เช่น โปรเจ็กต์ส่วนตัวไม่จำกัด อัปโหลดไฟล์ไม่จำกัด เชิญเข้าสู่แชนเนลหลักของทีม slack และอื่นๆ สำหรับข้อมูลเพิ่มเติม โปรดดูที่คณะกรรมการเรียกเก็บเงินอย่างเป็นทางการ
Key Features
- การเพิ่มแพ็คเกจ NPM ให้กับโครงการของคุณ
- ขอบคุณเซิร์ฟเวอร์ dev ในเบราว์เซอร์ที่แปลกใหม่ คุณสามารถแก้ไขได้ขณะออฟไลน์
- 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 ฉันรู้ว่านี่คือสิ่งที่ฉันต้องการ