Wall of Text #13: CGI

น้อง Intern บอกว่ากำลังหัดเขียน Web server อยู่ เลยสงสัยว่าแล้วจะทำให้ Web server รันโปรแกรมที่เป็น dynamic ได้ไง (สมมุติว่า Python)

เรื่องที่น่าแปลกใจคือคนรุ่นใหม่เหมือนจะไม่มีประสบการณ์ใช้งาน PHP กันแล้ว เข้าใจว่าบางมหาวิทยาลัยนอกเหนือจาก Top 5 อาจจะยังมีการสอนอยู่บ้าง ตอนที่โชว์ให้ดูว่า PHP มันวางไฟล์แล้วใช้ได้เลยนี่มันเลยดูเท่มาก เพราะถ้าเขียนภาษาอื่นๆ อย่างน้อยก็ต้อง restart app server

CGI

ในสมัยโบราณ WWW มีแต่หน้าเว็บ static ต่อมาเราอยากให้หน้าเว็บมีการอัพเดตบ้าง เลยมีผู้ที่ออกแบบมาตรฐาน CGI ขึ้นมาเพื่อให้ Web server สามารถเรียกโปรแกรมอื่นได้

การทำงานของ CGI ก็ง่ายมาก คือเรากำหนดว่าที่ URL นี้แทนที่จะส่งไฟล์กลับไปให้ ให้เรียกโปรแกรมที่กำหนดให้ ที่นิยมกันก็คือจะกำหนดเป็น folder /cgi-bin ไปเลย

เมื่อเราเข้า URL ที่อยู่ใน cgi-bin แล้ว Web server จะไปเรียกโปรแกรมนั้นๆ โดยส่ง Header ไปทาง Environment variable และส่ง Request body ไปเป็น input ของโปรแกรม จากนั้นโปรแกรมจะ print สิ่งที่ต้องการให้แสดงบนหน้าเว็บออกมา ถ้าต้องการเซต Header มาด้วยก็ให้ print ก่อนเนื้อหาได้

วิธีนี้ค่อนข้างนิยมในสมัยก่อน ภาษาที่ใช้เขียนก็ได้ทุกภาษาขอให้เรียกเป็นโปรแกรมได้เท่านั้น เช่น C, Perl, PHP ก็ใช้ได้ทั้งหมด

ยกตัวอย่างเช่น Pantip ในยุคแรกใช้ภาษา Perl ในการพัฒนา ในหน้ากระทู้นั้นจะเป็น HTML ธรรมดาๆ เมื่อมีการโพสต์ comment ก็จะไปเรียก Perl script เข้าไปแก้ไขไฟล์ HTML (ซึ่งปัญหาที่ตามมาคือเมื่อ concurrent มากๆ แล้ว Script อาจจะแย่งกันเขียนทำให้ไฟล์พัง)

PHP SAPI

ปัญหาของ CGI คือทุกครั้งที่มีการเรียก CGI Script จะต้องเรียก process ย่อยๆ นั้นใหม่ ซึ่งถ้าเขียนด้วย C ก็ไม่มีปัญหาเท่าไร แต่บางภาษาอาจจะ start ช้ามากๆ เช่นสมัยก่อนผมเคยใช้ Python แล้วเซตไม่ถูกเลยไปใช้ CGI ก็เสียเวลา start python ทุก request เกือบ 2 วินาที

มันก็มีคนแก้ไขปัญหานี้หลายๆ ทาง อันหนึ่งคือก็เอา PHP ไปฝังไว้กับ Web server เลย โดย PHP จะมีส่วนที่เรียกว่า SAPI (Server API) ซึ่งเป็น library ที่เข้าไป integrate กับ web server (เช่น Apache) ให้เมื่อมีการเรียกหน้าที่กำหนดแล้วจะไปเรียก PHP API ที่สั่งให้ script ทำงาน

วิธีนี้ทำให้ไม่ต้อง start PHP ใหม่ทุก process เพราะ PHP จะอยู่กับ web server ไปเลย

ข้อเสียหลักๆ ของการทำแบบนี้คือ

  1. PHP library ไม่ได้พัฒนาให้ thread safe ดังนั้นจะใช้ Apache ได้แค่ใน mode prefork (แยก process แทน thread) ซึ่งเปลือง memory กว่า
  2. Code จะถูกรันด้วยสิทธิ์ของ web server ซึ่งในกรณีที่ใช้ share hosting แล้วจะทำให้เราสามารถเข้าไปอ่าน/แก้ไขไฟล์ของ user อื่นๆ บนเครื่องได้ทุกคน
  3. รัน PHP ได้แค่ version เดียวต่อ web server (ในกรณีที่มี legacy code ที่อัพเวอร์ชั่นไม่ได้)

