การพัฒนาเว็บแอปพลิเคชันบนมือถือ: เมื่อไร ทำไม และอย่างไร

มีผู้คน 6.8 พันล้านคนบนโลกใบนี้ โดย 5.1 พันล้านคนมีโทรศัพท์มือถือ และทุกวันนี้ เปอร์เซ็นต์ของอุปกรณ์เหล่านี้เพิ่มขึ้นเรื่อยๆ คือสมาร์ทโฟน จากผลการศึกษาของ Pew Research Center เมื่อเร็ว ๆ นี้ จำนวนผู้ใช้ที่เข้าถึงอินเทอร์เน็ตบนสมาร์ทโฟนของพวกเขาเพิ่มขึ้นกว่าเท่าตัวในช่วง 5 ปีที่ผ่านมา เช่นเดียวกับจำนวนผู้ใช้ที่ดาวน์โหลดและใช้งานแอพมือถือ ในบรรดาผู้ที่ใช้อินเทอร์เน็ตหรืออีเมลบนโทรศัพท์ มากกว่าหนึ่งในสามออนไลน์ผ่านอุปกรณ์พกพาเป็นหลัก

อันที่จริง การประมวลผลแบบเคลื่อนที่นั้นแพร่หลายมากขึ้นเรื่อยๆ… และมันยอดเยี่ยมมาก

ยกเว้นแน่นอนเมื่อมันไม่ใช่

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

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

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

Mobile Web App กับ Native App กับ Hybrid App

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

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

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

ไม่ว่าคุณจะเลือกตัวเลือกใด ไม่ว่าจะเป็นเว็บแอปบนอุปกรณ์เคลื่อนที่ แอปเนทีฟหรือแอปไฮบริด ให้ระมัดระวังในการค้นคว้าและยืนยันสมมติฐานของคุณอย่างเพียงพอ ตัวอย่างเช่น สำหรับจุดประสงค์ของบทช่วยสอนการพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่นี้ คุณอาจตัดสินใจพัฒนาแอปบนอุปกรณ์เคลื่อนที่ที่มาพร้อมเครื่องสำหรับอีคอมเมิร์ซเพื่อขายผลิตภัณฑ์ของคุณ แต่จากข้อมูลของ Hubspot 73% ของผู้ใช้สมาร์ทโฟนกล่าวว่าพวกเขาใช้เว็บบนมือถือมากกว่าแอพที่มาพร้อมเครื่องในการช็อปปิ้ง... ดังนั้น ในกรณีนี้ คุณอาจเดิมพันผิดม้า

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

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

การพัฒนาเว็บแอปบนมือถือต้องมีการวางแผนอย่างละเอียด

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

gotcha ทั่วไปอีกประการหนึ่งสำหรับมือใหม่นักพัฒนาเว็บแอปบนมือถือคือสมมติว่าโค้ดบนเว็บสำหรับเบราว์เซอร์เดสก์ท็อปจะทำงาน "ตามที่เป็น" ในเบราว์เซอร์มือถือ ไม่. มี ความ แตกต่างกันอย่างแน่นอน และหากคุณไม่รู้ ก็สามารถกัดคุณได้ ตัวอย่างเช่น ฟังก์ชันเล่นอัตโนมัติของแท็ก HTML5 <video> ไม่ทำงานบนเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ในทำนองเดียวกัน คุณสมบัติของ transition CSS และ opacity ไม่ได้รับการสนับสนุน (หรืออย่างน้อยก็ไม่ได้รับการสนับสนุนอย่างสม่ำเสมอ) ในเบราว์เซอร์มือถือส่วนใหญ่ในปัจจุบัน คุณจะมีปัญหากับวิธีการของเว็บ API บนแพลตฟอร์มมือถือ เช่น SoundCloud music streaming API ที่ต้องใช้ Adobe Flash ซึ่งไม่รองรับในอุปกรณ์มือถือส่วนใหญ่

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

