Smashing Podcast ตอนที่ 40 กับ Mike Cavaliere: Chakra UI สำหรับ React คืออะไร?

ตอนนี้ได้รับการสนับสนุนอย่างดีจากเพื่อนรักของเราที่ Wix ซึ่งเป็นที่รู้จักว่าให้อิสระแก่คุณในการสร้าง ออกแบบ จัดการ และพัฒนาการนำเสนอเว็บของคุณในแบบที่คุณต้องการ ขอขอบคุณ!

ในตอนนี้ เรากำลังพูดถึง Chakra UI มันคืออะไรและมันจะช่วยโครงการ React ของคุณได้อย่างไร? Drew McLellan พูดคุยกับผู้เชี่ยวชาญ Mike Cavaliere เพื่อหาคำตอบ

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

• Chakra UI
• ไมค์บน Twitter
• เว็บไซต์ส่วนตัวของไมค์
• หนังสือ Cut In The Jamstack

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

• การออกแบบด้วยโค้ด: แนวทางการออกแบบที่ทันสมัย
  เขียนโดย Mikolaj Dobrucki
• การทดสอบโปรแกรมอ่านหน้าจออัตโนมัติบน macOS โดยใช้ Auto VO
  เขียนโดย Cameron Cundiff
• การเพิ่มขึ้นของการคิดเชิงออกแบบเป็นกลยุทธ์ในการแก้ปัญหา
  เขียนโดย Josh Singer
• วิธีเรียกใช้การตรวจสอบ UX สำหรับแพลตฟอร์ม EdTech ที่สำคัญ
  เขียนโดย Mark Lankmilier
• การสร้างบล็อกที่มีผู้เขียนหลายคนด้วย Next.js
  เขียนโดย ดอม ฮาเบอร์แซค

การถอดเสียง

Drew McLellan: เขาเป็นวิศวกรซอฟต์แวร์อาวุโสของหน่วยงานที่ชื่อว่า Echobind เขาเขียนโค้ดมาสองทศวรรษแล้ว และใช้ JavaScript ตลอดเวลา เขารัก Jamstack และหนังสือเล่มใหม่ของเขาที่ชื่อว่า Cut Into The Jamstack สอนผู้อ่านถึงวิธีสร้างซอฟต์แวร์เป็นแอปบริการตั้งแต่เริ่มต้น เรารู้ว่าเขารู้จักเส้นทางรอบๆ Jamstack แต่คุณรู้หรือไม่ว่าเขาเคยหลงทางในทางเดินขายเนยถั่ว เพื่อนที่ยอดเยี่ยมของฉัน ได้โปรดต้อนรับ Mike Cavaliere สวัสดีไมค์ คุณเป็นอย่างไรบ้าง?

Mike Cavaliere: วันนี้ฉันยอดเยี่ยมมาก

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

Mike: Chakra UI เป็นเฟรมเวิร์ก UI สำหรับ React หรือ UI toolkit ฉันเดาว่าพวกเขาใช้คำว่า ในแอปพลิเคชันสแต็กใด ๆ ทุกวันนี้คุณไม่ต้องการประดิษฐ์ UI ตั้งแต่เริ่มต้น คุณต้องการคว้าชุดเครื่องมือบางอย่าง เป็นกรณีนี้มาระยะหนึ่งแล้ว

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

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

ไมค์: ไม่ใช่เรื่องแปลกสำหรับฉันที่จะรวมบางสิ่งกับ Chakra UI และรับคะแนน Lighthouse ที่ดีมาก อันที่จริง ฉันเพิ่งตรวจสอบเว็บไซต์ Cut Into The Jamstack วันนี้ และคะแนนการช่วยสำหรับการเข้าถึงก็สูงมาก นอกจากนี้ยังสามารถจัดธีมได้อย่างเต็มที่ คุณสามารถตั้งค่าคอนฟิกธีมได้ตั้งแต่เริ่มต้น มีเพียงรายการสิทธิพิเศษมากมาย

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

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

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

ดริว : นั่นเป็นสิ่งที่ดีจริงๆ ผมเข้าใจถูกแล้ว อย่างแรกคือ Shakra ไม่ใช่ Chakra? ชาครา?

ไมค์: ฉันจะไม่เป็นผู้เชี่ยวชาญในเรื่องนั้น ฉันพูดชาคราเพียงเพราะโยคะ แต่เราจะต้องขอให้ผู้ก่อตั้งตรวจสอบอีกครั้ง

Drew: เป็นระบบการออกแบบชั้นวางนอกที่คุณสามารถวางเพื่อสร้าง UI สำหรับโครงการของคุณ

ไมค์: ครับ

Drew: มีไว้สำหรับโครงการ React โดยเฉพาะ

ไมค์: ครับ มีโครงการ Chakra Vue อยู่ที่นั่น ฉันไม่ใช่คน Vue มากนัก แต่ฉันรู้ว่ามันมีอยู่จริง อาจมีเฟรมอื่นเช่นกัน แต่ฉันเน้น React มาก ดังนั้นฉันจึงใช้ Chakra เริ่มต้น React หนึ่ง

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

Drew: เรามีเฟรมเวิร์กที่ค่อนข้างล้าสมัยอยู่แล้ว สิ่งต่างๆ เช่น Foundation UI, Bootstrap, Bulma พวกมันมีมานานแล้วและพวกมันเป็นเฟรมเวิร์กรุ่นก่อน ดูเหมือน เราก็ได้แนวทางที่ทันสมัยกว่านี้ ฉันคิดว่าผู้ฟังจำนวนมากจะคุ้นเคยกับโครงการ Tailwind และ Tailwind UI Chakra UI อยู่ตรงไหนในภูมิประเทศนั้น? มันใกล้เคียงกับสิ่งที่ Tailwind อาจ... แนวทางที่อาจใช้ลมพัดผ่าน ถูกต้องหรือไม่?

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

Mike: ฉันยังไม่รู้ว่าข้อดีและข้อเสียของทั้งคู่เป็นอย่างไร ฉันหลงใหลในจักระมากจนฉันใช้มันต่อไปโดยปริยาย ฉันชอบ “โอเค ฉันรู้เรื่องนี้ดีแล้ว ฉันรักมัน. ฉันจะได้เรียนรู้อีกอันหนึ่งในภายหลัง” แต่แน่นอนว่า Tailwind เป็นที่นิยมอย่างมาก ฉันคิดว่า Tailwind มีเฟรมเวิร์กพื้นฐานอยู่ในชุดเครื่องมือ UI ยุติธรรมไหม?

ดริว : ถูกต้อง ใช่.

ไมค์: โอเค นี่อาจจะเทียบเท่ากับชุดเครื่องมือ UI ของ Tailwind มากกว่า ในหน้าแรกของ Chakra พวกเขามีการเปรียบเทียบว่าเหตุใดคุณจึงอาจต้องการเข้าถึงอย่างใดอย่างหนึ่ง แต่ฉันไม่มีข้อมูลภายใน

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

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

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

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

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

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

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

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

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

ไมค์: ฉันเคยเห็นสิ่งที่ดีงามบางอย่างกับมัน แต่คุณสามารถทำอะไรกับมันได้ ฉันได้ทำเว็บไซต์คงที่ หน้าแรกของ Cut Into The Jamstack เสร็จสิ้นแล้ว เป็นตัวอย่างหนึ่ง เราได้ใช้มันที่ Echobind มากมาย ฉันจำไม่ได้ว่าเราเคยใช้กับ echobind.com หรือเปล่า แต่แน่นอนว่ามีไซต์ลูกค้าของเรามากมาย แล้วแอพที่ฉันสร้าง JamShots มันคือแอพ ยังไม่มีเพจการตลาด แต่มันเป็นเพียง UI และ UI ทั้งหมดที่สร้างขึ้นโดยใช้ Chakra

