Front-end development landscape

เมื่อเร็วๆ นี้ผมได้มีโอกาส on-boarding นักพัฒนาสาย Java ให้มาเรียนรู้ front-end development คิดว่าเนื้อหาอาจจะมีประโยชน์กับบุคคลทั่วไปเลยเอามาลงใน blog นี้ด้วย เนื้อหาในที่นี้เน้นพาทัวร์ไปดูหลายๆ อย่าง เลยอาจจะไม่ได้เจาะลึก

เมื่อเทียบกับ Java แล้ว Javascript ถือว่ายังเด็กพอสมควร รูปแบบการพัฒนาค่อนข้างไม่ค่อยมีมาตรฐาน มีตัวเลือกค่อนข้างมาก มี library เกิดใหม่และตายค่อนข้างเร็ว แต่ปัจจุบันผมก็รู้สึกว่า Javascript ค่อนข้าง stable ขึ้นมากแล้ว ตอนนี้อาจจะเป็นโอกาสดีที่ Java developer จะโดดเข้ามา เพราะสิ่งที่คุณจะเรียนรู้ไม่ถือว่าช้าเมื่อเทียบกับคนอื่น งานที่ผมใช้ทุกวันนี้ส่วนใหญ่ก็มาจากการเรียนรู้ไม่เกินปีนึงเท่านั้น

เพื่อให้ง่าย เพราะ front-end development มันมีหลายสายมาก ผมถือโอกาสแบ่ง development ออกเป็น 2 ขั้น คือ node development แล้วค่อยเป็น front-end development

Node development

node development คือ การพัฒนาแบบรันบน nodejs เท่านั้น เราจะได้ตัดส่วนของ platform ต่างๆ ออกไป สิ่งที่เราจะได้เรียนรู้คือ การพัฒนา Javascript รูปแบบใหม่ ว่าประกอบด้วยอะไรบ้าง ถ้าคุณรู้จัก Java อยู่แล้ว คุณแทบจะกลายเป็น node developer ได้โดยทันที

ถ้าคุณเป็น node developer คุณจะสามารถพัฒนา application ต่างๆ เหล่านี้

  • js library
  • command line application
  • web api
  • web application

