Smashing Podcast ตอนที่ 20 กับ Marcy Sutton: Gatsby คืออะไร?

วันนี้เรากำลังพูดถึงแกสบี้ มันคืออะไรและเหมาะสมกับกองการพัฒนาเว็บของคุณอย่างไร? Drew McLellan พูดคุยกับผู้เชี่ยวชาญ Marcy Sutton เพื่อหาคำตอบ

แสดงหมายเหตุ

• แกสบี้
• มาร์ซี่บน Twitter
• เว็บไซต์ส่วนตัวของ Marcy

อัพเดทประจำสัปดาห์

• “ทำให้เว็บไซต์ของคุณรวดเร็ว เข้าถึงได้ และปลอดภัยด้วยความช่วยเหลือจาก Google”
  โดย Dion Almaer
• “ทำความเข้าใจการพัฒนาปลั๊กอินใน Gatsby”
  โดย Aleem Isiaka
• “การสร้างแอพเดสก์ท็อปขนาดเล็กด้วย Tauri และ Vue.js”
  โดย Kelvin Omersone
• “ขจัดความตื่นตระหนกจากการแจ้งเตือนการจัดส่งสินค้าอีคอมเมิร์ซและสินค้าคงคลัง”
  โดย Suzanne Scacca
• “การเปลี่ยน CSS ใน Vuejs และ Nuxtjs”
  โดย Timi Omoyeni

การถอดเสียง

Drew McLellan: เธอเป็นหัวหน้าวิศวกรในทีม Developer Relations ที่ Gatsby ก่อนหน้านี้ เธอทำงานเกี่ยวกับไลบรารีการทดสอบการช่วยสำหรับการเข้าถึง axe-core แบบโอเพนซอร์ส และเคยทำงานเป็นวิศวกรการช่วยสำหรับการเข้าถึงที่ Adobe เธอหลงใหลในการปรับปรุงเว็บสำหรับผู้ทุพพลภาพและมักพูดถึงเรื่องนี้ในที่ประชุม ในปี 2559 O'Reilly มอบรางวัลแพลตฟอร์มเว็บของเธอสำหรับงานด้านการเข้าถึงพิเศษ

Drew: เธอยังเป็นผู้นำการช่วยการเข้าถึงของ Seattle และ NW Tech Women Meetups ในภูมิภาคท้องถิ่นอีกด้วย เรารู้ว่าเธอเป็นวิศวกรที่มีทักษะและเป็นผู้เชี่ยวชาญด้านการช่วยการเข้าถึง แต่คุณรู้ไหมว่าเธอต้องการส่งแองเจิลฟอลส์ในถัง? เพื่อนที่ยอดเยี่ยมของฉัน ยินดีต้อนรับ Marcy Sutton

มาร์ซี่ ซัตตัน: สวัสดี

ดริว : สวัสดี มาร์กี้. คุณเป็นอย่างไรบ้าง?

มาร์กี้: ฉันทุบ คุณเป็นอย่างไรบ้าง?

ดริว : ฉันสบายดี ขอขอบคุณ. วันนี้ฉันอยากคุยกับคุณเกี่ยวกับแกสบี้ เพราะมันเกิดขึ้นในบทสนทนาที่ฉันมีในตอนก่อนหน้าเกี่ยวกับการเรียนรู้ React กับ Mina Markham ฉันรู้ว่าฉันกำลังตกอยู่ในอันตรายจากการทำสิ่งที่คนทั่วไปบนอินเทอร์เน็ตให้ความเห็นเกี่ยวกับสิ่งที่ฉันไม่มีประสบการณ์โดยตรง นั่นไม่ใช่วิธีที่เราทำสิ่งต่างๆ ที่ Smashing

Drew: และฉันต้องการให้แน่ใจว่าเราครอบคลุม Gatsby อย่างถูกต้อง และจะมีวิธีใดที่ดีไปกว่าการพูดคุยกับผู้รู้ทั้งภายในและภายนอก สมมุติว่าฉันเคยได้ยินชื่อแกสบี้ แต่ฉันไม่รู้ว่ามันเข้ากับ stack ตรงไหนเมื่อสร้างเว็บไซต์ Gatsby คืออะไรกันแน่

Marcy: Gatsby เป็นโปรแกรมสร้างเว็บไซต์ ปัจจุบันใช้ React แต่มันจะสร้างเว็บไซต์แบบคงที่สำหรับคุณ จากนั้นจะเติมน้ำให้กลายเป็นเว็บแอปพลิเคชัน React เต็มรูปแบบ ดังนั้นคุณจะได้รับสิ่งที่ดีที่สุดจากทั้งสองโลกด้วยบิวด์ที่รวดเร็วซึ่งคุณกำลังรวบรวมไฟล์ HTML ที่จะโหลดได้อย่างรวดเร็วสำหรับผู้ใช้ จากนั้นคุณจะได้รับการปรับปรุงทั้งหมดด้วย JavaScript เพื่อสร้างเว็บแอปแบบไดนามิกเชิงโต้ตอบอย่างแท้จริง

มาร์ซี่: ดังนั้น มันเป็นพื้นที่ที่น่าตื่นเต้นจริงๆ ที่ได้เข้ามา และฉันได้ทำงานด้านการเรียนรู้ด้วยเอกสาร และตอนนี้ในทีม Devrel ฉันมุ่งเน้นไปที่การทำให้ดีที่สุดเท่าที่จะทำได้ โดยรู้ถึงความท้าทายในการเข้าถึงด้วย JavaScript และพยายามแก้ไขจากภายในสู่ภายนอก

Drew: พวกเราหลายคนคงจะคุ้นเคยกันดี ฉันคิดว่าด้วยแนวคิดของตัวสร้างไซต์แบบคงที่ และดูเหมือนว่าแกสบี้จะเข้ากับบทบาทนั้นในวงกว้าง แต่สำหรับฉัน ดูเหมือนว่ามันจะไปไกลกว่า SSG ส่วนใหญ่มาก และเครื่องสร้างไซต์ส่วนใหญ่จะไม่เชื่อเรื่องพระเจ้าส่วนหน้า ดูเหมือนว่าเมื่อใช้ Gatsby คุณจะลงเอยด้วยรหัส Gatsby ที่ทำงานเป็นส่วนหนึ่งของเว็บไซต์ของคุณ เป็นการประเมินที่ยุติธรรมหรือไม่? และถ้าเป็นเช่นนั้น Gatsby ทำอะไรในส่วนหน้าของคุณจริงๆ?

Marcy: ใช่ ฉันจะบอกว่าส่วนที่ใหญ่ที่สุดคือการกำหนดเส้นทางฝั่งไคลเอ็นต์ ตอนนี้ Gatsby กำลังใช้เราเตอร์การเข้าถึงภายใต้ประทุน มันใช้งานแบบของมันเอง แต่นั่นเป็นส่วนสำคัญที่เมื่อคุณโหลดไซต์สแตติกเป็นครั้งแรก จะมีไฟล์ HTML อยู่ที่นั่น ดังนั้น หากผู้ใช้ปิด JavaScript ด้วยเหตุผลบางประการ เว็บไซต์ของคุณก็ควรจะยังคงอยู่และยังคงมีเนื้อหาอยู่

