ทดลองเขียน Next.js ดูเล่นๆ

วันนี้ได้ทดลองเล่น Next.js ดู รู้สึกว่าสนุก! ถึงแม้ว่ายังไม่ได้ลองอะไรลึกๆ แต่มีความรู้สึกว่า Next.js มีการวางโครงสร้างไว้ให้ใช้งานง่ายๆ ยกตัวอย่างเหมือนการเขียน PHP แค่วางไฟล์ลงในโฟลเดอร์ /pages โครงสร้างของไฟล์และโฟลเดอร์จะสะท้อนถึง url โดยไม่ต้องมากำหนด routes … ฟังดูอาจจะงง ยกตัวอย่างเช่น

pages
|- index.js
|- about.js
|- blog
|- index.js
|- [slug].js

โดยสมมติ base url คือ https://keerati.co เราก็จะมี

  • https://keerati.co
  • https://keerati.co/about
  • https://keerati.co/blog
  • https://keerati.co/blog/node-js
  • https://keerati.co/blog/xxxx

ซึ่งเรา (แทบจะ) ไม่จำเป็นต้องมาเขียน routes อีกเลย ซึ่งส่วนตัวคิดว่าสะดวกมากๆ แม้ว่าจะไม่ได้เจาะจงเพื่อจะใช้งาน SSR (Server-Side Rendering)

ต้องยอมรับว่าแรกๆที่เริ่มเขียน ReactJS ก็มีความปวดหัวปนมีความน่าเบื่อในการเขียน Router, Routing พอสมควร แต่ Next.js ทำให้รู้สึกสนุกได้มากขึ้น

ตอนนี้ต้องยอมรับว่ายังไม่ทราบถึงข้อดีและข้อเสียทั้งหมดของ Next.js เพราะเพิ่งเริ่มศึกษา แต่หวังว่าน่าจะสนุกกับมันได้สิน่า

วิธีใช้งาน Omise.js ใน Vue.js และ React.js แบบง่ายๆ

เล่าประวัติกันเล็กน้อย

เป็นโปรเจคเก่าๆที่ทำไว้เล่นๆ เพราะว่ามีคนถามค่อนข้างเยอะว่าเอ๊ะ ทำไมใช้ Omise.js กับ JavaScript Framework อื่นๆไม่ได้ เช่น Vue.js หรือ React.js เป็นต้น

โดยเอาจริงๆแล้วมันใช้งานได้นะครับ 😅 แต่ว่าพักหลังๆ โปรแกรมเมอร์จะติดกับการใช้งานพวก JavaScript Package Manager เช่น npm, yarn หรือ bower กันซะเยอะ จนลืมไปว่าจริงๆแล้ว JavaScript มันทำงานกันอย่างไร

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

อธิบายการทำงานคร่าวๆ

ทุกวันนี้การเขียนพวก event ต่างๆใน JavaScript มันเป็นเรื่องที่ง่ายขึ้นมาก โดยไม่ต้องไปสนใจว่าเขียนแบบนี้นะ จะใช้งานบน Browser นี้ได้ แต่จะใช้งานบน Browser นี้ไม่ได้ ต้องแก้ด้วยวิธีนี้ร้อยแปดพันเก้า เพราะตัว JavaScript Framework มันจัดการให้หมด ซึ่งชีวิตมันเริ่มสบายตั้งแต่มี jQuery เข้ามา

ซึ่งเวลาเขียนมันง่ายมากเนอะ สมมติเรื่องตอนที่เว็บมัน onload ก็แค่นี้เอง

$(document).ready(function() {
    // code here
});

หรือ

$(window).on("load", function() {
    // code here
});

อ่านเพิ่มเติม jQuery | $(document).ready()
แต่บอกเลยว่าถ้าก่อนยุคนั้น (ซึ่งผมอยู่ในยุคเก่าๆนั้นแหละ 😂) มันเขียนเยอะมากครับ เช่น

The Javascript Anthology

อันนี้ต้องบอกว่าผมเอามาจากหนังสือ Textbook เก่าๆของผมเองชื่อ The Javascript Anthology แต่คงไม่มีใครใช้แล้วละมั้ง 🤪

