ข้อเปรียบเทียบระหว่าง Asp.net Webform และ Asp.net MVC
บทความนี้นำเสนอ การเปรียบเทียบ ระหว่าง asp.net webform และ asp.net MVC ให้เห็นข้อแตกต่าง รวมถึงเหตุผลที่ทำไม Microsoft ถึงออกแพลตฟอร์มในการทำเว็บตัวใหม่ออกมา ทั้งๆที่หลายคนเข้าใจว่า ตัว asp.net webform นั้นดีที่สุด แท้จริงแล้ว มันดีจริงๆหรือไม่ อย่างไร
Asp.net Webform
คือ เทคโนโลยีของไม่โครซอร์ฟ ที่มีมาให้ใช้อย่างแพร่หลายมายาวนาน เมื่อ 5 ปีที่แล้ว หากพูดถึง Asp.net เราก็จะนึกถึงเจ้าตัว webform นี้กัน ซึ่งหลักการทำงาน จะเป็นไปตามรูปแบบการทำงานของ เว็บไซด์ทั่วไป ที่เรารู้จักกันดี แต่สิ่งที่ทำให้มันเป็นที่แพร่หลายคือ การที่ Microsoft ใช้รูปแบบการสร้างแบบเดียวกับ window app มาเป็นมาตรฐาน ดังรูปที่ 1
รูปที่ 1 การสร้างControl ใน asp.net webform
Events เจ้าตัว Events นี้แหละที่เป็น คีย์ที่ทำให้มันง่าย และรวดเร็ว เนื่องจากเราสามารถลากโน่น นี่ นั่น มาวาง แล้วใช้การกำหนด Events มาเป็นตัวบอกว่า เมื่อทำโน่น แล้วให้เกิดอะไร หรือ เมื่อ คลิ๊กนี่และจะทำอะไร โดนผู้พัฒนาจะสามารถเขียนโค้ทได้จากส่วนโค้ทเบื้องหลังที่ตัว Visual studio สร้างให้(Code Behind) ซึ่งมันใช่เลย ง่ายต่อการศึกษาและ สร้างผลงานมาก ดังรูปที่ 2
รูปที่ 2 Events Driven development บางคนเรียก Visual basic model
ขอยกตัวอย่างข้อดีของ webform ดังนี้
- มี server control ให้ใช้มากมาย ลากวางๆ ดังรูปที่ 3
รูปที่ 3 server control
- มี viewstate ในการจัดเก็บข้อมูลไว้ที่เพจ เมื่อมีการpostback ของเพจ
- การเขียนโปรแกรมแบบ Events เป็นหลัก อย่างที่อธิบายไปข้างต้น ง่ายต่อการจัดทำเว็บไซด์
- ด้วยการที่มันง่ายต่อความเข้าใจ จึงทำให้ได้ความเร็วในการสร้างผลงานตามมา
- ด้วยการใช้ server control และ viewstate โปรแกรมเมอร์สามารถจัดทำเว็บได้ด้วย ความสามารถทางด้าน HTMLและ Javascript ที่ไม่ต้องมากมายนัก
จะเห็นว่า ข้อดีของ asp.net webform นั้นเป็นอะไรที่สะดวกและสบายมาก นี่ยังไม่ได้รวม Ajaxtoolkit ที่ช่วยให้เว็บไซด์ของคุณ ทำงานแบบ AJAX ได้ด้วย แต่ในขณะที่เราอิ่มเอม และทรนงกับสิ่งที่เรามีหลายคนหลงลืมไปว่า โลกนั้นไม่เคยหยุดหมุน ค่ายอื่นๆเองก็มีการพัฒนาอยู่ตลอดเช่นกัน และยิ่งไปกว่านั้น ในความภูมิใจของเราเองก็มีข้อเสียซ่อนอยู่เช่นกัน
ข้อเสียของ webform
- ไม่มีโครงสร้างที่แน่นอน บางคนก็สร้างด้วยการแบ่งเลเยอร์ อย่างชัดเจน(Presentation – businesslogic -dataaccess) บ้าง นิยมชมชอบ MVP ,MVVM หรือบ้าง ก็ เขียนทุกสิ่งไว้ในที่เดียวกัน (นรกของการ MA)
รูปที่ 4 one may have any structure
- Unit test ทุกวันนี้ การทำ unit test เป็นหัวข้อที่โปรแกรม หลายคนพยายามผลักดัน จนเกิดเป็น pattern ชื่อว่า TDD ซึ่งมันคืออะไรนั้น ขออนุญาติแยกเป็นอีกหัวข้อนึง แต่จะบอกคร่าวๆ ว่ามันคือ การเทสโพรเสทการทำงาน ของโปรแกรม ในรูปแบบต่างๆ ซึ่ง การจะเทสโคทเหล่านี้ได้นั้น จะต้องมีการเขียน โคทที่รองรับการทำเทสด้วย ซึ่ง การทำงานของเว็บฟอร์ม ที่มีการใช้ events เป็นตัวขับเคลื่อน เป็นไปได้มากที่ โปรแกรมเมอร์จะเผลอเรอ เขียนโคทที่ไม่สามารถทำเทสได้ ดังรูปที่ 5
รูปที่ 5 เขียนทุกอย่างลงใน Events อย่างนี้ แล้วเวลาเอา method ไปเทส จะเอาค่าที่ไหนไปใส่ให้มันกันล่ะเนี่ย
ตัวอย่างการทำเทสที่ผูกด้วย Events
รูปที่ 5.1 การเรียกหน้าเว็บฟอร์มมาเทส
รูปที่ 5.2 Error ที่เกิดจากการเทส Events ในเว็บฟอร์ม
- ประสิทธิภาพ ที่ด้อยลง เนื่องจาก webform จะเก็บข้อมูลลง viewstate เพื่อ คงค่าไว้เวลาที่มีการทำ postback ซึ่งในส่วนนี้ มีผลต่อ ประสิทธิภาพของตัว browser ด้วย(กินแรมเพิ่ม)
- การ reuse ของโค้ท หลายคน เรียกใช้ พวกปุ่ม ฟอร์ม กริทวิว รวมถึง usercontrol ที่ทำขึ้นเอง ในเนื้อโคทส่วนประมวลผล ซึ่งเค้าไม่รุ้เลยว่า การทำแบบนั้น มันทำให้คุณสมบัติการ reuse หมดไป เนื่องจาก เราไม่รู้เลยว่า อีกที่หนึ่ง หรืออีกโปรเจคหนึ่ง มันจะมี สภาพแวดล้อม เหมือนที่นี้ที่เราเรียกใช้หรือไม่
- เว็บฟอร์ม เวลาสร้างขึ้น หน้าดีไซด์ และหน้า codebehind จะผูกกันอย่างแน่นหนา ซึ่งหากจะบอกว่า ให้แบ่งดีไซด์ ให้อีกคนทำ แล้วโคทเบื้อหลังต้องให้อีกคนทำ วิธีการคงไม่พ้น ให้หนึ่งคนทำเสร็จ แล้ว ส่งไฟร์ไป copy ทับอีกที่หนึ่ง ว้าว…ไฮเทคโนโลยีจริงๆ (ประชด)
รูปที่ 5.3 การยึดกันของหน้าดีไซด์ และ Code behide ติดกันเหมือนปลาท่องโก๋
จะเห็นว่า มีข้อดีข้อเสียหลายแบบ ที่ซ่อนอยู่ในพื้นฐานการทำงานของเราทุกวันนี้ ที่เรารู้บ้าง และไม่รู้ ในการเขียนโปรแกรม การออกแบบแล้วสร้างที่ว่ายากแล้ว แต่สิ่งที่ยากไม่แพ้กันคือ การดูแลรักษา หากโค้ทเดิมถูกเขียนอยู่ในรูป สปาเก็ทตี้ดีไซด์ แน่นอนว่าใครที่มาอ่านโค้ทเรา ต้องร้องยี้……กันเป็นแถว หรืออาจเป็นตัวเราเองที่ต้องกลับมารื้อโค้ทตัวเอง ดังนั้น เพื่อให้เกิด แพทเทิ้ลในการ โค้ทไปในทิศทางเดียวกัน(ชาวบ้านเค้าทำกันมานานละ) MS จึงได้ออกตัว ASP.net MVC ออกมาให้เราพิจารณาเลือกใช้
MVC
MVC คือ แพทเทิ่ลในการออกแบบโปรแกรม ตัวหนึ่งในหลายๆตัวที่มีในโลกนี้ ซึ่งได้ถูกอธิบายครั้งแรกในปีคศ. 1979 โดย Trygve Reenskaug ซึ่งในระหว่างนั้นได้ทำงานเกี่ยวกับภาษา Smalltalk ที่บริษัท Xerox PARC. การนำไปใช้แบบดั้งเดิม ได้ถูกอธิบายอย่างละเอียดในเปเปอร์ที่สำคัญชื่อ “Applications Programming in Smalltalk-80: How to use Model–View–Controller”. [1]
โดยที่ MVC นั้นย่อมาจาก Model –View –Control ซึ่งมันคือ แพทเทิ่ลๆ หนึ่งที่ใช้แยกส่วนการทำงานของระบบ ให้แยกออกจากกันอย่างชัดเจน และไม่ได้ถูกจำกัดแค่อยู่บน .NET เท่านั้นแต่สามารถใช้ได้กับหลายภาษา ไม่ว่าจะเป็น PHPที่มี Framework MVC จำนวนมาก JAVA เองก็เช่นกัน และ.NET ที่มี .NET Framework คอย Provide ไว้ให้ ซึ่งหากจะอธิบายรายละเอียดของโมเดล คร่าวๆได้ดังนี้
- Model คือ ส่วนโครงสร้างของการจัดการกลุ่มคลาสข้อมูลทางธุรกิจของระบบ ซึ่งกลุ่มคลาสที่ถูกสร้างไว้ในส่วนนี้จะถูกใช้ ในการส่ง/รับ ไปยัง controller เพื่อประมวลผล หรือ view เพื่อแสดงผลก็ได้
- View คือ ส่วนของการแสดงผล หรือก็คือ user interface นั่นเอง
- Controller คือ ส่วนของการประมวลผลของระบบ ซึ่งเมื่อต้องการข้อมูลเพิ่มเติมเพื่อวิเคราะห์ ก็จะวิ่งไปหาที่ Model และเมื่อเสร็จกระบวนการวิเคราะห์ ก็จะเรียก view เข้ามารวมกับmodel ที่เป็นผลลัพธ์ แล้วคอมไพล์ให้ออกเป็น html เพื่อส่งไปแสดงผลยัง browser ของผู้ใช้
รูปที่ 6 รูปแบบโครงสร้างขของ MVC
ASP.Net MVC
MVC นั้นคือ แนวคิด แต่ asp.net MVC นี้สามารถจับต้องได้จริง และแตกต่างจาก asp.net webform อย่างเห้นได้ชัด จะเรียกว่าเป้น บางท่านเรียก MVC เฟรมเวิร์คเลยก็มี เพราะการมาของ มันทำให้เราลืมคอนเซ็ปการเขียนโคทดังเดิมของ webform ไปได้เลย มันสามารถกระจายความซับซ้อนออกจากกันได้อย่างชัดเจน ซึ่งกรรมวิธีเหล่านี้ทำให้เราสามารถ แยกเทสระบบได้อย่างอิสระมากขึ้นอีกด้วย
รูปที่ 7 Asp.net MVC
ข้อดีของ ASP.net MVC
- โครงสร้างของโปรเจค มีแบบแผนเดียวกันทั้งระบบ โดยรูปแบบ MVC มั้นมีการแยกส่วนของปัญหากันอย่างชัดเจน ซึ่งมีผลให้ความซับซ้อนของปัญหาลดน้อยลงด้วย
รูปที่ 8 โครงสร้างโปรเจค แบบ MVC
- ทำเทสและ รียูสได้ง่าย สำคัญมากเนื่องจาก ยุคนี้การทำ test โดยโปรแกรมเมอร์เอง ที่เทสลงไปในระดับ Method ได้นั้น เป็นที่นิยมมากจนมี tool มาสนับสนุนมากมาย ดังนั้น การเขียนให้สนับสนุนเทสด้วยนั้น จึงมีความสำคัญ
รูปที่ 9 หน้าตาของ Method ใน Controller
- ประสิทธิภาพ ที่ดีขึ้นเพื่องจากไม่มีการใช้ viewstate ดังนั้น เพจไซด์ที่brrowser จึงมีขนาดเล็กลง
- net MVC ไม่สนับสนุน server control โดยจะใช้ control ดั้งเดิมของ HTML ในการทำหน้าเว็บและใช้ javascript มากขึ้น ซึ่งความสามารถด้าน Javascript และ html นั้นเป็นพื้นฐานของคนทำเว็บไซด์อยู่แล้ว จึงสะดวกต่อการสร้างงาน
- ด้วยความที่ net MVC แยกเลเยอร์กันอย่างชัดเจน จึงสะดวกต่อการทำงานเป็นทีมอย่างที่สุด
- เนื่องจากการเข้าถึงเว็บไซด์ที่เป็น NET MVC จะเป้นการเข้าไปเรียก Method จากใน Controller ก่อน แล้วจึงนำ view มา Render พร้อม Model ออกเป็น HTML เพื่อส่งไปยัง Browser ดังรูปที่ 10 ของผู้ใช้ ดังนั้นการเข้าถึงจึงมีURL ที่สะอาดกว่า Webform ดังรูปที่ 11
รูปที่ 10 การทำงานคร่าวๆ ของ ASP.NET MVC
รูปที่ 11 ตัวอย่าง Request ที่สะอาดขึ้น
- ตัวNET MVC ยังใช้ ASP.net Framework ของเว็บฟอร์มเช่นกัน ดังนั้นหลายๆคุณสมบัติหรือความสามารถที่ ASP.NET Webform มีเกือบทั้งหมด บน ASP.NET MVC ก็สามารถใช้ได้เช่นกัน
- ด้วยความที่ NET MVC จะทำงานที่ Controller ก่อนจะเลือก view มา response ส่งให้ user เราสามารถเลือกให้ controller ไม่ต้องเลือก view แต่ให้ส่งกลับเป็น JSON, Stream หรืออื่นๆได้
ข้อเสียของ ASP.net MVC
- ด้วยรูปแบบเดิมๆของเว็บฟอร์ ที่มี Events และ Viewstate นั้นทำให้การข้ามมาใช้ NET MVC นั้น หากไม่เปิดใจแล้วล่ะก็ ค่อนข้างลำบากและขัดใจพอสมควร
การเลือกใช้
โลกนี้ไม่มีสิ่งใดสมบูรณ์แบบ เทคโนโลยีก็เช่นกัน ขึ้นอยู่กับปัญหาที่มีว่าเหมาะสมกับเทคโนโลยีแบบไหน และพื้นฐานของทีมก็เป็นตัวตัดสินด้วยเช่นกัน ดังนั้นแล้ว ไม่ว่าจะตัดสินใจเลือกสิ่งใด ด้วยเหตุผลใดก็ตาม มี 2 สิ่งที่ต้อง พิจารณาอยู่เสมอ คือ
- ความรวดเร็วในการพัฒนา – หากว่าเราต้องการความรวดเร็วในการพัฒนา ลูกค้าจ่ายน้อย application ระยะสั้น และไม่สนใจการ maintenance แล้วล่ะก็ webform เป็นทางเลือกที่ดี
- Unit test – ถ้าการทำ automatic test สำคัญสำหรับงานของเรา MVC เองก็เป็นทางเลือกที่ดี
นอกจากนี้ การเปรียบเทียบถึงความเป็นไปได้ว่าจะเลือกใช้ เทคโนโลยีตัวไหนถึงเหมาะสมนั้น องค์ประกอบของทีมเป็นสิ่งสำคัญ คำถามมากมายที่เราควรคำนึงถึงก่อนตัดสินใจ เช่น
- ทีมของเรา มีความคุ้นเคยกับ webform หรือ winform หรือไม่ หากมีการทำ MVC อาจใช้เวลามากเกินไป ในการพัฒนาเว็บหนึ่งตัว แต่หากเป็นโปรเจคใหญ่ ก็ต้องคำนึงถึงความเหมาะสมด้านอื่นๆอีกด้วย webform +1 แต้ม
- ทีมเคยทำ MVC หรือไม่ หากเคย MVC ก็เป็นอะไรที่เหมาะสม MVC +1 แต้ม
- ทีมมีความคุ้นเคยกับ การทำงานด้วย HTTP GET หรือ POST หรือไม่ หากใช้ MVC +1 แต้ม เพราะ ตัว NET MVC นั้นใช้หลักการ POST GET เป็นหลักในการทำงาน
- ทีมมีความคุ้นเคยกับ Javascript หรือไม่ หากใช่ MVC +1 แต้ม เพราะการที่ NET MVC ทำงานกับ HTML โดยตรง จึงเป็นธรรมชาติกับ javascript มากกว่า server control ของ Microsoft
- ต้องการ ประสิทธิภาพมากไหม หากเจอกรณีที่ ทรัพยากรมีจำกัด การออกโปรเจคที่เบาต่อเครื่อง server ที่สุดย่อมดีที่สุด(lightweight) จุดนี้ MVC +1 แต้ม
- มีแผนการทำ reuse หรือไม่ webform สามารถเขียน class ให้ทำ reuse ได้ แต่ขึ้นอยู่กับระเบียบวินัยในการเขียนโค้ทด้วย แต่ตัว NET MVC นั้นโครงสร้างบังคับให้สามารถทำเทสได้โดยตรง ยิ่งถ้าโปรแกรมเมอร์ ทำโค้ทอยู่บนดีไซด์แพทเทิ่ลที่เป็นมาตรฐานแล้ว เราสามารถสลับเปลี่ยนตัวโปรแกรมเมอร์ได้อย่างสะดวกมากขึ้นอีกด้วย
อ้างอิง
[2] http://8itguy.blogspot.com/2014/05/aspnet-mvcc-1.html
[3] http://www.codeproject.com/Articles/528117/WebForms-vs-MVC
[4] นี่เป็นคำตอบของ คุณนาย ซึ่งเป็น MVP ของไมโครซอร์ฟ ทางด้าน ASP.NET MVC ครับ ตอบไว้ภายใต้คำถามที่ว่า ทำไมถึงต้องใช้ asp.net MVC แล้วมันดีกว่ายังไง ซึ่งตอบไว้เมื่อ 28 กค 51 ครับ ซั่งตอนนั้นยังเป็น MVC เวอชั่น 1 อยู่ครับ ปัจจุบัน เวอชั่น 5 ครับ และเวอชั่น 6 พึ่งเปิดตัวเป็น preview พร้อม visual studio 2015 ครับ
[5]วีดีโอ แนะนำว่า 2 ตัวนี้ดีกว่าอย่างไร
https://www.youtube.com/watch?feature=player_embedded&v=n8YKw-YZaSI
Coding Everywhere 
ใส่ความเห็น