มาร์ซี่: แต่ถ้าเปิดใช้งาน JavaScript นั่นคือตอนที่ไฮเดรชั่นนี้เกิดขึ้นเมื่อคุณใช้ลิงก์ในไซต์ Gatsby ของคุณจะดึงทรัพยากรล่วงหน้าจากหน้านั้น ดังนั้นมันจะโหลดเร็วขึ้น นั่นคือทั้งหมดที่เปิดใช้งานด้วยเลเยอร์ JavaScript นี้ที่ Gatsby มอบให้คุณ และยิ่งไปกว่านั้น มันขึ้นอยู่กับว่าคุณกำลังใช้อะไรในไซต์ของคุณจะจบลงในชุด JavaScript นั้น

มาร์ซี่: แต่สำหรับสิ่งต่าง ๆ ที่ใช้การโต้ตอบจำนวนมาก เช่น อินเทอร์เฟซที่เข้าถึงได้ นั่นเป็นที่ที่ดี สำหรับฉัน ฉันสนุกกับการใช้ JavaScript ตลอดเวลา และมาร์กอัปของฉันก็อยู่ในจุดที่ดี ฉันรู้ว่ามันเป็นเรื่องของการตั้งค่า ไม่ว่าคุณจะต้องการให้ HTML และ JavaScript และ CSS ของคุณมีการเชื่อมโยงกันอย่างเรียบร้อยและมีพื้นที่สำหรับรูปแบบต่างๆ ภายใน Gatsby

Marcy: คุณไม่จำเป็นต้องใช้ CSS และ JS เสมอไป แต่มันเป็นเรื่องของการได้รับพลังของเลเยอร์ JavaScript แบบไดนามิกนั้น ซึ่งพร้อมให้คุณใช้งานในขณะที่คุณกำลังเขียนเว็บไซต์ของคุณ ไม่เหมือนส่วนเสริมนี้ในไฟล์แยกต่างหาก

Drew: เมื่อฉันนึกถึงการทำงานของเครื่องมือสร้างไซต์แบบสแตติก ฉันกำลังคิดถึงเนื้อหาในไฟล์ Markdown และตัวสร้างจะทำงานข้ามเนื้อหานั้นและรวมเข้ากับเทมเพลตและสร้างไฟล์ HTML จำนวน 10 ไฟล์ หลายร้อย หลายพันไฟล์ ซึ่งเป็นหน้าในเว็บไซต์ของคุณ เมื่อฉันนึกถึงไซต์หรือแอป React ฉันกำลังคิดถึงประสบการณ์หน้าเดียวมากขึ้นซึ่งอินเทอร์เฟซถูกสร้างขึ้นโดย React ทันที คุณกำลังพูดว่าแกสบี้ทำทั้งสองอย่างเหรอ? มันคือการสร้างทุกหน้าและยังเสริมด้วย JavaScript?

มาร์กี้: ใช่ค่ะ Gatsby จะใช้ Node.js ณ เวลาสร้าง มันจะตรวจสอบส่วนประกอบ React ของคุณและคอมไพล์ให้เป็นไฟล์ HTML ซึ่งจริงๆ แล้ว ครั้งแรกที่ฉันดู Gatsby ฉันจะไม่ปิด JavaScript และแบบว่า "เอาล่ะ มีหน้าอื่นที่นี่ไหม นี่คืออะไร" และฉันก็มีความสุขมากที่ Gatsby ทำงานแบบนั้นโดยปริยาย มันจะสร้างไฟล์ที่สร้างขึ้นจากส่วนประกอบตอบโต้ของคุณ ซึ่งยอดเยี่ยมมาก

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

Marcy: แต่ฉันแปลกใจมากที่วิธีที่ Gatsby นำเสนอโดยปริยาย ดังนั้นจึงเป็นทางเลือกที่พวกเขาสร้างไซต์ในลักษณะนั้น และเรากำลังประเมินอยู่เสมอ ยังคงเป็นวิธีที่ดีที่สุดหรือไม่? เราต้องทำอะไรเพื่อให้ผู้ใช้ของเราได้รับสิ่งที่พวกเขาขอ? ดังนั้นเราจึงทำการสำรวจภายใน อย่างต่อเนื่องเพื่อให้แน่ใจว่า Gatsby ทำงานได้ดีที่สุดในการสร้างเว็บไซต์

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

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

Marcy: ฉันคิดว่าอาจเป็นธรรมชาติของเว็บไซต์ JAMstack ในท้ายที่สุด มันจะลงมาที่สิ่งที่คุณกำลังรวมกลุ่มบนเว็บไซต์ของคุณ ดังนั้น ไม่ว่าคุณจะใช้เฟรมเวิร์กหรือเครื่องมือใด เรายังคงต้องไตร่ตรองถึงสิ่งที่เราใส่ในชุดรวมเหล่านั้นสำหรับผู้ใช้ปลายทาง แต่ Gatsby ตั้งเป้าที่จะให้ค่าเริ่มต้นที่ดีแก่คุณ ไม่เพียงแต่เพื่อประสิทธิภาพเท่านั้น แต่สำหรับการเข้าถึงด้วยเช่นกัน

Marcy: แต่นั่นต้องใช้การประเมินเสมอ เราต้องตรวจสอบให้แน่ใจเสมอว่าหากเราเพิ่มบางอย่างเข้าไป มันก็จะยังมีประสิทธิภาพอยู่ แต่ใช่ เมื่อได้รับเพย์โหลดเริ่มต้นของไฟล์สแตติก พวกมันจะโหลดเร็ว เร็วกว่าไซต์ WordPress แบบคลาสสิกที่ฉันเคยมี แต่แล้วปรับปรุงด้วย JavaScript มีการแลกเปลี่ยนบางอย่างที่นั่นอย่างแน่นอน

Marcy: แต่มันใช้ได้ผลดีจริงๆ หลายคนชอบไซต์ Gatsby ของพวกเขามาก การทำงานเต็มเวลาจึงเป็นเรื่องสนุก และเรียนรู้รายละเอียดเกี่ยวกับเฟรมเวิร์ก JavaScript เช่น Gatsby

Drew: คุณสมบัติด้านประสิทธิภาพแบบใดที่ Gatsby วางไว้จริงเพื่อเพิ่มความเร็วไซต์ของคุณ?

Marcy: ด้วยการดึงข้อมูลล่วงหน้าสำหรับลิงก์ ลูกค้ารายนี้กล่าวว่าเราต์เรื่องการกำหนดเส้นทาง ฉันคิดว่านั่นอาจเป็นสิ่งที่ใหญ่ที่สุด ทำให้การสร้างเว็บแอปแบบโปรเกรสซีฟเป็นเรื่องง่าย ดังนั้น ด้วยความสามารถออฟไลน์บางอย่าง คุณสามารถเลือกและเลือกสิ่งที่คุณต้องการในแง่ของประเภทออฟไลน์และประเภท PWA แต่สิ่งเหล่านี้ทำให้ส่วนนั้นของประสบการณ์ครั้งแรกจริงๆ เช่น เว็บไซต์ตัวอย่างเริ่มต้นหลายๆ แห่งที่คุณอาจเริ่มต้นมีตัวอย่างการใช้รายการ และประเภทของการสร้างเว็บไซต์ของคุณในเวอร์ชันที่ทันสมัย

