อยากทำงาน Frontend developer

Arthorn Kittinukul
Sep 13, 2019 · 2 min read

สวัสดีครับ… หลังจากบทความที่เเล้วผมได้แนะนำสายอาชีพ Backend developer กันไปเล้ว วันนี้ผมจะมาเล่าให้ฟังเกี่ยวกับ Frontend developer ว่าอาชีพนี้ทำงานกันยังไง blog นี้เหมาะสำหรับผู้ที่กำลังจะเริ่มศึกษา เริ่มเรียนสาย programmer หรือคนที่อยากเปลี่ยนสายงานมาเป็น progrommer เผื่อจะได้ความรู้เล็กๆ น้อย ๆ หรือดูว่าตัวเองชอบไหมกับการทำงานเเบบสายนี้ เกรินไปซะนานมาเริ่มกันเลยดีกว่า…

Image for post
Image for post

Frontend developer หรือเรียกง่าย ๆ ว่าคนที่ทำงานในส่วนของฝั่งผู้ใช้งานจะสามารถเห็นได้ นั้นก็คือหน้าจอ สี รูปภาพ ปุ่ม การเคลื่อนไหวต่างในเว็บ เเละอื่นๆ อีกมากมาย ซึ่งการทำงานของ Frontend developer นั้นจะต้องมีความรู้ในด้าน HTML, CSS, และ JavaScript และแน่นอนว่า Frontend developer สามารถทำหน้าตาเว็บออกมาให้เหมือนกับตอนที่ designer ได้ออกแบบไว้นั้นเอง

สำหรับคนที่พึ่งจะเริ่มเรียนหรือเปลี่ยนสายมาทำงานทางด้านการเขียน program ส่วนใหญ่เเล้วจะมาเริ่มกันที่ HTML, CSS และ JavaScript อย่างเเน่นอน เพราะนี่ถือเป็นพื้นฐานที่สำคัญมากในการเขียนโปรเเกรม ซึ่งสิ่งที่จะได้นั้นก็จะเป็นหน้าตาเว็บออกมาสักเว็บนึงหรือ บางคนที่เก่งขึ้นไปอีกขั้นก็สามารถเอา skill ไปปรับใช้กับการเขียน mobile app ได้อีกด้วย แน่นอนว่ากว่าจะไปถึงตรงนั้นมันต้องเริ่มจากพื้นฐานเเละต่อ ยอดไปเรื่อยๆ

ต่อไปนี้ผมก็จะขอเรียงลำดับไปเลย ว่าถ้าอยากทำงานสาย Frontend เนี้ย ควรเริ่มจากเรื่องไหนบ้าง

  1. HTML
    HTML— เป็นภาษาพื้นฐานที่เอาไว้ใช้เขียนเว็บเพื่อเอาไว้เเสดงข้อมูลต่างๆ ถ้าให้เปรียบเทียบก็จะเหมือนกับโครงสร้างของบ้าน ซึ่งตัวโค้ดจะแสดงโครงสร้างของในการแสดงข้อมูล หัวข้อ ลิงก์ ย่อหน้า รายการ ตาราง หรือแม้เเต่รูปภาพว่าควรจะอยู่ตรงไหน
    ศึกษาเพิ่มเติม: https://www.w3schools.com/html/
  2. CSS
    CSS(Cascading Style Sheets) — เป็นภาษาที่ช่วยให้เราสามารถตกเเต่งความสวยงาม การจัดตำแหน่ง สีสัน เพิ่มเติมได้จาก HTML ที่เราเเสดงข้อมูลเอาไว้ ศึกษาเพิ่มเติม: https://www.w3schools.com/css/
    ถ้าสามารถเขียน CSS ได้คล่องเเล้วก็ลองมาดูที่ Sass ดูครับ มันก็คือ CSS Preprocessor เอาไว้เขียน CSSในรูปแบบฟังก์ชั่น ได้ แปลว่า สามารถสร้าง template สำหรับ CSS ได้ แทนที่จะต้อง copy-paste และสามารถเก็บค่าต่าง ๆ ไว้ในตัวแปร แล้วนำมาคำนวนค่า เพื่อความสะดวกรวดเร็วในการใช้งาน
    ศึกษาเพิ่มเติม: https://sass-lang.com/guide
  3. JavaScript
    JavaScript — เป็นภาษาที่เรียกว่า “สคริป” ที่เอาไว้เขียนคู่กับ HTML เพื่อเพิ่มความเคลื่อนไหวให้กับหน้าเว็บ สามารถตอบสนองผู้ใช้งานได้มากขึ้น เช่น ถ้าเราทำเว็บที่เอาไว้ลงทะเบียน เราก็จะใช้ JavaScript ในการเช็คข้อมูลว่า คนมากรอกข้อมูลเขาใส่ข้อมูลให้เราครบรึเปล่า หรือเขาใส่ข้อมูลให้เราถูกรึเปล่า ถ้าไม่ถูกหรือไม่ครบ เราก็ให้เว็บมีการเเจ้งเตือนเด้งขึ้นมาบอก คนกรอกว่าใส่ตรงไหนไม่ครบหรือใส่ตรงไหนผิดนั้นเอง
    ศึกษาเพิ่มเติม: https://www.w3schools.com/js/

