Front-End Engineer เร็วส์ แรง แม่นยำ

“เฮ้ย! ทำไม CSS เรามันเรียงกันสวยงามมีหลายบรรทัดจังหวะ วันก่อนพี่นั่งนับ แม่งหมื่นกว่าบรรทัด พี่ขอแบบสั้นๆ ได้ไหม บรรทัดเดียวอ่ะ เขาเรียกอะไรนะ มินิไฟ มินิฟง เห็นเขาพูดกันเรื่องกรั้นจ์ กรั้นจ์ อะไรไม่รู้ พี่มันขาร็อค ลองไปหาดูหน่อยสิ”

“เฮ้ย! ลด http request ให้พี่สักสองสามอันหน่อยดิ หน้าเว็บเราจะเร็วขึ้นโดยรวม 0.87 มิลลิเซคคั่นเลยนะ นายคิดดูวันๆ สิบกว่าล้านเพจวิว คนเข้าสองสามแสน เว็บโหลดเร็วขึ้นก็เท่ากับประหยัดเวลาให้กับยูสเซ่อร์มากยิ่งขึ้น คนไทยก็สามารถเอาเวลาไปทำอย่างอื่นได้อีก ประหยัดไฟ ช่วยชาติ คืนความสุข”

“เฮ้ย! นายลองไปดู รีแอ็ค กับ แองกูล่าร์ หน่อยดิว่ามันต่างกันยังไง อันไหนมันดีกว่ากัน แล้วเราจะเอามาผสมพันธุ์กันระหว่างรีควาย แบ็คโบน เจคิวรี่ เฮดเจเอส ได้ยังไง แล้วอย่าลืมเรื่องสปีดด้วยนะ ที่คีนู รีฟ เล่นเป็นพระเอกน่ะ มันต้องเร็วกว่านรก เพจเรนเดอริ่งต้องห้ามเกิน 800 มิลลิเซคคั่น ส่วน ดอม พี่ให้ได้แค่ 900 มิลลิเซคคั่น ราคานี้ไม่ได้บอกผ่านนะน้อง”

“เออ แล้วพวกมึงอย่าบ่นกันมากเรื่องเขียน CSS ซ้ำกันไปซ้ำกันมา JavaScript ที่มั่วๆ ลองไปดูเรื่อง CSS Lint กับ JSHint หน่อยดิ ว่ามันช่วยอะไรได้ไหม แต่กุเห็นพวกมึงบ่นกันมานานแล้วนะว่าพวกมึงจะทำ Code Review กับ TDD ใน JavaScript ที่เขียนๆ กันเหมือนที่พวกเขียน PHP, Java หรือ Python เขาเขียนกัน วันก่อนกุเข้าไปดูใน Git ยังเห็นตั้งชื่อ class ภาษาอังกฤษผิดๆ ถูกๆ กันอยู่เลย อย่าบอกนะว่านั่น รีวิวกันแล้ว”

จาก 4 เรื่องราวฮาๆ ข้างบนนั่นแม้มันอาจจะจริงบ้าง ปลอมบ้างแต่มันก็คือสิ่งที่เราหลีกหนีไปไม่ได้ ถ้าคุณได้ยินอะไรทำนองนี้ แสดงว่าคุณมาถูกทาง Front-End ยุคใหม่แล้วครับ มันไม่ใช่อยู่ดีๆ เพียงแค่ทำเสียงดังจากการบดขยี้กันในเวลาอันรวดเร็วระหว่างหัวแม่มือด้านที่ตนเองถนัดกับนิ้วกลางแล้วความรู้ระดับเทพจะลงมาจุติในสมองเรา มันต้องใช้เวลาและความอดทนในการพยายามที่จะเรียนรู้เรื่องราวทั้งหลาย ผ่านการลองผิดลองถูก Deploy แล้วหน้าพัง สั่ง Jenkins Build แล้วหน้าขาวเหมือนใช้ครีมสาวๆ มาแล้วทั้งนั้น นี่ยังไม่นับพวกที่ชอบ “เชอร์รี่พิก” แต่ดันกลายเป็น นิ๊ค นิรนาม หยิบผิด กันอีกนะ เรียกได้ว่า “เจ็บมาเยอะ” กว่าจะมาถึงจุดนั้น ซึ่งก็ยังห่างไกลกับคำว่าจุดหมายที่กำลังจะมุ่งไปของพวกบ้าพลังทั้งหลาย