มาร์ซี่: จริงๆ ก็เหมือนไม่ต้องใช้รหัสขนส่งนะ นั่นเป็นส่วนใหญ่ของมัน การแคช นั่นคือการดึงข้อมูลล่วงหน้าสำหรับลิงก์จริงๆ นั่นคือสิ่งที่ฉันจะบอกว่าเป็นส่วนที่ใหญ่ที่สุดของมัน

Drew: นี่คือจุดที่ไซต์กำลังคาดการณ์ว่าผู้ใช้กำลังจะไปที่ใด มันฉลาดขนาดนั้นหรือว่ามันดึงข้อมูลทุกอย่างบนหน้าล่วงหน้าหรือไม่?

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

Marcy: มีข้อแลกเปลี่ยนบางอย่าง เช่น ผู้ใช้คีย์บอร์ดที่ไม่สามารถใช้เมาส์ได้และกำลังแท็บผ่านทุกลิงก์เพื่อไปยังส่วนต่างๆ นั้น ควรดึงเนื้อหาสำหรับทุกๆ อันเพราะผู้ใช้เมาส์อาจเลือกได้มากกว่านี้ เกี่ยวกับตำแหน่งที่พวกเขาวางเคอร์เซอร์ของเมาส์ไว้ บทสนทนาเหล่านั้นที่ฉันพบว่าน่าสนใจมาก

Marcy: และพยายามคิดว่าข้อมูลใดที่เราจำเป็นต้องตรวจสอบสมมติฐานเหล่านี้ด้วย ใช่แล้ว เป็นเรื่องที่น่าสนใจอย่างยิ่งที่จะดูค่าเริ่มต้นเหล่านั้น และเราสามารถปรับปรุงอะไรได้บ้าง และตรวจสอบจริงๆ ว่าดึงข้อมูลได้มากเพียงใด นั่นเป็นสิ่งที่ดีจริงๆเหรอ? เพียงเพื่อเพิ่มความเร็วขึ้นเล็กน้อย? หรือมันเร็วพอถ้าไม่มีสิ่งนั้น? มีทางเลือกอื่นที่เราสามารถใช้เป็นส่วนหนึ่งของความสนุกในการทำงานกับเฟรมเวิร์กได้หรือไม่ เพราะสามารถประเมินข้อเสียทั้งหมดเหล่านั้นได้

Drew: นี่คือการดึงข้อมูลล่วงหน้าบางอย่างที่ผู้ใช้เพิ่งได้รับในเว็บไซต์ของตนฟรี ดังนั้นพวกเขาต้องทำงานใด ๆ เพื่อนำไปใช้หรือไม่?

Marcy: คุณสามารถดาวน์โหลดได้ฟรีโดยใช้ลิงก์ Gatsby ดังนั้นจึงเป็นส่วนประกอบที่มาพร้อมกับ Gatsby และเมื่อคุณใช้สิ่งนั้น มันจะส่งออกแท็กแองเคอร์ ดังนั้น HTML ของคุณจึงเป็น HTML จริง และคุณได้ใช้ประโยชน์จากแพลตฟอร์มเว็บในลักษณะนั้น แต่ในส่วนประกอบ React ของคุณ คุณกำลังทำงานกับส่วนประกอบลิงก์ Gatsby โดยตรง และนั่นก็มีกลไกทั้งหมดสำหรับ... โดยจะพิจารณาว่า HREF ในอนาคตของคุณจะเป็นอย่างไร สำหรับลิงก์ของสถานที่ที่คุณต้องการไปและจะไปและคว้าทรัพยากรจากลิงก์นั้นและโหลดล่วงหน้า

Marcy: และเป็นเพียงภายในไซต์ของคุณเท่านั้น ดังนั้นจึงไม่ปิดและพยายามดึงข้อมูลจากเว็บไซต์อื่น แต่ดูเหมือนว่าจะทำงานได้ดีทีเดียว ฉันรู้ว่าผู้ใช้บางคนกำลังมองหาวิธีต่างๆ อย่างจริงจัง เช่น คุณต้องเลือกไม่รับบางสิ่งเหล่านี้ อย่างน้อยการกำหนดเส้นทางไม่ใช้การดึงข้อมูลล่วงหน้า คุณเพียงแค่ใช้แท็กสมอปกติ แล้วคุณจะไม่ได้รับฟังก์ชันนั้นจริงๆ มันค่อนข้างง่ายที่จะใช้อย่างอื่น แต่การสนทนาบางส่วนที่เรามีเกี่ยวกับการกำหนดเส้นทางฝั่งไคลเอ็นต์ และวิธีทำให้ดีที่สุด นั่นเป็นพื้นที่ที่น่าสนใจจริงๆด้วย

Drew: คุณต้องทำงานภายในระบบนิเวศของ Gatsby อย่างใกล้ชิดเพียงใดในแง่ของว่าฉันต้องการมีองค์ประกอบลิงก์ของตัวเองหรือไม่ จะดีไหม ฉันจะไม่ต่อสู้กับ Gatsby เพื่อทำสิ่งนั้น?

Marcy: ไม่ คุณสามารถเสียบส่วนประกอบอะไรก็ได้ที่คุณต้องการ ตราบใดที่มันทำงานกับรันไทม์ของ React นั่นคือความงามของมันจริงๆ อะไรก็ตามที่คุณสามารถใส่ลงในแอพ React คุณสามารถใส่ในแอพ Gatsby ได้ มีแม้กระทั่งปลั๊กอิน Pre-React ดังนั้นจึงมีทางเลือกอื่นในการทำงานร่วมกับ Gatsby แต่ฉันชอบวิธีที่คุณสามารถดึงอะไรก็ได้ออกจากส่วนประกอบชั้นวางที่คุณต้องการใช้หรือเขียนของคุณเอง

Marcy: และฉันคิดว่าความยืดหยุ่นคือสิ่งที่ผู้คนชื่นชอบจริงๆ มีข้อแม้ในการใช้รันไทม์ React ดังนั้น คุณต้องโอเคกับการใช้ react หรือใช้ปลั๊กอิน pre-React นี้ แต่โดยส่วนตัวแล้ว ฉันชอบ react และ JSX มากสำหรับการทำงานกับการช่วยการเข้าถึงและเทมเพลต โดยเฉพาะอย่างยิ่งกับ React hooks ดังนั้น การใช้กระท่อมในไซต์ Gatsby ของฉันนั้นยอดเยี่ยมมาก ฉันชอบมันมาก.

