ในบทความนี้หลังจากเราได้ลองขึ้นโครงโปรเจค Svelte ด้วย Svelte Kit กันแล้ว เราก็จะทดสอบ Deploy ขึ้น Cloud Service บน Netlify กันครับ เพื่อให้เราสามารถนำโปรเจค Publish ขึ้นได้ทันที ที่มีการ Commit หรือ Merge เข้า Branch ที่เรากำหนดไว้ทันที

Keyword

• Netlify คือ บริการคลาวด์สำหรับนักพัฒนาเว็บ
• SvelteKit คือ Framework สำหรับสร้างเว็บแอปพลิเคชัน

TL;DR

ผมทำ Repo เริ่มต้นสำหรับ Svelte Kit และ Tailwind CSS ไว้แล้วสามารถ Clone ลงมาเพื่อใช้งานต่อได้เลย รวมถึงสามารถ Deploy บน Netlify ได้ทันทีครับ

https://github.com/koobitor/svelte-kit-tailwind-starter

Let Get Start!

1. เริ่มต้นติดตั้ง @sveltejs/adapter-netlify@next ในโปรเจคของเราได้เลย

ทำการติดตั้ง adapter netlify ด้วยคำสั่งดังนี้

2. เรียกใช้ adapter สำหรับ netlify แทนการใช้งาน adapter-auto ที่ติดตั้งไว้แต่แรก

พร้อมปิดการใช้งาน edge function และ เปิด function การ split files javascirpt แยกแต่ละหน้า เพื่อให้ขนาดไฟล์นั้นไม่มัดรวมเป็นไฟล์เดียวกันและใหญ่เกินไป

3. สร้างไฟล์ Config สำหรับ netlify.toml

โดยเมื่อมีการ Push จะ Trigger Build Command ที่เรากำหนดค่าไว้ใน package.json ครับ

4. สร้าง Site บน Netlify

ในขั้นตอนนี้ผมเลือกที่จะนำเข้าจาก Repo ที่ได้สร้างไว้แล้วให้เลือก Import an existing project ครับ

5. นำเข้าโปรเจคที่ต้องการ Deploy Site

ในขั้นตอนนี้เราสามารถเลือกนำเข้า Source Code ได้จากที่ต่างๆที่เราเก็บไว้ ในที่นี้ผมฝากไว้ที่ Github เมื่อเรากด ระบบจะทำการ Authtication เพื่อขอสิทธิในการเข้าถึง Repo ของเรา

6. Select Repository

ค้นหา Repo ที่เราต้องการและคลิ้กเลยได้เลย

7. Deploy Configuration

ในขั้นตอนนี้เราได้ทำการกำหนดคำสั่ง Build และ Publish ไว้ในไฟล์ netlify.toml เป็นที่เรียบร้อยแล้ว เลือก Branch ที่ต้องการ Deploy ในที่นี้ผมตั้งให้เป็น master แล้วสามารถกด deploy ได้ทันทีครับ

8. Deploy Success

เมื่อระบบทำการ deploy เสร็จแล้ว เราจะได้ random url มา 1 อัน สามารถเปลี่ยน sitename ได้ในกรณีที่ยังวางอยู่ครับ และสามารถ mapping domain ที่เราซื้อไว้ได้ด้วยครับ

9. Preview Site

ทดสอบเปิดลิงค์ที่ Netlify กำหนดให้ เป็นอันเสร็จเรียบร้อยสำหรับการ Deploy Svelte Kit บน Netlify ครับ

Command and Source Code

สามารถ copy code ได้จาก gist โดยคลิ้กที่ view raw เพื่อดูไฟล์ต้นฉบับ

Reference

• https://docs.netlify.com/integrations/frameworks/sveltekit/
• https://www.blognone.com/node/128128

Keyword

• Svelte คือ UI Compiler ที่แปลง Code ของเราให้เป็น JavaScript ที่สามารถใช้งานบน Browser ได้ทันที
• SvelteKit คือ Framework สำหรับสร้างเว็บแอปพลิเคชัน
• Tailwind CSS คือ CSS Framework ที่นิยมในปัจจุบัน
• Svelte Preprocessor คือ พรีโปรเซสเซอร์ ช่วยให้ svelte สามารถแปลง syntax ภาษาอื่นได้เช่น PostCSS, SCSS, Less เป็นต้น
• Layouts คือ Top Level ของแอปพลิเคชัน

TL;DR

ผมทำ Repo เริ่มต้นสำหรับ Svelte Kit และ Tailwind CSS ไว้แล้วสามารถ Clone ลงมาเพื่อใช้งานต่อได้เลยครับ ในอนาคตก็จะมีเพิ่ม Libs ต่างๆที่จำเป็นและอัพเดทให้เป็นปัจจุบันไว้เสมอครับ

https://github.com/koobitor/svelte-kit-tailwind-starter

Let Get Start!

ในการติดตั้ง Tailwind CSS เพื่อใช้กับ Svelte Kit โปรเจคมีขั้นตอนดังนี้ลุยกันเลย

Code ในแต่ละขั้นตอนสามารถ Copy ได้ด้านล่างสุดจ้า

1. ก่อนอื่นเราต้องสร้างโปรเจค Svelte Kit โดยใช้คำสั่ง npm init svelte@next เพื่อติดตั้งโปรเจคเริ่มต้นของเรา

โดยจะสามารถตั้งค่าจาก Template ที่ Svelte Kit เตรียมไว้ได้ โดยจะมีคำถามดังนี้

• Which Svelte app template? ให้เราเลือก Template เริ่มต้นของแอปพลิเคชัน
• > SvelteKit demo app (จะมีตัวอย่าง)
• > Skeleton project (โครงสร้างอย่างเดียวไม่มีตัวอย่าง App)
• Add type checking? ตรวจสอบ Type ของตัวแปรในโปรเจคไหม
• > Type-checked JavaScript ตรวจสอบ Type ด้วย typeof
• > TypeScript ตรวจสอบ Type ด้วย TypeScript
• > None ไม่ตรวจสอบ Type
• Add ESLint for code linting? ให้ ESList ตรวจสอบ Syntax ของเราไหม
• Add Prettier for code formatting? ให้ Prettier ช่วยจัด Format Code ของเรา
• Add Playwright for browser testing? ติดตั้ง Playwright ให้เป็น Testing Library ในโปรเจคของเราไหม

2. ติดตั้ง Tailwind CSS และ Svelte Preprocess

เราจะติดตั้ง tailwindcss postcss autoprefixer svelte-preprocess ใน Dev Dependency ของโปรเจคเรา และทำการสร้างไฟล์ config ของ tailwind และ postcss โดย .cjs ย่อมาจาก CommonJS module ไฟล์นะครับ

3. เปิดให้ <style> สามารถอ่าน Syntax ของ PostCSS ได้

เพิ่ม preprocess ในไฟล์ svelte.config.js หลังจากเพิ่มแล้วจะได้ code ดังภาพนี้ครับ

4. ตั้งค่าให้ Content Source ของโปรเจคของเรา ให้ Tailwind กัน

เพิ่ม content source path ในไฟล์ tailwind.config.cjs

5. เพิ่มคำสั่ง Tailwind ในไฟล์ app.css

โดยจะสร้างไฟล์ไว้ที่ ./src/app.css ดังนี้

6. Import ไฟล์ app.css เข้ามาในโปรเจคของเราผ่าน File Layout

โดย Svelte Kit จะมี Layout บนสุดของ Application คือไฟล์ ./src/routes/__layout.svelte เราจะทำการ Import app.css ไว้ที่ไฟล์นี้ครับ

*<Slot /> คือ child content เหมือน props.children ใน React

7. รัน svelte kit server ด้วยคำสั่ง npm run dev

เพื่อ Start Server Dev ของเราบน Port 3000

8. ทดสอบใช้ CSS Class ของ Tailwind

โดยเพิ่ม class ต่างๆในไฟล์ index.svelte

เท่านี้ก็สามารถใช้งาน Tailwind และตั้งต่า ผ่าน tailwind.config.cjs เพื่อเพิ่มตัวแปรต่างๆได้แล้วครับ

Command and Source Code

สามารถ copy code ได้จาก gist โดยคลิ้กที่ view raw เพื่อดูไฟล์ต้นฉบับ

Reference

• https://tailwindcss.com/docs/guides/sveltekit
• https://kit.svelte.dev/docs/layouts
• https://www.designil.com/svelte-framework
• https://www.freecodecamp.org/news/javascript-typeof-how-to-check-the-type-of-a-variable-or-object-in-js

WebAssembly ตัวย่อคือ wasm ออกแบบมาให้มีประสิทธิภาพและเร็ว โดยใช้ประโยชน์จากความสามารถของฮาร์ดแวร์ทั่วไปที่มีอยู่ในแพลตฟอร์มต่างๆ เช่น เว็บและ แอปพลิเคชันเซิร์ฟเวอร์

เริ่มกันเลย

เราต้องติดตั้ง Pre Compiler ที่ชื่อว่า toolchain สำหรับ Compile ภาษา C/C++ ไปยัง WebAssembly สำหรับ Mac & Linux ติดตั้งตามนี้ได้เลยครับ

$ cd ~/
$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ ./emsdk install latest
$ ./emsdk activate latest

ตั้งค่า Environment Path และ Variables

ตั้งค่า Environment Variables ด้วยคำสั่งนี้ ทำให้เรียกใช้คำสั่งต่างๆได้

$ source ./emsdk_env.sh

ปล. ถ้าต้องการให้เรียกใช้งานได้ทุกครั้งต้อง Export Path ด้วยนาจา ตัวอย่างด้านล่างเลย ปรับตั้งค่า Path ให้ตรงกับที่ติดตั้งไว้ด้วยนะครับผม

$ export PATH="/Users/koobitor/emsdk:$PATH"
$ export PATH="/Users/koobitor/emsdk/upstream/emscripten:$PATH"
$ export PATH="/Users/koobitor/emsdk/node/12.9.1_64bit/bin:$PATH"

เช็คดูว่า Command ของเราอยู่ใน Folder ไหนน้า

$ which emcc

ทดลอง Compile และ Run

เราจะทดลอง Compile และ Run โปรแกรมแรกกันดูเลย พิมพ์ตามนี้ได้เลย

$ mkdir hello
$ cd hello
$ cat << EOF > hello.c
#include <stdio.h>
int main(int argc, char ** argv) {
  printf("Hello, world!\n");
}
EOF
$ emcc hello.c -o hello.html

ใช้คำสั่ง emrun ในการ Start Server ที่ port 8080

emrun --no_browser --port 8080 .

ไฟล์ Web HTML ที่เรา Compile ได้จะอยู่ที่ hello.html

ข้อมูลเพิ่มเติมเจ๋งๆหาได้จาก ลิ้งด้านล่างได้เลยครับ
- https://github.com/mbasso/awesome-wasm
- https://webassembly.org/

React Native ช่วยให้คุณสามารถสร้าง Mobile Application ใช้เพียงภาษา Javascript โดยลักษณะโครงสร้างการเขียนเหมือน React เลย สามารถเรียกใช้ Mobile User Interface จาก Components ต่างๆที่มีให้ใช้มากมาย

Expo client app เป็น Application ที่ช่วยให้เราเทสการแสดงผลได้บน iOS และ Android โดยตัว Expo ก็เป็น React Native Apps เช่นเดียวกัน ภายในก็จะมี Expo SDK ซึ่งทำหน้าที่ช่วยให้เราสามารถเรียกใช้งาน ฟังก์ชั่นต่างๆเช่น camera, contacts, local storage และ อื่นๆที่เกียวกับ Hardware