less sass js

ชีวิต Front-End Engineer เริ่มต้นที่ตรงไหน

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

การขยายตัวของเว็บ (Scalability)
ไม่ใช่เฉพาะคนที่จะมาเป็น Front-end Engineer เท่านั้นที่ต้องคำนึงถึงสิ่งนี้ ทุกๆ คนที่มีส่วนร่วมก็ต้องพึงระลึกไว้เสมอ เวลาที่เราต้องเริ่มเขียน CSS หรือ JavaScript สิ่งที่ต้องระมัดระวังในเรื่องนี้ก็คือ ขยะที่เกิดจากการไม่ได้วางแผนที่ดีก่อนที่จะลงมือเขียน ผมขอแนะนำก่อนที่จะลงมือเขียนเหี้ย ห่าอะไรลงไป ให้วางโครงสร้างการ import และการรวมไฟล์เอาไว้ก่อน
การทำงานร่วมกันโดยที่ไม่มีอะไรพังเมื่อมีใครสักคนเขียนอะไรใหม่ๆ เพิ่มเข้ามา (Team)
มี CSS Designer ไม่น้อยยังไม่รู้จักว่า Version control คืออะไร อย่าถามเลยว่าใช้ Git กันใหม GitHub คืออะไรหรืออีกมากมาย “สู้ FTP กุได้ไหมสาดดด” เชิญพี่กลับไปเผาศพลนเอาน้ำมันพลายต่อในถ้ำเถอะครับ
เขียน CSS, JS ให้บินได้ (CSS JS Next Level)
ผมมี List กากส์ๆ ที่พอจะเอาไปใช้ได้สำหรับผู้ที่จะเริ่มต้นมองหาอะไรใหม่ๆ บ้างใช้แล้วบินได้แต่ไม่ถึงขั้นบินไปถึงดาวอังคารประมาณนี้ครับ

  • (ขอข้าม Node.js เลยนะครับ)
  • อันดับแรก ทำความรู้จัก JavaScript Task Runner ตัวนี้กันก่อน Grunt
  • หมดเวลาแล้วสำหรับการมานั่งเขียน CSS แบบยุคดึกดำบรรพ์ เชิญแวะดื่มน้ำเย็นในค่ายกับ LESS หรือ SASS
  • เลือกให้ได้ระหว่าง Angular หรือ React หรือจะเอาไปผสมกับ Backbone หาข้อดีข้อเสียของมันให้ได้ จะเยี่ยมมากถ้าหากฟัดมันได้ทั้งสาม
  • อะไรเอ่ย ไม่ได้ใช้ อย่าโหลด” หมดเวลาแล้วสำหรับการโหลดมาให้หมดทั้งร้อยเป็นพันเก้า จะเอาตัวไหน HeadJS, RequireJS, LABjs, yepnope.js หรือ LazyLoad ทุกตัวมีความแตกต่างอย่างมีสไตล์ของตัวเอง
  • ใครเขามานั่ง Refresh หรือตามไล่ดูจาวาสคริปต์ error ในหน้าเว็บกันทุกๆ ครั้งที่ Save CSS, HTML หรือ JS ลองดูอาวุธเหล่านนี้
    1. ใช่ Engineering ทั้งหลายมีกรรมมาแต่ปางก่อน เรามาแก้กรรมกันโดยไม่ใช้แม่ชีสักหน่อย ด้วย Karma ข้าวสารเสกที่จะช่วยปัดเป่าความกากส์ให้หมดไป
    2. ถ้ามีดาบเหล่าน้ี Jasmine, QUnit, Mocha, Capybara, WebDriver และอื่นๆ ก็ต้องมี PhantomJS ที่จะมาช่วยเราทำ Test ในงานได้
    3. ถ้าเราอยากจะเขียน CSS แบบ LESS, SASS หรือ KSS ให้มันกากส์ เราก็ย่อมทำได้ มีเยอะแยะที่ปากบอกว่าเขียน SASS หรือ LESS แต่โค้ดข้างในไม่เห็นแม่มต่างกันตรงไหนกับการนั่งจิ้ม CSS เขียน selector เดิมสามครั้งในไฟล์เดียวแบบยุค 80 เชิญพบกับยาแก้ปะดงเลือดปะดงลม CSS Lint
    4. กรณีเดียวกับด้านบนแต่เป็น JavaScript จัดไปไฮคูล JS Hint
    5. Save ปุ๊บเห็นปั๊บ BrowserSync ไม่ว่าคุณจะเปิดบราวเซอร์ใน Device ไหนๆ ค้างไว้ พี่เขาจะตามไป Refresh ให้ในบัดดล
  • สำหรับตัว MiniFy JS กับ CSS เชิญไปแสวงหากันตามสุมทุมพุ่มไม้ต่อเลยครับ