Drew: และขั้นตอนในการสร้างไซต์ Gatsby ที่น่าจะเป็นโมดูลโหนดที่คุณเพิ่งติดตั้งได้เป็นอย่างไร และคุณจะสร้างบิลด์เหมือนกับที่คุณทำกับเครื่องกำเนิดไซต์แบบสแตติกอื่นๆ ได้อย่างไร

มาร์กี้: ค่ะ มี CLI ที่คุณติดตั้งทั่วโลก และฉันเดาว่าคุณต้องการติดตั้งทั่วโลกหรือไม่ นั่นคือสิ่งที่เราแนะนำ เพราะจากนั้นคุณสามารถเรียกใช้จากไดเร็กทอรีใดก็ได้บนคอมพิวเตอร์ของคุณ แต่จะดึงทุกสิ่งที่คุณต้องการเพื่อสร้างไซต์ Gatsby จากนั้นคุณสามารถเพิ่ม สมมติว่าคุณต้องการใช้ WordPress เป็น CMS ที่ไม่มีส่วนหัวหรือแหล่งที่มาของเนื้อหาอื่นๆ

Marcy: คุณสามารถติดตั้งแพ็คเกจ ปลั๊กอินเพื่อให้ใช้งานได้ จากนั้นจึงรวมเข้ากับเว็บไซต์ของคุณ นอกจากนี้ยังมีการเริ่มต้นและธีมบางส่วนที่คุณสามารถใช้เพื่อเริ่มต้นใช้งานได้เร็วขึ้น ฉันเคยใช้สิ่งเหล่านั้นแล้ว หากต้องการทดสอบบางอย่างหรือเริ่มไซต์อย่างรวดเร็วสำหรับการผสานรวมเฉพาะ เช่น Drupal หรือปริซึม หรือโซลูชัน CMS หรืออีคอมเมิร์ซ หรือบางอย่างที่ฉันต้องการใช้

Marcy: มีตัวอย่างมากมาย ดังนั้นคุณจึงไม่ได้พยายามแก้ไขด้วยการลองผิดลองถูกเสมอไป แต่มันเป็นองค์ประกอบพื้นฐานที่คุณสามารถประกอบเข้าด้วยกันและสร้างขึ้นมาได้… สิ่งที่เราเรียกว่าตาข่ายเนื้อหา ดังนั้น คุณสามารถใช้สิ่งที่ดีที่สุดเหล่านี้ในการผสานรวมสายพันธุ์เพื่อสร้างไซต์ แทนที่จะเป็นไซต์ WordPress แบบคลาสสิก ประสบการณ์การเขียนและการทำงานร่วมกับทีมก็เยี่ยมมาก

มาร์ซี่: แต่มีข้อบกพร่องในส่วนหน้า เหมือนกับว่ามันทำงานอย่างไรบนอุปกรณ์พกพา อะไรอีก? ถ้าฉันต้องการโซลูชันอีคอมเมิร์ซ ฉันคิดว่ามีบางสิ่งที่ทำได้ง่ายขึ้นในปัจจุบัน แต่การสามารถเลือกวิธีแก้ปัญหาที่ดีที่สุดที่คุณต้องการสำหรับการรับรองความถูกต้อง หรืออะไรก็ตามที่สมัยใหม่นั้น คุณก็ประมาณว่า "ฉันหวังว่าฉันจะใช้มันได้ ” ด้วย Gatsby คุณสามารถดึงสิ่งเหล่านี้มารวมกันและทำให้เนื้อหานี้เป็นวิธีการสร้างที่สดชื่น

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

Drew: คุณลักษณะสำคัญประการหนึ่งที่ Gatsby ให้ความสำคัญอย่างยิ่งคือความสามารถในการดึงข้อมูลหรือเนื้อหาจากแหล่งต่างๆ คุณพูดถึงสิ่งต่าง ๆ เช่น WordPress และ Drupal และคุณมีอะไรบ้าง ตามเนื้อผ้า ถ้าฉันใช้บางอย่างเช่น Jekyll หรือ Eleventy หรืออะไรทำนองนั้น ฉันจะต้องเชื่อมโยงตัวเองเพื่อโต้ตอบกับ API บางทีอาจดึงเนื้อหาลงและเขียนลงในไฟล์ Markdown หรือไฟล์ JSON จากนั้นให้ตัวสร้างทำงาน กับไฟล์เหล่านั้น

Drew: ดังนั้นมันจะเป็นกระบวนการสองขั้นตอน สามารถใช้บางอย่างเช่น source bit ซึ่งเราได้กล่าวถึงในตอนก่อนหน้าที่ทำสิ่งนั้นได้หรือไม่ ฉันเข้าใจถูกต้องหรือไม่ว่า Gatsby มีความสามารถดั้งเดิมนี้ในการบริโภคแหล่งที่มาต่างๆ ในแบบที่เครื่องสร้างไซต์แบบสแตติกอื่นๆ ไม่มี

Marcy: ฉันคิดว่าสิ่งที่ทำให้ Gatsby แข็งแกร่งในด้านนี้คือชั้นข้อมูล GraphQL และระบบนิเวศของปลั๊กอิน ดังนั้น อาจเป็นไปได้ว่ามีคนเขียนปลั๊กอินสำหรับแหล่งข้อมูลใดก็ตามที่คุณต้องการสร้าง และถ้าไม่ใช่ ก็น่าจะมีอะไรใกล้เคียง แต่การใช้ GraphQL เป็นการทำงานที่อยู่ภายใต้ เลเยอร์ที่ทำให้การผสานรวมเหล่านี้เป็นไปได้ทั้งหมดคือการใช้ GraphQL

Marcy: ดังนั้น มีความเป็นไปได้มากมายสำหรับสิ่งที่คุณจะดึงเข้ามา และเราพยายามทำให้ง่ายต่อการเขียนปลั๊กอินด้วย การเรียนรู้วิธีเขียนปลั๊กอินและ AST หรือ Abstract Syntax Tree ที่สร้างและเรียนรู้ว่าการทำงานทั้งหมดนั้นยอดเยี่ยมมากเพียงใด แต่ฉันว่ามีหลายสิ่งหลายอย่างนอกชั้นวางที่คุณสามารถหยิบขึ้นมาได้โดยไม่ต้องเขียนเองทั้งหมด ซึ่งเยี่ยมมาก

มาร์ซี่: และเป็นเรื่องดีที่มีความยืดหยุ่นในการมาร์กดาวน์ สมมติว่านักพัฒนาซอฟต์แวร์ของคุณต้องการเขียนมาร์กดาวน์เนื้อหาบล็อก แต่ทีมการตลาดไม่ค่อยพอใจกับเรื่องนี้ คุณสามารถรวมแหล่งที่มาของเนื้อหาและแหล่งที่มาจากที่ต่างๆ ได้ ฉันเคยเห็นคนหาของจาก GitHub repos อื่น และพวกเขาใช้ปลั๊กอิน get เพื่อดึงเนื้อหาที่ลดราคาด้วยวิธีนั้น มีความยืดหยุ่นสูง