สิ่งแรกที่คุณต้องรู้จักเลยคือ npm, npm ก็คือ maven ในโลกของ Javascript การจะมี npm คุณต้องลง nodejs ก่อน (https://nodejs.org/en/download/) command ที่คุณควรจะรู้จักคือ

  • npm init สำหรับสร้าง npm project (package.json)
  • npm i -S {package name} สำหรับการ install package อันนี้ก็เหมือนกับการเพิ่ม package ใน maven
  • npm i -D {package name} สำหรับ install package ไว้ใช้ตอน build หรือ test อันนี้ก็เหมือน package ที่เป็น scope test ใน maven
  • npm i อันนี้ก็เหมือน mvn install ไว้สำหรับ install missing package
  • npm publish อันนี้ไว้ใช้สำหรับ push package ขึ้น npm repository

ถัดมา IDE สำหรับพัฒนา ที่ผมเห็นคนรอบๆ ข้างใช้ก็มีดังนี้

  • WebStorm IDE สุดเทพของค่าย Jetbrains และกับการจ่ายตังค์นิดหน่อยแต่ได้ feature ครบ แต่สาย Java บางคนจะมี IntelliJ รุ่น Ultimate อยู่แล้ว ใช้ IntelliJ Ultimate ก็ได้
  • Visual Studio Code จาก Microsoft เท่าที่ลอง IDE ที่ฟรีทั้งหลาย ผมชอบตัวนี้ที่สุด แนะนำลง plugin Typescript Importer ด้วย จะได้ไม่ต้องเขียน syntax import เอง
  • Sublime Text เท่าที่เห็นคนใช้คือคนที่ Anti-Microsoft

ถัดมาสำหรับการพัฒนา ผมขอแนะนำ Typescript สำหรับเป็นภาษาในการพัฒนา ยิ่งถ้ามาจาก Java เราน่าจะชอบ strong type มากกว่าภาษา script อย่าง Javascript Typescript syntax จะเหมือน Javascript ทุกอย่าง เพียงแต่จะเพิ่ม type เข้ามา และเมื่อเขียนเสร็จแล้วก็ compile กลายเป็น Javascript เหมือนเดิม แต่เราจะได้ประโยชน์ต่างๆ ดังนี้

  • compile time checking คือ ก่อนหน้านี้ ผมเคยพัฒนาโครงการใหญ่ๆ ด้วย Javascript ล้วน ผลก็คือมันมั่วมาก มันไม่ควรจะมี bug ที่ไม่สมเหตุสมผล ประเภทชื่อตัวแปรผิด ส่งข้อมูลผิด แต่มันก็มีเยอะมาก ตอนย้ายทั้งโครงการมา Typescript ใหม่ๆ ก็ยังคิดอยู่ว่าคุ้มหรือเปล่า แต่ตอนนี้ตอบได้เลยว่าคุ้มมาก เพราะหลังจากย้ายไป Typescript แล้ว เราก็ได้ fix bug ที่มันเป็น bug จริงๆ สักที
  • code assist สิ่งที่แถมมากับ strong type ก็คือ ตัว compiler มันจะสามารถช่วยเราได้ว่าจะจัดการกับ code เรายังไง เช่น เมื่อเราต้องการเปลี่ยนชื่อตัวแปร compiler มันก็จะรู้ว่าต้องตามไปเปลี่ยนที่ไหนบ้าง เมื่อเรากด dot (.) compiler ก็จะรู้ว่าต้องแสดง member อะไรบ้าง และเราสามารถหาได้ว่า code ของเราส่วนนี้ใช้ที่ไหนบ้าง และโดนประกาศที่ไหน
  • targeting เวลาเราเขียน code ด้วย typescript เราจะสามารถ compile เป็น es รุ่นไหนๆ ก็ได้ (es3, es5, es6, es2016) es รุ่นต่างๆ ก็เหมือน java รุ่นต่างๆ (java 7, java 8) และเราสามารถ target เป็น module ประเภทต่างๆ ได้ (commonjs, amd, umd) เรื่องพวกนี้ เราจะมาว่ากันทีหลัง

ถัดมาเรื่องของ test ตัวหลักๆ เท่าที่เห็นคนใช้ก็คือ

  • Jasmine เป็น test framework ตัวเดียวแต่ใช้ได้ครบเครื่องทั้ง test, assert และ mock
  • Mocha + Chai + Sinon เป็นชุดสำหรับ test ที่แต่ละ library ทำเรื่องเดียว Mocha เป็น test framework, Chai เป็น assertion, Sinon เอาไว้ทำ spy stub mocks ผมใช้ชุดนี้อยู่ เพราะคิดว่าใช้ library ที่เก่งเฉพาะด้านน่าจะได้ feature ครบกว่า

Library อื่นๆ ที่แนะนำ

  • express: คล้ายๆ กับ Spring MVC สำหรับทำ Web Api หรือ Web Application ถ้าใช้กับ Typescript ผมแนะนำให้ใช้ routing-controllers ด้วย
  • bluebird: เขียน application ปัจจุบันใช้ asynchronous เยอะมาก การ Debug code พวก asynchronous มักจะยาก เพราะ stack-trace มันไม่ต่อเนื่องกัน แต่ bluebird จะช่วยต่อ sequence ของ stack-trace ให้
  • axios: เทียบได้กับ RestTemplate ไว้ใช้สำหรับ http client สามารถใช้ได้ทั้ง node และ browser
  • poucbdb: เทียบได้กับ JpaRepository มี interface เดียวแต่ต่อได้หลาย storage ถ้าใช้กับ typescript ผมขอแนะนำ pouchdb-repository (ที่เขียนโดยผมเอง)
  • moment: ไว้ใช้จัดการ Date คล้ายๆ กับ JodaTime

Demo

เป็น Todo rest api เขียนด้วย express ลองไปเล่นได้ ที่ https://github.com/chaowlert/todo-api

ยังไม่จบนะครับ เดี๋ยวค่อยมาต่อกันตอนที่ 2