Web component is a current buzz word but issue that still discuss is “What is the best solution for Web Component”. Because of this topic I had spend a month for finding the answer “What is the fastest way” and“What we should do” Solutions I choose 5 solutions for this testing Vanilla, Vanilla with…
กระแส Web component ตอนนี้มาแรงสุดๆ ใครทำเว็บก็ต้องรู้จัก แต่ประเด็นที่ถกเถียงกันอยู่เหมือนกันคือ เขียนแบบไหนหละถึงจะดีที่สุดหละ? ด้วยความสงสัยนี้ผมเลยลองทดลองมามากกว่าสองเดือน (ไม่ได้ยากแต่ขี้เกียจ พิพม์วันละสองบรรทัด) เพื่อหาคำตอบว่า อะไรเร็วที่สุด และเราควรเลือกใช้อะไร Library ที่เลือก การทดสอบครั้งนี้ผมเลือก มา 5 solution คือ Vanilla, Vanilla แบบมี ShadowDOM, Lit-element, Stencil.js, Vue.js อันอื่นทุกคนคงไม่สงสัยเพราะว่าเป็นวิธีปัจจุบันที่ใช้ทำ Web component อยู่แล้ว สำหรับแต่ vue.js ที่ผมเลือกมาเพราะว่า ตัว vue.js เองเวอร์ชั่นใหม่สามารถ compile เป็น web component ได้เลย และส่วนอีกเหตุผลนึงคือ ผม “ชอบ” ครับ Vanilla น่าจะเร็วอยู่สุดแล้ว? ผมว่าเรื่องนี้ทุกคนคงอาจจะคิดว่า ใช่สิ Vanilla ควรจะเร็วสุดอยู่แล้ว ซึ่งผมก็คิดอย่างงั้นเหมือนกันครับ แต่ตอนที่อยากจะทดสอบก็เพราะอยากรู้ว่ามันเป็นอย่างงั้นจริงหรือเปล่า…
นี่เป็นคำถามที่ผมจะโดนถามบ่อยมากๆๆๆๆ ก็เลยเขียนบล็อกตอบง่ายกว่า ลึกๆแล้วผมเป็น คนที่ชอบอะไรง่ายๆครับ ยิ่งกับเว็บแล้วด้วย เราอยากที่จะได้อะไรที่สามารถสร้าง idea ของเราให้ออกมาเป็นชิ้นได้ง่ายๆ เมื่อก่อนเลยผมเคยใช้ Angular 1 มาก่อนครับ แต่ก็เจอปัญหาเรื่องช้า ก็เลยไม่ค่อยได้ใช้กับ Project จริง มากนัก พอ React ออกมา ผมก็พยายามไปใช้ React ซึ่ง ณ เวลานั้นผมรู้สึกเลยว่านี่ไม่ใช่ของง่ายๆเลย และ สุดท้ายผมได้แค่เรียนครับ แต่ก็ไม่ได้มีงานที่ขึ้น Production จริงๆ จนวันนึงที่ไปงาน Google Devloper Experts summit ก็มีคน Google คนนึงที่ชื่อ Addy Osmani มาพูว่า “Vue.js เนี่ยก็น่าสนใจนะง่ายด้วย” กลับมาบ้าน ผมก็เลยลองดูว่ามันง่ายจริงๆมั้ย ซึ่ง มันจริงครับมันง่ายมากๆ ยิ่งสำหรับคนที่เคยเขียน Angular มาก่อนมันง่ายมากๆ นอกจากง่ายแล้วมันยังมีสาเหตุหลายๆอย่างที่ทำให้ผมเลือก Vue.js มาลองดูครับว่ามีอะไรบ้าง 1.…
พอดีว่า ได้ไปอ่านบทความนึงของ Addy osami เรื่อง Preload กับ Prefetch บน Browser แล้วรู้สึกว่าน่าสนใจมากซึ่งมีวิธีมากมายที่เราสามารถโหลด Script มาใช้ได้ ไม่ว่าจะเป็น Async Defer Preload Prefetch แต่ก่อนไปกันไกลเรามาเร่ิมที่อะไรง่ายๆกันดีกว่า โดยปกติแล้วเราจะเรียก script กันแบบปกติเลยก็คือ <script type=”text/javascript”src=”main.js”></script> ซึ่งถ้าใครรู้ปัญหาดีจะรู้ว่ามันแย่มากๆ เพราะว่าถ้าเกิด Script นั้น Block Render เวลา โหลด script มันจะโหลด DOM ให้จบก่อนแล้วค่อยโหลด Script ซึ่งมันจะกลายเป็นขั้นบันไดและจะไม่ยอม render ต่อถ้า โหลด javascript ไม่จบ ตอนนี้ก็เลยมีวิธีการที่นิยมทำกันมากขึ้นก็คือ เรียกแบบ Async ซึ่งจะโหลด script และ parse DOM ในส่วนที่ใช้ด้วยกันมาพร้อมกัน แล้วค่อย Execute ที่เดียว…
I try to start this blog last week because my colleague or my friends love to claim the speed of any front-end framework. Almost said “React is the best” but I don’t believe that and my idea is PolymerJS and Angular 2 should be great too.So I try to write script in any framework…
See this https://github.com/thangman22/mole-fetch Is Library for make background http request using ServiceWorker and Fetch API Mole fetch is help web application make any HTTP request still running incase users are close a browser accidentally or network is disconnect. Mole fetch is using ServiceWokrer and SyncManager Installation npm install –save mole-fetch git clone https://github.com/thangman22/mole-fetch.git Usage…
มาทำเว็บให้ใช้งาน offline ด้วย sw-toolbox กัน Feature นึงเลยของ ServiceWorker คือ การทำ Cache เพื่อใช้งาน Offline ไอ้คำว่า offline ที่ว่าก็คือ เน็ตไม่ติดก็ยังโหลดบางส่วนมาแสดงผลได้ หรือบาง App ที่ทำเป็น Progressive Web App ก็ยังสามารถ ใช้งานโดยไม่ใช่เน็ตได้ แต่คราวนี้ถ้าจะให้เขียนแบบ Original เลยก็ค่อนข้างวุ่ยวายหน่อย ผมก็เลยแนะนำว่าให้ใช้ sw-toolbox จะง่ายกว่าจะไม่ต้องทำอะไรมาก โอเคมาเริ่มกันเลย Github ของ sw-toolbox เริ่มกันที่การ install sw-toolbox สามารถเลือกได้ตามสะดวกเลยว่าชอบแบบไหน bower install — save sw-toolbox npm install — save sw-toolbox git clone https://github.com/GoogleChrome/sw-toolbox.git หลังจากนั้นก็ เพิ่มตัว…
ถ้าให้บอกว่า Progrssive Web App เป็น เครื่องมือหรือเทคโนโลยีใหม่ ก็ อาจจะพูดไม่ได้เต็มปากจริงๆ แต่ Progressive Web App เป็นแนวทางการทำเว็บ ให้ออกมาเหมือน App ในอดีต การที่เราต้องทำ installation app เป็นเรื่องจำเป็นมากๆ เพราะว่า การเข้าถึงอุปกรณ์ต่างๆในเครื่อง ยังยาก ไม่ว่าจะเป็น กล้อง Bluetooth, Wifi, Microphone หรือ Notification แต่ด้วยมาตรฐาน HTML ในปัจจุบัน เลยทำให้เว็บสามารถทำอะไรแบบนั้นได้หมดแล้ว รวมถึง Chrome version ใหม่ๆก็ เร็วมากๆ จนเว็บสามารถใแทนเว็บได้แล้ว ลองดูได้ง่ายๆ เว็บ M.facebook.com กับ Application Facebook ที่แทบจะเหมือนกันหมด และบนเว็บยังกินทรัพยาการน้อยกว่าด้วย คราวนี้ Google ก็เลยมองว่าเอ้ย ลองมากำหนดแนวทางให้คนทำ App แล้ว…