เวลานี้ Vue CLI 3.0 ยังไม่ stable ถ้าใครจะใช้บน production ก็ระวังหน่อยนะครับ แต่ถ้าใครอยากจะลอง ก็สามารถลงได้ผ่าน ‘npm install -g @vue/cli’ เลยนะครับ Vue CLI กำลังจะออกเวอร์ชั่นใหม่แล้วซึ่งจริงๆก็ทดสอบมาซักพักแล้วแต่ว่ายังไม่ได้มีใครพูดถึงมาก แต่ที่ผมอยากเอามาพูดถึงเพราะว่ามันเปลี่ยนไปเยอะมากๆและมันน่าจะกระทบคนที่ใช้ vue.js อยู่ทุกๆคน มาดูกันดีกว่าครับว่า Vue CLI เปลี่ยนอะไรไปบ้าง ใช้ Vue Binary เต็มตัว จากเดิมเวลาเรา build project เราจะใช้ command ของ npm หรือ yarn เป็นหลัก แต่ใน vue cli เวอร์ชั่นใหม่ เรามาใช้ binary ของ vue cli เองเลย ก็คือ vue-cli-service ซึ่งจะลงเป็น local module…
นี่เป็นคำถามที่ผมจะโดนถามบ่อยมากๆๆๆๆ ก็เลยเขียนบล็อกตอบง่ายกว่า ลึกๆแล้วผมเป็น คนที่ชอบอะไรง่ายๆครับ ยิ่งกับเว็บแล้วด้วย เราอยากที่จะได้อะไรที่สามารถสร้าง idea ของเราให้ออกมาเป็นชิ้นได้ง่ายๆ เมื่อก่อนเลยผมเคยใช้ Angular 1 มาก่อนครับ แต่ก็เจอปัญหาเรื่องช้า ก็เลยไม่ค่อยได้ใช้กับ Project จริง มากนัก พอ React ออกมา ผมก็พยายามไปใช้ React ซึ่ง ณ เวลานั้นผมรู้สึกเลยว่านี่ไม่ใช่ของง่ายๆเลย และ สุดท้ายผมได้แค่เรียนครับ แต่ก็ไม่ได้มีงานที่ขึ้น Production จริงๆ จนวันนึงที่ไปงาน Google Devloper Experts summit ก็มีคน Google คนนึงที่ชื่อ Addy Osmani มาพูว่า “Vue.js เนี่ยก็น่าสนใจนะง่ายด้วย” กลับมาบ้าน ผมก็เลยลองดูว่ามันง่ายจริงๆมั้ย ซึ่ง มันจริงครับมันง่ายมากๆ ยิ่งสำหรับคนที่เคยเขียน Angular มาก่อนมันง่ายมากๆ นอกจากง่ายแล้วมันยังมีสาเหตุหลายๆอย่างที่ทำให้ผมเลือก Vue.js มาลองดูครับว่ามีอะไรบ้าง 1.…
ใครยังไม่อ่านตอนแรกไปอ่านตอนแรก ที่นี่ ก่อนนะครับ มาต่อกันกับตอนที่สองของ “เมื่อผมอยากจะ Optimize เว็บแบบที่ Addy Osmani บอก” หลังจากตอนที่แล้วจบไปแล้วกับ “1 Slide” มาดูกันต่อครับว่า Addy เนะนำอะไรเราอีก ผมข้ามไป Slide ที่ 34 เลยนะครับเพราะ Slide ก่อนหน้านี้เป็นเรื่อง แนวคิดเป็นหลักครับ หลักๆบนโลกนี้ Mobile internet ยังเป็น Slow 3G อยู่ เพราะฉะนั้นแล้ว เพื่อให้เว็บโหลดเสร็จภาพใน 3 วินาที เราควรทำให้ Bundle ไฟล์ใหญ่ไม่เกิน 170KB และนั่นคือเป้าหมายของการ Optimize นี้ Slide นี้มีเรื่องบางอย่างที่ซ้ำกับ Slide แรกอยู่แล้วแต่ว่าจะมีบางส่วนที่ไม่ได้ถูกพูดถึงเอาไว้ Strip Lodash modules — จริงๆแล้ว Lodash ก็เป็น Lib อีกตัวที่มีขนาดใหญ่มากๆ โดยหากเราต้องการ…
Addy Osmani เป็น Engineer อยู่ ทีม Chrome ของ Google ซึ่งตัวเค้าเองอยู่เบื้องหลัง Tools หลายๆตัวอย่าง Lighthouse, Yeoman, Vue PWA template ใน Silicon Valley Addy มีชื่อเสียงมากๆ ทางด้านการพัฒนาเว็บ ในงาน Chrome Dev summit 2017 Addy ได้เปิด session พูดเรื่อง Fast by default ซึ่งตัวผมเองอยู่ใน session นั้นด้วย จำได้ว่าตอนนั้นคิดว่าทำไมเราต้องเหนื่อยขนาดนี้เลยหรอ Panjamapong Sermsawatsri ยังพูดว่า ว่างแล้วจะทำ แต่ก็ไม่ได้คิดอะไรต่อ… หลังจากงานไม่นาน Addy ก็ได้ปล่อย Slide ออกมา อยุ่ที่ link ข้างล่างนี้ https://speakerdeck.com/addyosmani/fast-by-default-modern-loading-best-practices ด้วยความอยากรู้เลยว่าจะวุ่นวายจริงๆมั้ยก็เลยอยากลองทำดู…
เมื่อวานผมเกิดอยากลอง Nuxt.js แต่ไม่มี Project ไหน ที่จะให้ลองเล่นก็เลยเอา Project ทีกำลังจะขึ้นแล้วเป็น Vue.js มา convert เป็น Nuxt.js ซึ่งระหว่างทาง ก็มีเรื่องที่ต้องแก้กันเยอะ พอสมควร 1.Copy Component มาได้เลย อันนี้เรียกว่าเป็นข้อดีและกันครับ หลักๆคือ เราแทบจะไม่ต้องเปลี่ยนวิธีการเขียน component เลย ทำให้ความวุ่นวายในการย้ายมามีน้อยมากๆ ใครที่จะเปลี่ยนก็ Copy / Paste ได้เลย 2. Router อย่างแรกเลยที่เป็นเรื่องใหญ่คือ Router Nuxt.js เนี่ย เปลี่ยนจากการที่เราสร้าง Router เปลี่ยนการวาง File ตาม Folder structure ซึ่งถ้าจะเปลี่ยนมาใช้ Nuxt.js เราต้องเข้าใจก่อนว่าต้องวาง folder แบบไหน Nuxt.js ถึงจะไปสร้าง Folder แบบเดิม บางคนอาจจะคิดว่า มันไม่ได้ใช้…
หลายๆครั้งเราก็อยากจะเปลี่ยน Application ของเราเป็น Vue.js แต่ด้วย stack ที่มีอยู่มาตั้งแต่นานนม จะให้ล้างทั้งหมดแล้วทำใหม่ก็คงไม่ต้องทำอะไรกินพอดี ทางที่ดีทางนึงคือการค่อยๆทยอยเปลี่ยน component บนหน้าของเราให้กลายเป็น Vue.js ไปทีละอันๆ และเมื่อทำจนใกล้ครบก็ค่อยเปลี่ยนทั้ง App แต่ปัญหามันจะเกิดตรงที่ อยู่ดีๆเราจะเอา component ของ Vue มาใช้เลยไม่ได้ เราต้องทำ ให้ component ที่เราสร้างมาสามารถใช้ บน stack ปกติได้ก่อน ซึ่งนั่นคือเราต้องทำให้ Vue component ของเรากลายเป็น CustomElement ตามมาตรฐาน HTML ก่อน ซึ่งน้องโบน (Napon Mekavuthikul) น้องในทีมที่ ThothZocial ไปเจอวิธีการทำมา ผมเลยเอามาลองเล่นดู ว่ามันใช้งานยังไง….. ก็ขอให้ Credit น้องโบนไว้ตรงนี้ครับ 🙂 Vue Custom Element ก่อนจะทำให้มันใช้บน HTML ปกติได้ เราต้องแปลงให้ component…
พอดีว่าจะทำ Application สำหรับงาน Google I/O Extend Bangkok คราวนี้มันต้องใช้ Firebase กับ Vuejs ก็เลยคิดว่ามันต้องมีสิ component ที่ทำให้ vue ต่อ firebase ได้เนียนๆ ก็เลยไปเจอกับ vuefire ตอนนั้นก็คิดในใจว่ารอดและสบาย แต่พออ่านๆไป รวมถึงนั่งดู Example แล้วก็พึ่งสังเกตุได้ว่า นี่มันเอาไว้ใช้กับ Component เดียวนี่หว่า ไม่ใช่ทั้ง App แล้วมันจะใช้กับ vue-cli ยังไง….. คราวนี้ก็เลยไปไล่ดูเลยครับว่าจะใช้กับทั้ง App ยังไงก็ไปเจอ วิดิโอที่มีคนทำเอาไว้ แต่ปัญหาคือ ทั้ง App เค้าใช้ Firebase อยู่ Component เดียว ทำไมต้องต้องสนใจกับ การใช้ทั้ง App? ใน Example เนี่ย มันมีแค่ Component เดียวที่ใช้…
วันก่อน นั่งหาวิธีทำ Testing บน Vue.js แต่พยายามหา Blog อ่านง่ายๆ ทั้งไทยทั้ง อังกฤษ แต่ก็ไม่เจอซักที เจอแต่ Doc กับ เว็บที่อ่านงงๆ (จริงอยู่ที่มันไม่ได้ยากมากนะแต่มันทำได้ง่ายกว่านี้) เลยอยากเขียนวิธีที่โคตรง่ายเลยแบบทำตามแค่ 1–10 แล้วจบ 1. Setup Project ขั้นแรกเราจะง่ายขึ้น ถ้าใช้ vue-cli และในบทความนี้เราจะใช้ vue-cli เป็นหลัก เริ่มต้นด้วยการ Set option ตอน create ตามนี้ หลักๆอยู่ที่ Karma + Mocha แต่ถ้าใครจะเอา e2e ด้วยก็ เลือก Yes อันที่สองด้วย Setup unit tests with Karma + Mocha? YesSetup e2e tests with…
พอดีว่าเมื่อก่อนปีใหม่ อยากทำ personal web ของตัวเอง ก็เลยกะว่าจะทำจริงจังเลยทำเป็น PWA ให้ได้ด้วย และด้วยความที่อยากลอง Vue.js แบบเต็มๆ ก็เลยคิดว่า จะจัดพร้อมๆกันเลย พอลงมือจริงก็เจออะไรโน่นนี่เยอะมากๆ ก็เลยอยากมาแชร์ว่าเจออะไรมาบ้าง กับการทำ PWA ด้วย Vue.js Vue.js ใช้งานง่าย Vue.JS ใช้งานง่ายจริงๆครับ ถ้าใครลอง React มา จะรู้สึกเลยว่า Vue.js ใช้งานง่ายกว่า แต่เอาเข้าจริง Vue.JS มีจุด dirty อยู่เยอะพอสมควร ส่วนตัวผมใช้ vue-cli ในการ create applicaiton ซึ่งก็ช่วยให้ เราไม่ต้องเสียเวลาไปกับ การ setup app หรือ webpack แต่ด้วยความที่เว็บผมไม่ใหญ่ ก็เลยไม่ได้ใช้ vuex หรือ vue router จริงๆตรงนี้ไม่ซีเรียสนะครับอยากใช้เท่าไหนก็ได้ อย่าลืม…
วันก่อนกำลังจะทำเว็บตัวเอง ที่ใช้ Vue.js แล้วก็นึกได้ว่า Google เคยพูดว่า First paint สำคัญมา เพราะถ้า First paint มาช้ากว่า 3 วินาที user จะหนีเราไป ผมก็เลยลองเทสว่าใน อินเตอร์เน็ตช้าที่สุด เราจะใช้เวลาโหลดเท่าไหร่ แต่สิ่งที่เจอคือ componet มันไม่โหลด เพราะว่า Webpack มัน build ออกมาเป็นไฟล์ app.js ไฟล์ เดียว.. เราก็เลยลองหาว่าจะทำ file spliting ด้วย Vue.js ยังไง ซึ่งวิธีง่ายมากๆๆๆๆๆ เว็บที่ผมทำ สร้างด้วย Vue-cli ซึ่งมี webpack ฝังมาให้แล้ว ซึ่งโดยปกติเวลา build webpack จะเอา ไฟล์ของเราลงไปใน app.js ทั้งหมด ถ้าเรา import ไฟล์ด้วยวิธีนี้…