จำเป็นต้องมีความคิดเพื่อสนับสนุนจอภาพ Retina ของ Apple ด้วย (จอภาพคริสตัลเหลวที่มีความหนาแน่นของพิกเซลสูงพอที่สายตามนุษย์จะมองไม่เห็นแต่ละพิกเซลในระยะทางการรับชมทั่วไป) ผลิตภัณฑ์ต่างๆ ของ Apple ซึ่งรวมถึง iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini และ iPad Air มีจอภาพ Retina โดยเฉพาะอย่างยิ่งสำหรับเว็บแอปบนอุปกรณ์เคลื่อนที่ สิ่งสำคัญที่ควรทราบคือจอภาพ Retina ทำให้ภาพที่มีความละเอียดต่ำ (ซึ่งโดยทั่วไปมักใช้กับอุปกรณ์เคลื่อนที่) ดูไม่ชัดและอาจเกิดการแตกเป็นพิกเซลได้ โซลูชันการพัฒนาแอพที่ดีที่สุดในกรณีเหล่านี้คือให้เซิร์ฟเวอร์รับรู้ว่าคำขอนั้นมาจากอุปกรณ์ Retina จากนั้นจึงจัดเตรียมรูปภาพที่มีความละเอียดสูงกว่าสำรองให้กับลูกค้า

หากคุณต้องการใช้ HTML5 ที่ยอดเยี่ยม อย่าลืมตรวจสอบล่วงหน้าว่าฟังก์ชันที่คุณกำลังมองหาได้รับการสนับสนุนในแนวอุปกรณ์ที่ลูกค้าของคุณน่าจะใช้อยู่ ตัวอย่างเช่น ใน iOS 6 ขึ้นไป ไม่มีการรองรับฟังก์ชันเนวิเกเตอร์ getUserMedia เนื่องจากกล้องสามารถเข้าถึงได้ผ่านแอปที่มาพร้อมเครื่องเท่านั้น แหล่งข้อมูลดีๆ สองอย่างสำหรับตรวจสอบว่าอุปกรณ์และเบราว์เซอร์ใดรองรับบ้าง ได้แก่ caniuse.com และ html5test.com

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

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

เพิ่มประสิทธิภาพเว็บแอปพลิเคชั่นมือถือของคุณให้มีประสิทธิภาพ

“OMG สิ่งนี้ช้ามาก!” ในฐานะนักพัฒนาเว็บแอปบนอุปกรณ์เคลื่อนที่ คำเหล่านี้อาจเป็นคำพูดสุดท้ายที่คุณอยากได้ยินจากผู้ใช้รายใดรายหนึ่งของคุณ ดังนั้นคุณต้องคิดอย่างรอบคอบเกี่ยวกับวิธีลดและเพิ่มประสิทธิภาพแต่ละไบต์และการถ่ายโอนเซิร์ฟเวอร์เพื่อลดเวลารอของผู้ใช้ มันไม่สมจริงที่จะคาดหวังว่าการถ่ายโอนจะทำได้เสมอผ่านเครือข่าย WiFi และคุณควรรู้ว่า 60% ของผู้ใช้เว็บบนมือถือกล่าวว่าพวกเขาคาดหวังว่าไซต์จะโหลดบนโทรศัพท์มือถือของตนภายใน 3 วินาทีหรือน้อยกว่า (แหล่งข่าว) ในทำนองเดียวกัน Google พบว่า ทุกๆ เวลาในการโหลดที่เพิ่มขึ้นทุกๆ ห้าวินาที การเข้าชมลดลง 20% (และเป็นที่น่าสังเกตว่าเสิร์ชเอ็นจิ้นพิจารณาเวลาในการโหลดเป็นส่วนหนึ่งของการคำนวณคะแนนคุณภาพของหน้าเว็บ)

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

