VueJS Amsterdam — ร่วมกับ Ives van Hoorne

ทำความรู้จักกับวิทยากรก่อนการประชุมในที่ประชุม

จำหน่ายบัตรสำหรับปี 2019 แล้ว: https://www.eventbrite.co.uk/e/vuejs-amsterdam-2019-tickets-45193495963

การประชุม VueJS Amsterdamใกล้จะมาถึงแล้ว บัตรจำหน่ายหมดแล้ว! ในการสัมภาษณ์นี้ เราจะพูดคุยกับ Ives van Hoorne เขาคือผู้สร้าง CodeSandbox ที่บ้าระห่ำ โปรแกรมแก้ไขออนไลน์ที่ให้การสนับสนุน Vue ชั้นหนึ่งและพยายามทำให้ชีวิตง่ายขึ้นสำหรับผู้เริ่มต้น!

หมายเหตุ: คำถามและคำตอบยังไม่ได้คัดลอกแต่ดัดแปลงมาจากบันทึกย่อ

สวัสดีอีฟส์! คุณสามารถบอกเราเกี่ยวกับตัวคุณได้อย่างไร?

สวัสดีทุกคน! ฉันเป็น นักศึกษาวิทยาศาสตร์คอมพิวเตอร์ ที่ "University of Twente" และเป็นนักพัฒนาพาร์ทไทม์ที่ "CataWiki" ซึ่งเป็นเว็บไซต์การประมูล ฉันเป็นผู้สร้าง CodeSandbox ซึ่งเป็นโปรแกรมแก้ไขโค้ดออนไลน์สำหรับเว็บแอปพลิเคชันที่ใช้ React หรือ Vue

ช่วงนี้ฉันไม่ค่อยได้เรียนหนังสือเท่าไหร่เพราะว่าฉันฟุ้งซ่านได้ง่าย ฉันเล่นวอลเลย์บอลบ่อยมาก ฉันชอบสร้างสรรค์ดนตรีและเล่นเครื่องดนตรีไม่กี่อย่าง เช่น ฟลุต คีย์บอร์ดไฟฟ้า และกีตาร์

ฉันทำงานเป็นนักพัฒนาซอฟต์แวร์แต่ฉันยังอาศัยอยู่ในบ้านพักนักเรียน ฉันยอมรับชีวิตนักศึกษาอย่างเต็มที่ ตัวอย่างเช่น หลังจากการสัมภาษณ์ครั้งนี้ ฉันจะไปดื่มค็อกเทลกับนักเรียนคนอื่นๆ ทั้งหมด!

บางครั้ง ฉันจะไปร่วมการประชุมใหญ่เพื่อบรรยายในประเทศอื่นและพบว่าเมื่อคืนก่อนฉันปาร์ตี้หนักมากกับเพื่อนๆ นี่เป็นการเปลี่ยนแปลงมุมมองครั้งใหญ่

ชีวิตนักศึกษาสนุกมาก! ฉันอยากจะพูดถึง CodeSandbox เพิ่มเติมอีกสักหน่อย คุณช่วยบอกเราได้ไหมว่ามันเริ่มต้นอย่างไร?

ฉันเริ่มทำงานกับ CodeSandbox เมื่อเดือนพฤศจิกายนปีที่แล้วและเปิดตัวในเดือนเมษายน ฉันสร้างมันขึ้นมาเพราะฉันหงุดหงิดมาก ในฐานะนักเรียน ฉันต้องเรียนรู้แนวคิดพื้นฐานต่างๆ ทั้งหมดนี้ ฉันรู้สึกว่าต้องทำโปรเจ็กต์ที่ท้าทายมากกว่านี้ ฉันได้กล่าวถึงพื้นฐานของการเขียนโปรแกรมที่ทำงานให้กับ CataWiki แล้ว ฉันเริ่มทำงานกับ CodeSandbox ดังนั้นฉันจึงสามารถเรียนรู้แนวคิดขั้นสูงเพิ่มเติมไปพร้อมๆ กับการสร้างสิ่งที่มีประโยชน์ มีอยู่ช่วงหนึ่งที่ฉันหมดความสนใจและหยุดไปสองสามสัปดาห์ แต่หลังจากพิจารณาอยู่พักหนึ่งแล้ว ฉันก็มุ่งมั่นที่จะทำงานนี้จนกว่าจะเสร็จสิ้น