อื่นๆ ที่ไม่จำเป็นต้องเก่ง แต่ขอให้เข้าใจว่ามันทำงานยังไง
  • ชีวิตต้องเดินตามหาความฝัน เพื่อไม่ให้ขาดตอน จัดไปในยุค Continuous Integration ในแบบฉบับของ Jenkins เขียนโค้ดมาตั้งมากมาย ต้องตบด้วยพี่เขานี่แหละ
  • ถ้าพี่ยังมีเวลา ขอจัดหนักกับ Selenium เพื่อ Automated Test กันหน่อยกับ Sauce Lab
  • อื่นๆ อีกมากมาย

จะว่าไปแล้วทั้งหมดทั้งมวลที่กล่าวมานั้น ผมเองทำไม่ได้ซักกะอย่างครับ ไม่ต้องถามต่อนะครับว่าจะเอามารวมกันแล้วใช้งานมันยังไง หน้าที่ผมแค่ทำตัวกากส์ๆ และคอยซื้อเบียร์ รวมทั้งคอยพล่ามไอ้ประโยค 4 อันแรกนั่นแหละ

Front-End Engineer จะมุ่งไปตรงไหน

ผมเชื่อว่าในสภาวะการณ์ปัจจุบัน งานในตำแหน่ง Front-End เป็นตำแหน่งที่อยู่ในความต้องการทางเพศ เอ้ย! ของตลาดสูง โดยเฉพาะถ้าใครที่มีความรู้ความเข้าใจใน List ด้านบนที่ผมไล่มาเป็นอย่างดี ข้างนอกนั่นมีบริษัทไม่น้อยที่พร้อมจะเอาเงินฟาดหัวคุณเข้าไปอยู่ในชายคาเดียวกับเขา พวกเรากำลังมองหา Front-End Engineer สำหรับยุคปี 2024 ผู้ซึ่งจะมาแนวใหม่ล้ำไปในอนาคต

ความกลัว ความยาก ไม่มีทางนำมาซึ่งความก้าวหน้าหรือความสำเร็จ อีกอย่าง “การเริ่มต้นนั้น สวยงามเสมอ

มีความสุขกับการใช้ชีวิตครับ

ปอ. บทความนี้ขอขอบคุณน้องๆ พี่ๆ ในทีมงานทุกท่านที่พยายามค้นคว้า ลองผิดลองถูก เจ็บปวด เรียนรู้กันไป โดยเฉพาะ “อ๊อดแอ่ด” บุรุษผู้นำมาซึ่งของแปลกแต่จริง ถึงแม้หลายคนในทีมจะปวดหัวกับการกวนตีนและชอบพาเพื่อนๆ ออกจับปลาในอ่าวไทยเป็นครั้งคราวของเค้าก็ตามทีและเรากำลังเรียนรู้ไปพร้อมๆ กัน

สาย 8. คนที่กด Deploy แล้วไม่เคยเจอหน้าขาวๆ แสดงว่าท่านยังไม่ได้มาถึงขั้นสูงสุดแห่งประสบการณ์ สติจงอยู่กับท่าน (มึงไม่ Deploy เองมึงไม่รู้หรอก)

นครชัยแอร์. บทความต่อไปผมจะเริ่มตั้งสติบอกเล่าการทำงานร่วมกันระหว่าง UX UI และ Front-End ว่าชีวิตเขาเหล่านั้นปวดหัวขนาดไหน

Back to Top

2 Responses to Front-End Engineer เร็วส์ แรง แม่นยำ

Leave a Reply to Emotionalist Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top