• การเพิ่มประสิทธิภาพภาพ ความเร็วในการโหลดรูปภาพเป็นที่ทราบกันดีว่าเป็นหนึ่งในปัญหาด้านประสิทธิภาพที่ใหญ่ที่สุดที่ส่งผลต่อการโหลดหน้าเว็บบนอุปกรณ์เคลื่อนที่ การใช้เครื่องมือเพิ่มประสิทธิภาพรูปภาพออนไลน์ เช่น smushit.com จะเป็นประโยชน์ในการแก้ไขปัญหานี้
• การบีบอัดรหัส การบีบอัดไฟล์ JavaScript และ CSS ขึ้นอยู่กับจำนวนโค้ดที่คุณมี อาจส่งผลกระทบอย่างมากต่อประสิทธิภาพการทำงาน
• แบบสอบถามฐานข้อมูล
  • เบราว์เซอร์ในอุปกรณ์มือถือบางตัวไม่ยอมรับคุกกี้มากเท่ากับเบราว์เซอร์เดสก์ท็อป ซึ่งอาจส่งผลให้ต้องดำเนินการค้นหามากกว่าปกติ การแคชฝั่งเซิร์ฟเวอร์จึงมีความสำคัญอย่างยิ่งเมื่อรองรับไคลเอ็นต์เว็บแอปบนมือถือ
  • อย่าลืมใช้ตัวกรองที่เหมาะสมเพื่อป้องกันการแทรกคิวรี SQL ที่อาจส่งผลต่อความปลอดภัยของไซต์และเซิร์ฟเวอร์ของคุณ
• เครือข่ายการจัดส่งเนื้อหา (CDN) หากคุณกำลังวางแผนที่จะจัดเตรียมวิดีโอ รูปภาพ ไฟล์เสียง หรือสื่อประเภทอื่นๆ จำนวนมาก ขอแนะนำให้ใช้ CDN CDN เชิงพาณิชย์ทั่วไปบางรายการ ได้แก่ Amazon S3, Microsoft Windows Azure และ MaxCDN ข้อดีของการใช้ CDN มีมากมายและรวมถึง:
  • ปรับปรุงประสิทธิภาพการดาวน์โหลด การใช้ประโยชน์จากทรัพยากรของ CDN ช่วยให้คุณสามารถกระจายโหลด ประหยัดแบนด์วิดท์ และเพิ่มประสิทธิภาพได้ CDN ที่ดีกว่ามีความพร้อมใช้งานที่สูงขึ้น เวลาแฝงของเครือข่ายที่ต่ำกว่า และการสูญเสียแพ็กเก็ตที่ต่ำกว่า นอกจากนี้ CDN จำนวนมากยังมีศูนย์ข้อมูลที่มีให้เลือกกระจายอยู่ทั่วโลก ทำให้สามารถดาวน์โหลดได้จากเซิร์ฟเวอร์ที่ใกล้กับตำแหน่งของผู้ใช้มากขึ้น (ส่งผลให้มีเครือข่าย hops น้อยลงและดาวน์โหลดเร็วขึ้น)
  • ดาวน์โหลดพร้อมกันมากขึ้น โดยทั่วไปเบราว์เซอร์จะจำกัดจำนวนการเชื่อมต่อพร้อมกันในโดเมนเดียว หลังจากนั้นการดาวน์โหลดเพิ่มเติมจะถูกบล็อกจนกว่าการดาวน์โหลดก่อนหน้านี้รายการใดรายการหนึ่งจะเสร็จสิ้น คุณมักจะเห็นข้อจำกัดนี้ในการดำเนินการเมื่อดาวน์โหลดไฟล์ขนาดใหญ่จำนวนมากจากไซต์เดียวกัน CDN เพิ่มเติมแต่ละรายการ (ในโดเมนที่ต่างกัน) อนุญาตให้ดาวน์โหลดพร้อมกันเพิ่มเติมได้
  • การวิเคราะห์ขั้นสูง CDN เชิงพาณิชย์จำนวนมากมีรายงานการใช้งานที่สามารถเสริมการวิเคราะห์เว็บไซต์ของคุณและอาจให้ปริมาณการดูวิดีโอและการดาวน์โหลดที่ดีขึ้น ตัวอย่างเช่น GTmetrix มีเครื่องมือการรายงานเว็บไซต์ที่ยอดเยี่ยมสำหรับการตรวจสอบและเพิ่มประสิทธิภาพแหล่งที่มาที่โหลดบนไซต์ของคุณ

เครื่องมือพัฒนาเว็บแอปบนมือถือ

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

การเลือก JavaScript Mobile Web App Framework ที่เหมาะสม

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

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

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

ต่อไปนี้คือข้อแตกต่างที่สำคัญบางประการที่ควรพิจารณาเมื่อเปรียบเทียบ jQuery Mobile และ Sencha Touch:

• มองและรู้สึก. โดยทั่วไปแล้ว รูปลักษณ์และความรู้สึกของแอป Sencha Touch จะคมชัดกว่าและเหนือกว่าแอป jQuery บนมือถือ แต่สิ่งสำคัญคือต้องจำไว้ว่าปฏิกิริยาดังกล่าวมีแนวโน้มที่จะเป็นอัตวิสัยสูง
• ความสามารถในการขยาย jQuery Mobile มีส่วนขยายของบุคคลที่สามจำนวนมากและได้รับการออกแบบมาโดยเนื้อแท้ให้ขยายได้สูง ในขณะที่ Sencha Touch เป็นเฟรมเวิร์กที่ "ปิด" มากกว่ามาก
• การสนับสนุนอุปกรณ์ ปัจจุบัน jQuery Mobile กำหนดเป้าหมายไปยังส่วนตัดขวางของอุปกรณ์ที่ใหญ่กว่า Sencha Touch
• HTML “เทียบกับ” จาวาสคริปต์ jQuery ส่วนใหญ่เป็น HTML เป็นศูนย์กลาง (เช่น การขยายและจัดการ HTML ที่มีอยู่ใน JavaScript) ในขณะที่การเข้ารหัส Sencha Touch นั้นใช้ JavaScript ทั้งหมด (นี่คือตัวอย่างโดยบังเอิญของชุดทักษะของทีมพัฒนาที่มีความสำคัญที่ต้องพิจารณาเมื่อทำการเลือกเทคโนโลยีของคุณ)
• การพึ่งพาภายนอก jQuery mobile ต้องการ jQuery และ jQuery UI สำหรับการจัดการ DOM ในขณะที่ Sencha Touch ไม่มีการพึ่งพาภายนอก
• เส้นโค้งการเรียนรู้ นักพัฒนาส่วนใหญ่พบว่าเวลาในการเพิ่ม jQuery นั้นน้อยกว่า Sencha Touch ซึ่งอาจได้รับแรงหนุนจากนักพัฒนาเว็บจำนวนมากที่คุ้นเคยกับไลบรารี jQuery มาตรฐานอยู่แล้ว

Responsive Frameworks และ Mobile Web Applications

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

การตรวจสอบสองตัวเลือกชั้นนำ ได้แก่ Bootstrap และ Foundation ข้อแตกต่างที่สำคัญบางประการที่ควรพิจารณา ได้แก่:

• แพลตฟอร์มเป้าหมาย แม้ว่า Bootstrap จะรองรับอุปกรณ์พกพา แท็บเล็ต และเดสก์ท็อป แต่เน้นไปที่การใช้งานเดสก์ท็อปเป็นหลัก ในทางกลับกัน Foundation ได้รับการออกแบบมาสำหรับขนาดและประเภทหน้าจอทั้งหมด
• ความเข้ากันได้ของเบราว์เซอร์ Bootstrap เข้ากันได้กับ IE7 หรือสูงกว่า ในขณะที่ Foundation เข้ากันได้กับ IE9 หรือสูงกว่าเท่านั้น
• ความหลากหลายของเลย์เอาต์และส่วนประกอบ Bootstrap มีคอลเลกชั่นองค์ประกอบ UI ที่ใหญ่กว่าที่ Foundation นำเสนออย่างมาก
• ปรับขนาดอัตโนมัติ เมื่อใช้ Foundation เส้นกริดจะย่อและขยายตามความสูงและความกว้างของเบราว์เซอร์ปัจจุบัน ในขณะที่ Bootstrap รองรับเฉพาะชุดขนาดกริดที่กำหนดไว้ล่วงหน้าตามชุดขนาดหน้าจอมาตรฐาน

การดีบักและการทดสอบเว็บแอปบนมือถือ

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

ในบริบทนี้ ข้อดีอย่างหนึ่งที่ชัดเจนของการพัฒนาเว็บบนมือถือ (เมื่อเทียบกับการพัฒนาแอปแบบเนทีฟ) คือ คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาบนเบราว์เซอร์มาตรฐานเพื่อแก้ไขข้อบกพร่องของแอปพลิเคชันของคุณ ตามความชอบส่วนตัวของฉันสำหรับการดีบักระยะไกล สิ่งที่ฉันแนะนำในบทช่วยสอนการพัฒนาแอปนี้คือ Chrome ที่มี DevTools ตัวเลือกมาตรฐานอื่นๆ ได้แก่ Firefox พร้อม Firebug หรือเครื่องมือ Dragonfly ของ Opera

เหตุผลบางประการที่ฉันชอบ Chrome ด้วย DevTools ได้แก่:

• โปรแกรมจำลองมือถือใน DevTools ของ Chrome นี่อาจเป็นเหตุผลเพียงพอที่จะเลือก Chrome เพื่อแก้ไขข้อบกพร่องของเว็บแอปบนอุปกรณ์เคลื่อนที่ คุณสมบัติหลัก ได้แก่ การจำลองเหตุการณ์การสัมผัส การปลอมแปลงตัวแทนผู้ใช้ การควบคุมแบนด์วิดท์เครือข่าย การแทนที่ตำแหน่งทางภูมิศาสตร์ การแทนที่การวางแนวอุปกรณ์ และ CSS Media Type Emulation
• ตัวแก้ไขแบบโต้ตอบ ความสามารถในการแก้ไข JavaScript หรือ CSS ได้ทันที
• ดีบักเกอร์ JavaScript ที่เหนือกว่า อนุญาตให้ใช้จุดสั่งหยุด DOM และให้ความสามารถในการกำหนดโปรไฟล์เวลาการเรียกใช้โค้ด JavaScript ของคุณ
• โปรแกรมดู JSON และ XML ในตัว หลีกเลี่ยงความต้องการปลั๊กอินใดๆ เพื่อตรวจสอบการตอบสนองของเซิร์ฟเวอร์
• รองรับโปรโตคอล Android Debug Bridge (ADB) โดยตรงผ่าน USB อำนวยความสะดวกในการสร้างอินสแตนซ์ง่าย ๆ ของเซสชันการดีบักระยะไกล (นี่คือบทช่วยสอนที่ดีโดย Google เกี่ยวกับวิธีเริ่มต้นการดีบักจากระยะไกลใน Chrome)
• การตรวจสอบทรัพยากรแบบไดนามิก ช่วยให้คุณตรวจสอบแหล่งข้อมูลในเครื่องของแอป ซึ่งรวมถึงฐานข้อมูล IndexedDB หรือ Web SQL พื้นที่จัดเก็บภายในและเซสชัน คุกกี้ และทรัพยากรแคชของแอปพลิเคชัน คุณยังสามารถตรวจสอบทรัพยากรภาพของแอปพลิเคชันของคุณได้อย่างรวดเร็ว ซึ่งรวมถึงรูปภาพ แบบอักษร และสไตล์ชีต

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

สรุป

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

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