create-react-native-app คือ Command Line Tools ที่จะช่วยคุณเริ่มต้นสร้างโปรเจค React Native ได้อย่างง่ายได้ โดย คุณสามารถพัฒนา Mobile Application ได้โดยไม่จำเป็นต้องติดตั้ง Xcode หรือ Android Studio เลย

คำสั่งที่เราจะใช้มีดังนี้ครับ

เริ่มต้นให้เราทำการติดตั้ง create-react-native-app ก่อนดังตัวอย่างครับ

หลังจากติดตั้ง create-react-native-app เสร็จเรียบร้อยเราก็จะสร้างโปรเจคของเราด้วยคำสั่ง create-react-native-app ตามด้วยชื่อโปรเจคของเราครับ

เมื่อสร้างโปรเจคเสร็จแล้ว เราจะลองรันด้วยคำสั่ง yarn start

ในภาพนี้เราจะทดสอบ Application ของเราผ่าน Expo Client บน iOS กัน

โดย ผมรับลิงค์ที่จะใช้เทสบน iOS ผ่านอีเมล

เมื่อคลิ้กที่ลิงค์ก็จะ ไปเปิดโปรแกรม Expo และ เปิดโปรเจคของเราขึ้นมาแสดงผล

จะเห็นว่าตัว Expo Client นั้นมี Inspector ช่วยให้เราสามารถ Debug Element ต่างๆได้ง่ายยิ่งขึ้นครับ

ตัวอย่างนี้ เพียงกดตัวอักษร i ใน Command Line ก็จะเรียก iOS Simulator ขึ้นมาแสดงผลครับ

ตัวอย่าง source code เริ่มต้นที่ได้มาจะมีการใช้ View และ Text ซึ่งเป็น Component ที่มากับ react-native เราจะได้นำไปใช้งานกันเป็นประจำเลยครับ

ในบทนี้เราได้เรียนรู้อะไรบ้าง
- ติดตั้ง create-react-native-app บนเครื่องของเราได้
- สร้างโปรเจค react-native ได้
- เทสบน Expo Client และ iOS Simulator

ในบทถัดไป เราจะมา Overview Basic Components ต่างๆกันครับ

React Native ฉบับเริ่มต้น was originally published in Medvine Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

วิธีที่ 1 ไล่เช็คไปทีละตัว

ผมใช้ Yarn เป็นตัวจัดการ Package ต่างๆในโปรเจคของผม เมื่อถึงเวลาต้อง Upgrade ตัว package ผมก็ต้องไล่เช็คที่ละ Package ว่ามี Version ใหม่ๆออกมาบ้างไหม หน้าตาก็จะเป็นแบบนี้ครับ

วิธีนี้เราต้องนั่งเลือก Version ของแต่ละ Packge เองทั้งหมดทีละตัว ดูเป็นงานถึก ดูไม่ Engineer เลย

วิธีที่ 2 ใช้คำสั่ง yarn upgrade — latest

การใช้ yarn upgrade — latest จะอัพเดทเพียงบ้าง Package เท่านั้น

จะเห็นว่าอัพเดทเฉพาะ Module ใหญ่ๆที่เปลี่ยน Version เท่านั้น เช่น Next.js จาก 4.0.1 เป็น 5.1.0 แต่เราอยากให้ทุกๆ Modules อัพเดทหนะสิ

ผมขอนำเสนอ yarn-upgrade-all

ทำให้เราสามารถอัพเดททุกๆ Package ในโปรเจคได้ใน Command เดียว ลดเวลามานั่งหา Version ของแต่ละ Package ไปได้เยอะเลย

1. วิธีติดตั้งก็ง่ายเหมือนปลอกกล้วยเข้าปาก

2. วิธีใช้งานก็ พิมพ์ yarn-upgrade-all

เพียงเท่านี้เราก็จะได้ Package Stable ที่ล่าสุดใช้งานในโปรเจคของเราแล้วครับ

หลักการทำงานของ yarn-upgrade-all

ก็คือใช้ Script ที่ไล่เช็ค Dependencies ในโปรเจคของเรา และทำการ Remove ออก และ Add กลับเข้าไปใหม่ทำให้ได้ package ที่ update แล้วครับ

yarn remove <package-name> && yarn add <package-name>

ทำไมถึงไม่ใช้ yarn upgrade --latest

บ้างครั้งเราเจอ Bug ในการ upgrade ด้วยวิธีนี้ การ Remove และ Add เข้าไปใหม่อาจจะเป็นวิธีที่ทำให้ Dependencies ที่เชื่อมโยงกันอยู่ได้รับการ Upgrade กลับเข้าไปด้วยครับ

ปล. อย่าลืมเทสโปรเจคหลัง Upgrade Modules ด้วยนะครับ เผื่อมีบางคำสั่งที่ Deprecated เดี๋ยวจะรันไม่ผ่านครับ

[Tips] หมดปัญหา Upgrade Node Package Dependencies ด้วย yarn-upgrade-all was originally published in Medvine Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

UPDATE `eav_attribute` SET `is_required` = ‘0’ WHERE `eav_attribute`.`attribute_id` = 5;

UPDATE `eav_attribute` SET `is_required` = ‘0’ WHERE `eav_attribute`.`attribute_id` = 7;

Ref : https://magento.stackexchange.com/questions/176823/magento-2-how-to-make-lastname-optional-in-customer-registration-form

Magento 2 Don’t require First Name & Last Name on Registration was originally published in Medvine Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

Using localhost as the domain in your base URL causes problems in Magento 2.

Magento’s base URL configuration is located in the core_config_data table. The following values may need to be changed:

• web/unsecure/base_url
• web/secure/base_url

For example, if you previously had http://localhost/magento2community/, you should change it to http://127.0.0.1/magento2community/

After changing the url, flush the cache (bin/magento cache:flush). You might also need to clear out your var directories.

Ref : https://magento.stackexchange.com/questions/105042/add-to-cart-not-working-localhost-only-in-chrome-magento-2-fresh-install

Magento 2 fix can’t add product to cart in localhost was originally published in Medvine Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

$ docker pull jenkins

รัน Docker Container ด้วยคำสั่ง

$ docker run -d -p 49001:8080 -p 50000:50000 -v $PWD/jenkins:/var/jenkins_home -t --name jenkins jenkins

ตรวจสอบสถานะของ Docker Container

$ docker ps -a

ในการรันคำสั่ง docker run ด้านบนนั้น อธิบายได้ดังนี้

• -d ให้รันเป็น Run container in background and print container ID
• -p กำหนดให้ 49001 ชี้ไปยัง 8080 ใน container
• -p กำหนดให้ 50000 ชี้ไปยัง 50000 ใน container
• -v กำหนดให้ directory ~/jenkins เชื่อมต่อกับ /var/jenkins_home ที่อยู่ภายใน Container
• -t คือ Allocate a pseudo-TTY
• — name ตั้งชื่อให้แก่ Container ที่เรากำลังจะรัน

ต่อไปเรามาทดสอบว่า Jenkins ทำงานหรือยังครับ

• ตรวจสอบ Version ของ Jenkins โดยการเข้าผ่าน URL http://localhost:50000/

• ตรวจสอบว่า Jenkins เข้าสู่หน้า Setup ได้หรือไม่ผ่าน URL http://localhost:49001/

ขั้นต่อไปเรามาติดตั้ง Jenkins กันครับ

1. เริ่มด้วยการเอารหัสผ่านเริ่มต้นที่ระบบสร้างไว้มากรอกในหน้านี้ครับ

$ docker exec -it jenkins bash
$ cd /var/jenkins_home/secrets/
$ cat initialAdminPassword

2. เลือก Plugin ในขั้นตอนนี้แนะนำให้เลือก Install suggested plugins เนื่องจากเรายังเป็นมือใหม่ ขอลองใช้งานสิ่งที่มีมาให้ก่อนครับ

3. ระบบจะทำการติดตั้ง Jenkins และ Plugins พื้นฐานให้เราครับ

4. สร้าง Admin User เพื่อเข้าสู่ระบบ

5. เป็นอันว่าติดตั้ง Jenkins เรียบร้อยแล้วจ้า

มาดูหน้าตาของ Jenkins ให้ชื่นใจกันครับ

Blog ต่อๆไปผมจะไล่เขียนเกี่ยวกับการใช้งาน Jenkins สำหรับ Web Development นะครับ รอติดตามกันครับ

[Beginner] ติดตั้ง Jenkins ด้วย Docker กันไหม was originally published in Medvine Tech on Medium, where people are continuing the conversation by highlighting and responding to this story.

To create an interaction between Web Applications, developers need to use Javascript as their tool. It points out where users click and helps developers to create programs.

As the commands are created to satisfy users’ needs, more than 100 lines of Javascript are written in the system. jQuery from Javascript Library are used to make the script shorter and easier. However, there is also the Event Management problem in regarding response in some parts of the site, for instance, Redundant Response, Event ordering and Event continuity.

Due to the differences between thinking method and basic programming, it is hard and complicated to deal with Event in Javascript. The original programming is Synchronous which is done step-by-step. One must be completed first before starting the next step. Asynchronous is another basic programming where steps in process may occur at the same time and there is no need to wait for the prior step to complete. This is why programmers who are used to the original one might be a little confused.

From the problems above, developers have been finding ways to improve and control the response to make each part more efficient. This started the ‘Javascript Framework’ used by big companies and users, for example, AngularJS by Google, React by Facebook and Riot.js. Each of them has an ability to respond to the creation of Web Application. The framework is hard and users need to learn more about it.

Sample: Basic Function Todo-List in each Framework

1. AngularJS — a toolset created in 2010

2. React JS — created in March 2013 and typically written in JSX and ES6

3. Riot.js — created in September 2013

Riot is easier to understand comparing to AngularJS and ReactJs which are really quite difficult. There is no need for the Users to search or study new programs, language or script etc. because HTML, CSS and Javascript knowledge are what they already have.

Riot.js has been specifically created to manage User Interface and this is the reason why Riot.js is smaller than other frameworks. It represents itself as ‘Micro-Library’ that can be used to manage all parts of the website. Also, it can be used with complicated Web Application depending on how you plan to develop the structure.

Table above is the Framework Size Comparison wherein you can see that Riot is smaller than others. So, this Micro-Library can be a good choice for you!

HTML, CSS and JavaScript are three basic factors of a website. Each of these will work separately. Riot will combine all three in one file.

Here is how Custom Tags look like:

1. <like></like>: A tag that we created and basically use HTML. Also can be used in the Pre-Compiler HTML, for example, Jade.
2. <script></script> or Javascript: Script Tag can be inserted based on your preference. Syntax of Pre-Compiler (ex. CoffeeScript, Babel, TypeScript) can be used.
3. <style></style>: A CSS. We can put it in the same file.

Example: How to use tag by riot.mount

2 types of Tag format:

1. Custom tags can be placed by using the particular Name tag
2. HTML Elements as tags must add ‘Attribute’ into the HTML

3 types of Mount:

1. Mount all displayed tags
2. Mount only tags in id=my-element
3. Mount only specified Custom tags

See! It is very simple and you are now able to use Riot!

And if you want to stop all actions with the DOM, following the below instructions to do so.

You need to create a function in ‘Script’ and place it in each Event type of the ‘Attribute’, for example, onclick, onmouseover, onmouseout, onchange. If you do this, you will be able to deal with the event from DOM.

The article above is my first blog with intended to create and write blogs like other GEEKS do! Please let me know if you have any comments or suggestions towards my blog.

Stay tuned for more interesting topics:

- Focus on how to use Riot Features
- Create your own components
- Setup Workflow Front-end Theme Riot + Gulp
- Create Web Application by Riot, RiotControl, PostCSS, Webpack
- Use ‘Riot, Mocha and Chai’ in creating TDD

