ออกแบบเว็บแอปพลิเคชันอย่างไรดีที่สุด?

การออกแบบเว็บแอปพลิเคชัน

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

โครงสร้างการ ออกแบบเว็บแอปพลิเคชัน ที่ควรจะเป็น

การออกแบบเว็บแอปพลิเคชัน เราควรผลักภาระมาไว้ที่ฝั่ง Front-end ให้มากที่สุดเท่าที่จะมากได้ แล้วเหลืออะไรก็เอาไปไว้ที่ฝั่ง Server โดยคุยกันผ่าน API เนื่องจากปัจจุบันงานหลายๆ อย่างสามารถทำที่ฝั่ง Client ได้ทันที เพราะการเข้ามาของเทคโนโลยี HTML5 และพลังประมวณผลของ Device ที่เพิ่มขึ้นนั่นเอง (มือถือสมัยนี้แรงกว่าคอมเมื่อ 10 ปีที่แล้วเสียอีก)

ปัจจุบันมี Tools ช่วยทำ Front-end Application มากมาย ที่คุ้นหูกันดีก็คงหนีไม่พ้น ReactJS, AngularJS และที่มาแรงฉุดไม่อยู่อีกตัว VueJS แนวทางการออกแบบโครงสร้างเว็บแบบนี้ พี่ใหญ่เค้าก็ทำกันมาทั้งนั้น อย่าง ReactJS นี่ก็ของ Facebook มาที่ AngularJS นี่ก็ของ Google
อย่าง LinkedIn เค้าก็มี DustJS เหมือนกัน เว็บระดับโลกเค้ามาทางนี้กันหมดเลย

ดังนั้นงานแรกหลังจากที่เราเก็บ Requirements มาแล้ว เราจะให้ Front-end Developer เข้ามาช่วยประเมินดูก่อนว่าอะไรที่ทำบนฝั่ง Client ได้ แล้วที่เหลือ ก็ไปทำฝั่ง server สิ่งสำคัญที่ควรตระหนักไว้อีกข้อหนึ่งก็คือ “อย่าไว้ใจ Input จากฝั่ง Front-end” ควรวางแผนให้ดีว่าอะไรที่ API ต้อง Validate ก่อน

ออกแบบเว็บแอปพลิเคชัน

“Front-end Application มีไว้อำนวยความสะดวกให้ User ใช้ API ได้ง่ายขึ้นเท่านั้น”
ตรงนี้สำคัญมาก ไม่ว่าเว็บจะเล็กหรือใหญ่ เราก็ควรทำ Cache ไว้ เพราะเราไม่มีทางรู้หรอกว่าวันไหนเว็บเราจะเป็น Viral ขึ้นมา อย่างน้อยถ้ามันจะตายไป ก่อนตายมันก็ควรรับ Traffic ได้มากๆ ก่อน ไม่ใช่เข้าแค่ 30 คนก็ตาย

ออกแบบเว็บแอปพลิเคชัน

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

1.User Friendly

ออกแบบเว็บแอปพลิเคชัน พอเมื่อเว็บเราคุยกันผ่าน API แล้ว นั่นแปลว่าหลังจากที่ Document Ready ต่อไปเมื่อมีการเปลี่ยนหน้า ตัว Front-end Application มันก็จะทำการ ajax เอาแค่เนื้อหาส่วนที่เปลี่ยนแปลงไป โดยไม่จำเป็นต้องไปไล่โหลดทั้ง index.html ไฟล์ css ทุกไฟล์ ไฟล์ javascript ทุกไฟล์กันใหม่อีกรอบ เหมือนเว็บยุค 5 ปีที่แล้ว ผลก็คือเว็บดูเหมือนจะโหลดไวขึ้นมาก เหตุผลแรก เพราะจำนวน request น้อยลง เหตุผลที่สอง เราสามารถทำ loading indicator มาเบี่ยงเบนความสนใจ user ได้

2.Team Friendly

จะเห็นได้ว่า เรามีการแบ่งเว็บออกเป็นสองส่วนหลักๆ อย่างชัดเจน คือฝั่ง Front-end กับฝั่ง API ดังนั้นการแบ่งงานจึงสามารถทำได้ง่าย ไม่ต้องปวดหัวกับการแก้ Conflict ใน git กันอีกต่อไป (มาทะเลาะกับทีมฝั่งใครฝั่งมันแทน ฮา)

3.High Maintainability

ปัญหาฝั่ง Front-end ก็ถูกจำกัดไว้อยู่ที่ฝั่ง Front-end ในขณะที่ปัญหาฝั่ง API ก็ถูกจำกัดไว้ที่ฝั่ง API เช่นเดียวกัน – ในทางซอฟต์แวร์นั้นเรารู้ดีว่าการแบ่ง Layer ออกมาดีๆ ทำให้การบำรุงรักษานั้นทำง่าย เนื่องจากสาเหตุหลักที่ทำให้การบำรุงรักษาเกิดความยากนั้นเกิดจากการแก้แล้วไปกระทบกับส่วนอื่น การแบ่งเว็บออกเป็นสองส่วนจึงช่วยป้องกันการแก้ไขแล้วไปกระทบกันได้เป็นอย่างดี

4.Flexible

วันดีคืนดี เบื้องบนสั่งลงมาให้เปลี่ยนหน้าตาเว็บได้แล้ว เบื่อแล้ว หากเป็นการทำเว็บแบบเดิมๆ นี่แทบจะต้องรื้อทำใหม่เลยทีเดียว ต่อให้เป็น MVC ก็เถอะ ยังไงก็กระทบ C ไม่มากก็น้อยเพราะอาจต้องมี action ใหม่ๆ เพิ่มมา แต่หลังจากที่เราออกแบบเว็บเป็นสองฝั่งแบบนี้ ฝั่ง API เราก็ไม่ต้องทำอะไร มาแก้ฝั่ง Front-end ก็พอ ลดงานที่ต้องทำลงไปได้มากเลย

5.Scalable

ข้อนี้สำคัญที่สุด สมมุติตอนแรกเป็นโปรเจคเล็กๆ เราจึงเลือกใช้ภาษา PHP, MySQL ทำ API เนื่องจากคุ้นมืองานจะได้เสร็จไวๆ แต่ต่อมาเว็บเป็นที่นิยม มีคนเข้าชมเยอะขึ้นมากๆ จน PHP เริ่มจะไม่ไหวแล้ว เราก็สามารถทำ API ขึ้นมาใหม่ด้วยเทคโนโลยีที่ Lean กว่า Scale ได้ง่ายกว่าได้ทันที (เช่น ใช้ NoSQL แทน หรือใช้ Golang แทน) พอทำเสร็จก็สลับ DNS ชี้ไปที่เซิร์ฟใหม่ได้แบบเนียนๆ User ไม่รู้สึกตัวด้วยซ้ำ โค้ดฝั่ง Front-end ก็ไม่ต้อง

สำหรับท่านใดที่สนใจปรึกษาการตลาดวางแผนการตลาดออนไลน์ และ การทำ SEO สามารถติดต่อปรึกษาได้ที่บริษัท BlackCat Agency Co.,Ltd เบอร์โทรศัพท์ : 088-981-2997 / 087-9881250 (Email : blackcatcnx.info@gmail.com ) Line : @Mr.Blackcat ลองมาปรึกษาก่อนได้นะครับ ทำการตลาด

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *