ตลอดปีที่ผ่านมา ทีม Polymer ได้ใช้เวลาอย่างมากในการสอนนักพัฒนาซอฟต์แวร์เกี่ยวกับวิธีสร้างองค์ประกอบของตนเอง สิ่งนี้ทําให้เกิดระบบนิเวศที่เติบโตอย่างรวดเร็ว ซึ่งได้รับแรงสนับสนุนอย่างมากจากองค์ประกอบ Core และ Paper ของ Polymer และองค์ประกอบ Brick ที่ทีม Mozilla สร้างขึ้น
เมื่อนักพัฒนาแอปเริ่มคุ้นเคยกับการสร้างองค์ประกอบของตนเองและเริ่มคิดที่จะสร้างแอปพลิเคชัน ก็จะมีคำถามเกิดขึ้นมากมาย เช่น
- คุณควรจัดโครงสร้าง UI ของแอปพลิเคชันอย่างไร
- คุณเปลี่ยนผ่านสถานะต่างๆ อย่างไร
- กลยุทธ์ในการปรับปรุงประสิทธิภาพมีอะไรบ้าง
- และคุณควรมอบประสบการณ์การใช้งานแบบออฟไลน์อย่างไร
สำหรับ Chrome Dev Summit เราพยายามตอบคำถามเหล่านี้ด้วยการสร้างแอปพลิเคชันรายชื่อติดต่อขนาดเล็กและวิเคราะห์กระบวนการที่เราใช้ในการสร้างแอปพลิเคชัน สิ่งที่เราพบมีดังนี้
โครงสร้าง
การแยกแอปพลิเคชันออกเป็นชิ้นส่วนแบบโมดูลที่รวมกันและนํามาใช้ซ้ำได้คือหลักการสําคัญของ Web Components องค์ประกอบ core-* และ paper-* ของ Polymer ช่วยให้เริ่มต้นด้วยชิ้นส่วนเล็กๆ ได้ง่าย เช่น paper-toolbar และ paper-icon-button
และด้วยความสามารถในการจัดองค์ประกอบ คุณจึงรวมองค์ประกอบต่างๆ เข้าด้วยกันเพื่อสร้างสคาฟเฟิลดของแอปพลิเคชันได้
เมื่อสร้างสคาฟเฟิลด์ทั่วไปแล้ว คุณจะใช้รูปแบบ CSS ของคุณเองเพื่อเปลี่ยนให้กลายเป็นประสบการณ์การใช้งานที่ไม่เหมือนใครสำหรับแบรนด์ได้ ข้อดีของการใช้คอมโพเนนต์คือช่วยให้คุณสร้างประสบการณ์การใช้งานที่แตกต่างกันมากได้ ขณะเดียวกันก็ใช้ประโยชน์จากองค์ประกอบพื้นฐานในการสร้างแอปเดียวกัน เมื่อสร้างเฟรมเวิร์กแล้ว คุณจะมุ่งเน้นที่เนื้อหาได้
องค์ประกอบหนึ่งที่เหมาะอย่างยิ่งสำหรับการจัดการเนื้อหาจำนวนมากคือ core-list
core-list สามารถเชื่อมต่อกับแหล่งข้อมูล (โดยทั่วไปคืออาร์เรย์ของออบเจ็กต์) และสำหรับแต่ละรายการในอาร์เรย์ ระบบจะประทับอินสแตนซ์ของเทมเพลต ในเทมเพลต คุณสามารถใช้ความสามารถของระบบการเชื่อมโยงข้อมูลของ Polymer เพื่อเชื่อมต่อเนื้อหาได้อย่างรวดเร็ว
ทรานซิชัน
เมื่อออกแบบและติดตั้งใช้งานส่วนต่างๆ ของแอปแล้ว ขั้นตอนถัดไปคือการหาวิธีไปยังส่วนต่างๆ ของแอป
แม้ว่าจะยังเป็นองค์ประกอบเวอร์ชันทดลอง แต่ core-animated-pages มีระบบภาพเคลื่อนไหวแบบปลั๊กอินที่ใช้เพื่อเปลี่ยนระหว่างสถานะต่างๆ ในแอปพลิเคชันได้
แต่ภาพเคลื่อนไหวเป็นเพียงครึ่งหนึ่งของปัญหา แอปพลิเคชันต้องรวมภาพเคลื่อนไหวเหล่านั้นเข้ากับเราเตอร์เพื่อจัดการ URL อย่างเหมาะสม
ใน Web Components การกำหนดเส้นทางมี 2 รูปแบบ ได้แก่ แบบบังคับและแบบประกาศ การรวม core-animated-pages เข้ากับวิธีการใดวิธีการหนึ่งอาจใช้ได้ ทั้งนี้ขึ้นอยู่กับความต้องการของโปรเจ็กต์
รูทเตอร์แบบบังคับ (เช่น Director ของ Flatiron) สามารถรอเส้นทางที่ตรงกันและสั่งให้ core-animated-pages อัปเดตรายการที่เลือก
ซึ่งมีประโยชน์ในกรณีที่คุณต้องทํางานบางอย่างหลังจากที่เส้นทางจับคู่และก่อนที่ส่วนถัดไปจะเปลี่ยน
ในทางกลับกัน เราเตอร์แบบประกาศ (เช่น app-router) สามารถรวมการกำหนดเส้นทางและ core-animated-pages เข้าด้วยกันเป็นองค์ประกอบเดียวได้ ทำให้การจัดการทั้ง 2 อย่างมีประสิทธิภาพมากขึ้น
หากต้องการการควบคุมที่ละเอียดยิ่งขึ้น ให้ดูที่ไลบรารีอย่าง more-routing ซึ่งสามารถใช้ร่วมกับ 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 ที่แอปส่งได้อย่างมาก
ออฟไลน์
แต่การสร้างแอปที่มีประสิทธิภาพเพียงอย่างเดียวไม่สามารถแก้ปัญหาของผู้ใช้ที่มีการเชื่อมต่อน้อยหรือไม่มีการเชื่อมต่อได้ กล่าวคือ หากแอปของคุณไม่ทำงานแบบออฟไลน์ ก็ไม่ใช่แอปบนอุปกรณ์เคลื่อนที่จริงๆ ปัจจุบันคุณสามารถใช้แคชแอปพลิเคชันซึ่งถูกวิจารณ์อย่างหนักเพื่อจัดเก็บทรัพยากรไว้ใช้แบบออฟไลน์ได้ แต่ในอนาคต Service Worker จะช่วยให้การพัฒนาแบบออฟไลน์มีประสิทธิภาพมากขึ้น
เมื่อเร็วๆ นี้ Jake Archibald ได้เผยแพร่ตำราสูตร Service Worker ที่ยอดเยี่ยม แต่เราจะแนะนำวิธีเริ่มต้นใช้งานคร่าวๆ ให้คุณ
การติดตั้ง Service Worker นั้นง่ายมาก สร้างไฟล์ worker.js และลงทะเบียนเมื่อแอปพลิเคชันบูตขึ้น
คุณต้องวาง worker.js ที่รูทของแอปพลิเคชันเพื่อให้สามารถขัดจังหวะคําขอจากเส้นทางใดก็ได้ในแอป
ในตัวแฮนเดิลการติดตั้งของเวิร์กเกอร์ ฉันแคชทรัพยากรจำนวนมาก (รวมถึงข้อมูลที่ขับเคลื่อนแอป)
วิธีนี้ช่วยให้แอปของฉันมอบประสบการณ์การใช้งานสำรองอย่างน้อยให้แก่ผู้ใช้หากเข้าถึงแอปแบบออฟไลน์
ไปต่อเลย
คอมโพเนนต์เว็บเป็นส่วนเสริมที่สำคัญในแพลตฟอร์มเว็บ และยังคงอยู่ในขั้นเริ่มต้น เมื่อแอปเหล่านี้พร้อมใช้งานในเบราว์เซอร์มากขึ้น ชุมชนนักพัฒนาแอปอย่างเราจะต้องหาแนวทางปฏิบัติแนะนำในการสร้างโครงสร้างแอปพลิเคชัน โซลูชันข้างต้นเป็นจุดเริ่มต้น แต่ยังมีสิ่งอื่นๆ อีกมากมายที่ควรเรียนรู้ มุ่งหน้าสู่การสร้างแอปที่ดีขึ้น