สังเกตุว่ามันจะมีวิธีการเขียนที่เยอะกว่าเนอะ เพราะต้องตรวจเรื่อง Object ของแต่ละ browser ที่ support แตกต่างกันด้วย

แต่เอาจริงๆถ้าจะศึกษาพวกนี้ ก็ไปแกะ Source Code ของพวก jQuery หรือ JavaScript Framework อื่นๆกันดูก็ได้ครับ เพราะเขาก็ Open Source กันหมด แต่ส่วนใหญ่จะขี้เกียจกันใช่ไหมล่ะ!!? (แทงใจไหม)

แนะนำให้ลองเข้าไปศึกษาบ้างนะครับ หากใช้งานกันจริงๆเนอะ เพราะเวลาที่จะเอาแต่สะดวกกันจริงๆ จะมีปัญหากับงานหรือโปรเจคที่ต้องลงถึงพวก Fundamental 😘

เอาล่ะหยุดบ่น (ทำอย่างกะตัวเองเก่ง Fundamental 😂) จริงๆผมก็ไม่ได้เก่งครับ มั่วๆซะส่วนใหญ่ คนที่รู้จักผมก็จะรู้ดี พูดเท่ๆไปงั้น 555

อะเข้าเรื่องครับ

การใช้งานตัว Omise.js นั้นตามเอกสารที่ทาง Omise เขาเขียนเอาไว้ก็ค่อนข้าง(โคตร)ชัดเจนว่าให้ใช้ tag script เพื่อเรียกใช้งาน JavaScript Library โดยตรงจาก CDN ของเขาเลย

<script src="https://cdn.omise.co/omise.js.gz"></script>

ไปอ่านเพิ่มเติมเองจาก link ข้างล่างครับ

มาถึงแค่ส่วนเริ่มต้นนี้หลายคนที่ไม่เคยมาเขียนอะไรแบบนี้เองก็งงแล้ว หากใครงงแนะนำว่าศึกษาการเขียน html ขั้นพื้นฐานก่อนเลยนะครับแล้วค่อยไปต่อ

เอาล่ะหลังจากที่เขียนเรียก Omise.js แล้วหลายคนก็เริ่มติดว่า แล้วจะเรียกใช้งาน Omise.js ยังไง key ของส่วนนี้ก็ Fundamental อีกแล้วอะ ถ้าใครใช้งานไม่เป็นแสดงว่าอาจจะยังไม่เข้าใจเรื่อง Global Scope และ Local Scope ของ JavaScript ครับผม

แนะนำให้อ่านเพิ่มเติมตามนี้ครับ

และแน่นอนครับทุกคนสามารถทดสอบ debug ได้เองจาก browser ที่ท่านๆใช้งาน (โปรแกรมเมอร์ที่ไม่รู้เรื่องนี้บาปมาก) โดยลองพิมพ์

console.log(Omise);

และ

console.log(window.Omise);

โดยสังเกตุว่าก็จะพบ Omise ทั้งคู่ ซึ่งหากใน JavaScript Framework ของท่านไม่เจอในวิธีแรก ท่านก็เรียกด้วยวิธีที่ 2 ได้ครับ คือไปเรียกจาก Global scope นั่นเอง ง่ายมั๊ย 😂

วิธีนี้ใช้ได้กับทุก JavaScript Framework นะครับผม ไม่ว่าจะเป็น Vue.js React.js หรือจะเป็นตัวอื่นๆเช่น Angular.js

หากขี้เกียจอ่านบทความนี้ลองดู Video ที่อัดทิ้งไว้นะครับ และก็ดูให้ครบทุกวินาทีนะครับ มันแค่ 3 นาทียัง skip อีกผมก็คิดว่าท่านควรพิจารณาตัวเองแล้วครับ ผมก็ไม่ทราบจะช่วยยังไงละ 😂

Omise.js กับ Vue.js

Youtube: https://www.youtube.com/watch?v=_aUJjTFw4vU

Omise.js กับ React.Js

Youtube: https://www.youtube.com/watch?v=_OpEi5eXKE8