#WEB_DEV_101 : DAY1

ROAD TO FULL STACK WEB DEVELOPER

เพื่อนผมคนหนึ่ง เค้าชื่อต้า

แล้วเพื่อนแนะนำว่า เวลาเรียนรู้อะไร จดขึ้น Blog เก็บไว้ก็ดีนะ เผื่อว่าเวลาเจอปัญหาแล้วเราจำไม่ได้ว่าเราเคยแก้มันยังไง จะได้มาหาดูได้

นี้คือความเข้าใจแบบภาษาบ้านๆ ! เพราะฉะนั้นเขียนไม่ถูกใจ รบกวนแก้ให้ด้วยนะ จะได้เข้าใจถูก 😀

ตอนนี้กำลังหัดเรียนเขียนเว็บแบบจริงๆจังๆอยู่ ควบคู่กับการเตรียมเรียนต่อหุ่นยนต์ 55555

เขียนแบบภาษา Programmer กากๆ ที่พยายามมีความเข้าใจแบบบ้านๆกับทุกๆอย่างละกัน

อธิบายผิด ช่วยแก้ให้ด้วยนะ !!!

คำศัพท์ที่เรียนรู้วันนี้

– Front End = ที่ซึ่งเราใช้ในการแสดงผล หน้าร้าน มีโต๊ะให้คนมานั่ง
– Back End = เหมือนห้องครัว ของเว็บไซต์ ที่เราใช้ประมวลผลบางอย่างแล้วส่งไปแสดงหน้าร้าน เหมือนปรุงอาหาร

ตอนนี้บางอย่าง Front end สามารถประมวลผลได้ด้วย เช่น ลูกค้าอยากจะสั่งออเดอร์อะไร ก็จดๆแล้วส่งไป หรือ จะเป็นร้านอาหารที่ให้ลูกค้าได้ผัดอาหารเอง แบบ Pepper Lunch , DakGalbi ไรทำนองนี้
ทุกอย่างไม่จำเป็นจะต้องเสร็จที่หลังครัวเสมอไป

– Development Environment : คือ แวดล้อมที่เราใช้ในการพัฒนา เช่น localhost (เครื่องเราเองเป็นเซิฟเวอร์เอง) เปิด Database ใช้ที่เครื่องนี้ + Run Webserver เครื่องนี้ (อันที่จริงมันรันเครื่องไหนก็ได้)

– Production Environment : คือแวดล้อมที่เราใช้ Deploy (ลงเว็บไซต์) จริงๆ จะให้ชาวบ้านชาวช่อง เป็นล้านๆมาใช้จริงๆ เพราะฉะนั้น การ Deploy จะมีท่าต่างๆมากมาย(ที่ยังไม่รู้เรื่องและยังไม่ได้อ่านไม่รู้ว่าจะเกี่ยวกับ การ Set Load Balancer ไหม )

อยากจะทำเว็บไซต์ที่มีความ Response และ Interactive กับ User แบบ Realtime (แบบไม่ต้องรอ – ไม่ต้องโหลดหน้าใหม่)

และไหนๆก็ขี้เกียจเรียนภาษาใหม่ๆแล้ว ในการจัดการ Server , Frontend , Backend ขอภาษาเดียวละกัน
อยากจะลองศึกษาอะไรดีหว่า ?

จนกระทั่งเพื่อนแนะนำให้ลอง React

– React = Framework ที่ออกแบบโดย Facebook มีไว้เพื่อ สร้าง Interface (ส่วน FrontEnd สินะ?) ซึ่งสิ่งทีมันพยายามทำก็คือ การ กด Refresh หน้าและเปลี่ยนเนื้อหาที่เปลี่ยนแปลง โดยเราไม่รู้ตัว (คงเป็นอารมณ์ อาหารผุดขึ้นมาโดยที่เราไม่รู้ว่าเขามาเสริฟเมื่อไร 5555)

เพราะเดี๋ยวนี้ Website เวลาจะเปลี่ยนแปลงเนื้อหาภายในมัน เช่น Post กระทู้ หรือ แชทกัน มันไม่ควรมีการโหลดหน้าใหม่ไง เพราะฉะนั้น React จึงพยายามทำให้เราไม่ต้องโหลดหน้าใหม่

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

– ซึ่ง React ใช้ Javascript (เพราะมันเป็น Javascript Library)

– Library คือ ห้องสมุด ตรงตัวมาก จะยกตัวอย่างในเชิง Programming จะออกแนวเป็นคลังของที่เราไม่จำเป็นต้องสร้างขึ้นมาใหม่ หยิบมาใช้ได้เลย แต่ Library จะมีวิธีการเรียกใช้ที่แต่ละเจ้าได้กำหนดมา ก็ต้องอ่าน APi ของ Library เอา

– API คือ Application Interface จะว่าไป Library ก็ถือได้(ลางๆ) ว่าเป็น Application หนึ่ง API คือรายชื่อคำสั่งที่เราจะเรียกแหละ ว่าจะเรียกใช้งาน App (หรือ Library) นั้นๆยังไงดี

หัวข้อ API อาจอธิบายได้แบบแถๆลวกๆ แต่เพื่อความ Beginner เหี้ยๆในการอ่าน ขอละให้เข้าใจแบบนี้ก่อน

ตอนนี้ พอรู้อะไรคร่าวๆแล้ว ก็มาในเรื่องของ Javascript กับ Web

– จริงๆแล้ว Website ต้องมี Server ในการ Run ( เก็บ Frontend , Backend อะไรเถือกๆนี้ )

– การที่จะ Run Server นั้น ก็ต้องมีโปรแกรมที่ใช้ Run “Web” Server ( นึกถึงการเปลี่ยนคอมที่พวกเอ็งๆนั้งเล่นเฟสกันนี้ ให้กลายเป็น คอมที่คนจะเข้ามาดูได้)

– ซึ่งที่ Hit ๆ กันในอดีตคงจะเป็น Stack Apache+MySQL+PHP

– Stack คือ ชุดของระบบที่ใช้ วางกันเป็นชั้นๆ
เช่น ชั้น Database ชั้น Web Server ชั้น Script ของตัวเว็บไซต์ เป็นต้น

STACK ที่เราจะใช้ พัฒนา Website คือ

Viewing -> React
Modeling -> MongoDB
Controller -> React Router ??? , ExpressJS Router
Server -> NodeJS

พัฒนาบนภาษา Javascript (EcmaScript) และใช้ Library ของ ภาษานี้ = NodeJS
ขอข้ามละกัน ง่วงมาก 5555

อุปกรณ์ที่เราใช้พัฒนา

– IDE โปรแกรมที่เราใช้เขียนโปรแกรมอีกที มันก็ถูกมองโง่ๆว่าเป็น Text-Editor นั่นแหละ
จะเขียนโปรแกรมใน notepad ก็ได้ ไม่มีใครว่า 55555 แต่ไอ้ IDE เนี่ย มันจะมี Correction Tools , Deployment Tools อะไรเยอะแยะที่สามารถใช้ได้
ในที่นี้จะลองเล่น InteliiJ IDEA ละกัน มันแจกนิสิตนักศึกษาฟรีอยู่ (เกือบจบก็เนียนเอาได้ – อิ)

– แต่ถ้าชอบแบบดิบๆ ก็ใช้ Text Editor ดีๆ แบบ Sublime Text , ATOM ก็ได้

หลังจากที่เขียน Code เสร็จ ก็ต้องมีตัวที่คอยจัดการแปลง Code หรือ Run Code นั้นๆ
เช่น Code ที่เกี่ยวกับ Server เป็นต้น

– Task Runners : ที่ใช้ Lib NodeJS => Gulp , Grunt

พวก Task Runners นี่แหละ หน้าที่มัน คือการรันอะไรบางอย่าง
เช่น เอา Code ไป Compile หรือว่า Run Server ตอนเราแก้โค๊ด
พวกนี้ก็จำเป็นที่จะต้องรู้จักเช่นกัน

“และต้อง Set พวกแม่งให้เป็นด้วยไง” – งานยากละ 5555

สุดท้ายผมเลือกใช้ ATOM Text Editor + Gulp ละกัน

ยังไม่ได้อธิบายเรื่อง Isomorphic , bla bla

อื้มมมมมมมมม เริ่มง่วงละตีสาม
แต่อยากลองเขียนเว็บเป็นชิ้นๆแหะ T_T

ไหนๆก็มีคนจะจ้างทำ E Commerce สองสามเจ้า

ทำแม่งเลยละกัน

ยังไม่ได้อ่านพวก React + Redux , Hot Reloading ไรพวกนี้เลย

แต่พอยังจำการใช้งาน ExpressJS ( Web Server ) ได้

เริ่มจากการ SetUp Environment ในตอนเย็นๆพรุ่งนี้ละกัน !!!

ขอนอนแป้บบ

เพื่อความไว อาจใช้ Boilerplate ของชาวบ้านเค้ามาทำมาโม

Boilerplate : โค๊ดชาวบ้านเค้าที่ Set ทุกๆอย่างเสร็จแล้ว มาเริ่ม Start การเขียนโปรแกรมได้