ถึงใน PHP จะมีข้อจำกัดเยอะ แต่ในช่วงประมาณปี 2008 ที่คนเริ่มสนใจ Python/Ruby ทั้งสองภาษาก็ยัง deploy ด้วยท่านี้ได้ด้วย mod_wsgi หรือ Phusion Passenger

FastCGI

ท่าที่ค่อนข้างเวิร์คกว่าในการ Deploy web application คือ FastCGI ซึ่งเป็น standard อีกตัวหนึ่งที่เข้ามาแทน CGI

การทำงานของ FastCGI คือให้ web application นั้นเปิด socket ไว้ (อาจจะเป็น UNIX socket หรือ TCP ก็ได้) แล้ว Web server จะส่งต่อ request เข้ามาใน socket และเอาผลลัพท์กลับไปแสดง

วิธีนี้ทำให้เราสามารถ scale application server / web server แยกกันต่างหากได้ และรันเป็นคนละ user เพื่อความปลอดภัยได้

ปัจจุบันท่าที่นิยมใช้ Deploy PHP บน nginx ก็จะใช้ php-fpm ซึ่งจะรับ FastCGI connection เข้ามาประมวลผลด้วย PHP และช่วยจัดการเพิ่มลด process ให้อัตโนมัติ

Reverse proxy

ถ้า FastCGI คือการที่เรารับ HTTP request แล้วแปลงเป็น FastCGI request ส่งต่อ ทำไมเราไม่ส่ง request จริงไปเลยล่ะ?

ผมเข้าใจว่าท่า Reverse proxy เริ่มดังในช่วงหลังจากที่ Node.js เข้ามาแล้ว เพราะเป็นภาษา interpreted ภาษาแรกที่บอกว่าใช้ web server ในตัวมันรับโหลดได้เลยเพราะมันเป็น async ซึ่งเป็นจุดขายที่ว้าวมากในตอนนั้น

หลังจาก Node.js แล้ว Go ก็เป็นอีกภาษาหนึ่งที่บอกเหมือนกันว่าให้ใช้ web server ในตัวรับโหลดได้เลย

ความแตกต่างระหว่างการเปิด web server กับ FastCGI ที่จะเห็นได้ก็คือ

  • FastCGI เราเชื่อ web server ตัวหน้าทั้งหมด แต่การรันเป็น web server เราจะไม่เชื่อ web server ตัวหน้า ต้องเขียนโค้ดมาประมวลผลอีกที
  • เช่น web server จะมองเห็น IP คนที่ต่อเข้ามาและส่งให้ FastCGI ใน field พิเศษ แต่ถ้าเป็น reverse proxy นั้น application ต้องอ่านจาก X-Forwarded-For อีกทีหนึ่ง ซึ่งก็ต้องระวังความปลอดภัยด้วยเพราะ user ก็สามารถเซต header ได้
  • หรือถ้า web server ตัวหน้าใช้ HTTPS แล้วต่อเข้าด้านหลังด้วย HTTP ธรรมดาจะทำให้ application ไม่ทราบรายละเอียด connection เลยว่าเป็น HTTPS หรือไม่ (นอกจากจะเชื่อตาม header) และไม่สามารถใช้ฟีเจอร์อื่นๆ ได้เช่น Client certificate หรือ check cipher suite
  • Web server ของบางภาษาอาจจะรับโหลดไม่เก่งเท่า Web server จริงๆ เช่น Gunicorn แนะนำให้ใช้ web server คั่นหน้าเสมอ เนื่องจากถ้า client ทำงานช้า (Slowloris attack) จะเสีย thread ไปเปล่าๆ หรือโค้ดในการ serve static file ก็อาจจะไม่เก่งเท่า
  • Protocol HTTP นั้น parse ยากกว่า FastCGI protocol

What comes next

ทั้งหมดด้านบนคือ protocol หลักๆ ที่ยังใช้อยู่ในปัจจุบัน

แต่ในอนาคตก็เป็นไปได้ว่าอาจจะมีวิธีอื่นๆ เข้ามาก็ได้ ท่าที่เห็นในตอนนี้คือ event-driven เสียเป็นส่วนใหญ่

ASGI v1

ผมเคยอวย ASGI v1 มากๆ มันเป็นความพยายามที่จะทำให้ Django กลายเป็น async ทั้งๆ ที่มันเขียนเป็น sync มาทั้งหมด

วิธีการคือ web server ตัวหน้า (ASGI gateway) จะแปลง HTTP request ที่เข้ามาเป็น message แล้วยิงเข้าไปใน message queue จากนั้น ASGI server จะรันตาม request ที่ได้รับแล้วส่งผลลัพท์กลับไปใน message queue เช่นกัน

ท่านี้ผมเห็นครั้งแรกใน Mongrel2 ซึ่งใช้ ZeroMQ

วิธีนี้ยังสามารถประยุกต์ใช้งานกับ protocol อื่นๆ ได้อีก ซึ่งท่าที่ทำให้มันเท่มากคือ WebSocket โดย gateway จะยิง event ต่างๆ เช่น client connected, client message เข้าไปใน message queue ทำให้โค้ด scale ได้ง่ายเนื่องจากไม่มีการ hold connection เลย (นอกจาก MQ)

ด้วยความที่มันรันบน message queue มันทำให้การ scale ต่างๆ เหมือนการ scale message queue ทั่วไป รวมถึงว่าเราสามารถรัน gateway 1 server ที่ใช้ resource ไม่มากแล้วรัน ASGI server หลายๆ server ก็ได้

ปัญหาที่เจอในการใช้งานจริงคือเนื่องจากมันเป็น request-response ในครั้งเดียว web server เลยจะต้องรับ connection ทั้งหมดมาก่อนแล้วค่อยถาม application ว่าเอาไหม ซึ่งจะทำให้เกิดปัญหา queue backlog ยาวและ message queue บางประเภท cancel message ไม่ได้

อีกปัญหาหนึ่งคือถ้า user upload file ขนาดใหญ่มา เป็นปัญหาที่มันแก้ไม่ได้เลย เพราะส่งทั้งไฟล์ไปบน MQ ก็จะ overhead สูงมาก จะเขียนลงเครื่องก็อาจจะอยู่คนละเครื่อง จะเอาไปไว้ใน storage service ก็เพิ่ม dependency

Serverless

ถ้าย้อนกลับไปอ่านข้างบนจะพบว่า Serverless ที่กำลังฮิตอยู่ตอนนี้ จริงๆ มันคือ CGI กลับชาติมาเกิดเป๊ะๆ เลย แล้วปัญหาที่คนใช้ serverless เจออย่าง cold start นาน ก็คือปัญหาเดียวกับ CGI แถมมันยังรับได้แค่ 1 request per instance เหมือนกันด้วย

จะต่างกันแค่ว่า serverless application ไม่โดนบังคับให้ออกหลังจาก serve request จบแล้วแต่จะถูก freeze ไว้แทน ทำให้ครั้งถัดไปไม่เสีย cold start อีก

ไอเดียของ AWS Lambda ผมเข้าใจว่าเค้าน่าจะพยายามทำ code execution สำหรับ event ต่างๆ อยู่ (แบบที่ Twilio มี Functions) แล้วถึงพบว่ามันเอาไปรันเป็น web ได้ทีหลัง เวลาใช้ทำเว็บเลยจะเห็นว่าท่ามันยุ่งยากมาก คือต้องมี API Gateway/ALB แปลง request เป็น event เสียก่อนแล้วค่อยไป call lambda Invoke API ไม่สามารถเรียก function ตรงๆ ได้เลย (อย่างน้อยๆ ก็ต้องเรียกผ่าน Lambda API)

ก็จะเห็นมีแต่ Google Cloud Function ที่ทำกลับกันคือมี HTTP API แล้วเพิ่มให้รองรับ event ผ่าน webhook แทน

Preact Hooks Internal

เดือนที่แล้วนั่งอ่าน Inferno ว่าจะทำ Hook มั้ย

คืออยากหา framework ที่คิดเหมือนเราว่า Hook มันคือ Magic และมัน implement ได้โดยไม่ต้องใช้ Magic นั่นแหละ

ก็ยังไม่รู้ว่า Inferno คิดยังไง แต่ก็มีคนลองๆ ทำอยู่ ซึ่งเค้าก็ไปลอก Preact มาอีกที ไม่รู้ว่าจะเหมือนกับ React มั้ย แต่คิดว่าอ่านแล้วแล้วเข้าใจง่ายดีเลยเอามา blog ไว้หน่อย

useState

ซอร์สของ Preact Hook อยู่ที่ hooks/src/index.js เราจะไล่จากด้านนอกที่เราคุ้นเคยไปก่อนน่าจะง่าย นั่นคือ useState ซึ่งพื้นๆ มาก…

export function useState(initialState) {
	currentHook = 1;
	return useReducer(invokeOrReturn, initialState);
}

ปรากฏว่า useState คือ wrapper บน useReducer ซึ่งก็ทำให้หายสงสัยว่าทำไม React ต้องมี useReducer API ทั้งที่ๆ คนปกติก็จะไปใช้ Redux อยู่แล้ว

ส่วน invokeOrReturn คิดว่าถ้าจำได้ว่า reducer เขียนยังไง แล้ว setState function มันรับอะไรน่าจะพอเดาได้ว่ามัน implement ยังไง

function invokeOrReturn(oldState, f) {
	return typeof f == 'function' ? f(oldState) : f;
}

ง่ายๆ ก็คือมันคืนค่าที่เราเรียกนี่แหละ แต่ถ้า setState เรียกด้วย function มันจะได้ state เก่าเป็น argument แล้วเราคืนค่าใหม่มาแทน

useReducer

export function useReducer(reducer, initialState, init) {
	const hookState = getHookState(currentIndex++, 2);
	hookState._reducer = reducer;
	if (!hookState._component) {
		hookState._component = currentComponent;

		hookState._value = [
			!init ? invokeOrReturn(undefined, initialState) : init(initialState),

			action => {
				const nextValue = hookState._reducer(hookState._value[0], action);
				if (hookState._value[0] !== nextValue) {
					hookState._value = [nextValue, hookState._value[1]];
					hookState._component.setState({});
				}
			}
		];
	}

	return hookState._value;
}

ขอข้าม getHookState ไปก่อนที่จะอธิบายต่อไป

useReducer มี state คือ

  • Reducer function ที่เราส่งเข้าไป
  • Return value ของมันที่ cache ไว้ ก็คือ [state, dispatch] อยู่ใน __value
  • Component instance ซึ่งมันเก็บไว้เรียก setState({}) เพื่อ invalidate view

จะเห็นว่ามันใช้ global state อยู่ 2 อันคือ currentComponent และ currentIndex แล้วใครเซตตัวแปรพวกนี้?

Actual hooks

Preact internal มีส่วนที่เปิดให้ implement functionality เพิ่มเติมได้ซึ่งมันเรียกว่า hook ซึ่งเป็น hook ในความหมายดั้งเดิมคือเราเอา function ไปผูกไว้กับอีกส่วนของ library หรือถ้าใครเขียน Vue มันคือ Hook ในความหมายของ Lifecycle hook นั่นแหละ

Hook ที่เราสนใจคงเป็น _render hook ซึ่งใน docs มันเขียนว่า “Attach a hook that is invoked before a vnode has rendered”

_render hook ของ hook เขียนว่า

options._render = vnode => {
	if (oldBeforeRender) oldBeforeRender(vnode);

	currentComponent = vnode._component;
	currentIndex = 0;

	const hooks = currentComponent.__hooks;
	if (hooks) {
		hooks._pendingEffects.forEach(invokeCleanup);
		hooks._pendingEffects.forEach(invokeEffect);
		hooks._pendingEffects = [];
	}
};

VNode

ถ้าใครเขียน Vue จะเห็นว่า Vue expose VNode API ออกมาให้ด้วย แต่ใน React API ไม่มีให้ใช้เพราะถือเป็น internals

VNode คือ Virtual DOM node นั่นแหละ (Component เราไม่ได้เป็น VNode ตรงๆ แต่จะถูกครอบอีกทีนึง อย่างที่เห็นว่ามันต้อง read vnode._component ออกมาในโค้ดด้านบน)

ฉะนั้นสิ่งที่มันทำก็คือ ทุกครั้งที่เราอยู่บน node ใหม่ มันจะเซฟ currentComponent เก็บไว้ แล้วรีเซต currentIndex เป็น 0

นี่คือ Magic ของ Hook คือแทนที่มันจะเก็บ local state แบบ this.xxx เค้ากลับเลือกที่จะยกออกไปเป็น global ภายในตัว framework

ที่ทำได้เพราะ JavaScript code เป็น single thread (ไม่ต้องกังวลว่ารันโค้ด concurrent แล้วจะมีคนเขียนทับ global) และ Preact rendering ก็เป็น synchronous (ไม่มีแบบว่า render อยู่แล้วสลับไปสลับมา)

ที่น่าสนใจต่อคือ React fiber กำลังจะทำ asynchronous rendering แล้วมัน implement ตรงนี้ยังไงกันนะ?

getHookState

เมื่อกี้เราติด getHookState ไว้

const hookState = getHookState(currentIndex++, 2);

โค้ดของ getHookState คือ

