บทความ IT เจ๋งๆ

ปัจจุบันเริ่มมีการนำ Angular ไปใช้งานมากขึ้น ผู้ที่สนใจและกำลังจะเข้ามาเรียนรู้ Angular จึงจำเป็นต้องศึกษาและเรียนรู้แง่มุมต่างๆ ให้เข้าใจ บทความนี้จึงเหมาะกับผู้ที่เพิ่งเริ่มต้นเป็นอย่างยิ่งโดยเป็น คู่มือสำหรับมือใหม่ Angular (Setup Development Environment)

ในบทความนี้ จะทำให้คุณจะได้รู้ในเรื่องที่สำคัญๆ ดังนี้:

ตั้งค่า Node Development Environment

หากคุณยังไม่ได้ Install node สามารถไปที่เว็บไซต์ node.org และทำการติดตั้ง Version ล่าสุด ยังไม่แนะนำให้คุณใช้ Long-Term Support version (LTS) เนื่องจากเรามีวัตถุประสงค์ที่จะใช้ node เป็นเครื่องมือส่วนของ Frontend และใช้สำหรับ Run Development Server ของเรา จึงเชื่อว่าคุณจะพบปัญหาน้อยลงหากคุณใช้ Version ล่าสุด

แต่ถ้าคุณติดตั้ง Node ไว้แล้ว ก็ขอแนะนำให้คุณใช้ Command Line Tool ที่จะช่วยให้คุณสามารถสลับ Version ของ Node ได้อย่างง่ายดาย แทนที่จะ Rewrite Version ที่คุณใช้อยู่ด้วย Version ที่ใหม่กว่า

ทำไมถึงใช้ Command Line Node Versioning Tool

• มันช่วยให้คุณสามารถเปลี่ยน Version ของ Node ได้อย่างรวดเร็ว เช่น ถ้าเรามีหลาย Project ที่ต้อง Maintain บนคอมพิวเตอร์เครื่องเดียวกัน และแต่ละ Project ก็ต้องการ Node ใน Version ที่ต่างกัน
• ด้วย Tool ดังกล่าว การ Upgrade เป็น Node ที่มี Version ใหม่กว่าในอนาคต จะง่ายมากขึ้น เพราะเราไม่ต้องเรียกใช้ตัว Installer ในเครื่องอีก

ดังนั้น ก่อนอื่น ให้ตรวจสอบให้แน่ใจว่า คุณมี Node ที่ถูกติดตั้งอยู่ในเครื่องของคุณแล้วหรือยัง และเป็น Version ใด

ติดตั้ง Nave Command Line Tool

หากคุณกำลังใช้ Linux หรือ Mac Environment อยู่ ก็ให้ลองดำเนินการต่อ และติดตั้ง Nave Command Line Tool ซึ่งมีให้ใน NPM:

สำหรับคำสั่งในการติดตั้ง Tool นี้คือ

โปรดจำไว้ว่า คุณอาจต้องเพิ่ม “sudo” ที่จุดเริ่มต้นของบางคำสั่ง หากคุณไม่ใช่ Administrator ของคอมพิวเตอร์เครื่องนั้น

หากคุณอยู่บน Windows คุณสามารถติดตั้ง NVM-Windows Tool แทน ซึ่งมันมี Function การทำงานที่ไม่ต่างกัน

เมื่อคุณมี Tool ที่ใช้เปลี่ยน Version ของ Node แล้ว ให้ติดตั้ง Node ใน Version ที่ต้องการ เช่น ถ้าเราจะใช้ Version 7.9.0 ไปใช้ในเครื่องของเรา ก็ให้เริ่มต้น Shell ด้วย:

หากใช้ NVM-Windows คำสั่งก็จะเป็น:

ทั้ง 2 กรณี จะได้ผลลัพธ์ที่เหมือนกัน เราเพิ่งเริ่มต้น Shell ใหม่ด้วย Version ที่เลือกไว้บน Path

*** หากคุณใช้ Windows และกำลังมองหา Bash shell ที่ไม่ต้องใช้สิทธิ์ของ Administrator ในการติดตั้ง คุณสามารถไปดูได้ที่ Git Bash

ต่อไปในอนาคต เราจะสามารถ Upgrade Version ได้ง่ายขึ้นแล้ว ซึ่งนั่นเป็นการเริ่มต้นที่ดีเยี่ยม! ต่อไปเราจะไปวางรากฐานสำหรับ Development Environment กัน

Npm เป็นตัวช่วยจัดการ Node Package แต่ในที่นี้เราจะใช้ทางเลือกอื่นแน มาเรียนรู้กันว่า ทำไมเราถึงต้องใช้ Facebook Yarn Package Manager แทน

เหตุใด เราถึงใช้ Yarn Package Manager แทน NPM

ขณะที่ใช้ NPM คุณอาจพบว่า บางครั้งคุณต้องเจอกับสถานการณ์ต่อไปนี้:

• คุณกำลังติดตั้ง NPM จากนั้นก็เห็นข้อความ Error บนหน้าจอ จากนั้นคุณเรียกใช้คำสั่งเดิมอีกครั้ง แต่ Error กลับหายไปแล้ว บางครั้งสาเหตุก็เกิดจากปัญหา Proxy และ Network แต่หลายครั้งก็ไม่เป็นเช่นนั้น
• คุณมี Project ที่ทำงานอยู่ในเครื่องของคุณที่ Folder หนึ่ง แต่คุณดันไป Checkout  Code ที่ Folder อื่นและทำการติดตั้งที่นั่น ซึ่งมันไม่ทำงานที่นั่นเนื่องจากปัญหาด้าน Dependency
• การ Build Production หรือ Staging Environment ของคุณ ล้มเหลว เนื่องจากปัญหา Dependency ที่เกี่ยวข้องกับ Error ซึ่งไม่มีในเครื่องของคุณตั้งแต่แรก
• Developer คนอื่นที่ทำงานอยู่ใน Project เดียวกันกับคุณ กำลังพบปัญหาด้าน Dependency แต่บนเครื่องของคุณ มันกลับใช้งานได้ดี

ปัญหาทั้งหมดเหล่านี้ เกี่ยวข้องกับปัญหาที่เกิดขึ้นจาก NPM Package Manager ที่ทำงานตามค่าที่ถูก Default มาให้

ข้อแตกต่างหลักๆ ระหว่าง Yarn กับ NPM

NPM ใช้ Semantic Versioning ซึ่งหมายถึง เราจะทำการติดตั้ง Dependency Version ของ Library ที่อยู่ในช่วงของ Version ที่แน่นอน

ในทางทฤษฎีดูเหมือนว่า จะเป็นความคิดที่ดีในการเปิดใช้งานการ Update Patch ของ Dependency อย่างต่อเนื่อง แต่ในทางปฏิบัติ มันกลับไม่ Work อย่างที่ใครๆ ก็คิดกัน

Facebook ก็เคยพบปัญหาเหล่านี้ในงาน Internal Builds เช่นกัน ดังนั้น พวกเขาจึงสร้าง Package Manager สำรอง ที่พวกเขาได้ทำการทดสอบเป็นการภายในอย่างกว้างขวาง จากนั้นจึงมาเปิดเป็น Open Source ซึ่งก็คือ Yarn Package Manager นั่นเอง

เราลองมาใช้งานและเรียนรู้ข้อดีไปพร้อมๆ กัน หากต้องการติดตั้ง Yarn ให้ทำตามนี้:

ใช่แล้ว เราใช้ NPM แต่คิดว่าครั้งนี้อาจเป็นครั้งสุดท้ายที่ใช้มัน :)

ตอนนี้เราได้ติดตั้ง Yarn เรียบร้อยแล้ว เราจะพยายามใช้งานมันให้มากที่สุดเพราะมันไม่เหมือนกับ NPM ตรงที่ช่วยหยุด Dependency Tree และทำให้แน่ใจว่า Code ที่ Run อยู่บน Production และในเครื่องของ Developer คนอื่นๆ เป็น Code เดียวกันกับที่ Run อยู่บนเครื่องของคุณ

แล้ว Yarn ทำงานอย่างไร

จริงๆ แล้วมันค่อนข้างง่าย เมื่อติดตั้ง Project แล้ว Yarn จะหยุดในเรื่อง Dependency โดยจะทำการบันทึกว่ามี Library ใดบ้างที่ถูกติดตั้งลงในไฟล์ที่เรียกว่า yarn.lock

ดังนั้น ในการติดตั้ง File และสร้าง Lock File เราเพียงแค่เรียกใช้คำสั่งต่อไปนี้ใน Directory เดียวกับที่ package.json ของคุณอยู่:

สิ่งนี้ก็เหมือนกับการติดตั้ง NPM ซึ่งหมายถึง:

• มันจะตรวจสอบ package.json และทำการคำนวณ Tree ของ Library Dependencies
• มันจะ Download ทุก Project Dependencies การอ้างอิงโครงการทั้งหมดและเขียนไว้ใน Folder node_modules

นี่คือสิ่งที่ NPM ทำเช่นกัน แล้วเพราะอะไร เราถึงใช้ Yarn แทน

ประโยชน์ 2 ข้อ ของการใช้ Yarn

1. Yarn นั้นเร็วกว่า NPM มาก โดยเฉพาะอย่างยิ่งสำหรับProject ที่มี Dependency จำนวนมาก เช่น Project ที่ใช้ Angular CLI
2. ในการใช้ Yarn คุณจะไม่ต้องเจอสถานการณ์ที่ต้องเรียก NPM Install บ่อยครั้งจนกว่ามันจะติดตั้งเสร็จสมบูรณ์ (แถมมีการล้าง Cache ด้วย) หรือต้องลบ node_modules แล้วทำการ Reinstall อีก

ข้อดีหลักๆ ของ Yarn

Speed ที่ได้รับการปรับปรุงและ Reliability ถือเป็นสิ่งที่ทำให้ Yarn เป็นทางเลือกที่ดีกว่าอยู่แล้ว แต่นั่นอาจไม่ใช่ข้อดีที่สำคัญที่สุด สิ่งที่เยี่ยมยอดที่สุดของ Yarn คือ ในระหว่างการติดตั้ง มันจะคอยเฝ้าตาม Dependency ทั้งหมดที่ถูกติดตั้งไว้

Yarn จะเขียน Version Number ที่ถูกต้องของแต่ละ Library ที่ Download มาและจะใส่ไว้ใน Text File ที่เรียกว่า Lock File ซึ่งคุณจะเห็นมันติดกับ package.json ของคุณเมื่อการติดตั้งเสร็จสิ้น

เรื่องที่ควรรู้เกี่ยวกับ yarn.lock File

แม้มันจะเป็นเพียง Text File ธรรมดา แต่นี่คือจุดสำคัญบางจุดเกี่ยวกับมัน:

• เราไม่ควรแก้ไข File นั้นด้วยตนเอง ควรให้ Yarn แก้ไข File ด้วยตัวมันเองผ่านคำสั่งที่เรา Execute ใน Command Line เท่านั้น
• เราต้อง Commit File นี้ไปยัง Source Control

แล้วอะไรคือข้อดีของมีการ Lock File และของการมี Yarn ล่ะ?

การ Commit File จะทำให้แน่ใจว่า Developer รายอื่นที่ใช้ Code base เดียวกันจะมี Dependency เช่นเดียวกัน ซึ่งมันช่วยอำนวยความสะดวกอย่างมาก เพราะปัญหาจากความแตกต่างของ Library นั้นถูกพบได้บ่อยกว่าที่คิด

แล้วมันจะเป็นอย่างไร ถ้าเรา Commit บางสิ่งแล้ว Integration Build เกิด Fail ขึ้นมาเนื่องจากความแตกต่างระหว่าง Library ใน Server Machine และ Local Machine ของเรา แล้วเราจะ Debug มันได้อย่างไร

ลองนึกภาพอาการปวดหัวที่สถานการณ์ดังกล่าวอาจเกิดขึ้นสิ เพราะคุณอาจไม่สามารถเข้าถึง File System ของ Integration Server

ข้อดีของ Yarn โดยสรุป

การเก็บ Lock File และใช้ Dependency Tree ที่เหมือนกันในทุกๆ ที่ จะช่วยหลีกเลี่ยงปัญหาเรื่องการใช้เวลาจำนวนมาก ดังนั้น ข้อดีของ Yarn ที่เราพอจะสรุปออกมาได้คือ

Yarn ช่วยให้เราทำงานเร็วขึ้น น่าเชื่อถือมากขึ้น และแทบจะทั้งหมดเป็นสิ่งที่สามารถทำซ้ำได้ (Reproducible Builds) นั่นหมายความว่า เราจะไม่ต้อง Debug ข้อบกพร่องเนื่องจากมี Library ที่แตกต่างกันในเครื่องต่างๆ

หากคุณกำลังมองหา คู่มือสำหรับการตั้งค่า Yarn ลองดูวิดีโอนี้.

เกี่ยวกับ NPM Shrinkwrap

หมายเหตุข้อสุดท้ายเกี่ยวกับ NPM คือ มันอาจเป็นไปได้ที่จะหยุด Dependency ใน NPM แต่ Process ถูกรายงานว่า มันเป็น Non-Deterministic คุณลองดู Document ของ Yarn เกี่ยวกับ Shrinkwrap ได้ ที่นี่:

หากคุณกำลังใช้ไฟล์ npm-shrinkwrap.json อยู่คุณก็ควรทราบว่า คุณอาจต้องเจอปัญหาเรื่อง Set ของ Dependency ที่แตกต่างกัน Yarn ไม่ได้ Support NPM Shrinkwrap Files เนื่องจากมันไม่มี Information ที่มากเพียงพอที่จะทำให้ Yarn เป็น Deterministic Algorithm มากขึ้น

ในขั้นต่อไปจะเป็น การติดตั้ง CLI (และ Configure ค่าให้ใช้ Yarn ได้) และติดตั้ง IDE

การติดตั้ง Angular Command Line Interface

ตอนนี้เรามี Package Manager เรียบร้อยแล้ว เรามาเริ่มใช้มันเพื่อติดตั้งทุกอย่างที่เราต้องการกัน ในการติดตั้ง Angular CLI ซึ่งเป็น Command Line Tool ที่เราสามารถใช้เพื่อสร้าง Angular Applications โดยเราสามารถเรียกใช้คำสั่งต่อไปนี้:

ในขั้นตอนนี้ ถ้าทุกอย่างเป็นไปด้วยดี เราควรมี Angular CLI ที่ Command Line หากเราเรียกใช้คำสั่งนี้เราควรมี:

สิ่งนี้จะ Return CLI Version ที่คุณเพิ่งติดตั้งกลับมาให้

คำเตือน: Yarn ถือเป็นเครื่องมือที่ยังค่อนข้างใหม่ หากคุณพบปัญหาในการติดตั้ง Global Dependencies ตัวอย่างเช่น คุณไม่พบ CLI ที่สามารถ Execute ได้ คุณสามารถใช้งาน NPM ได้มากกว่าหนึ่งครั้ง:

ตอนนี้เราได้ติดตั้ง CLI แล้ว มาเริ่มใช้งานกันเลย

มาสร้าง Angular Application แรกโดยใช้ Angular CLI

CLI จะสร้าง Structure มาตรฐานสำหรับ Project ของเราและ Setup ตัว Build ที่ต้องใช้ทำงานให้ ซึ่ง Build จำเป็นต้องใช้ Dependencies ซึ่งจะถูก Download ตามค่า Default ที่ใช้ NPM Package Manager

แต่จากคำแนะนำในการ Configure ค่าของ CLI ตั้งแต่เริ่มต้น ให้ใช้ Yarn Package Manager แทน:

ตอนนี้ถ้าเราใช้คำสั่งของ Angular CLI หลายคำสั่ง เราจะใช้ Yarn แทน NPM ดังนั้น สิ่งต่างๆ จะเร็วมากขึ้น และเราจะมี Reproducible Builds สำหรับ Project ของเรา จากนั้นเรามาสร้าง Application แรกกัน:

มันอาจใช้เวลาสักครู่หนึ่ง แต่มันจะสร้าง Project Structure ใหม่และจะติดตั้ง Dependencies ที่จำเป็นทั้งหมดในครั้งเดียว ขณะนี้เรามี Project ที่พร้อมใช้งานแล้ว เราสามารถเปิดใช้งาน Application ของเราโดยทำตามนี้:

คำสั่ง ng serve ควรจะ Start ตัว Development Server บน Locahost Port 4200 ของคุณ ดังนั้น คุณสามารถไปที่ Browser ของคุณแล้วป้อน URL ดังต่อไปนี้:

คุณควรเห็นหน้าจอว่างเปล่าใน Browser ของคุณ พร้อมข้อความ “app works!”

เราจะตรวจสอบ Application นี้ทีละขั้นตอนในบทความอื่นๆ ถัดไป แต่จะดีกว่าไหมที่จะตรวจสอบ Application ที่มีอยู่แล้วใน Development Environment ของเรา งั้นมาเริ่มกันจากตรงนั้น

การ Setup IDE - Webstorm หรือ Visual Studio Code

มี IDE ดีๆ ที่น่าสนใจอยู่ 2-3 ตัว เช่น Microsoft Visual Studio Code IDE ซึ่งมันฟรี! ด้วย: 

https://code.visualstudio.com

นอกจากนี้ยังมี Webstorm IDE ซึ่งมีอยู่ 2-3 Version ที่คุณสามารถลองใช้ได้ และนี่คือ Free Trial Version: 

https://www.jetbrains.com/webstorm

และนี่คือ Free Early Access Program Edition พร้อมด้วย Feature ล่าสุด: 

https://confluence.jetbrains.com/display/WI/WebStorm+EAP

หลังจากติดตั้ง IDE เราก็ต้องเปิด Folder ที่มี Angular CLI Project อยู่ในนั้น แล้ว Project ใหม่จะถูกสร้างขึ้น

Webstorm จะตรวจหา Typescript version ที่คุณใช้ภายใน node_modules อัตโนมัติ และจะใช้มันในการ Compile Code และแสดง Error ต่างๆ

Feature ที่สำคัญของ IDE environment

นี่เรากำลังหมายถึงว่า เราไม่จำเป็นต้อง Configure ค่าของ Typescript ด้วยตนเอง แล้วจบลงด้วยสิ่งที่ไม่พึงประสงค์ เช่น การมี Compiler Behavior ที่แตกต่างกันระหว่าง Command Line และ IDE โดยไม่ได้ตั้งใจ

นี่คือสิ่งที่เราต้องการหลีกเลี่ยง โดยเฉพาะอย่างยิ่งหากเรากำลังเพิ่งเริ่มต้นกับ Angular Ecosystem เราต้องการประสบการณ์ที่การติดตั้งเป็นไปอย่างราบรื่น และ IDE ก็ใช้งานได้

Webstorm สามารถใช้งานร่วมกับ Angular ได้เป็นอย่างดี เช่น เราสามารถข้ามจาก Template ไปยัง Component Class Method ได้โดยตรง การติดตั้ง Webstorm ควรเป็นไปอย่างราบรื่นและด้วยสิ่งนี้ เราจะมี Development Environment ที่จะเป็นพื้นฐานสำหรับการสำรวจ Angular Framework ที่เรากำลังจะทำ

ที่มา:  https://blog.angular-university.io/