Polymer.js: อนาคตของการพัฒนาเว็บแอปพลิเคชัน?

ประมาณหนึ่งปีที่แล้วในเดือนพฤษภาคม 2013 Google ได้เปิดตัว Polymer.js

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

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

Polymer.js: แนวคิด

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

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

ท้ายที่สุดแล้ว องค์ประกอบคือส่วนประกอบสำคัญของเว็บ ดังนั้น เวลตันชวงของโพลิเมอร์คือการพัฒนาเว็บโดยพื้นฐานแล้วควรมีการขยายกระบวนทัศน์องค์ประกอบที่มีอยู่เพื่อสร้างส่วนประกอบเว็บที่มีประสิทธิภาพมากขึ้น แทนที่จะแทนที่มาร์กอัปด้วย "gobs of script" (เพื่อใช้คำพูดของพวกเขา) กล่าวอีกนัยหนึ่ง Polymer เชื่อมั่นในการใช้ประโยชน์จากเทคโนโลยี "ดั้งเดิม" ของเบราว์เซอร์แทนที่จะอาศัยเขาวงกตที่ซับซ้อนมากขึ้นของไลบรารี JavaScript ที่กำหนดเอง (jQuery et. al.) ความคิดที่น่าสนใจจริงๆ

ตกลง นั่นคือทฤษฎี ทีนี้มาดูความเป็นจริงกัน

การพัฒนาเว็บโพลีเมอร์: ความจริง

แม้ว่าแนวทางเชิงปรัชญาของโพลีเมอร์จะมีข้อดีอย่างแน่นอน แต่น่าเสียดายที่ความคิดที่ว่า (อย่างน้อยก็ในระดับหนึ่ง) นั้นล้ำหน้ากว่าเวลาของมัน

Polymer.js มีข้อกำหนดจำนวนมากบนเบราว์เซอร์ โดยอาศัยเทคโนโลยีจำนวนมากที่ยังคงอยู่ในกระบวนการมาตรฐาน (โดย W3C) และยังไม่มีในเบราว์เซอร์ในปัจจุบัน ตัวอย่าง ได้แก่ Shadow Dom, องค์ประกอบเทมเพลต, องค์ประกอบที่กำหนดเอง, การนำเข้า HTML, ผู้สังเกตการณ์การกลายพันธุ์, มุมมองที่เป็นโมเดล, เหตุการณ์ตัวชี้ และภาพเคลื่อนไหวบนเว็บ เทคโนโลยีเหล่านี้เป็นเทคโนโลยีที่ยอดเยี่ยม แต่อย่างน้อย ณ ตอนนี้ที่ยังมาไม่ถึงในเบราว์เซอร์สมัยใหม่

กลยุทธ์ของโพลิเมอร์คือการให้นักพัฒนา front-end ใช้ประโยชน์จากเทคโนโลยีบนเบราว์เซอร์ระดับแนวหน้าที่ยังมาไม่ถึง ซึ่งขณะนี้อยู่ในกระบวนการสร้างมาตรฐาน (โดย W3C) เมื่อมีให้ใช้งาน ในระหว่างนี้ เพื่อเติมเต็มช่องว่าง Polymer แนะนำให้ใช้ polyfills (โค้ด JavaScript ที่สามารถดาวน์โหลดได้ซึ่งมีคุณลักษณะที่ยังไม่ได้สร้างในเบราว์เซอร์ในปัจจุบัน) Polyfill ที่แนะนำได้รับการออกแบบในลักษณะที่ (อย่างน้อยในทางทฤษฎี) จะสามารถแทนที่ได้อย่างราบรื่นเมื่อความสามารถเหล่านี้ในเวอร์ชันดั้งเดิมของเบราว์เซอร์พร้อมใช้งาน

ตกลงไม่เป็นไร. แต่ขอผมพูดตรงๆ อย่างน้อยตอนนี้ เราจะใช้ไลบรารี JavaScript (เช่น polyfills) เพื่อหลีกเลี่ยงการใช้ JavaScript Libraries? นั่นล่ะคือ "เสน่ห์"

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

สถาปัตยกรรมพอลิเมอร์

