Day: July 15, 2015

  • รู้จักกับ Algebraic Specification

    สวัสดีครับ

    หลังจากใช้เวลานานในการคิดว่าจะเขียนอะไรดี ก็คิดได้ว่านำเอาความรู้ที่ได้จากการไปเรียนทบทวนเรื่องวิศวกรรมซอฟต์แวร์มาเล่าสู่กันฟังดีกว่า เรื่องที่จะเล่านี้ก็คือ การเขียน Specification ในรูปแบบหนึ่งซึ่งอาจจะใหม่สำหรับบางคน เรียกว่า Algebraic Specification (ชื่อภาษาไทยว่าอะไร ไปหาเอาเองนะครับ)

    Algebraic Specification เป็นรูปแบบหนึ่งของ Formal Specification (อย่าเพิ่งงงนะครับ) ในการเขียน specification รูปแบบนี้จะใช้คณิตศาสตร์เข้ามาช่วยเพื่อให้เห็นการติดต่อระหว่าง module หรือ component ที่ชัดเจน

    แล้วมันต่างจากที่เขียนอยู่ยังไง?

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

    ดังนั้นจึงมีผู้ปราดเปรื่องบางท่านคิด Algebraic specification ขึ้นมาซึ่งหน้าตาเป็นดังนี้

    ARRAY (Elem: [Undefined -> Elem])
    sort ArrayImports INTEGER
    DescriptionArrays are collections of elements of generic type Elem. They have a lower and upper bound (discovered by the operations First and Last). Individual elements are accessed via their numeric index.Create takes the array bounds as parameters and creates the array, initializing its values to Undefined. Assign creates a new array which is the same as its input with the specified element assigned the given value. Eval reveals the value of a specified element. If an attempt is made to access a value outside the bounds of the array, the value is undefined.
    OperationsCreate (Integer, Integer) -> ArrayAssign (Array, Integer, Elem) -> Array

    First (Array) -> Integer

    Last (Array) -> Integer

    Eval (Array, Integer) -> Elem

    AxiomsFirst (Create (x, y)) = xFirst (Assign (a, n, v)) = First (a)

    Last (Create (x, y)) = y

    Last (Assign (a, n, v)) = Last (a)

    Eval (Create (x, y), n) = Undefined

    Eval (Assign (a, n, v), m) =

    if m < First (a) or m > Last (a) then Undefined

    else

    if m = n then v

    else Eval (a, m)

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

    “สิ่งมีชีวิตสามารถกินอะไรก็ได้ที่กินได้”

    Eat (Life, Eatable)

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

  • Icon Font

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

    search-iconActions-document-save-all-icon

     

     

     

    ในส่วนของการใช้งาน Font บนเว็บไซต์นั้นสามารถอ่านได้จากบทความ @font-face ครับ กล่าวโดยสรุปแบบง่ายๆ คือ Font เป็นข้อความที่ใช้นำเสนอข้อมูลบนเว็บไซต์ครับ และการพัฒนาเว็บไซต์ในปัจจุบันนี้ได้มีสิ่งที่น่าสนใจเกิดขึ้น เมื่อมีการนำ Icon และ Font มารวมกัน คือการทำ Icon ให้เป็น Font หรือการสร้างตัวอักษรที่มีรูปร่างเป็น Icon เรียกใช้งานผ่าน CSS class แล้วแสดงผลเหมือนเป็นรูปภาพรูปหนึ่ง ข้อดีของการทำแบบนี้คือเราสามารถจัดการเรื่องขนาด และสีได้ด้วยการใส่ CSS อย่างง่ายได้

    Icon Font ใน Bootstrap Framework

    Bootstrap Framework ที่นิยมใช้งานกันอย่างแพร่หลายก็ได้จัดเตรียมคอมโพเน้นต์ที่เป็น Icon Font ให้ใช้งานด้วยเหมือนกัน โดยจะใช้ชื่อว่า Gryphicons (http://getbootstrap.com/components/#glyphicons) ประกอบด้วย Icon ต่างๆ มากมายดังรูป

    gryphicons

    วิธีการใช้งานก็ไม่ยาก แค่กำหนด CSS class ให้กับแท็ก <span> ดังตัวอย่างนี้

    gryphicons-class-example

    Font Awesome

    font-awesome

    Font Awesome เป็นแหล่งรวม Icon Font ที่น่าสนใจมากอีกแหล่งหนึ่ง มี Icon สวยๆ ให้เลือกมากมาย วิธีการติดตั้งมี 2 วิธีเช่นเดียวกับการเรียกใช้งาน CSS ทั่วไป ดังนี้

    1. ติดตั้งผ่าน MaxCDN Bootstrap ในแท็ก <head> ดังนี้

    <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

    1. ดาวน์โหลดจากเว็บ http://fortawesome.github.io/Font-Awesome มาติดตั้งบนเว็บไซต์ของเราได้โดยตรง และติดตั้งในแท็ก <head> ดังนี้

    <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”>

    วิธีการใช้งานให้ใช้ผ่านแท็ก <i> หรือ <span> เช่น

    <i class=”fa fa-camera-retro”></i> fa-camera-retro

    ก็จะทำให้ได้ Icon รูปกล้องถ่ายรูปดังรูป

    camera-icon

    ท่านสามารถศึกษาเพิ่มเติมได้จากตัวอย่างในเว็บนี้ครับ http://fortawesome.github.io/Font-Awesome/examples

  • @FONT-FACE

    การใช้ฟอนต์นำเสนอข้อมูลข่าวสารบนเว็บไซต์ หรือ Web Typography ในยุคแรก นั้น Browser จะเป็นตัวกำหนดว่าจะนำเสนอด้วยฟอนต์อะไร ทำให้การแสดงผลในแต่ละ Browser ไม่เหมือนกัน ต่อมาใน HTML2 ได้มีการเพิ่มแท็ก <font> เข้ามา และใน CSS2 ก็อนุญาตให้เราสามารถกำหนดฟอนต์ได้เอง แต่ปัญหาที่เจอคือฟอนต์ที่เราเลือกใช้จะต้องถูกติดตั้งบนเครื่องฝั่งผู้ใช้ด้วย ดังตัวอย่างการกำหนดรูปแบบ font ด้วย CSS2 ดังนี้

    body { font-family: Gill, Helvetica, sans-serif }

    เมื่อ Web Browser อ่านเจอ CSS ดังกล่าว อันดับแรกก็จะดูว่าฟอนต์ที่ชื่อ Gill ถูกติดตั้งไว้ในเครื่องแล้วหรือยัง ถ้าติดตั้งแล้วก็จะแสดงผลเว็บไซต์ด้วยฟอนต์ Gill แต่ถ้ายังไม่ได้ติดตั้ง Browser ก็จะมองหาฟอนต์ตัวถัดไปคือ Helvetica และ sans-serif ตามลำดับ

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

    อะไรๆ ก็ง่ายขึ้นด้วย @font-face

    ถือว่าเป็นข่าวดีของนักพัฒนาเว็บไซต์เป็นอย่างมาก เมื่อ CSS3 ได้กำหนด @font-face ไว้ใน specification ด้วย ทำให้การใช้ฟอนต์บนเว็บไซต์มีความหลากหลายมากยิ่งขึ้น

    @font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ฟอนต์ที่ไม่ได้ถูกติดตั้งไว้บนเครื่องฝั่งผู้ใช้ได้ โดยให้ระบุแหล่งที่อยู่ (src) ของไฟล์ฟอนต์ไว้ใน Style Sheet ดังนี้

    @font-face {

    font-family: myFirstFont;

    src: url(‘www.mydomain.com/sansation_light.woff’);

    }

    จากโค้ดเมื่อ Web Browser อ่านเจอก็จะไปโหลดฟอนต์ตามที่อยู่ที่ระบุไว้มาใช้งาน ทำให้เราสามารถกำหนดฟอนต์ได้ตามต้องการ

    ปัญหาต่อมาที่เจอคือแต่ละ Web Browser นั้นรองรับไฟล์ฟอนต์ในรูปแบบ (format) ที่แตกต่างกันออกไป ในโค้ดตัวอย่างใช้รูปแบบ Web Open Font Format (woff) รูปแบบอื่นที่มีการใช้งานกันได้แก่ EOT (Embedded OpenType), TrueType Font (ttf), Open Type Font (otf) และ Scalable Vector Graphics (SVG) เป็นต้น โดยแต่ละ Browser รองรับรูปแบบไฟล์ต่างกันดังรูป

    font-browser-supportที่มา : www.w3schools.com

    แล้วทีนี้เราจะเขียน CSS อย่างไรให้รองรับทุก Browser ล่ะ? คำตอบก็คือ ให้เราระบุแหล่งที่อยู่ของไฟล์ฟอนต์ (src) แต่ละรูปแบบต่อท้ายเข้าไปเลยดังนี้

    @font-face {

    font-family: myFirstFont;

    src: url(‘sansation_light.woff’);

    src: url(‘sansation_light.woff’) format(‘woff’),

    url(‘sansation_light.eot) format(‘embeded-opentype’),

    url(‘sansation_light.ttf) format(‘truetype);

    }

    จากโค้ดในส่วนของ format จะเป็นตัวบอก Browser ว่าไฟล์ที่ระบุตรงกับรูปแบบที่รองรับหรือไม่ ถ้าตรงก็โหลดมาใช้งาน แต่ถ้าไม่ตรงก็จะไม่โหลดลงมาให้เปลือง Banwidth

    แล้วจะหาไฟล์ฟอนต์ได้จากไหน?

    อ่านมาถึงตรงนี้แล้ว หลายคนอาจจะกังวลว่า แล้วจะหาไฟล์ woff, eot, ttf เหล่านี้ได้จากไหน? คำตอบคือให้ทำตามขั้นตอนดังนี้

    1. ดาวน์โหลดฟอนต์ในรูปแบบ ttf ที่ต้องการก่อนครับ แนะนำเว็บไซต์ f0nt.com จะมีฟอนต์ภาษาไทยสวยๆ ให้เลือกมากมาย และที่สำคัญคือสามารถใช้ได้ฟรี ไม่มีค่าลิขสิทธิ์
    2. เข้าเว็บไซต์ http://www.font2com/
    3. ให้อัพโหลดไฟล์ฟอนต์ที่เตรียมไว้ แล้วคลิกปุ่ม Convert & Download ได้เลยครับ จะได้เป็นไฟล์ zip มา ข้างในประกอบด้วยไฟล์ css, demo.html และไฟล์ฟอนต์ต่างๆ ให้เราเอาไปใช้งานได้เลยครับ

     

  • ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

    สวัสดีค่ะ จากบทความที่แล้ว ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC ได้กล่าวถึง ASP.NET MVC ไปบ้างแล้วว่าคืออะไร ในส่วนของบทความนี้จะแนะนำการเริ่มต้นสร้าง Project เพื่อพัฒนา Web Application ด้วย Microsoft Visual Studio 2013 โดยใน MVC5 ซึ่งเป็นเวอร์ชันล่าสุด ได้มีการติดตั้ง Bootstrap มาให้ในตัว ช่วยให้การพัฒนาในส่วนของ View สามารถเรียกใช้งาน Bootstrap class ร่วมกับ Razor syntax(จะกล่าวถึงในบทความถัดไป) ในการแสดงผลหน้า View ได้ง่ายขึ้นและทำให้สามารถรองรับหลากหลายอุปกรณ์ที่มีหน้าจอที่มีขนาดแตกต่างกันออกไป โดยที่เราไม่ต้องเสียเวลาติดตั้งเพิ่มเอง

    Tools & Environment 

    • Microsoft Visual Studio 2013
    • Microsoft .Net Framework 4.5
    • ภาษาที่ใช้ในการพัฒนา Visual C#

    Step 1: เปิด Visual Studio ขึ้นมา และคลืกที่ New Project

    รูปที่ 1


    Step 2: ที่เมนูด้านซ้ายให้เลือก Visual C# > Web >ASP.NET Web Application และตั้งชื่อ Project ดังรูปที่ 2 หลังจากนั้นให้กดปุ่ม OK

    รูปที่ 2
    Step 3: เลือก Template Web โดยเลือกเป็น MVC หลังจากนั้นกด OK
    รูปที่ 3
    Step 4: Check และ Update เวอร์ชัน Bootstrap
    สังเกตที่ solution explorer ฝั่งด้านขวา ที่โฟลเดอร์ Content และโฟลเดอร์ Scripts จะพบไฟล์ Css และ JavaScript ของ Bootstrap ติดตั้งมาให้เรียบร้อยแล้ว
    รูปที่ 4
    ตรวจสอบเวอร์ชันของ Bootstrap ว่าเป็นเวอร์ชันล่าสุดแล้วหรือยัง โดย คลิกขวา ที่ Project แล้วเลือก Manage Nuget Packages ดังรูปที่ 5
    รูปที่ 5
    จะปรากฎหน้าต่าง Manage Nuget Package ซึ่งจะแสดง Package หรือ Library  ทั้งหมดที่ตอนนี้ Project เราติดตั้งอยู่ ให้เลือกดูที่ Boostrap และสังเกตคำอธิบายที่ช่องด้านขวา จะแสดงเวอร์ชั่นอยู่ ซึ่งจากรูปที่ 6 เป็น Bootstrap 3.0 ซึ่งเป็นเวอร์ชันปัจจุบันแล้ว หากยังไม่เป็นปัจจุบันจะขึ้นปุ่มให้สามารถ Update เวอร์ชันได้
    รูปที่ 6
     หลังจากนั้นให้ไปดูที่โฟลเดอร์ App_Start > BudleConfig.cs  ดังรูปที่ 7 โดยไฟล์ ฺBundleConfig.cs จะทำหน้าที่ลงทะเบียนเก็บ Path ของไฟล์ Java script และ CSS ต่างๆที่มีการเรียกใช้ในระบบไว้ที่นี่ เพื่อไว้เวลาเราอ้าง Path เราสามารถอ้าง Path ตามชื่อ Bundle ที่เราสร้างโดยไม่ต้องเรียกไปยัง Path File ตรงๆได้
    รูปที่ 7
    Step 5: ทดลอง Run preview ดูหน้าเว็บ
    ก่อนจะรัน ให้ไปที่ โฟลเดอร์ View > Shared >_layout.cshtml ซึ่งเป็น Layout ของระบบ(เทียบกับ Web Form ก็คือ Master Page) จากรูปที่ 8 จะเห็นว่า มีการเรียกใช้ Bootstrap Class ในการจัดวาง Component และ Layout ต่างๆไว้ให้
    รูปที่ 8

    กดปุ่ม Run  เพื่อดูผลลัพธ์ ออกมาดังรูป 9

    รูปที่ 9
    เมื่อทำการย่อปรับเป็นขนาด Mobile หน้าเว็บก็จะปรับตามขนาดของหน้าจอของอุปกรณ์ที่แสดงผลดังรูป  เป็นอันเสร็จเรียบร้อย ^^
    ——–End——-
    บทความถัดไป : เป็นการแนะนำการเริ่มต้นสร้างส่วนของ Model ในการติดต่อกับฐานข้อมูล  >> ASP.NET MVC Part3: สร้าง Model ด้วย Entity Framework
  • ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC

    สวัสดีค่ะ วันนี้ผู้เขียนจะมาแนะนำให้รู้จักกับแนวทางการพัฒนา Web Application ด้วย ASP.NET MVC ก่อนหน้านี้ผู้เขียนจะพัฒนา Web Application ด้วย ASP.NET Web Forms มาตลอด และช่วงที่ผ่านมา ผู้เขียนเองมีโอกาสได้ศึกษาและทำความเข้าใจกับ ASP.NET MVC มาซักระยะหนึ่ง จึงมาเขียนบทความเล่าสู่กันฟังเกี่ยวกับ การพัฒนา Web Application ด้วย ASP.NET MVC ซึ่งในบทความนี้ อ้างอิงและแปลมาจากบทความ WebForms vs MVC ซึ่งจะประกอบไปด้วย

    • ASP.NET คืออะไร?
    • ASP.NET Web Forms คืออะไร?
    • MVC คืออะไร?
    • ASP.NET MVC คืออะไร?
    • เปรียบเทียบระหว่าง Web Forms และ MVC
    • เลือกใช้อะไรดี ระหว่าง Web Forms และ MVC ?

    ASP.NET คืออะไร?

       คือ Web application framework ที่ถูกพัฒนาโดย Microsoft สำหรับนักพัฒนาในการพัฒนา web application ขึ้นมา โดยโปรแกรมด้วยภาษา C#,VB.NET และอื่นๆ ณ ปัจจุบัน มีอยู่ 2 รูปแบบในการเลือกใช้พัฒนา ได้แก่ Web Forms และ MVC
    ASP.NET Web Forms คืออะไร?
    คือ framework ในการพัฒนา web application ที่ถูกออกแบบมาในลักษณะ RAD(Rapid Application Development) คือ สามารถพัฒนา Web application ได้อย่างรวดเร็ว โดยใช้วิธีการลาก control มาวางบนพื้นที่ design หน้า page และเขียน code ภายใต้ control เหล่านั้น โดยอาศัย concept การทำงานของ Postback(การส่งข้อมูลไปมาระหว่าง server และ client) และ ViewState(การเก็บค่าให้คงไว้ระหว่างการทำ postback)
    วิธีการสร้างหน้า page ของ Web Forms
    การทำงานของ Web Forms

    MVC คืออะไร?
    คือ design pattern ที่ใช้ในการสร้าง Web Application แนวความคิดของ MVC design pattern จะจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation) เพื่อให้สะดวก รวดเร็ว และง่ายขึ้น ในการสร้าง พัฒนา และขยายระบบเพิ่มเติม รวมถึงมันจะทำให้เราทดสอบ application นี้เป็นส่วนๆได้โดยไม่กระทบ หรือกระทบน้อยที่สุดกับส่วนอื่น โดย MVC ย่อมาจาก Model, View และ Controller

    Model คือ คือส่วน Business Model หรือส่วนที่ติดต่อกับฐานข้อมูล
    Controller คือ ส่วนควบคุมและรับ request จาก user มาและไปดึงข้อมูลจาก Model มาเพื่อแสดงผลข้อมูลกลับไปยัง user ที่ส่วน View
    View คือ ส่วนที่แสดงผลข้อมูล

    ASP.NET MVC คืออะไร?
    คือ framework ในการพัฒนา web application ที่ถูกออกแบบให้รองรับ MVC pattern โดยจัดการแยกหน้าที่ขององค์ประกอบใน application ออกเป็นส่วนๆ(separation of concerns) ด้วยการจัดการที่แยกออกเป็นส่วนๆ ทำให้การทดสอบระบบ(Unit Testing)ที่ซํบซ้อน ทำได้ง่ายขึ้น

    วิวัฒนาการ ASP.NET Framework

    การทำงานของ ASP.NET MVC

    เปรียบเทียบระหว่าง Web Forms และ MVC
    1. Web Forms
    ข้อดี

    •      Web Form support Rich server control คือ มี control ฝั่ง server มาให้ใช้งานมากมายและหลากหลาย
    Tool box Control ที่ ASP.Net Web Forms เตรียมไว้ให้
    • เป็นการเขียนโปรแกรมแบบ Event Driven Programming คือ การเขียนโปรแกรมในลักษณะว่า “ถ้าเหตุการณ์นี้เกิดขึ้น เราจะให้โปรแกรมของเราจัดการกับเหตุการณ์นั้นๆ อย่างไร”  สำหรับ ASP.NET Web Forms จะมีตัวช่วยในการเขียนลำดับเหตการณ์ ประกอบด้วย Code behind,กลไก postback ตัวเอง และ ViewState ซึ่งด้วยวิธีการนี้ นักพัฒนาไม่จำเป็นต้องพึ่งพา Get/Post method ในการติดต่อกับ Server
    ตัวอย่าง Code Behind ภายใต้เหตุการณ์หลังจากการกดปุ่ม
    • Rapid Application Development จากการที่ Web forms มีการเตรียม Server control มาให้ใช้มากมาย และการเขียนโปรแกรมในลักษณะ Event driven จึงช่วยให้การพัฒนา Application เป็นไปได้รวดเร็วขึ้น ตัวอย่างเช่น นักพัฒนาสามารถลาก control Button(ปุ่ม) มาวาง และ double click เพื่อเขียน code logic การทำงานเข้าไปได้เลย โดยไม่จำเป็นต้องรู้การทำงานเบื้องหลังของ event นั้นๆ ก็สามารถสร้าง Application ให้ทำงานได้
    • Less Learning Effort จากการที่ Web forms มีการเตรียม Server control มาให้ใช้มากมาย และประกอบกับมีการทำงานด้วย ViewState ทำให้ผู้พัฒนาที่มี Skill ทางด้าน HTML และ Java script เล็กน้อย ก็สามารถสร้าง Application ขึ้นได้

    ข้อเสีย

    • Project Architecture 
                 code ทุกอย่างจะอยู่ภายใต้ code behind ซึ่งจะผูกติดกันอย่าแน่นหนากับ หน้า UI
    • Unit Testing  เนื่องจากภายใต้ code behind ที่มีจำนวน event ที่เยอะมาก ทำให้การทำ automatic unit testing ทำได้ยาก
    • Performance ด้วยการที่ Web forms ใช้ ViewState ในการเก็บค่าต่างๆของหน้า page ส่งผลให้ ขนาดของ ViewState ใหญ่ขึ้น ทำให้ performance ของระบบลดลงไปด้วย
    • Reusability  เนื่องจากการผูก code behind เข้ากับ UI ทำให้การ reuse code ทำได้ยาก
         จากรูป หากเราต้องการ binding ข้อมูลในลักษณะเดียวกับกับ Customer ทุกอย่างให้กับ UI อื่นๆ เราก็จะต้องสร้าง method binding ที่เหมือนกันกับในรูปขึ้นมาอีก เนื่องจาก code ถูกผูกเข้ากับ control gridview คนละตัวกัน
    • Less control over HTML control ที่มี่อยู่อาจไม่ support การทำงาน จำเป็นต้องนำเอา java script framework เข้ามาใช้ร่วมด้วย เช่น Jquery, AJAX เป็นต้น

    2. MVC

    ข้อดี
    Project Structure แบ่งแยกส่วนต่างๆ ของ code ออกจากกันชัดเจน
    • Test Driven Development and Reusability
      • ด้วยการแบ่งส่วนการทำงานของ code ออกจากกันชัดเจน ทำให้สามารถทำ Unit Testing ได้ง่ายขึ้น
      • Controller ไม่จำเป็นต้องผูกกับ View ใด View หนึ่ง สามารถ reuse ใช้ได้กับหลายๆ View ได้
    • Performance ใน MVC จะไม่มี ViewState และ event ทำให้ลดขนาด page size ลงไป ทำให้ได้ performance ที่ดีกว่า
    • Full control over HTML ใน MVC ไม่มี server control มาให้เหมือน Web Forms ทำให้เราสามารถใช้ control ของ HTML และ java script ได้อย่างอิสระ
    • SEO,URL Routing and REST มีการเรียก url แบบ REST service และการทำ SEO(Search Engine Optimization) ง่ายกว่า
    •  Support Parallel Development  ใน MVC มีการแบ่งส่วนการทำงานออกจากกันชัดเจน ทำให้ผู้พัฒนาสามารถพัฒนาคู่ขนานกันไปได้ เช่น คนที่รับผิดชอบส่วน View ก็ทำส่วน Design wxพร้อมกับที่ทำส่วน Controller ได้เลย ไม่จำเป็นต้องรอใครทำเสร็จก่อนแล้วจึงจะทำต่อได้

    ข้อเสีย

    • More Learning Effort จำเป็นต้องมีประสบการณ์ในการทำ web application มาพอสมควร เนื่องจากจะไม่มี ViewState, Event และ Server control ที่อำนวยความสะดวกเหมือนใน Web Forms
    • ไม่มี server control ให้ลากวาง เหมือนใน Web Forms ต้องเขียน HTML ขึ้นมาเอง

    เลือกใช้อะไรดีระหว่าง Web Forms และ MVC?

        ในการพัฒนา web application เราจำเป็นต้องพิจารณาจากหลายๆปัจจัย เช่น หากเราต้องการ web application ที่ต้องการให้เสร็จเร็วและง่าย ก็ควรเลือกใช้แบบ Web Forms เนื่องจาก Web Forms ถือว่าเป็น RAD(Rapid Application Development) คือ เตรียมทุกอย่างมาให้พร้อมที่จะพัฒนาได้เลยเช่น Server control,ViewState,Event เป็นต้น แต่หากเราต้องการพัฒนา web application ที่ซับซ้อนและต้องการ performance ที่ดี ประกอบกับทีมพัฒนามีความรู้ทางด้านการพัฒนา web application เป็นอย่างดี ก็ควรเลือกใช้ MVC มาเป็นตัวเลือกในการพัฒนา

    ที่มา: https://www.facebook.com/photo.php?fbid=685327044884788

    ในบทความถัดไปจะแนะนำการเริ่มต้นสร้าง web application ด้วย ASP.NET MVC ร่วมกับ Bootstrap >> ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

    อ้างอิง :

    • http://www.codeproject.com/Articles/528117/WebForms-vs-MVC
    • http://www.codeproject.com/Articles/821275/Webforms-vs-MVC-and-Why-MVC-is-better