ความคุ้มในที่นี้คือ balance ระหว่างความเร็วในการ dev และ performance ของระบบ

ตอนนี้ผมใช้ PHP Framework ที่มีตัวช่วยในการ render view เช่น <?php echo form::select('categoryId'); ?> มันก็จะไปดึงรายการที่มีใน table ชื่อ Category มาสร้างเป็นตัวเลือก Dropdown List อัตโนมัติ

<select id="categoryId" name="categoryId"> ... </select>

ช่วยให้เร็วในการสร้าง view และไม่ต้อง bind ค่าลง form เอง แถมมี form validator ที่ช่วยเช็ค input ที่ฝั่ง backend ได้เลย หรือมีพวก Scaffolding อย่าง CakePHP หรือ Yii ที่ช่วย Gen CRUD Form แบบนี้ถือว่าเร็วในการ dev

ในขณะที่ถ้าผมใช้ JS Framework อย่าง AngularJS หรือไม่ใช่ Framework อย่าง React หรือ VueJS แบบนี้จะเร็วในแง่การใช้งานคือ performance แต่ก็เพิ่มงานในขั้นตอนการ dev ที่ต้องรับส่งค่าระหว่าง backend -> frontend เพื่อมา bind ค่าลงใน form เอง แถมต้องแยกการสร้าง form validator ที่ frontend กับ input validator ที่ backend ออกจากกันอีก งานเพิ่มสองเท่า

ข้างบนเป็นการยกตัวอย่างง่ายๆ

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

สองจิตสองใจไม่รู้จะหันไปทางไหน

Hiring! บริษัทที่น่าสนใจ

Carmen Software company cover
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
MuvMi (Urban Mobility Tech Co.,Ltd.) company cover
MuvMi (Urban Mobility Tech Co.,Ltd.)
Shape the future of urban mobility towards affordable, clean, and safe solutions
T.N. Digital Solution Co., Ltd. company cover
T.N. Digital Solution Co., Ltd.
TNDS has been involving in every first move of banking’s major digital transformation.
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
The Gang Technology Co., Ltd. company cover
The Gang Technology Co., Ltd.
We're a Digital Agency that helps our customers transform their business into digital with ease.
LTMH company cover
LTMH
LTMH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

คิดว่า​ในช่วง​ 3-5 ปี, toolset ตัวหลักๆ น่าจะ convert งานไปเป็น​ web assembly กันได้.. เช่นใช้การ drag &​ drop ช่วย generate พวก form ใน toolset ของ .net แล้ว convert ไปเป็น​ web assembly เพื่อเอาไปใช้บนเวบได้เลย ?

ถ้าไม่มีปัญหาเรื่อง Host ก็ลองเล่นดูครับมันดีงามโหลดไว (ส่วนตัวคิดว่าคุ้มนะ) แต่ถ้าไม่สะดวกก็ย้ายเฉพาะ view มารันบน React ส่วนใส้ในก็ PHP เหมือนเดิมก่อนก็ได้มั้งครับ ส่วนเรื่อง Performance ผมว่าลองทดสอบเรื่อง SEO ไปในตัวก็ดีครับ ถ้าใช้แต่ Google คิดว่าไม่มีปัญหาอะไร แต่ถ้าใช้พวก 3rd party แบรนด์ประหลาดๆ ก็ระวังเรื่องจัดลำดับการโหลดหน่อย บางทีมันดึง Content ไปอ่านไม่ได้

คิดว่าจะมีคนมารับงานต่อหรือเปล่าล่ะครับ ?

ถ้าคิดว่ามี ใช้ framework ไปน่าจะมีประโยชน์ในระยะยาวนะครับ (ยกเว้นแต่ว่าดันไปใช้ตัวที่ถูกตัดจบ)

อาจจะมีคนรับงานต่อครับ อย่างไรก็ตามตอนนี้ผมใช้ PHP Framework สำหรับงาน frontend อยู่แล้ว (ให้นึกถึง Blade Template ของ Laravel) ประเด็นคือจะใช้ JavaScript Framework สำหรับ frontend เพื่อเพิ่ม performance และประสบการณ์การใช้งานของ user ดีมั้ย

ข้อเสียที่ผมเห็นชัดตอนนี้คือมันทำให้ dev งานได้ช้าลง เพราะไม่ได้ใช้ความ magic บางอย่างที่ PHP Framework มี

chhopster Tue, 17/04/2018 - 10:49