Let’s stop worrying about the complicated structure and use Riot.js was originally published in Santora Nakama on Medium, where people are continuing the conversation by highlighting and responding to this story.

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

เมื่อมีการเขียนคำสั่งต่างๆขึ้นมาเพื่อตอบสนองผู้ใช้งาน ทำให้จำเป็นต้องเขียน Javascript มากมายหลายร้อยหลายพันบรรทัด มีการนำ Javascript Library เช่น jQuery เข้ามาช่วยให้การเขียนนั้นสั่นลงและดูง่ายมากยิ่งขึ้น แต่ก็พบปัญหาในการจัดการ Event ที่ตอบสนองต่อส่วนต่างๆของเว็บ เช่นการตอบสนองซ้ำซ้อน หรือการจัดลำดับการเกิดและความต่อเนื่องของ Event ก็เป็นปัญหาอย่างมาก

การจัดการกับ Event ใน Javascript เป็นเรื่องลำบาก เนื่องจากวิธีคิดแตกต่างกับพื้นฐานการเขียนโปรแกรมแบบดังเดิมที่เป็นแบบ Synchronous ทำงานที่ละงานต่อไปเรื่อยๆ แต่แบบ Asynchronous ทำงานพร้อมกันหลายๆงานโดยไม่จำเป็นต้องรอให้งานก่อนหน้าเสร็จก่อน ทำให้โปรแกรมเมอร์ที่ชินกับการประมวลผลแบบเดิมสับสนกันไปตามๆกัน

จากปัญหาที่พบทำให้นักพัฒนาหาทางปรับปรุงและควบคุมการตอบสนอง ในแต่ละส่วนให้มีประสิทธิภาพมากขึ้น ทำให้เกิด Javascript Framework ที่ถูกผลิตใช้ภายในบริษัทใหญ่ๆและนำมาให้คนทั่วไปสามารถนำไปใช้งานได้ เช่น AngularJS โดย Google , React โดย Facebook และ น้องเล็กอย่าง Riot.js ซึ่งแต่ละตัวมีความสามารถที่ตอบสนองต่อการสร้างเว็บแอพพลิเคชั่นได้ดีเยี่ยม แต่! ติดอยู่อย่างเดียวทำไมการเรียนรู้แต่ละตัวมันชั่งยากเย็นจริงๆ

ตัวอย่างการเขียน Basic Function Todo-List ในแต่ละ Framework

1. เริ่มต้นกันด้วย Angular JS ผู้ที่เกิดก่อนใครเพื่อนเลยปี 2010

2. React JS พัฒนากันอย่างต่อเนื่องไม่หยุดยัง เริ่มทำมาตั้งแต่ มีนาคม 2013
อยากใช้ React ต้องทำใจเรียนรู้ภาษาใหม่เพิ่มอีกสัก 2 ภาษา jsx และ es6

3. น้องใหม่ใสๆ Riot.js สวยใส ไฉไล กว่าใคร ตามมาติดๆ กันยายน 2013

มีมากมายหลายรูปแบบการเขียน ทั้ง Angular JS ในรูปแบบของ Module และ ใหม่มากๆแบบ React มาจบลงกับความพอดีที่ Riot ไม่ต้องเรียนรู้อะไรใหม่เพราะมันใช้ความรู้เดิมได้ทันที! HTML, CSS, Javascript

Riot.js เกิดมาเพื่อจัดการ User Interface โดยเฉพาะมันจึงเล็กกว่า Framework ตัวอื่นๆ โดยวางจุดขายว่าตนเองเป็น micro-library นะ ถ้าต้องการใช้งานเพียงเพื่อจัดการกับส่วนต่างๆของหน้าเว็บหนะมันเหมาะมากเลย แต่ก็ใช่ว่าจะใช้งานกับเว็บแอพพลิเคชั่นที่ซับซ้อนไม่ได้นะครับ มันทำได้อยู่ที่คุณจะวางโครงสร้างยังไงให้พัฒนาต่อยอดได้

จากตารางเปรียบเทียบแล้ว Riot เล็กกว่าชาวบ้านมากจ้า พกพาสดวกแทบไม่ต้องคิดเลยที่จะเปลี่ยนมาใช้ micro library ตัวนี้ ในเมื่อเราเจอของดีแล้วอย่ารอช้าลองเลย

โดยปกติส่วนประกอบของเว็บพื้นฐานประกอบด้วย HTML, CSS และ Javascript แต่ละส่วนแยกกันเพื่อทำงานของตนเอง แต่ Riot ร่วม 3 อย่างนี้ไว้ใน 1 ไฟล์ จบปิ้ง
มาทำความรู้จักหน้าตาของ Custom Tags กันเลย

1. <like> </like> คือ Tag ที่เราสร้างขึ้นมาเพื่อใช้งานครับ ภายในประกอบไปด้วย html ปกติ พิมพ์ลงไปได้เลย หรือใครที่ใช้ Pre-Compiler HTML เช่น Jade ก็สามารถนำมาใช้งานได้ครับ
2. <script></script> หรือ Javascript นั้นเอง จะใส่ Tag script หรือไม่ก็ได้ตามแต่ความชอบครับ โดยเราสามารถเขียนด้วย Syntax ของ Pre-Compiler ได้ด้วย เช่น CoffeeScript, Babel, TypeScript
3. <style></style> คือ CSS ใช่ครับ เราสามารถใส่ css ลงไปในไฟล์เดียวกันได้เลย

ตัวอย่างวิธีเรียกใช้งาน Tag ด้วย riot.mount

รูปแบบของการวาง tag เพื่อใช้งาน จะมี 2 แบบ

1. Custom tags ใส่เป็นชื่อ tag นั้นๆได้เลย
2. HTML elements as tags ใส่ attribute ลงไปใน HTML

รูปแบบของการ mount จะมี 3 แบบ

1. mount ทุกๆ tag ที่ปรากฏอยู่
2. mount เฉพาะ tag ที่อยู่ใน id=my-element
3. mount เฉพาะ custom tags ที่ระบุ

เท่านี้คุณก็สามารถใช้งาน Riot ได้ในโปรเจคของคุณแล้วครับ ปรบมือ เฮ้ๆๆๆ

หากคุณต้องการ ดักการกระทำต่างๆ กับ DOM ของเราทำได้ดังนี้

เพียงสร้าง Function ไว้ในส่วนของ Script และ วางไว้ส่วนของ Attribute ประเภท Event ทั้งหลาย เช่น onclick, onmouseover, onmouseout, onchange ก็สามารถจัดการกับ Event ที่เกิดขึ้นกับ DOM ตัวนั้นๆได้แล้วครับ

บทความนี้ก็เป็นบทความแรกของผม ด้วยความตั้งใจมานานมากว่าอยากเขียน Blog ให้ได้แบบ Geek ท่านอื่นๆบ้าง > < หากมีข้อแนะนำติชมขอได้อย่าเกรงใจ จัดเต็มเพื่อให้ผมได้พัฒนาตัวเองด้วยครับ :)

หัวข้อบทความที่จะเขียนต่อไป

• เจาะวิธีการใช้งานคุณสมบัติต่างๆของ Riot ให้เต็มประสิทธิภาพ
• สร้าง Components ของคุณเองแบบครบเครื่อง
• Setup Workflow Front-end Theme Riot + Gulp
• การสร้างเว็บแอพพลิเคชั่นโดยใช้ Riot, RiotControl, PostCSS, Webpack
• ทำ TDD ด้วย Riot, Mocha, Chai

รอติดตามกันนะครับ :)

[Beginner] เลิกเหนื่อยกับโครงสร้างยากๆหันมาใช้ Riot.js was originally published in BeginCodes on Medium, where people are continuing the conversation by highlighting and responding to this story.