Drew: และฉันคิดว่าคุณมีตัวเลือกในการเขียนปลั๊กอินของคุณเองเพื่อดึงจากแหล่งข้อมูลที่กำหนดเอง สมมติว่าคุณมีระบบเดิมและต้องการวางเว็บไซต์ใหม่ที่สวยงามไว้ข้างหน้าระบบ คุณสามารถเขียนปลั๊กอินที่จะดึงข้อมูลออกมาในรูปแบบใดก็ได้ที่จำเป็นและแปลเป็นสิ่งที่ยิ่งใหญ่กว่าการทำงานด้วยหรือไม่

มาร์กี้: คุณทำได้ ดังนั้นปลั๊กอินจึงเปิดใช้งานได้ นอกจากนี้ยังมีสิ่งที่เป็นนามธรรมอยู่เหนือสิ่งอื่นใด ซึ่งเราเรียกว่าธีมของ Gatsby และสิ่งเหล่านี้ไม่ได้เป็นเพียงโค้ดอินเทอร์เฟซผู้ใช้เท่านั้น แต่อาจเป็นการสืบค้น GraphQL การกำหนดค่าที่ตั้งค่าปลั๊กอิน ดังนั้นมันจึงเหมือนกับปลั๊กอินที่มีการใช้งานแบบรวมกลุ่มเข้าด้วยกัน และคุณสามารถแจกจ่ายธีมเหล่านั้นบน NPM

Marcy: จากนั้น เวอร์ชันของพวกเขาและคุณสามารถดึงมันเข้ามาได้ และ API ทั้งหมดนั้นก็น่าสนใจเช่นกันสำหรับทีมที่บอกว่าคุณมี repos หลายตัว และคุณต้องการดึงข้อมูลเข้าไปในสิ่งเหล่านั้น มันจะซ้ำซากมากที่จะมีคำถามแบบเดียวกัน ใน repos ทั้งหมดเหล่านี้ในรหัสเดียวกัน ดังนั้นเพื่อทำให้สิ่งต่าง ๆ แห้งและไม่พูดซ้ำซาก คุณสามารถใช้สิ่งที่เป็นนามธรรมเหล่านี้ที่เรียกว่าธีม เพื่อจัดเรียงการกระจายรอบตรรกะหรือโค้ดที่จะเปิดใช้งานปลั๊กอินต้นทางนั้น ดังนั้นจึงมีชั้นของนามธรรมเหล่านี้ที่คุณสามารถต่อยอดได้ ซึ่งเราได้ยินมาว่าทีมต่างๆ ได้ประโยชน์มากมายจากตอนนี้

Drew: ดังนั้น ธีมในโลกของ Gatsby จึงไม่ใช่รูปลักษณ์และความรู้สึกเหมือนกับ CMS อย่าง WordPress

Marcy: ใช่ ฉันหมายความว่า ทำได้ แต่นั่นไม่ใช่ทั้งหมดที่เป็น ดังนั้น การตั้งชื่อสิ่งต่าง ๆ เป็นเรื่องยากมาก แต่ธีมที่ฉันชอบมากคือการเรียนรู้เกี่ยวกับความยืดหยุ่นและความสามารถ ใช่ คุณสามารถใส่โค้ดอินเทอร์เฟซผู้ใช้บางส่วนได้ แต่อาจมีรหัสภาษาคิวรีอยู่ด้วย แต่ที่จริงเป็นแบบมัดรวมกันทำให้แจกจ่ายได้ง่าย ใช่ มันเป็นนามธรรมที่เรียบร้อยมาก เป็นการดีที่ได้เห็นสิ่งที่ผู้คนกำลังสร้างและสิ่งที่พวกเขากำลังนำเสนอ และทั้งหมดนั้น

Drew: ใช่ ฉันนึกออกว่ามันจะนำไปสู่การใช้ Gatsby ที่เป็นนวัตกรรมใหม่ๆ คุณเคยเห็นอะไรไหม โดยเฉพาะอย่างยิ่งที่ดึงดูดสายตาของคุณว่าลูกค้ากำลังทำสิ่งนี้อย่างสร้างสรรค์หรือไม่?

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

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

Marcy: ตั้งแต่นั้นมา API ก็ได้รับการปรับปรุง และทั้งทีมกำลังทำงานเกี่ยวกับธีม Gatsby และฉันรู้ว่าพวกเขากำลังเปิดตัวการปรับปรุงครั้งใหญ่ในอีกไม่กี่สัปดาห์ข้างหน้า ฉันไม่ต้องการที่จะขโมยฟ้าร้องของพวกเขา แต่มีบางสิ่งที่เรียบร้อยที่มาพร้อมกับธีม พวกเขาได้ปรับปรุงธีมของบล็อกบางส่วน เช่น ธีมหลักที่เรานำเสนอจาก Gatsby

มาร์ซี่: ฉันรู้ว่าพวกเขากำลังใช้มันภายในเพื่อสร้างประกาศเกี่ยวกับผลิตภัณฑ์ของเราเอง หรือการปรับปรุงผลิตภัณฑ์ที่จะประกาศที่นี่ในอีกสองสามสัปดาห์ข้างหน้า มีอะไรเจ๋ง ๆ มากมายที่เกิดขึ้นกับธีม Gatsby และผู้คนขายธีมและการเริ่มต้นของตัวเอง ฉันคิดว่ามันน่าสนใจมากเช่นกัน

Drew: มีตลาดเล็กๆ ผุดขึ้นมารอบๆ Gatsby

มาร์กี้ : มีค่ะ

Drew: มีการฝึกอบรมออนไลน์ประเภทใดบ้างและมีสิ่งเหล่านั้นไหมถ้ามีคนต้องการ… ถ้ามีคนตัดสินใจว่าพวกเขาจะเข้าสู่ Gatsby จริง ๆ และพวกเขาจำเป็นต้องเรียนรู้อย่างรวดเร็ว? มีสถานที่ทำงานที่พวกเขาสามารถไปกับข้อมูลประเภทนั้นได้หรือไม่?

มาร์กี้: เยอะมั้ย? ใช่. มีเว็บไซต์ของ Gatsby Doc อย่างแน่นอน ซึ่งก็คือ gatsbyjs.org/doc's เรามีบทช่วยสอน และฉันได้สตรีมสดเกือบทุกสัปดาห์สำหรับเนื้อหาเกี่ยวกับแกสบี้ มีนักการศึกษาจำนวนมากที่มีสื่อ Gatsby บน YouTube และแพลตฟอร์มการเรียนรู้ต่างๆ Egghead ฉันคิดว่าเพื่อนร่วมทีมของฉันจาก Gatsby บางคนก็มีวิดีโอ Egghead เช่นกัน

มาร์กี้: มีของเยอะแยะเลย ฉันจะบอกว่าตรวจสอบวันที่ในนั้นถ้าคุณพบบางสิ่งบางอย่าง เราคอยอัปเดต Gatsby Doc's วิดีโอเก่าบางรายการอยู่เสมอ และสิ่งต่างๆ ที่อาจตรวจสอบวันที่ในเอกสารเหล่านั้นได้ เนื่องจากเราไม่สามารถตรวจสอบทุกแหล่งข้อมูลการเรียนรู้เพื่ออัปเดตได้ เป็นการยากที่จะให้ทันกับพนักงานของเราเอง

