บทความ IT เจ๋งๆ
Component-Oriented Programming (COP) คืออะไร
19-พ.ย.-19
คัมภีร์เทพ IT
จากการมี Front-End Frameworks ใหม่ ๆ อย่าง React, Angular และ Vue ทำให้เราได้เห็น Paradigm ใหม่ที่ยอดเยี่ยมมากขึ้น มันเป็นที่รู้จักกันในชื่อ Component-Oriented Programming และมันก็สามารถนำ Components กลับมาใช้ใหม่และนำ Code มาปะติดปะต่อกันได้เหมือนอย่างตัวต่อ Lego เรามาหาคำตอบกันว่า Component-Oriented Programming (COP) คืออะไร
สถาปัตยกรรม Component-Oriented ได้รวมเอาหลักการของ Don’t Repeat Yourself (DRY) เข้ามาไว้ด้วย เวลาที่เราใช้น้อยลงในการ Repeat ตัวเราเอง ทำให้เราสามารถสร้าง Application ได้เร็วขึ้น ในฐานะของ Software Engineers ด้วย Deadline ที่กำหนดไว้ การได้รับประโยชน์จากสิ่งนี้ อาจเป็นสิ่งสำคัญในการสร้างความพึงพอใจให้กับเจ้านาย/บริษัทได้
Component-Oriented Programming มีหน้าตาอย่างไร
หากคุณรู้จัก Front-End Frameworks ใหม่ ๆ อย่างเช่น React, Angular หรือ Vue คุณอาจรู้อยู่แล้วว่าสถาปัตยกรรมที่อิงกับ Component เป็นอย่างไร นี่คือตัวอย่างของ Header Component:
อย่างที่คุณเห็นเรากำลัง Import Components รวมทั้งการเรียบเรียงและวางพวกมันเหมือนก้อนอิฐเพื่อ Modify ชิ้นส่วนหนึ่งของ Application ซึ่งในกรณีนี้คือ Header
การแก้ปัญหา Component-Oriented Programming
COP เป็น Concept ที่ทรงพลังมาก เพราะมันช่วยให้เราสามารถ Isolate และ Encapsulate Logic ได้ ยิ่ง File ของเรามีขนาดเล็กเท่าใดก็ยิ่งสามารถ Maintain ได้ง่ายขึ้นเท่านั้น มีเหตุผลที่ดีที่ Facebook ต้องคิดค้นและแก้ไข Bugs ของ Notification
ย้อนกลับไปในช่วงปี 2014-2015, Notification จะเป็นสิ่งเตือนว่าคุณมี Notification ใหม่ ๆ แต่เมื่อคุณคลิกที่สัญลักษณ์ระฆังสรแดงของ Notification แล้ว มันจะไม่แสดง Notification ใหม่ สิ่งนี้ได้จุดประกายความไม่พอใจไปทั่ว Internet สาเหตุของ Bug นั้นไม่สามารถแก้ไขได้ นั่นเป็นเพราะความยุ่งเหยิงของ File และ PHP Code นี่ไม่ใช่การจงใจที่จะวิจารณ์ PHP ในแง่ลบ ที่จริงมันใช้งานได้จริงและเป็นวิธีที่ยอดเยี่ยมในการเริ่มต้นทำสิ่งใดก็ตาม มีเป็นไปได้ที่จะเขียน Code ที่ยุ่งเหยิงไม่ว่าจะในภาษาใดก็ตาม ดังนั้นในกรณีนี้จึงเกิดปัญหาขึ้นใน PHP
React ถูกคิดค้นขึ้นเพื่อแก้ไขปัญหาที่เกี่ยวข้องกับ Notification และการเกิดของ Library นั้นถือเป็นจุดเริ่มต้นของยุคใหม่ ซึ่งยุคนั้นเรียกว่า Component-Oriented Programming (COP)
จากการคาดการณ์ในอนาคตเชื่อว่าจะเป็น Native Web Components มากยิ่งขึ้น ณ ตอนนี้แต่ละ Framework มี Ecosystem ของ Tooling, Components, Libraries เป็นของตัวเอง แม้ว่าจะมีประโยชน์อย่างยิ่งในการนำ Open-Source Code กลับมาใช้ใหม่ แต่ปัญหาคือ Ecosystem ของแต่ละระบบจะปิดกั้นตัวเอง หากคุณเคยใช้ React คุณจะถูกปิดกั้นด้วย Version ของ Code คุณไม่สามารถใช้เครื่องมือ Angular กับ Vue หรือ Svelte ได้ ซึ่ง Native Components Web API จะเปลี่ยนแปลงสิ่งเหล่านั้นทั้งหมด ลองคิดถึงความเป็นไปได้ ว่ามันจะดีแค่ไหนหากเราสามารถ Share Library ทั้งหมดระหว่างกันได้
Web Components API
อีกไม่นาน เราจะมี Unified API สำหรับ JavaScript Libraries และ Framework ทั้งหมดเพื่อสามารถ Share Code กันได้ คุณเขียน Code เพียงครั้งเดียวและสามารถนำมันกลับมาใช้ใหม่ได้ Web Components API จะช่วยให้เราสามารถทำสิ่งต่าง ๆ ได้มากมาย นี่ดูเหมือนจะเป็นปุ่มง่าย ๆ ที่ใช้ Web Components API:
Web Component เป็นการ Inherit ส่วนของ Code ในรูปแบบ Class ลองสังเกตวิธีที่เรา Extend ปุ่มของเราเพื่อ Inherit the HTMLElement Class
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Web Components สามารถศึกษาได้ที่ Mozilla Documentation เนื่องจาก Mozilla มี Web Components ที่ถูกเขียนมาค่อนข้างดี
ครั้งต่อไปที่คุณคิดจะแก้ปัญหา ก็ลองใช้วิธีแก้ปัญหาด้วย Mindset ของสถาปัตยกรรมและการแก้ปัญหาที่อิงกับ Component ดู สถาปัตยกรรมที่อิงกับ Component เป็นทางเลือกที่ดีเมื่อคุณกำลังเจอกับความซับซ้อนมากขึ้น ยิ่งเจอกับความซับซ้อนมากขึ้นเท่าไหร่ คุณก็ควรจะแบ่งมันออกเป็นชิ้นเล็ก ๆ
การรองรับ Browser สำหรับ Web Components API
API กำลังได้รับการสนับสนุนมากขึ้น แต่จงรู้ไว้ว่า มันเป็น Technology ที่ถือว่ายังอยู่ในช่วงพัฒนาและทดลองใช้อยู่ อีกทั้งไม่มีใครรู้ว่ามันจะถูกตั้งให้เป็นมาตรฐานเมื่อใดและอย่างไร แต่มันก็ดีเสมอที่จะอยู่ในแวดวงและเปิดหูเปิดตาของคุณให้พร้อมสำหรับ Technology ใหม่ ๆ ที่เกี่ยวข้องกับ Programming
แต่ไม่ต้องกังวลไป คุณไม่ต้องเรียนรู้ API หรือ Technology อื่นเลย เนื่องจากมีการเปลี่ยนแปลงอย่างรวดเร็วใน JavaScript Demographics แต่มันน่าจะดีหากคุณเพิ่ม Toolbox ที่มีประโยชน์เข้าไปเพื่อให้คุณมีความรู้มากขึ้น
ที่มา: https://medium.com/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด