วันเสาร์ที่ 7 มกราคม พ.ศ. 2560

Ionic: The Flow

หลังจากที่เราได้ดู code กันไปแล้ว ทีนี้มาดูภาพที่ผมวาดขึ้นเอง (จากความคิดในตอนนี้) กันบ้าง และนี่คือสิ่งที่ผมเข้าใจครับ

คิดตามผมนะ ปกติแล้วหน้าเว็บหนึ่งหน้าสามารถเขียน html css และ javascript ลงไปได้เลย แบบรูปด้านล่าง



และเมื่อเราพยายามแยกมันทั้งหมดออกจากกัน กลับได้ว่า ส่วนแสดงผลแท้จริงต้องการสองอย่าง ได้แก่ html กับ css และส่วนข้อมูลคือ javascript

ฉะนั้นเรียก html + css ว่า view และเรียก javascript ว่า model ครับ



Angular framework ก็จัดการสองส่วนนี้ มันจึงเป็น MV* แบบนี้ไง



เพื่อนๆควรทราบว่าคลาสใน angular แท้จริงเป็น service โดยธรรมชาติ (ตอนนี้หากไม่ทราบความหมายของ service ก็ไม่เป็นไร อ่านผ่านๆไปก่อน ความหมายอย่างกว้างของมันก็คือคลาสบริการเกี่ยวกับข้อมูล) จากคลาสธรรมดาที่ไม่มีหน้าตาเป็นของตัวเองก็จะมีหน้าตาเป็นของตัวเองได้เมื่อเรากำหนด @Component ให้กับมัน นั่นหมายความว่า model ก็จะรวมกับ view และเรียกตัวเองเสียใหม่ว่า component

angular จึงประกอบแต่ละ component ขึ้นเป็นหน้าเว็บ แอปที่มีเพียงหนึ่งหน้าเว็บแล้วใช้หลักการเปลี่ยนแปลง content เฉพาะส่วนถูกเรียกว่า single page application ครับ

ทีนี้เวลาจะวาดหน้าตาให้กับ component ส่วนนี้จะถูกเรียกว่า template ดังรูป


และเพื่อให้ส่วน template นี้มีความเป็นมิตรกับสมาร์ทโฟน แถมยังให้ความรู้สึกดั่งได้เล่น app ที่เขียนด้วยภาษาและให้รูปลักษณ์เช่นเดียวกับชนิดของระบบปฏิบัติการของสมาร์ทโฟนนั้นๆ น้อง ionic จึงอาสารับงานนี้ไปทำแทนพี่ angular



***หมายเหตุ ถ้าผมพูดถึง angular ก็หมายถึง angular เวอร์ชัน 2 เช่นเดียวกัน ionic ก็หมายถึง ionic เวอร์ชัน 2 ด้วย

งานนี้ ionic framework อาสารับไปจัดการส่วน view ให้



และนี่ก็คือภาพรวม เมื่อ ionic ต้องการติดต่อไปยังตัวระบบปฏิบัติการของสมาร์ทโฟน มันก็จะทำผ่าน cordova framework อีกที



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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น