Marcy: เนื่องจากมีทางเลือกในการจัดหาเนื้อหาและกรณีการใช้งานมากมายเพียงใด มันเป็นพื้นที่กว้างมาก แต่มีสื่อการเรียนรู้มากมาย และวิธีการมากมายในการเริ่มต้น ซึ่งคุณสามารถลองค้นหาสิ่งต่างๆ เช่น ขึ้นอยู่กับว่าคุณอยู่ที่ไหนในสเปกตรัมการเรียนรู้ของคุณ คุณอยู่ในขั้นเริ่มต้นหรือคุณมาจากเทคโนโลยีอื่น ๆ และคุณเพียงแค่ต้องเรียนรู้ว่า React นี้คืออะไร

Marcy: คุณสามารถเลือกและเลือกวัสดุที่เหมาะกับคุณโดยพิจารณาจากที่ที่คุณอยู่ เมื่อเร็วๆ นี้ฉันได้เรียนหลักสูตรผ่านสตรีมแบบสดที่เรียกว่า Gatsby Web Creators ซึ่งเราได้ดำเนินการตั้งแต่ HTML เริ่มต้น, CSS และ JavaScript ไปจนถึงการสร้างไซต์ Gatsby แรกของเรา เราเพิ่งทำเสร็จเมื่อวันศุกร์ ดังนั้นจึงเป็นเรื่องที่ดีมากที่จะย้อนกลับไปที่จุดเริ่มต้น

Marcy: และเนื่องจากมีวัสดุมากมายใน Gatsby มันจึงใช้ React ดังนั้นจึงเป็นการก้าวกระโดดครั้งใหญ่ในการเริ่มต้นใช้งาน ดังนั้นฉันจึงอยากกลับไปทำตามขั้นตอนต่างๆ เพื่อสร้างสิ่งต่างๆ ด้วย React และ Gatsby นั่นก็เรียบร้อยจริงๆ และฉันตื่นเต้นที่จะเดินทางต่อไปในเส้นทางนั้น เพื่อให้มีเนื้อหาสำหรับผู้เริ่มต้นใช้งานและสิ่งต่างๆ มากขึ้นเพื่อช่วยให้ผู้คนเข้าใจวิธีสร้างไซต์ด้วย Gatsby เนื่องจากทักษะเหล่านี้จำนวนมากสามารถนำไปใช้กับเฟรมเวิร์กอื่นได้

Drew: คำถามใหญ่ข้อหนึ่งที่กำลังจะเกิดขึ้นสำหรับใครก็ตามที่คิดเกี่ยวกับการสร้างไซต์โครงการของลูกค้าโดยใช้ Gatsby หนึ่งในคำถามใหญ่ที่จะเกิดขึ้นคือการจัดการเนื้อหาและนำเสนอสิ่งต่างๆ ต่อหน้าลูกค้า คุณพูดถึงวิธีที่ Gatsby สามารถเชื่อมต่อกับระบบจัดการเนื้อหาต่างๆ ได้อย่างไร นั่นคือวิธีการหลักที่คุณจะใช้เพื่อจัดการกับคำถามนั้นหรือไม่? หรือ Gatsby มีอะไรในระบบนิเวศของมันที่จะช่วยให้ผู้คนสามารถแก้ไขเนื้อหาในทางใดทางหนึ่ง?

Marcy: ใช่ ฉันจะบอกว่าการมี CMS หรือบางอย่างสามารถทำให้ความสัมพันธ์ในทีมทำงานได้ดีขึ้นมาก ฉันเคยอยู่ในกรณีการใช้งานที่ทีม dev ชอบ "เพียงแค่เรียนรู้ HTML" และคุณเห็นการเคลือบเงานี้จากลูกค้าเช่น "ไม่ ฉันไม่อยากเชื่อเลยว่าคุณเพิ่งพูดไปแบบนั้น" ดังนั้นการมีระบบที่ผู้คนสามารถทำงานได้ดีที่สุดในรูปแบบที่เหมาะสมที่สุดจึงมีความสำคัญอย่างยิ่งยวด

Marcy: เช่นเดียวกับที่คุณไม่สามารถจัดการกับนักการตลาด GitHub ได้ และอาจทำงานได้ในบางครั้ง แต่ไม่ใช่ตลอดเวลา ดังนั้นการมีตัวอย่างและสร้างโครงสร้างพื้นฐานทำให้ดีขึ้น และนั่นคือสิ่งที่พื้นที่ผลิตภัณฑ์คลาวด์ของ Gatsby เข้าสู่การต่อสู้ มีวิธีการแสดงตัวอย่าง หากไม่มีระบบคลาวด์แบบชำระเงินและ Gatsby cloud จะมีระดับฟรีสำหรับโครงการส่วนบุคคล ดังนั้นจึงไม่ต้องจ่ายทั้งหมด

มาร์ซี่: แต่เรามีสิ่งนี้ เช่นเดียวกับโอเพ่นซอร์สและระบบนิเวศของผลิตภัณฑ์มารวมกันเพื่อให้ Gatsby สามารถเป็นองค์กรผู้ก่อตั้ง ทำเงินได้มากพอที่จะรักษากรอบงานโอเพ่นซอร์ส รักษาสุขภาพให้ดี และทำให้ชุมชนของเราดำเนินต่อไป . นั่นคือสิ่งที่ฝั่งการค้าแบบโอเพนซอร์สมารวมกัน และเปิดใช้งานเวิร์กโฟลว์เหล่านี้ที่ทีมต้องการจริงๆ

มาร์ซี่: บางสิ่งเช่นการดูตัวอย่างอย่างรวดเร็ว การสร้างออกจากประตูอย่างรวดเร็วและนำไปใช้ ดังนั้นจึงมีวิธีแก้ปัญหาเฉพาะด้านระบบคลาวด์ของ Gatsby และไม่ว่าที่ใดก็ตามที่มีวิธีโอเพนซอร์สในการทำให้ Gatsby ทำงานเหมือนกับเซิร์ฟเวอร์แสดงตัวอย่างหรืออย่างอื่น เราพยายามจัดทำเอกสารนั้นและทำให้แน่ใจว่าชุมชนของเรารู้ว่าอะไรคืออะไรและอย่างไร ตอบสนองความต้องการของทีมเหล่านั้น

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

ดรูว์: นั่นน่าสนใจนะ บริการระบบคลาวด์ของ Gatsby ช่วยให้คุณสามารถใช้บริการ CMS แบบไม่มีหัว ซึ่งคุณเพียงแค่ทำงานกับเนื้อหา แต่คุณไม่ได้เห็นภาพว่าจะมีลักษณะอย่างไรในไซต์ของคุณ ช่วยให้คุณสามารถดูตัวอย่างวิธีการได้ จะทำงาน. นั่นถูกต้องใช่ไหม?