หลังจากที่ได้ศึกษาทั้ง 3 เรื่องในด้านบนไปเเล้ว ต่อไปจะเริ่มนำเอาความรู้ตรงนี้มาใช้กับ JavaScript library

ทำไมถึงต้องใช้ library? เพราะว่า library นั้นจะช่วยให้เราเขียนหรือพัฒนาเว็บออกมาได้รวดเร็วเเละให้คนอื่นสามารถพัฒนาต่อได้ง่ายขึ้นนั่นเอง ส่วน frontend library นั้นก็มีอยู่มากมายเเต่ผมจะขอเเนะนำ 3 library ที่กำลังเป็นที่นิยม และ เป็นที่ต้องการของตลาดสายนี้มากที่สุด นั้นก็คือ

  1. React — ถูกพัฒนาโดยบริษัทที่เราคุ้นเคยกันดีอย่าง Facebook และกลุ่ม Developer อิสระช่วยกันพัฒนาอยู่ในปัจจุบัน
  2. Vue — ถูกพัฒนาโดยคุณ Evan You อดีตพนักงาน Google ที่เคยใช้ Angular มาก่อนและเป็นคนพัฒนา Meteor Framework ด้วย แต่ปัจจุบันได้ออกมาพัฒนา Vue เต็มตัว และมีแบคอัพเป็นบริษัทยักษ์ใหญ่ในจีนอย่าง Alibaba Group
  3. Angular — ถูกพัฒนาหลักๆโดย Google และ community ของ developer อิสระ
Image for post
Image for post
https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847

ทั้ง 3 library นั้นทำงานแบบแบ่งหน้าเว็บออกเป็นส่วนๆ เรียกว่า component และสามารถส่ง ข้อมูลต่าง ๆ หากันระหว่าง component ได้ ซึ่งนั้นจะทำให้เราเขียน component ขึ้นมา 1 ครั้งเเล้วสามารถเอาไปใช้ได้ในอีกหลาย ๆ หน้าโดยส่งเเค่ข้อมูลไปมานั้นเอง แต่ว่าแต่ละ Library ก็มีทั้งข้อดีเเละข้อเสียเเตกต่างกันออกไป ซึ่งก็เเล้วเเต่คนเลยว่าชอบเขียนแบบไหน สไตล์ไหน ซึ่งส่วนตัวผมใช้ Vue ก็คิดว่ามันสามารถสร้าง เว็บขึ้นมาได้ค่อนข้างไว เเละมีความสามารถของทั้ง react และ angular อยู่เลยทำให้สะดวกในการเขียนนั้นเอง

ไม่หมดเท่านี้ ยังมี library สำหรับ CSS อีกไม่ว่าจะเป็น

ซึ่งจะมาช่วยเราสร้างหน้าตาของเว็บได้สวยยิ่งขึ้น นั้นเอง

Image for post
Image for post
Image for post
Image for post

สุดท้ายนี้ก็อยากจะบอกว่าอยากให้ลองเรียนรู้ดู บางที่เราอาจจะชอบมันก็ได้ ยังไงก็ฝากติดตาม blog ของผมไว้ด้วยนะครับ สำหรับ blog นี้ผมต้องขอขอบคุณที่ติดตาม เเล้วเจอกัน Blog หน้า สำหรับวันนี้ สวัสดีครับบบบบบ

I GEAR GEEK

เราคือกลุ่มคนที่มีความหลงไหลในการเขียนโปรแกรม และ…

Arthorn Kittinukul

Written by

I GEAR GEEK

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

Arthorn Kittinukul

Written by

I GEAR GEEK

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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store