สมมติ non-ssr
JS Framework ชื่อก็บ่งบอกว่าทุกอย่างจบที่ฝั่ง client ลองนึกภาพตามนี้นะครับ

<?php echo form::select('categoryId'); ?> ได้ selector บรรทัดเดียวจบ เเล้วพ่นออกมาเสร็จตั้งเเต่ฝั่ง server เเต่ถ้าเป็น JS เช่น VueJS ละกัน ผมสร้าง component มาตัวนึงสุดท้ายจังหว่ะ binding โมเดลก็ต้อง echo JSON ลงไปในแท็ค หรือจะใช้เทคนิคเรียกมาจาก AJAX ว่าไป

สมมติ ssr อันนี้ผมซื้อ

เป็นผม

  • ถ้าจะเปลี่ยนทั้งทีคือต้องตอบโจทย์ UX ดีขึ้น -> โหลดทีละส่วน มาเเสดงจบเต็ม 100%
  • เร็วกว่าเดิม 25% คือเปลี่ยนเป็น NodeJS แทน PHP
  • เว็บท่านใช้ JQuery อยู่ไหม ถ้าชีวิตยังต้องใช้ plugin ที่เกาะกับมัน อย่าเปลี่ยนเลย ยาก เพราะสุดท้ายถ้าจะมา import * from JQuery มันตลก
  • มี session คุมหลายจุด -> อย่าเลยเสียเวลา คุณจะไปไม่เต็มถ้าไม่ใช่ ssr (ใช้ท่าเรียก api จาก php ?)

ปล. JS ตอนนี้สามารถ render ฝั่ง server ได้เเล้ว(ssr) เช่น VueJS มี NUXT Framework (ประทับใจที่ความเร็ว)
ปล.2 อนาคตคือ JS มันแทรกไปทุกอณูเเล้ว เขียนแอปก็ JS เว็บก็ JS คุ้มที่จะศึกษา

JavaScript จะให้ UX ที่ดีขึ้น เช่นสามารถทำ form input ที่เป็น conditional และดึงข้อมูลโดยไม่ต้อง load หน้าใหม่ หรือ สร้าง form input เองที่นอกเหนือจากสิ่งที่ browser มีให้ (input, select, checkbox, radio, ฯลฯ)

ถ้าใช้ JavaScript frontend แทนที่จะ render page ก็จะหันมากส่งข้อมูลผ่าน AJAX อาจจะช่วยเรื่อง performance ของ backend ได้ และอาจจะลดเรื่องการต้องเก็บข้อมูลใน session ไปด้วย CakePHP Laravel ฯลฯ มีตัวช่วยในการส่ง data เป็น JSON แทนการ render page อยู่แล้ว

เวลาใช้ AJAX ระหว่างรอ load ข้อมูลก็สามารถแสดง loading animation/spinner/นาฬิกาทราย ได้ อาจจะให้ความรู้สึกที่ดีกว่า web browser load หน้า web ใหม่ สามารถทำ animation ตอนเปลี่ยนหน้าได้ ฯลฯ

สำหรับ CRUD app ถ้าทำได้ทุกอย่างจาก backend และ user OK กับ UX แล้ว JavaScript ไม่น่าจะช่วยอะไร แถมมีข้อดีคือสามารถ support browser เก่าๆ (แบบโคตรเก่า) ได้แน่นอน :D

ผมแนะนำว่าถ้าชอบใช้ PHP framework น่าจะลอง Laravel ซึ่งมี Vue ติดมาให้ด้วย อันนี้น่าจะง่ายที่สุดสำหรับการผสมผสานระหว่า backend rendering กับ AJAX (คือไม่ต้องคิดเอง document ของ Laravel ก็ดีพอสมควร)

ส่วน Server-Side Rendering (SSR) อาจจะไม่จำเป็นถ้าไม่ทำ SEO หรือ user ต้องการ UX ที่ไหลลื่นมากแบบที่รอ JavaScript compile บน browser ไม่ได้ แต่ถ้าจะทำ PHP ก็มี library ที่สามารถทำ SSR ได้

จะย้ายการ render html มาบน client แนะนำให้ดู Handlebars ครับ ตัวนี้เป็น JavaScript template engine ใช้งานแบบคล้ายๆกับ template engine ใน PHP หลายๆตัว. ฝั่ง PHP กับ client คุยกันแค่ JSON เพียวๆไม่ต้องมี HTML เลย(ตาม concept นะ). React / VueJS / Angular คงรับ output จากการ render template มา render ต่อ(คล้ายๆรับ HTML response มาจาก web server).