มาร์กี้: นั่นสินะ ดังนั้น มันเป็นส่วนหนึ่งของการแลกเปลี่ยนกับการแยกส่วน CMS ที่ไม่มีส่วนหัวของคุณ ซึ่งอาจมี เช่น WordPress คุณสามารถดูส่วนหน้าได้ แต่เรากำลังเพิ่มส่วนหน้าใหม่และอาจดึงแหล่งข้อมูลอื่น และสิ่งอื่น ๆ ที่ WordPress ไม่รู้ ดังนั้นการแยกส่วนด้วยวิธีนั้นก็สมเหตุสมผล แต่คุณยังคงในฐานะสมาชิกในทีม คุณต้องสามารถทำงานด้วยความเร็วที่คุณคุ้นเคยอย่างรวดเร็ว

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

Marcy: และเมื่อเราคิดออกว่า "โอเค ถ้างานสร้างนี้ทำงานช้า ทำไมล่ะ" โดยปกติแล้วเนื่องจากไซต์มีขนาดใหญ่มาก ดังนั้นเราจึงมุ่งเน้นอย่างมากในการปรับปรุงสำหรับไซต์ขนาดใหญ่ และปรับปรุงทีมเหล่านั้น เวิร์กโฟลว์การทำงานร่วมกัน เป็นจุดสนใจของทีมในตอนนี้

Drew: ดังนั้น Gatsby cloud คือฉันคิดว่าหัวใจของมันคือบริการโฮสติ้ง เป็น CDN สำหรับการปรับใช้ไซต์ Gatsby ของคุณด้วยฟังก์ชันและคุณลักษณะเฉพาะของ Gatsby มากมายหรือไม่

Marcy: ฉันจะเรียกมันว่าผลิตภัณฑ์จัดส่งต่อเนื่องมากกว่าเพราะไม่ใช่ CDN จริง มันรวมเข้ากับ CDN เช่น Fastly, Netlify มีผู้ให้บริการต่างๆ มากมายที่คุณสามารถขอได้ และบางผู้ให้บริการก็ใช้ได้ฟรี คุณสามารถทำสิ่งต่างๆ ได้ฟรี ซึ่งยอดเยี่ยมมาก ฉันเพิ่งทำไปเมื่อวันก่อนในเซสชันผู้สร้างเว็บ Gatsby ครั้งล่าสุด เราใช้ Gatsby cloud และ Netlify เพื่อสร้างไซต์ของเรา

มาร์ซี่: และมันช่วยให้คุณทำให้ไซต์ Gatsby เร็วขึ้นโดยเฉพาะ เพราะมันมีการปรับปรุงเหล่านั้น ต้องสร้างเว็บไซต์ประเภทเดียวเท่านั้น ดังนั้นจึงมีการปรับปรุงบางอย่างที่ Gatsby cloud สามารถทำได้ ซึ่งไม่มีแพลตฟอร์มอื่นใดที่สามารถทำได้ เพราะพวกเขาพยายามที่จะสนับสนุนเว็บไซต์ประเภทต่างๆ เหล่านี้และพวกเขาก็ทำได้ดีมาก

Marcy: แต่สำหรับ Gatsby ถ้านั่นคือทั้งหมดที่คุณกำลังสร้าง และมีเอเจนซี่ไม่กี่แห่งที่เข้าร่วม Gatsby และพวกเขาต้องการทำให้มันเร็วที่สุดเท่าที่จะทำได้ นั่นคือสิ่งที่ Gatsby cloud สามารถปรับปรุงประสิทธิภาพบางอย่างสำหรับ Gatsby โดยเฉพาะได้ เนื่องจากไม่จำเป็นต้องกังวลเกี่ยวกับแพลตฟอร์มอื่นๆ

Drew: ดังนั้น Gatsby cloud จะสร้างงานของคุณ และจากนั้นมันก็จะปรับใช้กับบางอย่างเช่น Netlify หรืออาจเป็นสถานที่ต่างๆ ทั้งหมด

มาร์กี้ : ครับ ใช่มันจะ ดังนั้นจึงเป็นส่วนหนึ่งของ Netlify ที่จะใช้ในขณะที่อัปโหลดแพ็คเกจที่สร้างขึ้นเหล่านี้ ไฟล์ที่สร้างขึ้น มันไม่ได้ใช้งานบิลด์ ดังนั้นงานสร้างจึงเกิดขึ้นบนโครงสร้างพื้นฐานระบบคลาวด์ของ Gatsby และนั่นคือจุดที่ความเร็วที่เพิ่มขึ้นสามารถเกิดขึ้นได้ และยังมีขั้นตอนการอัปโหลดนั้นเพื่อนำออกไปยัง CDN ไม่ว่าคุณจะเลือกอันใด

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

Drew: ดังนั้น Gatsby cloud จึงเป็นบริการจากบริษัท Gatsby และยังมี Gatsby ซึ่งเป็นโครงการโอเพ่นซอร์สด้วย นี่เป็นความสัมพันธ์ที่คล้ายคลึงกันกับ WordPress และ Automatic มีที่ที่คุณมีหน่วยงานเชิงพาณิชย์ที่พัฒนาผลิตภัณฑ์โอเพ่นซอร์สหรือไม่?

Marcy: ฉันจะบอกว่าใช่ เหมือน Drupal มีแบบอย่างในเทคโนโลยีที่จะมีองค์กรผู้ก่อตั้งเหล่านี้เป็นวัฏจักรคุณธรรม และเรากำลังดำเนินการเผยแพร่เอกสารการกำกับดูแลบางส่วนในขณะนี้ เพื่อให้แน่ใจว่าข้อมูลดังกล่าวจะชัดเจนสำหรับชุมชนของเรา ว่าเราตัดสินใจอย่างไร แต่เป้าหมายทั้งหมดคือการทำให้ Gatsby มีความยั่งยืน เพื่อให้สามารถเป็นโครงการโอเพ่นซอร์สต่อไปที่ผู้คนสามารถใช้ได้แม้จะเข้าสู่ Gatsby cloud

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

Marcy: นั่นรวมเป็นกรณีการใช้งานเฉพาะจำนวนมาก ดังนั้นเราจึงพยายามเล่นปาหี่และจัดลำดับความสำคัญ และรับฟังชุมชนของเราจริงๆ เกี่ยวกับสิ่งที่เจ็บปวดในตอนนี้ อะไรที่เจ็บปวด และอะไรที่เป็นไปได้ด้วยดี นั่นเป็นการเดินทางที่น่าสนใจสำหรับฉันเป็นการส่วนตัวเพื่อกลับไปสู่ ​​devREL และรับฟังชุมชนจริงๆ เราจะทำให้เราดีขึ้นได้อย่างไร

Drew: และมีชุมชนขนาดใหญ่รอบๆ Gatsby ที่มีผู้คนใช้กันเป็นจำนวนมากหรือไม่?

มาร์ซี่: มีผู้คนจำนวนมากที่ใช้มัน มีผู้ร่วมให้ข้อมูลมากมาย ดังนั้นสำหรับหลายๆ คน อาจเป็นครั้งแรกที่พวกเขามีส่วนร่วมในโอเพ่นซอร์ส เช่น มาที่ท่าเรือของเรา และเข้าร่วมงาน Hacktoberfest กับเรา และอะไรทำนองนั้น ดังนั้นจึงเป็นเรื่องที่ดีมากที่ได้เห็นสิ่งที่ชุมชนใหญ่ Gatsby มี โดยเฉพาะอย่างยิ่งกับสิ่งต่างๆ เช่น การช่วยสำหรับการเข้าถึง และการพยายามทำให้แน่ใจว่าเฟรมเวิร์กทำทุกอย่างที่ทำได้โดยไม่มีค่าใช้จ่าย

มาร์ซี่: แล้วนี่ไง ฉันไม่รู้ ซับเซตหรือสี่แยกของความสามารถในการเข้าถึง และแกสบี้ และนั่นเป็นสถานที่ที่ฉันมีความสุข แต่ในชุมชนที่กว้างขึ้น ผู้คนจำนวนมากเรียนรู้ React หรือเรียนรู้การพัฒนาเว็บผ่าน Gatsby เป็นเรื่องที่ดีมากที่ได้เห็นความคืบหน้าในชุมชนของเรา และหวังว่าเราจะได้มีคนมามีส่วนร่วม แม้ว่าจะเป็นปัญหาหรืออะไรทำนองนั้น "เฮ้ ลิงก์นี้เสียหรือส่วนนี้ของท่าเรือทำให้ฉันสับสน หรือมันล้าสมัย”

Marcy: เช่นเดียวกับการบอกกรอบงานหรือโครงการที่คุณใช้ บางสิ่งที่อาจดีขึ้นคือวิธีที่ยอดเยี่ยมในการมีส่วนร่วม เพราะคุณสามารถช่วยให้เราเข้าใจถึงสิ่งที่สามารถปรับปรุงได้ นั่นเป็นวิธีที่ดีในการมีส่วนร่วม

Drew: คุณพูดถึงการช่วยสำหรับการเข้าถึง และแน่นอนว่าผู้คนจะรู้จักคุณเป็นผู้เชี่ยวชาญด้านการช่วยการเข้าถึง And they might be surprised to see you working with sort of fully featured front end framework like React, thinking that perhaps the two don't really go together. Is that always the case at JavaScript heavy front ends are worth less accessible?

Marcy: Well, I wish it weren't the case. But I think the data has shown that a lot of websites that do use front end frameworks are less accessible than those that don't. A project that comes to mind is the Web a Million. And actually, I have a blog post, I'm refreshing the Gatsby site to see if my blog post has launched yet. But webbing through the web a million this project, they used their automated wave tool to crawl the top 1 million home pages and evaluate them for some accessibility violations.

Marcy: And it was really depressing results. Like they've run it twice now I think, and I think it got worse. So, it's not great, but I don't think you can really point to any one framework because there's plenty of sites that don't use frameworks that have lots of accessibility problems. So, it's kind of a broader industry issue, a really society.

Marcy: And so, for me working on a full featured web framework, I saw as an opportunity to try and get more accessibility awareness in the mainstream. And so, that was an intentional move on my part to go and try to make an impact on a lot of sites like working on one site is cool. You can solve some really interesting problems. For me, I wanted to advocate accessibility much more broadly and try to make frameworks the best they can be from the inside.

Marcy: So even if something is rough right now, trying to play that long game of like, “Okay, what web standards things can we talk about? What framework improvements can we make so that if this is kind of rough, like not just give up on it.” So, even if I know it's… I don't know, JavaScript is some folks enemy I feel like I like it. You need some JavaScript to make accessible user interfaces, you just do.

Marcy: So, I am trying to like straddle those viewpoints and do the right thing while listening to my activist colleagues and friends kind of out there like pushing us forward as an industry. And then on the inside, I can be the messenger and the person that could try and reconcile some of those huge trade offs and ethical questions about What are we building?

Marcy: So, it's challenging, but I really like it, because I have an impact to make on the web. And so, web framework. Lots of people are building Gatsby sites. So, seems like a good place to try and make an impact.

Drew: You mentioned briefly that Gatsby uses React at the moment. Is there a possible future where Gatsby might work with other frameworks, might receive a view version of Gatsby?

Marcy: I would love that. I've certainly talked about it. There is a pre React plug in, as I mentioned earlier. So you can swap that out. I think a big part of what we are talking about is sustainability of projects, trying to make the right call, these aren't easy choices to make. It's not just like rip it out and start over. There's a lot of concerns that go along with that. It goes deep.

Marcy: So, it's something we're actively talking about. And I don't really have anything specific to share right now. But we do have some internal meetings coming up soon to talk about that sort of thing. So, it's being discussed, and I would love to have a view flavor, that'd be amazing. But as you can imagine there's some interesting challenges that come along with that, and we want to make sure it's the right move so that we're not like, I don't know, going down a path and having it not work for whatever reason, then we're maintaining two frameworks, like how do we make that actually realistic in terms of what we can maintain and make succeed for an open source community?

Drew: So I've been learning all about Gatsby. What have you been learning about lately Marcy?

Marcy: Well, I wish it was better but work life balance. I've been learning about, for me, unfortunately, I'm in like a burnout cycle. And so, I feel like I'm continually learning the lesson of how to be productive, especially this year in 2020. There's just like one thing after another. So, trying to get really clear focus on where I want to go in my career, what makes me happy?

Marcy: How can I sustain, and we're talking about sustainability. Like how can I sustain my own life after a career of really pushing hard on accessibility in particular like, “Okay, how can I kind of take a little step back and make sure that what I am putting out there, what I am doing is meaningful, worth the energy.” See, a lot of my lessons have been kind of that intersection of work and life and trying to make the most of the time that's been… I don't know about you, but it's been pretty stressful for a lot of people including me.

Drew: It's been very, very stressful. We are at very difficult times, isn't it?

Marcy: Yeah, yeah. I mean, we have so much to be thankful for in this industry, having opportunities and skills that you can apply. Seeing a lot of layoffs in our industry, really trying to make decisions that reflect where we're at and not just going through the motions. So that was a big motivator for Gatsby web creators was, “Wow, there's a lot of school age kids not in school this year, it would be really cool to see an outcome of turning some kids' eyes onto web development.”

Marcy: Like when I was in seventh grade, and someone came to a class of mine to talk about photojournalism. I was like, “I want to be a photojournalist.” So that actually did work. I got some feedback from someone that said, “My seventh grader's learning from you, and now they're really excited about code.” So, that was a really good thing to spend some energy on, in a time where like, that wasn't something I would have necessarily thought of before being in these circumstances in 2020.

Marcy: So, really trying to be like nimble and make choices that kind of reflect where I want to go and what's happening.

Drew: If you the listener would like to hear more from Marcy, you can find her on Twitter where she's @marcysutton and find all her latest goings on, on her personal website, marcysutton.com. And of course you can find out how to get started with Gatsby from Gatsbyjs.org. Thanks for joining us today Marcy, do you have any parting words?

Marcy: Make the most of it wherever that might be.