การเพิ่มประสิทธิภาพแบบก้าวหน้ากับแอปหน้าเดียว

ผมเพิ่งกลับมาจากการประชุมในบอสตันที่เรียกว่าเหตุการณ์นอกเหนือ

ชุดรูปแบบที่นิยมมากในหมู่ผู้พูดคือแนวคิดของการปรับปรุงแบบก้าวหน้า - เนื้อหาของเว็บไซต์ควรเป็น HTML และ JavaScript ควรใช้เพื่อปรับปรุงพฤติกรรมเท่านั้น

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

Jeremy Keithพูดคุยอย่างลึกซึ้งโดยเฉพาะเกี่ยวกับเรื่องนี้

แต่เว็บแอปพลิเคชันหน้าเดียวเช่น Backbone และ Angular ล่ะ การออกแบบทั้งหมดที่อยู่เบื้องหลังเฟรมเวิร์กเหล่านี้ดูเหมือนจะผลักดันให้ผู้พัฒนาเคลื่อนย้ายเนื้อหาออกจาก HTML และกลายเป็นสิ่งที่คล้ายกับ JSON API

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

สำหรับฉันแล้วดูเหมือนว่าแอพพลิเคชั่นหน้าเดียวจะสร้างความก้าวหน้าอย่างต่อเนื่อง ก่อนที่เราจะพยายามหลีกเลี่ยงความจริงที่ว่าการใช้งานและคุณสมบัติแตกต่างกันระหว่างเบราว์เซอร์ที่ย้อนกลับไปหลายทศวรรษ SPAs คิดว่ามีพื้นฐานบางอย่างที่เราสามารถเห็นด้วยกับผู้เยี่ยมชมเว็บไซต์ส่วนใหญ่ ฉันไม่คิดว่าทั้งสองจะขัดแย้งกัน คุณยังคงสามารถพัฒนาอย่างต่อเนื่องหลังจากที่ SPA เริ่มขึ้นเช่นเริ่มต้นด้วย<video>แท็กจากนั้นเลเยอร์ผู้เล่นที่มีคุณลักษณะหลากหลายของคุณไว้ด้านบน

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

เพื่อให้แน่ใจว่าฉันไม่ได้ไปโดยไม่มีการเปรียบเทียบรถฉันไม่ควรคาดหวังให้รถของฉันทำงานถ้าฉันตัดสินใจว่าฉันไม่ชอบคุณสมบัติบางอย่าง ฉันบอกวิศวกรโยธาได้ว่า "ฉันปิดไฟหน้าดังนั้นโปรดตรวจสอบให้แน่ใจว่าติดตั้งไฟถนนทุก ๆ 125 ฟุตทุกที่ที่ฉันไป" หากไม่มีไฟหน้ารถของฉันจะทำงานบ่อยครั้ง แต่บางแห่งฉันก็ไม่สามารถไปได้

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

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

สำหรับเว็บแอปพลิเคชันที่แท้จริงคือแอปพลิเคชันที่จำเป็นต้องมี SPA อย่างแท้จริงเนื่องจากไม่สอดคล้องกับรูปแบบคำขอ / การตอบกลับมาตรฐาน การเพิ่มประสิทธิภาพแบบก้าวหน้านั้นยากกว่าสำหรับแอพพลิเคชั่นจริง ๆ เพราะพวกเขาเพียงแค่ใช้เบราว์เซอร์เป็นแพลตฟอร์มเทคโนโลยีสำหรับการเขียนแอพพลิเคชั่นแบบพกพา ภาษาสคริปต์เป็นส่วนสำคัญของเว็บแอปพลิเคชั่นที่แท้จริงไม่ใช่เพียงภาษาเดียวที่สามารถเลือกติดตั้งเพื่อปรับปรุง เทคนิคการปรับปรุงแบบก้าวหน้าบางอย่างยังสามารถใช้งานได้ (เช่นการเปลี่ยนแฟลชวิดีโอ / เสียงด้วย<video>/ <audio>แท็ก) แต่เว็บแอปพลิเคชันจริงจะต้องมีจาวาสคริปต์เป็นพื้นฐาน

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

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

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

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

