ประมาณหนึ่งปีที่แล้วในเดือนพฤษภาคม 2013 Google ได้เปิดตัว พอลิเมอร์ js .
เราอยู่ที่นี่หนึ่งปีต่อมา และคำถามคือพร้อมสำหรับไพรม์ไทม์แล้วหรือยัง? เป็นไปได้หรือไม่ที่จะสร้างแอปพลิเคชันที่พร้อมใช้งานจริงโดยใช้เทคนิคการพัฒนาเว็บพอลิเมอร์
เพื่อตอบคำถามนี้ฉันจึงนำ Polymer ออกไปทดลองขับเพื่อพัฒนาเว็บแอปพลิเคชันและดูว่าจะทำงานได้ดีเพียงใด บทความนี้เกี่ยวกับประสบการณ์นั้นและสิ่งที่ฉันได้เรียนรู้ในกระบวนการนี้
Polymer.js: แนวคิด
ก่อนที่เราจะเข้าสู่บทแนะนำเกี่ยวกับพอลิเมอร์ก่อนอื่นเรามากำหนด Polymer.js ไม่ใช่สำหรับสิ่งที่อ้างว่าเป็น แต่สำหรับสิ่งที่เป็นจริง
เมื่อคุณเริ่มตรวจสอบ Polymer คุณก็อดไม่ได้ที่จะรู้สึกทึ่งกับมุมมองโลกที่เป็นเอกลักษณ์ของตัวเองในทันที พอลิเมอร์อ้างว่าตัวเองใช้แนวทางกลับสู่ธรรมชาติที่“ ทำให้องค์ประกอบกลับมาเป็นศูนย์กลางของการพัฒนาเว็บ” ด้วย Polymer.js คุณสามารถประดิษฐ์ของคุณเองได้ องค์ประกอบ HTML และรวบรวมเป็นเว็บแอปพลิเคชันที่สมบูรณ์ซับซ้อนซึ่งสามารถปรับขนาดและบำรุงรักษาได้ ทุกอย่างเกี่ยวกับการสร้างองค์ประกอบใหม่ (เช่นกำหนดเอง) ที่สามารถนำมาใช้ซ้ำในหน้า HTML ของคุณในลักษณะที่เปิดเผยได้โดยไม่จำเป็นต้องรู้หรือเข้าใจภายใน
หลังจากนั้นองค์ประกอบทั้งหมดก็คือองค์ประกอบพื้นฐานของเว็บ ดังนั้น Polymer’s โลกทัศน์ คือการพัฒนาเว็บโดยพื้นฐานควรขึ้นอยู่กับการขยายกระบวนทัศน์ขององค์ประกอบที่มีอยู่เพื่อสร้างให้มีประสิทธิภาพมากขึ้น ส่วนประกอบของเว็บ แทนที่จะแทนที่มาร์กอัปด้วย 'gobs of script' (เพื่อใช้คำของพวกเขา) กล่าวอีกอย่างหนึ่งว่า Polymer เชื่อในการใช้ประโยชน์จากเทคโนโลยี 'เนทีฟ' ของเบราว์เซอร์แทนที่จะใช้เขาวงกตที่ซับซ้อนมากขึ้นของไลบรารี JavaScript ที่กำหนดเอง ( jQuery et. อัล). ความคิดที่น่าสนใจอย่างแท้จริง
ตกลงนั่นคือทฤษฎี ตอนนี้เรามาดูความเป็นจริงกัน
การพัฒนาเว็บพอลิเมอร์: ความจริง
แม้ว่าแนวทางเชิงปรัชญาของพอลิเมอร์จะมีประโยชน์อย่างแน่นอน แต่ก็น่าเสียดายที่ความคิด (อย่างน้อยก็ในระดับหนึ่ง) ก็ยังคงอยู่ก่อนเวลา
Polymer.js วางข้อกำหนดจำนวนมากไว้บนเบราว์เซอร์โดยอาศัยเทคโนโลยีจำนวนมากที่ยังอยู่ในขั้นตอนการกำหนดมาตรฐาน (โดย W3C) และยังไม่มีในเบราว์เซอร์ในปัจจุบัน ตัวอย่าง ได้แก่ ไฟล์ โดมเงา , องค์ประกอบแม่แบบ , องค์ประกอบที่กำหนดเอง , การนำเข้า HTML , ผู้สังเกตการณ์การกลายพันธุ์ , มุมมองที่ขับเคลื่อนด้วยโมเดล, เหตุการณ์ตัวชี้ และ ภาพเคลื่อนไหวบนเว็บ . สิ่งเหล่านี้เป็นเทคโนโลยีที่ยอดเยี่ยม แต่อย่างน้อย ณ ตอนนี้เบราว์เซอร์สมัยใหม่ที่ยังไม่มาถึง
foreach _post เป็นค่าคีย์
กลยุทธ์พอลิเมอร์คือการมี นักพัฒนาส่วนหน้า ใช้ประโยชน์จากเทคโนโลยีที่ใช้เบราว์เซอร์ระดับแนวหน้าเหล่านี้ซึ่งกำลังอยู่ในขั้นตอนของการกำหนดมาตรฐาน (โดย W3C) เมื่อพร้อมใช้งาน ในระหว่างนี้เพื่อเติมเต็มช่องว่างพอลิเมอร์แนะนำให้ใช้ โพลีฟิลล์ (โค้ด JavaScript ที่ดาวน์โหลดได้ซึ่งมีคุณลักษณะที่ยังไม่มีในเบราว์เซอร์ในปัจจุบัน) โพลีฟิลล์ที่แนะนำได้รับการออกแบบในลักษณะที่ (อย่างน้อยในทางทฤษฎี) จะไม่มีรอยต่อที่จะแทนที่เมื่อความสามารถเหล่านี้เวอร์ชันเบราว์เซอร์ดั้งเดิมพร้อมใช้งาน
ตกลงไม่เป็นไร. แต่ขอผมพูดตรงๆ อย่างน้อยตอนนี้เรากำลังจะใช้ไลบรารี JavaScript (เช่น polyfills) เพื่อหลีกเลี่ยงการใช้ JavaScript Libraries? นั่นเป็นสิ่งที่ 'น่าสนใจ'
สิ่งที่สำคัญที่สุดก็คือเราอยู่ในโหมดปรภพกับพอลิเมอร์เนื่องจากในที่สุดแล้วจะต้องอาศัยเทคโนโลยีเบราว์เซอร์ (หรืออาจจะแม่นยำกว่าโดยประมาณ) ที่ยังไม่มี ด้วยเหตุนี้ Polymer.js ในปัจจุบันจึงดูเหมือนการศึกษาเกี่ยวกับวิธีการสร้างแอปพลิเคชันที่เน้นองค์ประกอบเป็นศูนย์กลางในอนาคต (กล่าวคือเมื่อคุณสมบัติที่จำเป็นทั้งหมดถูกนำไปใช้ในเบราว์เซอร์หลักและไม่จำเป็นต้องใช้ polyfills อีกต่อไป) แต่อย่างน้อยในปัจจุบันพอลิเมอร์ดูเหมือนจะเป็นแนวคิดที่น่าสนใจมากกว่าตัวเลือกที่แท้จริงสำหรับการสร้างแอปพลิเคชันการเปลี่ยนแปลงมุมมองของโลกที่มีประสิทธิภาพที่นี่และตอนนี้ซึ่งทำให้การเขียน (หรือการค้นหา) แบบฝึกหัดเกี่ยวกับโพลิเมอร์เป็นเรื่องยาก ของเอกสารของ Google
สถาปัตยกรรมพอลิเมอร์
ตอนนี้เข้าสู่คำแนะนำของเรา Polymer.js แบ่งออกเป็นสี่ชั้นทางสถาปัตยกรรม:
เนทีฟ: คุณลักษณะที่จำเป็นในปัจจุบันมีให้บริการในเบราว์เซอร์หลักทั้งหมด พื้นฐาน: Polyfills ที่ใช้คุณลักษณะของเบราว์เซอร์ที่จำเป็นซึ่งยังไม่มีในเบราว์เซอร์เอง (ความตั้งใจคือต้องการให้เลเยอร์นี้หายไปเมื่อเวลาผ่านไปเนื่องจากความสามารถที่มีให้พร้อมใช้งานในเบราว์เซอร์) แกนหลัก: โครงสร้างพื้นฐานที่จำเป็นสำหรับองค์ประกอบพอลิเมอร์เพื่อใช้ประโยชน์จากความสามารถที่จัดเตรียมโดยเลเยอร์ Native และ Foundation องค์ประกอบ: ชุดองค์ประกอบพื้นฐานที่มีไว้เพื่อใช้เป็นส่วนประกอบพื้นฐานที่สามารถช่วยคุณสร้างแอปพลิเคชัน รวมถึงองค์ประกอบที่มีให้: ฟังก์ชันพื้นฐานเช่น ajax, ภาพเคลื่อนไหว, โครงร่างแบบยืดหยุ่นและท่าทางสัมผัส การห่อหุ้ม API ของเบราว์เซอร์ที่ซับซ้อนและเลย์เอาต์ CSS ตัวแสดงองค์ประกอบ UI เช่นหีบเพลงการ์ดและแถบด้านข้าง
การสร้างแอพพลิเคชั่นโพลิเมอร์
ในการเริ่มต้นมีบางส่วน บทความ และการสอน การเขียน ที่ช่วยแนะนำคุณเกี่ยวกับพอลิเมอร์แนวคิดและโครงสร้างของมัน แต่ถ้าคุณเป็นอะไรที่เหมือนฉันเมื่อคุณทำผ่านมันและพร้อมที่จะสร้างแอปพลิเคชันของคุณจริง ๆ คุณจะรู้ได้อย่างรวดเร็วว่าคุณไม่แน่ใจว่าจะเริ่มจากตรงไหนหรือจะสร้างมันอย่างไร เนื่องจากตอนนี้ฉันได้ทำตามขั้นตอนนี้และคิดออกแล้วนี่คือคำแนะนำ ...
การพัฒนาเว็บพอลิเมอร์เป็นเพียงการสร้างองค์ประกอบและเป็นเพียงการสร้างองค์ประกอบเท่านั้น ดังนั้นเพื่อให้สอดคล้องกับมุมมองโลกของโพลีเมอร์แอปพลิเคชันของเราจะเป็น ... องค์ประกอบใหม่ ไม่มีอะไรมากและไม่มีอะไรน้อย โอเคฉันเข้าใจแล้ว นั่นคือจุดเริ่มต้นของเรา
สำหรับตัวอย่างโครงการ Polymer ของเราฉันจะตั้งชื่อองค์ประกอบระดับบนสุดของแอปพลิเคชันเนื่องจากชื่อองค์ประกอบที่กำหนดเอง (ไม่ว่าคุณจะใช้กรอบงานใดในการสร้าง) จะต้องมีเครื่องหมายยัติภังค์ (เช่น x-tags, องค์ประกอบโพลีเมอร์ ฯลฯ .).
ขั้นตอนต่อไปต้องใช้ความคิดอีกเล็กน้อย เราจำเป็นต้องตัดสินใจว่าเราจะประกอบแอปพลิเคชันของเราอย่างไร แนวทางง่ายๆคือพยายามระบุจากมุมมองภาพส่วนประกอบในแอปพลิเคชันของเราแล้วลองสร้างเป็นองค์ประกอบที่กำหนดเองในโพลีเมอร์
ตัวอย่างเช่นสมมติว่าเรามีแอพที่มีหน้าจอต่อไปนี้:
เราสามารถระบุได้ว่าแถบด้านบนและเมนูแถบด้านข้างจะไม่เปลี่ยนแปลงและ 'เนื้อหา' จริงของแอปอาจโหลด 'มุมมอง' ที่แตกต่างกัน
ในกรณีนี้วิธีการหนึ่งที่สมเหตุสมผลคือการสร้างองค์ประกอบสำหรับแอปของเราและภายในองค์ประกอบนั้นเราสามารถใช้องค์ประกอบ UI ของ Polymer เพื่อสร้างแถบด้านบนและเมนูแถบด้านข้าง
จากนั้นเราสามารถสร้างสองมุมมองหลักของเราซึ่งเราจะเรียกว่า ListView และ SingleView เพื่อโหลดลงในพื้นที่ 'เนื้อหา' สำหรับรายการใน ListView เราสามารถสร้าง ItemView
จากนั้นจะให้โครงสร้างดังนี้:
ข่าวดี
ตอนนี้เรามีแอปพลิเคชัน Polymer ตัวอย่างแล้วเราสามารถแทรกลงในหน้าเว็บใดก็ได้เพียงแค่นำเข้า“ toptal-app.html” และเพิ่มแท็กเพราะท้ายที่สุดแล้วแอปของเราเป็นเพียงองค์ประกอบเท่านั้น เจ๋งมาก
ในความเป็นจริงนั้นมีอำนาจและความงดงามของกระบวนทัศน์พอลิเมอร์อยู่มาก องค์ประกอบแบบกำหนดเองที่คุณสร้างขึ้นสำหรับแอปพลิเคชันของคุณ (รวมถึงระดับบนสุดสำหรับแอปพลิเคชันทั้งหมดของคุณ) จะถือว่าเป็นองค์ประกอบอื่น ๆ ในหน้าเว็บ คุณจึงสามารถเข้าถึงคุณสมบัติและวิธีการจากโค้ด JavaScript หรือไลบรารีอื่น ๆ (เช่น Backbone.js , Angular.js ฯลฯ ). คุณยังสามารถใช้ไลบรารีเหล่านั้นเพื่อสร้างองค์ประกอบใหม่ของคุณเอง
ยิ่งไปกว่านั้นส่วนประกอบที่กำหนดเองของคุณยังเข้ากันได้กับไลบรารีองค์ประกอบที่กำหนดเองอื่น ๆ (เช่น Mozilla’s X วัน ). ดังนั้นจึงไม่สำคัญว่าคุณจะใช้องค์ประกอบใดในการสร้างองค์ประกอบที่กำหนดเอง แต่ก็เข้ากันได้กับ Polymer และเทคโนโลยีเบราว์เซอร์อื่น ๆ
จึงไม่น่าแปลกใจที่เราได้เริ่มเห็นการถือกำเนิดของชุมชน Element Creators ที่เปิดเผยและแบ่งปันองค์ประกอบที่สร้างขึ้นใหม่ในฟอรัมเช่น องค์ประกอบที่กำหนดเอง เว็บไซต์. คุณสามารถไปที่นั่นและหยิบส่วนประกอบที่คุณต้องการและใช้ในแอปพลิเคชันของคุณ
ในทางกลับกัน…
พอลิเมอร์ยังคงเป็นเทคโนโลยีใหม่ที่นักพัฒนาโดยเฉพาะ นักพัฒนาแอปมือใหม่ มีแนวโน้มที่จะพบว่ามันค่อนข้างเปราะและมีขอบขรุขระจำนวนหนึ่งที่หายาก
นี่คือตัวอย่าง:
- ขาดเอกสารและคำแนะนำ
- ไม่ได้มีการจัดทำเอกสาร UI ของ Polymer.js และองค์ประกอบที่ไม่ใช่ UI ทั้งหมด บางครั้ง 'คำแนะนำ' เพียงอย่างเดียวเกี่ยวกับวิธีใช้คือรหัสสาธิต ในบางกรณีจำเป็นต้องอ้างถึงซอร์สโค้ดขององค์ประกอบโพลีเมอร์ด้วยซ้ำเพื่อทำความเข้าใจวิธีการทำงานและสามารถ / ควรใช้ให้ดีขึ้น
- ยังไม่ชัดเจนว่าจะจัดระเบียบแอปพลิเคชันขนาดใหญ่อย่างไร โดยเฉพาะอย่างยิ่งคุณควรจะส่งผ่านวัตถุเดี่ยวระหว่างองค์ประกอบอย่างไร? คุณควรใช้กลยุทธ์ใดในการทดสอบองค์ประกอบที่กำหนดเอง คำแนะนำเกี่ยวกับปัญหาประเภทนี้ ณ จุดนี้ยังไม่เพียงพอ
-
ข้อผิดพลาดในการอ้างอิงและเวอร์ชัน itis แม้ว่าคุณจะดาวน์โหลดองค์ประกอบ Polymer.js ตามที่แนะนำ แต่คุณอาจพบว่าตัวเองมีข้อผิดพลาดในการพึ่งพาซึ่งชี้ไปที่การอ้างอิงเวอร์ชันต่างๆในองค์ประกอบเดียวกัน แม้ว่าจะเป็นที่เข้าใจกันว่า Polymer Elements กำลังอยู่ระหว่างการพัฒนาอย่างหนัก แต่ปัญหาเหล่านี้อาจทำให้การพัฒนาค่อนข้างท้าทายทำให้ความมั่นใจและความสนใจของนักพัฒนาลดลง
- ปัญหาบนแพลตฟอร์มมือถือ ประสิทธิภาพของ Polymer.js บนแพลตฟอร์มมือถือมักจะอยู่ระหว่างที่น่าหงุดหงิดและเป็นปัญหา
- การดาวน์โหลดไลบรารีและโพลีฟิลล์ทั้งหมด (ไม่มีไฟล์ gzip ’ing) ช้าและคุณต้องดาวน์โหลดองค์ประกอบโพลีเมอร์ทุกตัวที่คุณต้องการใช้
- การประมวลผล polyfills ไลบรารีและองค์ประกอบที่กำหนดเองดูเหมือนจะเป็นงานที่มีราคาแพงบนแพลตฟอร์มมือถือ แม้ว่าการดาวน์โหลดจะเสร็จสมบูรณ์คุณก็ยังคงมีหน้าจอว่างอยู่ 2-3 วินาที
- โดยเฉพาะอย่างยิ่งสำหรับฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น (เช่นการลากแล้วปล่อยหรือการแสดงผลลงในผืนผ้าใบ) คุณอาจพบว่าฟังก์ชันการทำงานที่ทำงานได้ดีบนเดสก์ท็อปนั้นทำงานไม่ถูกต้องหรือยังไม่ได้รับการสนับสนุนบนแพลตฟอร์มมือถือ ในกรณีเฉพาะของฉันความไม่พอใจอย่างหนึ่งที่ฉันพบคือ แสดงผลเป็นผืนผ้าใบบน iOS .
- รายงานข้อผิดพลาดไม่เพียงพอหรือสับสน บางครั้งเมื่อคุณสะกดชื่อแอตทริบิวต์ผิดหรือเพียงแค่ทำลายบางสิ่งที่เกี่ยวข้องกับเลเยอร์หลักเองคุณจะได้รับข้อความแสดงข้อผิดพลาดแปลก ๆ บนคอนโซลของคุณพร้อมด้วย call stack สองชุดที่คุณต้องตรวจสอบเพื่อลองระบุว่าปัญหาอยู่ที่ใด บางครั้งมันก็ง่ายที่จะแก้ปัญหานี้ แต่บางครั้งคุณอาจต้องลองใช้กลยุทธ์ที่แตกต่างไปจากเดิมโดยสิ้นเชิงเพียงเพื่อหลีกเลี่ยงข้อผิดพลาดเนื่องจากคุณไม่สามารถติดตามแหล่งที่มาได้
สรุป
พอลิเมอร์เป็นเทคโนโลยีที่น่าสนใจ แต่ก็ยังอยู่ในช่วงวัยเด็กอย่างปฏิเสธไม่ได้ ด้วยเหตุนี้จึงยังไม่เหมาะอย่างยิ่งกับการพัฒนาแอปพลิเคชันขนาดใหญ่ระดับองค์กรที่พร้อมสำหรับการผลิต นอกจากนี้ยังไม่มีคำแนะนำหรือบทช่วยสอนเฉพาะสำหรับการพัฒนาเว็บ Polymer.js
ถึงแม้ว่าวิธีการที่ใช้ JavaScript เป็นศูนย์กลางหรือ DOM เป็นศูนย์กลางนั้นดีกว่าในทางพื้นฐาน แต่คณะลูกขุนก็ยังไม่เห็นด้วย พอลิเมอร์สร้างข้อโต้แย้งที่น่าเชื่อ แต่มีข้อโต้แย้งโต้แย้งอยู่
ปัญหาและแนวทางแก้ไขความปลอดภัยของเว็บ
บางทีที่น่าสังเกตที่สุดคือ Polymer ต้องการความเชี่ยวชาญในระดับที่สำคัญพอสมควรในการใช้เทคโนโลยีเบราว์เซอร์เช่น DOM คุณย้อนกลับไปยังวันก่อน jQuery ได้หลายวิธีการเรียนรู้ DOM API เพื่อทำงานง่ายๆเช่นเพิ่มหรือลบคลาส CSS ออกจากองค์ประกอบ สิ่งนี้ทำให้รู้สึกอย่างน้อยก็ในระดับหนึ่งเช่นคุณกำลังถอยหลังแทนที่จะก้าวไปข้างหน้า
แต่จากที่กล่าวมาดูเหมือนว่าองค์ประกอบที่กำหนดเองจะเป็นส่วนสำคัญของการพัฒนาเว็บในอนาคตดังนั้นการดำน้ำในไม่ช้าก็เร็วอาจเป็นเรื่องที่รอบคอบสำหรับนักพัฒนาเว็บในปัจจุบัน และหากคุณไม่เคยลองสร้างองค์ประกอบที่กำหนดเองมาก่อน Polymer (และบทช่วยสอนนี้) อาจเป็นจุดเริ่มต้นที่เหมาะสม
ที่เกี่ยวข้อง: Meteor Tutorial: การสร้างแอปพลิเคชันเว็บแบบเรียลไทม์ด้วย Meteor