ไมค์: อีกสิ่งหนึ่งที่ผมชื่นชม Chakra คือ มีอีกเว็บไซต์หนึ่งที่ผมใช้บ่อย และผมใช้ใน... ผมจะแนะนำหนังสือเล่มนี้เช่นกัน Chakratemplates.net. Chakra-templates.net. เป็นรูปแบบการออกแบบทั่วไปที่ใครก็ตามที่มีส่วนร่วมในการค้นหาหน่วยฮีโร่หรือหน่วยกำหนดราคา พวกเขาเพียงแค่ต้องคัดลอกและวางรหัสจักระ

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

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

ไมค์ : เออๆ อย่างแน่นอน.

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

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

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

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

ดรูว์: ฉันเดาว่ามันมีการแลกเปลี่ยนเสมอ ไม่มีทางเลือกเทคโนโลยีเหรอ? สิ่งที่ทำให้มันง่ายมากจริงๆ นำไปปฏิบัติได้รวดเร็วจริงๆ ข้อเสียอาจเป็นเมื่อคุณสร้างจุดข้อมูล 1,000 จุดหรืออะไรก็ตามบนหน้า วิธีการทำงานนั้นจะไม่ได้ผลดีและทำให้คุณช้าลง

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

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

ไมค์ : เออๆ โดยสิ้นเชิง.

Drew: โดยทั่วไปแล้วการทำงานด้วยมีความยืดหยุ่นมากหรือไม่? คุณพบว่าองค์ประกอบเลย์เอาต์ที่คุณสามารถสร้าง UI ประเภทใดก็ได้ที่คุณต้องการหรือไม่

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

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

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

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

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

ไมค์: ครับ.

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

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

ไมค์: ทุกอย่างยกเว้นประสิทธิภาพออกมาเกือบ 100% ส่วนประสิทธิภาพอยู่ที่ฉันเพียงเพราะฉันใส่จำนวนมากในเพจและยังไม่ได้ปรับให้เหมาะสม มันมีแนวโน้มที่จะทำอย่างนั้น คะแนนการช่วยสำหรับการเข้าถึงใน Lighthouse นั้นยอดเยี่ยมทุกครั้งที่ฉันใช้ Chakra UI

ดริว : เยี่ยมไปเลย คุณบอกว่าพวกเขากำลังใช้การเรนเดอร์ฝั่งเซิร์ฟเวอร์และคุณมีอะไรบ้าง อย่าง Next และ Gatsby และฉันมีเธอ ไม่มีปัญหาใช่ไหม? ไม่มีอุปสรรคใด ๆ ที่ต้องระวังในการใช้ Chakra กับสิ่งเหล่านั้น?

ไมค์: โอ้ไม่ ไม่เลย. ฉันไม่ได้ใช้มัน ฉันมักจะมุ่งเน้นไปที่ Next.js ฉันไม่ได้เสียบ Gatsby หรือเครื่องมือ SSR อื่น ๆ แต่ตราบใดที่เฟรมเวิร์ก มันไม่มีอะไรมาขวางไม่ให้มันใช้แบบนั้น มันก็คงจะดี

ไมค์: สำหรับ React Chakra ให้ผู้ให้บริการ API บริบท ผู้ให้บริการธีมเพื่อที่ว่าเมื่อคุณ... ในแอป Next.js ของฉัน คุณมี... Next.js มีไฟล์ JS หรือ TS ขีดล่างของแอปที่ตัดทุกหน้าในแอปพลิเคชัน คุณเพียงแค่เสียบผู้ให้บริการธีมเข้าไป จากนั้น Chakra จะจัดการส่วนที่เหลือเอง และใช้งานได้ทุกที่ ไม่มีอุปสรรคในการเพิ่มใน Next.js อย่างแน่นอน แต่ฉันจินตนาการว่าไม่ใช่จักระเช่นกัน

Drew: Chakra ใช้ TypeScript หรือไม่? ฉันเชื่อว่ามันไม่ใช่ไหม

ไมค์: รองรับ ใช่.

Drew: มันรองรับ นั่นเป็นข้อดีอย่างมากสำหรับผู้ที่ใช้ TypeScript อยู่แล้วในโครงการของพวกเขา มีข้อเสียหรือไม่ถ้าผู้คนยังไม่ได้ใช้ TypeScript?

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

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

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