ที่ CodeSandbox เราปฏิบัติตามหลักการ 3 ประการ:

• ลดเส้นโค้งการเรียนรู้
• ความรู้สึกของบรรณาธิการท้องถิ่น
• แบ่งปันและค้นพบตัวอย่างจากผู้อื่นได้ง่าย

จากการเปิดตัวครั้งแรก เรามีผู้เยี่ยมชมประมาณ 8 คนในวันนั้น มันค่อนข้างน่าสนใจ ฉันพยายามจะพูดถึง Reddit และ Twitter แต่ฉันแทบไม่มีผู้ติดตามเลย ฉันโชคดีในวันต่อมา Kent C. Doddsเปิดตัว "glamourous" และเขาตกลงที่จะใช้ CodeSandbox เพื่อสาธิตตัวอย่างที่สวยงาม จากจุดนั้นการเข้าชมก็พุ่งสูงขึ้น มันเจ๋งมาก!

ตั้งแต่วินาทีนั้นเป็นต้นมา แรงจูงใจของฉันก็ทวีคูณขึ้นเมื่อฉันรู้ว่าฉันสามารถสร้างความแตกต่างให้กับผู้คนที่ใช้มันได้ ฉันไม่คิดว่ามันจะได้รับความนิยมขนาดนี้

เรื่องราวสุดเจ๋ง! มาพูดถึงการประชุมกันดีกว่า คุณกำลังเตรียมอะไรอยู่?

สำหรับการพูดคุยของฉัน ฉันจะอธิบายว่าเราต้องเปลี่ยนแปลงอะไรใน CodeSandbox เพื่อรองรับ Vue

เราเริ่มใช้การสนับสนุน Vue เมื่อประมาณฤดูร้อนที่แล้ว ในตอนแรกมันไม่ง่ายอย่างที่คิด ในระหว่างการพูดคุย ฉันจะพูดถึงวิธีที่เราเริ่มต้น สิ่งที่เราต้องเปลี่ยนแปลงใน CodeSandbox เพื่อให้มันทำงานได้ และคุณสมบัติเฉพาะของ Vue ที่เรามีในปัจจุบัน

ในตอนแรก CodeSandbox ใช้งานได้กับ React เท่านั้น แต่ต่อมาเราได้รวมการรองรับ Vue ไว้ด้วย เราอยากได้แพ็คเกจเต็มๆ เลือกโปรเจ็กต์ Vue จาก GitHub นำเข้าและทำงานต่อจากเบราว์เซอร์ หลังจากนั้นเราได้ใช้การสนับสนุน องค์ประกอบไฟล์เดียว

บันเดิลเริ่มต้นของเรานั้นเรียบง่ายมากและรองรับเฉพาะไฟล์ JavaScript ที่แปลงไฟล์แล้วเท่านั้น เราไม่มีระบบอื่นใดอยู่เบื้องหลัง เนื่องจากข้อจำกัดนี้ ฉันจึงต้องเขียนบันเดิลใหม่ทั้งหมดโดยใช้ตัวโหลด Webpack เพื่อให้รองรับตัวโหลด หลังจากนั้นฉันก็เพิ่มตัวโหลดเหล่านี้ทั้งหมด: SASS, LESS, Stylus และ TypeScript นั่นเป็นสาเหตุที่ทำให้นำไปใช้ได้ยากขึ้นเล็กน้อย

ตั้งแต่เดือนสิงหาคม เราได้บูรณาการ โมนาโก นี่คือ VS Code เวอร์ชันเว็บเบราว์เซอร์ที่สร้างโดยทีม Microsoft มันน่าประทับใจมากกับสิ่งที่พวกเขาทำ มันล้ำสมัย คุณได้รับ TypeScript Intellisense การตรวจสอบประเภท ฯลฯ แม้กระทั่งการนำเข้าข้อมูลของโมดูลทั้งหมด! ตั้งแต่นั้นมา เราก็มีการสนับสนุน TypeScript แบบเนทีฟ

