Front-end development landscape (2017) — 2
ตอนที่แล้ว ผมได้พูดถึง Node Development คร่าวๆ ว่าต้องเรียนรู้อะไรบ้าง คราวนี้เรามาต่อกันว่า ถ้าอยากเป็น Front-end developer ต้องเรียนรู้อะไรเพิ่มบ้าง
Front-end Development
โลกของ front-end จะซับซ้อนขึ้นกว่า node แน่นอน เพราะ platform ที่คุณจะต้องรองรับมันหลากหลาย ถ้าคุณเป็น Front-end Developer แล้วละก็ คุณจะสามารถพัฒนา application ต่างๆ เหล่านี้
- Single Page Web Application
- Hybrid Mobile App โดยใช้ Cordova
- Native Mobile App โดยใช้ ReactNative หรือ NativeScript
- หรือ Desktop App โดยใช้ Electron
ทีนี้มารู้จักกับ es กันก่อน es version ต่างๆ ก็เหมือน java 7, java 8 ปัจจุบัน เราสามารถแบ่ง platform ตาม es รุ่นต่างๆ ได้ดังนี้
- es5: สำหรับทำ Cordova app บน Android, web app บน Internet Explorer
- es6 หรือ es2015: สำหรับ application บน Node 6, Cordova app บน iOS, web app บน browser รุ่นปัจจุบัน
- es2016: สำหรับ browser รุ่นใหม่ๆ และ application บน Node 7 (Node 7 ไม่มี long-term support)
ถ้าคุณใช้ Typescript ก็ง่ายหน่อย เพราะ Typescript สามารถ compile เป็น es รุ่นต่างๆ ได้เลย es รุ่นสูงๆ จะรองรับ es รุ่นต่ำกว่าไปในตัว ดังนั้นถ้าคุณอยากให้ application ของคุณรองรับทุกๆ platform แล้วล่ะก็ target ไปที่ es5 เลยก็ได้ ในขณะที่คุณใช้ Typescript เขียน application แบบใช้ es รุ่นล่าสุดได้อย่างสวยงาม
import * as myModule from 'my-module';ถัดมาคือเรื่อง module type ปัจจุบันเราจะใช้ es6 import เพื่อบอกว่าไฟล์ที่กำลังทำงานอยู่มี dependencies กับไฟล์ไหน หรือ package ไหนบ้าง แต่เวลาเรา config ใน tsconfig.json เรามักจะตั้งค่า module เป็น commonjs เพราะว่าปัจจุบัน platform ต่างๆ ยังไม่ค่อยรองรับ module type แบบ es6 import
module แบบอื่นๆ เช่น AMD, UMD ไม่ต้องไปสนใจก็ได้ เพราะหลังๆ ความนิยมเริ่มไปทาง commonjs ขึ้นเรื่อยๆ
ถ้าคุณเคยมาเฉียดๆ front-end development มาก่อน คุณอาจจะเคยได้ยินคำว่า bower ซึ่งเป็น package management เช่นเดียวกับ npm แต่ technology รุ่นหลังๆ เช่น Browserify หรือ Webpack สามารถ bundle ไฟล์แบบ commonjs ให้ bundle มาใช้บน web ได้เลย หรืออาจจะใช้ library ประเภท module loader เช่น SystemJS หรือ StealJS ซึ่งสามารถ load module ประเภท commonjs ได้โดยตรง ทำให้หลายๆ library ก็เริ่มรองรับแบบ commonjs บน npm เพียงอย่างเดียว ทำให้ bower เริ่มหมดความนิยม
เครื่องมือที่ใช้ bundle ที่นิยมที่สุดก็คือ Webpack และ Webpack เองไม่ได้มีไว้แค่ bundle อย่างเดียวเท่านั้น มันยังมี webpack-dev-server ไว้ run web ได้เลย ไม่ต้องใช้ web server tool เช่น BrowserSync และมี loader ต่างๆ ไว้จัดการ asset files เช่น html css รูปภาพ ซึ่งทำให้เราสามารถลดการใช้ Gulp หรือ Grunt ได้เลย
ตอนที่แล้วเราคุยกันถึงเรื่อง test framework อย่าง Mocha หรือ Jasmine แต่สำหรับ front-end development เราต้องการ browser เพื่อมาจัดการกับ dom และ style เราเลยต้องการ test runner อย่าง karma ซึ่ง karma มีความสามารถเอา code เราไป run browser ไหนก็ได้รวมถึง PhantomJS browser ที่ไม่มีหน้าต่างจริงๆ ทำให้เราสามารถเอาไป run บน CI ได้อย่างสะดวก
ถัดมาคือเรื่อง Mvc Framework ซึ่งเกิดมาเป็นดอกเห็ด ผมขอแนะนำตัวดังๆ แค่ 2 ตัว
- Angular เคยเป็น framework ที่นิยมสุดๆ แต่เพราะเรื่องความซับซ้อน กับเรื่อง performance Angular เลยออก Angular 2.0 ที่แทบจะเรียกได้ว่าเป็น framework ใหม่ (แต่ใช้ชื่อเดิม) คนเลยหนีค่อนข้างเยอะ
- ในขณะที่ React ชูจุดเด่นเรื่องทำเรื่อง view เพียงอย่างเดียว และมี Syntax พิเศษไว้จัดการ view เรียกว่า jsx (หรือ tsx ใน typescript) ทำให้เราสามารถตรวจ error บน view ได้ตอน compile time ปัจจุบัน ความนิยมของ react ค่อนข้างนำโด่ง (ณ เวลาที่เขียนบทความนี้ ดาวบน angular อยู่ที่ 23K ส่วน ดาวบน react อยู่ที่ 64K)
สุดท้ายเรื่อง UI Components Framework ผมขอแนะนำ 3 ตัว
- Bootstrap: ตัวนี้นิยมมากที่สุด Component ค่อนข้างครบ มี theme สวยๆ เพียบ
- Ionic: จริงๆ ตัวนี้เป็นมากกว่า UI Component เพราะมี tool ต่างๆ ให้ด้วย ตัวนี้พยายามทำ look & feel เลียนแบบ native
- Angular Material: สำหรับผู้ที่ชื่นชอบ Material Design ผมชอบที่ Component ต่างๆ animation ค่อนข้างลื่น
Demo
ที่กล่าวมาทั้งหมด ดู Demo ได้ที่ https://github.com/chaowlert/todo-app เป็น Todo App เขียนด้วย AngularJS ต้องใช้คู่กับ todo-api จากตอนที่แล้วด้วยนะครับ ถึงจะเล่นได้
Slide สำหรับ presentation ไปดูได้ที่ https://www.slideshare.net/chaowman/front-end-development-74876988 ครับ