ดริว : ครับ ฉันพบว่าด้วย TypeScript ที่คุณจะได้รับประโยชน์ 80% อย่างที่คุณพูด โดยมีเพียงไม่กี่ประเภทเท่านั้น หากคุณเข้าไปลึกเกินไป คุณจะลงเอยด้วยสคริปต์ที่ส่วนใหญ่เป็น TypeScript จากนั้น JavaScript เล็กน้อยไปที่ด้านล่าง

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

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

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

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

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

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

Drew: สิ่งเดียวที่ฉันไม่ชอบเกี่ยวกับเอกสารจากการมองไปรอบๆ คือจำนวนโฆษณาในนั้น ในทุกหน้าสำหรับการเสนอขาย Chakra UI Pro ในเชิงพาณิชย์

ไมค์: ฉันไม่เคยเห็นพวกเขา น่าสนใจ. ผมเคยเห็นมัน. ฉันเคยเห็นมันแน่นอน แต่ตอนนี้ฉันไม่เห็นมัน โอ้ใช่. ตกลง. มี Chakra UI Pro ฉันเดาว่าฉันกรองมันออกทางจิตใจ ฉันได้ยินคุณ. อย่างน้อยก็ไม่ใหญ่เกินไปและอยู่ในใบหน้าของคุณ

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

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

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

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

Drew: สิ่งหนึ่งที่ควรคำนึงถึงเสมอเมื่อนำการพึ่งพาในโครงการของคุณคือสิ่งที่เกิดขึ้นเมื่อคุณต้องอัปเดตการพึ่งพานั้น

ไมค์: ครับ

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

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

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

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

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

ดริว : ครับ นั่นเป็นข้อพิจารณาที่สำคัญเสมอใช่ไหม

ไมค์ : ครับ

Drew: มีอะไรอีกบ้างที่เราควรรู้เกี่ยวกับ Chakra UI ก่อนที่เราจะดำดิ่งลงไปและใช้ในโครงการ?

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

ดริว : ครับ เป็นสิ่งที่ดี. คุณมีหนังสือชื่อ Cut Into The Jamstack ซึ่งเป็นรุ่นตัวอย่าง รุ่นเบต้าในขณะนี้ คุณกำลังเผยแพร่ด้วยตนเองว่า นั่นถูกต้องใช่ไหม?

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

Drew: หนังสือเล่มนี้นำผู้อ่านไปสู่การสร้างซอฟต์แวร์เป็นแอปบริการอย่างแท้จริง

ไมค์ : ครับ

Drew: ทั้งหมดอยู่ที่ Jamstack เหตุใดคุณจึงตัดสินใจเขียนตอนนี้และใช้แนวทางนี้กับหนังสือเล่มนี้

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

ไมค์: ประมาณเดือนตุลาคมของปีที่แล้ว ฉันมีสิ่งนี้… ฉันต้องการนำบางสิ่งที่เป็นผลิตภัณฑ์ออกไป ebook ถือเป็นการเริ่มต้นที่ดีจริงๆ ฉันหลงใหลเกี่ยวกับ Next.js และสิ่งต่างๆ ที่คุณสามารถทำได้ ฉันใช้คำว่า Jamstack และถือว่า Next.js เป็นส่วนหนึ่งของ Jamstack เนื่องจากมีการสร้างไซต์แบบสแตติกเป็นค่าเริ่มต้น

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

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

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

Mike: Next.js และ Jamstack และ Vercel และ Chakra UI พวกเขากำลังสร้างสิ่งต่าง ๆ ที่ช่วยลดความซับซ้อนของสิ่งต่าง ๆ มากมายสำหรับคุณ Next.js ช่วยลดความซับซ้อนของปัญหาที่เกี่ยวข้องกับความเร็วและปัญหาที่เกี่ยวข้องกับการช่วยสำหรับการเข้าถึง การติดตั้ง นั่นคือทั้งหมด การกำหนดเส้นทางจะทำเพื่อคุณ คุณไม่ต้องกังวลเกี่ยวกับการกำหนดเส้นทางฝั่งไคลเอ็นต์หรือฝั่งบริการ มันเป็นไปโดยอัตโนมัติ Chakra UI ทำสิ่งนั้นด้วยการเข้าถึงและธีม เครื่องมือเหล่านี้รวมเข้าด้วยกัน พวกเขาแค่... ประสบการณ์ของนักพัฒนาได้รับประสบการณ์ที่ยอดเยี่ยมมาก และทุกอย่างก็เพียงแค่... มันให้อิสระแก่คุณในการสร้างซอฟต์แวร์จริงๆ

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

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

