พื้นฐานของการพัฒนาเว็บในอุปกรณ์เคลื่อนที่

ที่งาน Chrome Dev Summit 2014 มีหัวข้อมากมายและแบรนด์ที่ครอบคลุม API ใหม่ แต่ไม่ใช่ทั้งหมดเกี่ยวกับรูปแบบใหม่และเงางาม

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

Matt Gaunt ครอบคลุมถึงความพยายามอย่างต่อเนื่องที่จะ แก้ไขปัญหาเหล่านี้จากทีมแพลตฟอร์มนักพัฒนาซอฟต์แวร์ Chrome

เรียนรู้

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

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

หากพบปัญหาใดๆ เกี่ยวกับเว็บไซต์หรือเนื้อหาของเว็บไซต์นั้น หรือคุณต้องการให้ Web Fundamentals ครอบคลุมหัวข้อใดหัวข้อหนึ่ง โปรดแจ้งให้เราทราบโดยส่งความคิดเห็นเกี่ยวกับ GitHub

สร้าง

เพื่อช่วยคุณในการเริ่มต้นโปรเจ็กต์เว็บใหม่ เราจึงได้สร้างชุดเครื่องมือ Web Starter ขึ้นมา มีทุกอย่างที่ต้องการ ดังนี้

• กระบวนการบิลด์ที่แข็งแกร่ง
• HTML แบบ Boilerplate
• สไตล์การแปล

กระบวนการสร้าง

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

ใน Web Starter Kit เรามีขั้นตอนดังต่อไปนี้

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

ต้นแบบสำหรับ HTML แบบหลายอุปกรณ์

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

ใน Web Starter Kit เราอยากเพิ่มการรองรับฟีเจอร์ที่ทำให้เส้นแบ่งระหว่างแพลตฟอร์มกับเว็บไซต์เบลอ จึงเพิ่มการรองรับส่วนเพิ่มลงในหน้าจอหลักและหน้าจอแนะนำสำหรับ Android, Windows Phone, iOS และ Opera Coast

สไตล์การแปล

ชิ้นสุดท้ายของ Web Starter Kit คือ Styleguide

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

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

ทำซ้ำ

เมื่อคุณเริ่มนำความรู้ใหม่ไปปฏิบัติจริงแล้ว คุณจะต้องใช้ DevTools เพื่อแก้ไขข้อบกพร่อง ปรับปรุง และดูแลรักษางานของคุณ

มีฟีเจอร์ใหม่ที่ยอดเยี่ยมในเครื่องมือสำหรับนักพัฒนาเว็บ และ Matt ก็มาดูฟีเจอร์ใหม่ต่อไปนี้

โหมดอุปกรณ์

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

ฟีเจอร์ที่ยอดเยี่ยมอย่างหนึ่งของโหมดอุปกรณ์คือความสามารถในการควบคุมความเร็วของเครือข่าย ซึ่งทำให้คุณจำลองประสบการณ์ของผู้ใช้ผ่านการเชื่อมต่อ GPRS, EDGE, 3G, DSL หรือ Wi-Fi ได้

เครื่องมือสร้างโปรไฟล์การแสดงผล

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

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

การติดตามการระบุว่าไม่ถูกต้อง

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

ดูแผนภูมิเปลวไฟ

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

โปรแกรมดูเฟรม

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

เรียนรู้ สร้าง ทำซ้ำ

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