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

Framework คือ

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

Library คือ

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

แล้ว Framework และ Library มันต่างกันยังไงนะ

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

แต่การที่เราจะใช้ framework นั้น เราจำเป็นต้องรู้ว่าโครงร่างของมันเป็นแบบไหนและทำงานยังไง เพราะเราไม่สามารถเรียกชุดคำสั่งโค้ดใน framework ได้ แต่ framework จะเป็นคนเรียกโค้ดเราเองเมื่อเรากำหนดพฤติกรรมของโค้ดเราให้ตรงกับโครงร่างของมัน เช่นถ้าเราใช้ Bootstrap การกำหนดชื่อ class ของ element เราให้ตรงกับโครงร่างของ Bootstrap จะทำให้โค้ดใน Bootstrap เรียกโค้ดของเราเอง

เราจำเป็นต้องใช้ Framework หรือ Library จริงๆ หรอ

ถ้าเป็นงานที่คนเป็นโปรแกรมเมอร์จริงๆ ทำกัน ทุกๆ งานล้วนใช้ framework และ library ทั้งนั้นครับ เพราะมันช่วยประหยัดเวลาและลดความผิดพลาดที่ไม่ควรเกิดขึ้นได้ง่ายๆ ต่อให้เป็นบริษัทไอทีที่ใหญ่และมีคนเก่งแค่ไหน ไม่ว่าจะ Google Microsoft Apple และอื่นๆ ล้วนใช้ framework และ library เพื่อช่วยในการโค้ดทั้งนั้น กฏข้อใหญ่ของโปรแกรมเมอร์ก็คือ

Don't reinvent the wheel หรือ อย่าพยายามสร้างสิ่งที่คนอื่น คิด ค้นพบ จนตกผลึกแล้วตั้งแต่เริ่มต้น

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

ตัวอย่างการทำ button (ปุ่ม) สวยๆ ในเว็บ

ก่อนใช้ Bootstrap

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover,
.btn:focus {
  text-decoration: none;
}
.btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.btn:not(:disabled) {
  cursor: pointer;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

หลังใช้ Bootstrap

<button type="button" class="btn btn-primary">ปุ่มสวยๆ</button>

ผลลัพธ์

จะเห็นได้ว่าได้ผลลัพธ์เหมือนกันทั้งสองโค้ด แต่เมื่อใช้ framework Bootstrap ทำให้โค้ดเราสั้นลงเยอะ ทำให้ประหยัดเวลาและลดโอกาสความผิดพลาดจากโค้ดเราด้วย

ทิ้งท้าย

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

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

ขอขอบรูปภาพจาก Pexels และข้อมูลจาก https://martinfowler.com/bliki/InversionOfControl.html