ไมค์: ครับ

Drew: การกระโดดที่ใหญ่กว่ามากเพื่อดู ตกลง ฉันสามารถนำการรับรองความถูกต้องออกไปสู่บริการ -

ไมค์: ครับ.

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

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

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

ไมค์: ตัวอย่างเช่น สิ่งหนึ่งที่ฉันจะเจาะลึกลงไป เช่น คุณลักษณะนี้ที่ฉันกำลังสร้างสำหรับการอัปโหลดหลายไฟล์แบบอะซิงโครนัส Next.js มีส่วนหน้าและส่วนหลัง แม้ว่าในด้านหน้าของส่วนหน้าและส่วนหลังของส่วนหน้า หากคุณใช้การเปรียบเทียบนั้น คุณจะได้เลเยอร์ React จากนั้นคุณจะได้ชั้นโหนด มีเส้นทาง API เหล่านี้

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

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

Mike: Anyway, all that's just to say that, I think that's something really valuable to teach to people. Even if you're a senior engineer, for a few dollars, you get all this wrapped up for you with a bow on it to be like, okay. This is a series of tools that worked really well together for building SaaS apps with a stack. This hurdle, I don't have to figure out a solution for writing custom. Here's an approach that works.

Mike: I just, I take a lot of joy in trying to prevent people from having to reinvent the wheel. Even though it's fun to reinvent the wheel, if you wanted to just ship something, the more you can reduce that, the better,

Drew: That sounds very, very helpful. The book is in beta now. If people buy it now, do they get updates as it improves?

Mike: Yep. ใช่. It's immensely discounted. It's $10 now. When I finish, it will be 30. Whoever gets it now, will just get updates for the life of the book.

ดรูว์: เยี่ยมมาก

Mike: I've got another one coming up in probably a couple of weeks. ใช่. ใช่. It's already 107 pages and it's got a source-code repo that will be shipped with it. That comes along with it now. It's already like you can do… In the first 107 pages, it goes through setup to build a new first full stack page to building a CRUD for photo galleries. สร้าง อ่าน อัปเดต ลบ So the front end and backend components. Then shipping a deployment to railway and Vercel. It's pretty practical right away. Then the further, other couple of 100 pages are going to be more in depth with the coding topics.

Drew: Great. That's available now at cutintothejamstack.com.

Mike: Yep. แค่นั้นแหละ.

Drew: I've been learning all about Chakra UI. What have you been learning about lately, Mike?

Mike: I've been digging deeper on the stack. It constantly teaches me new things. One example is just with the Vercel Conference yesterday. The Next.js Conf. Next.js 11 is now out and it's just got a ton of great things with it. There's a real-time collaboration tool built in so when you ship a preview deploy, you can have people commenting on it and moving their mouse around the screen, even it looks like.

Mike: In addition, their performance is getting better and better. Next.js' image component, which I use heavily now is going to have automatic placeholders. It's going to be even more streamlined. I'm constantly learning the better and better ways to do things in this stack. There are always more. It seems like.

Drew: Always. Always more to learn. If you dear listener would like to hear more from Mike, you can follow him on Twitter where he's @mcavaliere, and his personal website is mikecavaliere.com. The book Cuts Into The Jamstack, which amongst other things shows a practical implementation of Chakra UI, is again at cutintothejamstack.com. Thanks for joining us today. Mike. คุณมีคำพรากจากกันบ้างไหม?

Mike: Nope. Thanks so much for having me, Drew, and keep smashing out there. Maybe I should rephrase that.