เมื่อเร็วๆ นี้ เรายังเพิ่มการสนับสนุนเต็มรูปแบบสำหรับระบบ การโหลดโมดูลร้อนของ Webpack Vue loader ใช้สิ่งนี้อย่างกว้างขวาง หากคุณเปลี่ยนคอมโพเนนต์ Vue ตัวโหลด Vue จะใช้ hot module API เพื่อรีโหลดเฉพาะไฟล์นั้น สมมติว่าคุณเปลี่ยนเทมเพลตหรือสไตล์ นั่นหมายความว่าคุณจะเห็นการเปลี่ยนแปลงในขณะที่ยังคงสถานะเดิมไว้ การดำเนินการนี้ใช้เวลานานกว่าที่คาดไว้เล็กน้อย แต่ตอนนี้สามารถใช้ในโครงการ React ได้แล้ว

เยี่ยมมาก! หัวข้อใดที่คุณสนใจในขณะนี้?

มีหัวข้อเฉพาะที่ฉันดูบ่อยมากเมื่อเร็วๆ นี้ ซึ่งก็คือ เครื่องมือสำหรับนักพัฒนาเว็บที่ขับเคลื่อนด้วย UI

ตัวอย่างเช่น เครื่องมือสำหรับนักพัฒนาส่วนใหญ่ที่เราใช้นั้นใช้เทอร์มินัล ถ้าเรามุ่งเน้นไปที่การพัฒนาเว็บเป็นหลัก ทำไมเราไม่มีเครื่องมือสำหรับนักพัฒนาเว็บที่ขับเคลื่อนด้วย UI มากกว่านี้ล่ะ ตัวอย่างที่ดีคือ Webpack Dashboard สร้างขึ้นโดยกลุ่มกบฏ Ken Wheeler ที่ Formidable Labs

ถ้าเราคิดถึงปฏิสัมพันธ์ระหว่างมนุษย์กับคอมพิวเตอร์ เราจะขับเคลื่อนด้วยการมองเห็นเป็นอย่างมาก หากคุณบอกใครสักคนให้บอกความแตกต่างระหว่างตัวอย่างข้อมูลสองตัวอย่าง ตัวอย่างหนึ่งเป็นแผนภูมิแท่งและข้อมูลที่เป็นข้อความอีกตัวอย่างหนึ่ง เมื่อดูที่แผนภูมิแท่ง พวกเขาจะบอกได้อย่างรวดเร็วกว่าการอ่านข้อความมาก

แดชบอร์ด Webpack ใช้แนวทางแบบภาพนี้ค่อนข้างดีในการแสดงโมดูลทั้งหมดที่สร้างขึ้นโดยแสดงขนาดที่สัมพันธ์กันและการมีส่วนร่วมของขนาดโดยรวม การใช้ข้อมูลภาพนี้ทำให้คุณสามารถระบุปัญหาการรวมกลุ่มได้อย่างรวดเร็ว

สำหรับคำถามสุดท้าย: คุณตั้งตารอการพูดคุยหรือหัวข้ออะไรบ้างในการประชุม?

ฉันสนใจคำพูดของ Sebastien Chopinและ Alexandre Chopin พวกเขาคือผู้สร้าง Nuxt การใช้ Nuxt ทำให้คุณไม่ต้องตั้งค่าเริ่มต้นใดๆ หรือคิดถึงการกำหนดค่าใดๆ เพื่อเปิดใช้งานการเรนเดอร์ฝั่งเซิร์ฟเวอร์หรือสร้างกิจกรรม Vue App ของคุณ ฉันชอบสิ่งที่พวกเขาทำและฉันสนใจคำพูดของพวกเขามาก

ขอบคุณสำหรับเวลาของคุณไอฟส์!

ขอบคุณเจอราร์ด! ฉันคิดว่าฉันอาจจะปล่อยคุณลักษณะใหม่บางอย่างสำหรับ CodeSandbox ก่อนการพูดคุยและระหว่างกลุ่มนักเรียนได้ คอยติดตาม!