ฉันคิดว่ามันขึ้นอยู่กับว่าคุณต้องการไปไกลแค่ไหนกับ Progressive Enhancement - มันเป็นกระบวนทัศน์การออกแบบแทนที่จะเป็นกฎที่ยากและรวดเร็ว

หากคุณกำลังใช้เฟรมเวิร์ก SPA ฉันคิดว่าอนุญาตให้ใช้ Javascript ได้ อย่างไรก็ตาม Javascript ที่คุณเขียนเพื่อปรับปรุงหน้าของคุณจะต้องฉลาดพอที่จะจัดการกับ HTML ที่เฟรมเวิร์กสามารถสร้างได้

คุณสามารถได้รับประโยชน์จากเทคนิค PE อื่น ๆ เช่นการใช้ประโยชน์จากฟีเจอร์ CSS ล่าสุดสำหรับเบราว์เซอร์รุ่นล่าสุดหรือการย่อยสลาย HTML5 ถึง HTML4

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

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

การเรนเดอร์ฝั่งเซิร์ฟเวอร์ (สำหรับผู้ใช้ไม่ใช่เฉพาะเหตุผล SEO) และการตัดต่อมัสตาร์ดเป็นสองเทคนิคที่สามารถช่วยสร้างแอพ Single Page ที่ได้รับการพัฒนาอย่างก้าวหน้าด้วยเฟรมเวิร์ก JS ฝั่งไคลเอ็นต์ที่ทันสมัย

เฟรมเวิร์ก JS ฝั่งไคลเอ็นต์บางตัวง่ายกว่าที่จะทำงานกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ได้ง่ายกว่าเฟรมเวิร์กอื่น ๆ ( ระวังโซลูชันการเรนเดอร์และการรวมเฟรมเวิร์กฝั่งเซิร์ฟเวอร์บางตัว - ผู้ใช้ )

ในขณะที่เขียน React.js และ Ember (พร้อมกับ FastBoot ที่กำลังจะมาถึง) เป็นสองสิ่งที่ฉันรู้ว่ามีหรือกำลังพยายามทำให้การแสดงผลฝั่งเซิร์ฟเวอร์เป็นพลเมืองชั้นหนึ่ง หน้าเว็บที่แสดงผลฝั่งเซิร์ฟเวอร์ยังคงเป็นสปาที่ใช้งานได้เมื่อแยกวิเคราะห์บนเบราว์เซอร์ไคลเอ็นต์

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

ฉันปิดการรับชมแม้ว่าสิ่งนี้ต้องการสองสิ่ง:

1) การตั้งค่าลิงก์ทั้งหมดของคุณเป็นลิงก์คำขอ / ตอบกลับมาตรฐานเมื่อโหลดเริ่มต้นให้เฟรมเวิร์ก / ไลบรารี SPA ของคุณจากนั้นแทนที่สิ่งเหล่านี้ด้วยเวอร์ชัน (โต้ตอบ) ที่อัปเดตแล้วเมื่อเบราว์เซอร์โหลดและเครื่องยนต์ JS ระบุว่า นี่คือการเพิ่มประสิทธิภาพอย่างแท้จริง; JS ถูกโหลดไว้ด้านบนของเว็บไซต์ html ที่มีอยู่และจะดีกว่าสำหรับเครื่องมือค้นหาเทคโนโลยีการช่วยเหลือและเบราว์เซอร์รุ่นเก่า

และ

2) เซิร์ฟเวอร์จะต้องตอบสนองต่อเส้นทางเช่น / foo / bar / json และ foo / bar โดยให้บริการรูปแบบที่ถูกต้อง; แนบเนียนหากคุณห่อทุกอย่างในเลย์เอาต์และบางส่วนเพื่อให้ได้หน้าแรกคุณควรจะสามารถรับทุกอย่างผ่านทางเลย์เอาต์และบางส่วนสำหรับหน้าที่ 2 และหน้าถัดไปเช่นกัน

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