มาสร้างแอปที่ใช้ Polymer กันเลย

ในปีที่ผ่านมา ทีม Polymer ได้ใช้เวลามากมายไปกับการสอนให้นักพัฒนาแอปสร้างองค์ประกอบของตนเอง ซึ่งนำไปสู่ระบบนิเวศที่เติบโตอย่างรวดเร็วโดยอาศัยองค์ประกอบ Core และ Paper ของ Polymer และองค์ประกอบ Brick ที่สร้างโดยทีม Mozilla

เมื่อนักพัฒนาซอฟต์แวร์คุ้นเคยกับการสร้างองค์ประกอบของตนเองมากขึ้นและเริ่มคิดเกี่ยวกับการสร้างแอปพลิเคชัน ก็จะมีคำถามมากมายดังนี้

• คุณควรกำหนดโครงสร้าง UI ของแอปพลิเคชันอย่างไร
• คุณจะเปลี่ยนผ่านรัฐต่างๆ อย่างไร
• กลยุทธ์ในการปรับปรุงประสิทธิภาพมีอะไรบ้าง
• และคุณควรมอบประสบการณ์การใช้งานแบบออฟไลน์อย่างไร

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

โครงสร้าง

การแบ่งแอปพลิเคชันออกเป็นชิ้นส่วนย่อยๆ ที่สามารถรวมเข้าด้วยกันและนำมาใช้ใหม่ถือเป็นกลุ่มผู้ใช้หลักของ Web Components องค์ประกอบ Core-* และกระดาษ* ของ Polymer ช่วยให้เริ่มต้นด้วยชิ้นเล็กๆ ได้ง่ายๆ เช่น แถบเครื่องมือหลักและปุ่มไอคอนกระดาษ...

...และนำผลที่ได้มารวมเข้ากับองค์ประกอบหลายๆ อย่างเพื่อสร้างโครงสำหรับแอปพลิเคชัน

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

องค์ประกอบหนึ่งที่เหมาะสมอย่างยิ่งสำหรับการจัดการเนื้อหาจำนวนมากคือ core-list

core-list สามารถเชื่อมต่อกับแหล่งข้อมูล (โดยทั่วไปจะเป็นอาร์เรย์ของออบเจ็กต์) และสำหรับแต่ละรายการในอาร์เรย์ จะมีการประทับตราอินสแตนซ์เทมเพลต ภายในเทมเพลต คุณจะได้ใช้ประโยชน์จากระบบการเชื่อมโยงข้อมูลของ Polymer เพื่อเชื่อมโยงเนื้อหาอย่างรวดเร็ว

ทรานซิชัน

งานต่อไปคือการหาวิธีไปยังส่วนต่างๆ ของแอปจริงๆ

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

แต่ภาพเคลื่อนไหวเป็นเพียงครึ่งหนึ่งของปริศนา แอปพลิเคชันจำเป็นต้องรวมภาพเคลื่อนไหวเหล่านั้นกับเราเตอร์เพื่อจัดการ URL อย่างเหมาะสม

ในโลกของการกำหนดเส้นทางคอมโพเนนต์เว็บมี 2 รูปแบบ คือแบบความจำเป็นและแบบประกาศ การรวม core-animated-pages เข้ากับวิธีการใดวิธีการหนึ่งจะใช้ได้โดยขึ้นอยู่กับความต้องการของโปรเจ็กต์

เราเตอร์ที่สำคัญ (เช่น ผู้อำนวยการของ Flatiron) สามารถตรวจจับเส้นทางที่ตรงกัน แล้วสั่งให้ core-animated-pages อัปเดตรายการที่เลือก

สิ่งนี้จะเป็นประโยชน์ถ้าคุณจำเป็นต้องดำเนินการหลังจากที่เส้นทางตรงกัน และก่อนที่ส่วนถัดไปจะมีการเปลี่ยนแปลง

ในทางกลับกัน เราเตอร์แบบประกาศ (เช่น app-Router) สามารถรวมการกำหนดเส้นทางและ core-animated-pages เป็นองค์ประกอบเดียวได้ ดังนั้นการจัดการ 2 อย่างนี้จึงเป็นไปอย่างมีประสิทธิภาพมากขึ้น

ถ้าต้องการการควบคุมที่ละเอียดยิ่งขึ้น คุณสามารถดูไลบรารี เช่น การกำหนดเส้นทางเพิ่มเติม ซึ่งสามารถใช้ร่วมกับ core-animated-pages โดยใช้การเชื่อมโยงข้อมูล และอาจทำให้คุณได้รับสิ่งที่ดีที่สุดจากทั้ง 2 แพลตฟอร์ม

ประสิทธิภาพ

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

ประสิทธิภาพที่ทำได้ง่ายๆ มาจากการโหลด Polyfill ของ Web Components อย่างมีเงื่อนไข

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

<script>
  if ('import' in document.createElement('link')) {
    // HTML Imports are supported
  } else {
    document.write(
      '<script src=“bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
    );
  }
</script>

นอกจากนี้ยังมีเครือข่ายประโยชน์อีกจำนวนมากที่จะได้รับจากการเรียกใช้การนำเข้า HTML ทั้งหมดของคุณผ่านเครื่องมืออย่าง Vulcanize

Vulcanize จะเชื่อมโยงการนำเข้าของคุณไว้ในแพ็กเกจเดียว ซึ่งจะลดจำนวนคำขอ HTTP ที่แอปสร้างขึ้นอย่างมาก

ออฟไลน์

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

Jake Archibald เพิ่งเผยแพร่ตำราอาหารที่น่าตื่นตาตื่นใจเกี่ยวกับรูปแบบของ Service Worker แต่ฉันขอแนะนำสิ่งเล็กๆ น้อยๆ ก่อนเพื่อเริ่มใช้งาน

การติดตั้ง Service Worker นั้นเป็นเรื่องง่าย สร้างไฟล์ worker.js และลงทะเบียนไฟล์ดังกล่าวเมื่อแอปพลิเคชันเปิดเครื่อง

คุณต้องหา worker.js ในรูทของแอปพลิเคชันเพื่อให้สกัดกั้นคำขอจากเส้นทางใดก็ได้ในแอป

ในเครื่องจัดการการติดตั้งของพนักงาน ฉันจะแคชโหลดของทรัพยากร (รวมถึงข้อมูลที่ขับเคลื่อนแอป)

วิธีนี้ช่วยให้แอปของฉันมอบประสบการณ์การใช้งานสำรองแก่ผู้ใช้ได้เป็นอย่างน้อยหากผู้ใช้กำลังเข้าถึงแบบออฟไลน์

ก้าวต่อไป!

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