ตอนนี้เข้าสู่คำแนะนำของเรา Polymer.js แบ่งออกเป็นสี่ชั้นทางสถาปัตยกรรม:

เนทีฟ: ฟีเจอร์ที่จำเป็นในปัจจุบันมีให้ใช้งานในเบราว์เซอร์หลักทั้งหมด พื้นฐาน: Polyfills ที่ใช้คุณสมบัติเบราว์เซอร์ที่จำเป็นซึ่งยังไม่มีให้ในเบราว์เซอร์เอง (จุดประสงค์คือให้เลเยอร์นี้หายไปเมื่อเวลาผ่านไป เนื่องจากความสามารถที่เลเยอร์นี้มีให้ใช้งานได้ในเบราว์เซอร์) Core: โครงสร้างพื้นฐานที่จำเป็นสำหรับองค์ประกอบโพลีเมอร์เพื่อใช้ประโยชน์จากความสามารถที่มีให้โดยเลเยอร์ Native และ Foundation.. Elements: ชุดองค์ประกอบพื้นฐานที่มีจุดประสงค์เพื่อใช้เป็นหน่วยการสร้างที่สามารถช่วยคุณสร้างแอปพลิเคชันของคุณ รวมองค์ประกอบที่มีให้: ฟังก์ชันพื้นฐาน เช่น อาแจ็กซ์ แอนิเมชั่น เลย์เอาต์แบบยืดหยุ่น และท่าทาง การห่อหุ้ม API ของเบราว์เซอร์ที่ซับซ้อนและเค้าโครง CSS ตัวแสดงองค์ประกอบ UI เช่น หีบเพลง การ์ด และแถบด้านข้าง

การสร้างแอพพลิเคชั่นโพลีเมอร์

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

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

สำหรับตัวอย่างโครงการโพลีเมอร์ เราจะตั้งชื่อองค์ประกอบระดับบนสุดของแอปพลิเคชัน เนื่องจากชื่อองค์ประกอบที่กำหนดเอง (ไม่ว่าคุณจะใช้เฟรมเวิร์กใดในการสร้าง) จะต้องมียัติภังค์ (เช่น x-tags องค์ประกอบโพลีเมอร์ ฯลฯ)

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

ตัวอย่างเช่น ลองนึกภาพว่าเรามีแอพที่มีหน้าจอดังต่อไปนี้:

เราสามารถระบุได้ว่าแถบด้านบนและเมนูแถบด้านข้างจะไม่เปลี่ยนแปลง และ "เนื้อหา" ที่แท้จริงของแอปสามารถโหลด "มุมมอง" ที่แตกต่างกันได้

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

จากนั้น เราสามารถสร้างมุมมองหลักสองมุมมอง ซึ่งเราจะเรียกว่า ListView และ SingleView เพื่อโหลดลงในพื้นที่ "เนื้อหา" สำหรับรายการใน ListView เราสามารถสร้าง ItemView

ซึ่งจะทำให้ได้โครงสร้างดังนี้:

ข่าวดี

ตอนนี้เรามีตัวอย่างแอปพลิเคชัน Polymer แล้ว เราสามารถแทรกลงในหน้าเว็บใด ๆ เพียงแค่นำเข้า "toptal-app.html" ของเราและเพิ่มแท็ก เพราะท้ายที่สุดแล้ว แอพของเราเป็นเพียงองค์ประกอบ ที่เย็น

อันที่จริง พลังและความงามของกระบวนทัศน์โพลีเมอร์แฝงอยู่ในสิ่งนี้ องค์ประกอบแบบกำหนดเองที่คุณสร้างสำหรับแอปพลิเคชันของคุณ (รวมถึงองค์ประกอบระดับบนสุดสำหรับแอปพลิเคชันทั้งหมดของคุณ) จะถือเป็นองค์ประกอบอื่นๆ ในหน้าเว็บ คุณจึงสามารถเข้าถึงคุณสมบัติและวิธีการได้จากโค้ด JavaScript หรือไลบรารีอื่นๆ (เช่น Backbone.js, Angular.js เป็นต้น) คุณยังสามารถใช้ไลบรารีเหล่านั้นเพื่อสร้างองค์ประกอบใหม่ของคุณเองได้