function getHookState(index, type) {
	if (options._hook) {
		options._hook(currentComponent, index, currentHook || type);
	}
	currentHook = 0;

	const hooks =
		currentComponent.__hooks ||
		(currentComponent.__hooks = {
			_list: [],
			_pendingEffects: []
		});

	if (index >= hooks._list.length) {
		hooks._list.push({});
	}
	return hooks._list[index];
}

ส่วนแรกคือ Hook เองเปิดโอกาสให้ใส่ functionality hook เข้าไปได้อีก มันเลยต้องมีตัวแปร currentHook เพื่อบอกให้คนที่เข้ามาต่อรู้ว่ากำลังจะ execute hook ประเภทไหนอยู่ สำหรับค่าต่างๆ มีประกาศไว้ใน type definition

ถัดมามันก็จะอ่าน __hooks บน component ปัจจุบัน หรือสร้างใหม่ ด้านในจะมี array อยู่ซึ่งมันจะอ่านตัวที่ currentIndex ที่ส่งเข้ามา ซึ่งในโค้ด useReducer จะเขียนว่า currentIndex++ ก็คืออ่านค่าปัจจุบันแล้วเลื่อน index ไปลำดับถัดไป

นั่นคืออีก Magic ของ hook ที่ทำให้ function ธรรมดาเรียกสองครั้งแล้วได้ค่าไม่เหมือนเดิม เพราะมันแอบมี global state อยู่นั่นเอง แต่ global state นั้นถูก reset ระหว่าง component ทำให้รู้สึกเหมือนว่ามันเป็น local state

ถ้าถามผมผมก็ยังคิดว่า local state มันควรจะเป็น attribute บน this แล้วใช้ mixin เพื่อ compose behavior ซึ่ง React เคยมีแต่ถอดไปนานแล้ว เพราะมักจะเจอปัญหาตั้งชื่อชนกัน หรือใช้ 2 อันไม่ได้ ใน Hook ก็เลยไม่ให้ตั้งชื่อแล้วทำเป็น index เลื่อนไปเรื่อยๆ แทน

และนี่คือที่มาของกฎของ hook ว่าทำไมห้ามใช้ hook ใน if เพราะลำดับจะเลื่อนไม่ตรงกันแล้ว hook state จะผสมกันมั่ว

ที่น่าสนใจคือ ยังไม่มีตรงไหนบอกว่าทำไม Hook ใช้กับ class component ไม่ได้ ซึ่งถ้าไปอ่าน issue ต้นเรื่อง ทีม Preact บอกว่า

You may be wondering why we mix those and the reason is simply to save some bytes. And yes, this allows hooks to be used in class components! We don’t really advertise that though 👍

บน Preact ใช้ Hook บน class component ได้! (แต่ไม่ใช่ public API)

สรุป

สิ่งที่ Preact Hook ทำคือ

  1. เมื่อกำลังจะ render vdom node ใหม่ ให้เซต currentComponent และเซต currentIndex=0
  2. เมื่อเราเรียก hook มันจะไปอ่าน state บางอย่างบน component ปัจจุบัน
  3. อ่านแล้วมันจะเลื่อน pointer ไปยังช่องถัดไปเพื่อให้ hook ตัวถัดไปได้ state ไม่ตรงกัน

Final thoughts

หลังอ่านจบก็เริ่มสงสัยว่าคนเขียน React สักกี่คนนะที่เชียร์ Hook แล้วเข้าใจจริงๆ ว่า Hook มัน implement อย่างไร (ให้ project เปล่าๆ ห้ามโหลดของจาก npm เขียน Hook ยังไง?)

ก็เกือบไปลองออกเป็นข้อสอบ interview ดู แต่คิดดูอีกทีหนึ่งแล้ว คนที่เขียน Hook ได้คือคนที่แม่น JavaScript (ซึ่งเรา require) แต่นั่นยังไม่ใช่ทั้งหมดที่จะเป็น frontend dev ที่ดีได้ (ยังมีเรื่องอื่นๆ อีกเยอะแยะ เช่น CSS, box layout, sematic markup, web optimization, SEO) มันไม่น่าจะเป็นข้อสอบที่ดีเท่าไร

ในขณะเดียวกัน เอาไปเทส backend dev ก็ไม่ได้เหมือนกันเพราะ React เป็นเรื่องของ Frontend

แล้วใน software team จะให้ role ไหนเป็นคนสร้าง React?

มันเป็นโจทย์ที่ยากมากและ require ความรู้ลึกทั้งฝั่ง backend (โดยเฉพาะ VDOM implementation กับ Suspense) และ frontend เลย หรือนั่นคือนิยามจริงๆ ของ Full stack developer กันนะ