นอกจากนี้ ส่วนประกอบที่กำหนดเองของคุณยังเข้ากันได้กับไลบรารีองค์ประกอบที่กำหนดเองอื่นๆ (เช่น X-Tag ของ Mozilla) ดังนั้นไม่ว่าคุณจะใช้อะไรสร้างองค์ประกอบที่คุณกำหนดเอง มันเข้ากันได้กับ Polymer และเทคโนโลยีเบราว์เซอร์อื่น ๆ

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

ในทางกลับกัน…

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

นี่คือตัวอย่าง:

• ขาดเอกสารและคำแนะนำ
  • ไม่ได้จัดทำเอกสาร UI ของ Polymer.js และองค์ประกอบที่ไม่ใช่ UI ทั้งหมด บางครั้ง "คำแนะนำ" เพียงอย่างเดียวในการใช้งานก็คือโค้ดสาธิต ในบางกรณี จำเป็นต้องอ้างอิงถึงซอร์สโค้ดของ Polymer Element เพื่อทำความเข้าใจวิธีการทำงานและสามารถใช้/ควรใช้งานได้ดีขึ้น
  • ยังไม่ชัดเจนว่าจะจัดระเบียบแอปพลิเคชันขนาดใหญ่อย่างไร โดยเฉพาะอย่างยิ่ง คุณควรส่งผ่านวัตถุซิงเกิลตันระหว่างองค์ประกอบอย่างไร คุณควรใช้กลยุทธ์ใดเพื่อทดสอบองค์ประกอบที่กำหนดเอง คำแนะนำเกี่ยวกับปัญหาประเภทนี้ ณ จุดนี้ยังไม่เพียงพอ

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

• ปัญหาบนแพลตฟอร์มมือถือ ประสิทธิภาพของ Polymer.js บนแพลตฟอร์มมือถือมักจะอยู่ระหว่างความผิดหวังและปัญหา
  • การดาวน์โหลดไลบรารี่และโพลีฟิลทั้งหมด (โดยไม่ใช้ gzip'ing) นั้นช้า และคุณต้องดาวน์โหลด Polymer Element ทุกตัวที่คุณต้องการใช้
  • การประมวลผลโพลีฟิล ไลบรารี และองค์ประกอบแบบกำหนดเองดูเหมือนจะเป็นงานที่มีราคาแพงบนแพลตฟอร์มมือถือ แม้ว่าการดาวน์โหลดจะเสร็จสิ้น คุณมักจะมีหน้าจอว่างอยู่สองสามวินาที
  • โดยเฉพาะอย่างยิ่งสำหรับฟังก์ชันที่ซับซ้อนมากขึ้น (เช่น การลากแล้วปล่อยหรือการแสดงผลในแคนวาส) คุณอาจพบว่าฟังก์ชันที่ใช้งานได้ดีบนเดสก์ท็อปนั้นทำงานไม่ถูกต้องหรือยังไม่ได้รับการสนับสนุนบนแพลตฟอร์มมือถือ ในกรณีพิเศษของฉัน ความหงุดหงิดอย่างหนึ่งที่ฉันพบคือการเรนเดอร์เป็นแคนวาสบน iOS
• การรายงานข้อผิดพลาดไม่เพียงพอหรือทำให้เกิดความสับสน บางครั้งเมื่อคุณสะกดชื่อแอตทริบิวต์ผิด หรือเพียงแค่ทำลายบางสิ่งที่เกี่ยวข้องกับเลเยอร์หลักเอง คุณจะได้รับข้อความแสดงข้อผิดพลาดแปลก ๆ บนคอนโซลของคุณซึ่งมี call stack สองชุดที่คุณต้องตรวจสอบเพื่อลองพิจารณาว่าปัญหาอยู่ที่ไหน บางครั้งก็ง่ายที่จะแก้ปัญหานี้ แต่บางครั้งคุณจำเป็นต้องลองใช้กลยุทธ์ที่แตกต่างไปจากเดิมอย่างสิ้นเชิงเพื่อหลีกเลี่ยงข้อผิดพลาดเนื่องจากคุณไม่สามารถติดตามแหล่งที่มาได้

บทสรุป

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

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

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

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