Code

Quick Note: TypeScript

เพิ่งเจอลูกค้าใช้ภาษา TypeScript (Wiki) เห็นว่าน่าสนใจเลยลองศึกษาดูสักพักล่ะ

  • มันเป็นภาษา Super Set ของ JavaScript ที่คิดค้นโดยเทพ Anders Hejlsberg
  • เพราะว่า JS มันโคตร flexible จนเราเขียนให้มันผิดพลาดได้ง่ายๆ TypeScript ก็เลยแก้ปัญหาด้วยการเพิ่มความเป็น Static Type, Scope, Class-based OOP เข้าไปใน ECMAScript syntax แล้ว compile ออกมาเป็น JS หรือ ECMAScript ver ต่างๆ ได้เลย ปัญหาพวก type ก็ detect กันตอน compile นี่แหละ
  • เพราะมันเป็น Super Set ของ JS ดังนั้นเราเขียน JS ใส่มันไปดื้อๆ ก็ compile ผ่าน
  • ถ้าทำงานกับทั้งภาษา Dynamic กับ Static Type พร้อมๆ กันแล้วจะรู้สึกว่ามันเป็นธรรมชาติมาก ดูไม่ฝืนความเป็น JS แต่ถ้าทำงานกับภาษา Dynamic ล้วนน่าจะชอบ CoffeeScript มากกว่า
  • โดยรวมทำให้เขียน code ช้าลงนิดนึง แต่ได้ความมั่นใจเรื่อง type, การเขียน class แบบที่คุ้นเคยมา
  • ข้อเสียคือเวลาทำงานกับ JS library อื่นๆ มันต้องการ file definition (.ts.d หรือ typing) ที่ระบุ structure ของ function, class, type, module ของ library นั้นๆ เพื่อให้มัน compile ผ่าน (อารมณ์ .h ของภาษา C)
  • ถ้าเป็น lib ดังๆ แบบ jQuery, Angular, React พวกนี้มีคนทำ file พวกนี้ให้อยู่แล้ว แต่คำถามที่สำคัญคือบางคนทำ file พวกนี้ก็ไม่ใช้คนที่เขียน lib นั้น ดังนั้นก็ต้องดูกันยาวๆ ว่าจะไล่แก้ file definition ตาม update ได้ตลอดไหม
  • ถ้าเป็น lib internal (หรือ legacy) lib เนี่ยยากสุดๆ ที่จะมีเจ้า file นี้หรือเขียน file นี้้ย้อนหลัง ขนาดจะลองกะ JS API ตัวเองยังต้องไปเอา file นี้จากลูกค้า (ซึ่ง decompile API ผมออกมาเขียนไอ้ file นี้) มาใช้เลย
  • ส่วนตัวคิดว่าถ้าเป็น Project ใหม่ + ใช้ lib ที่สนับสนุน TypeScript (เช่น Angular 2) หรือ lib ที่เราเขียนใหม่เองก็น่าสนใจที่จะใช้มัน
  • แต่ถ้าทำงานกับ legacy lib เยอะๆ ก็… ตัวใครตัวมัน

ป.ล. กำลังหัดอยู่จาก link TypeScript Tutorial เข้าใจง่ายดี

Advertisements
Categories: Code, Diary, Tech | Tags: , , , , | Leave a comment

ผมเรียน JavaScript อย่างไร

4 ปีที่แล้ว project ที่ผมทำมีการเปลี่ยนแปลงครั้งใหญ่คือเปลี่ยนจาก Java Applet มาเป็น JavaScript Ajax API ตามก้นชาวบ้านชาวช่องที่เลิกเขียน Applet กันไปเป็นปีๆ แล้ว

การเปลี่ยนครั้งนั้นนับว่าครั้งใหญ่เพราะทุกคนทั้ง dev, qa และ support ไม่มีใครรู้ JavaScript หรือ Ajax เลย ทาง dev และ qa นั้นนำร่องไปก่อนอยู่หลายเดือนกว่าที่ผมจะมีเวลาว่างไปศึกษามัน blog นี้ก็จะมาเล่าให้ฟังว่าผมศึกษา JavaScript ผ่านทาง API ตัวนั้นยังไง

  1. dev ให้ source code ของ api และ test page (version beta ทั้งคู่) มา
  2. qa สอนผมลง ajax server (เขียนด้วย c++), วิธี set environment ต่างๆ
  3. dev บอกผมว่าให้ใช้ firebug (สมัยนั้นยังไม่ support chrome) จับ network มาดู message ที่วิ่งระหว่าง server และ client
  4. ผมอ่าน source code, ลอง debug ทีละบรรทัดด้วย firebug และลองใช้ console.log ไล่ flow ของ code
  5. ผมลองแก้ code ต่างๆ เพื่อดูว่ามันจะทำงานยังไง
  6. syntax ไหนไม่เข้าใจว่าทำไม dev เขียนแบบนี้ก็ลอง google ดู ถ้ายังไม่เข้าใจก็ถาม dev ว่าทำไมเขียนแบบนี้ (วะ)
  7. พอ api ออก version production dev ก็สอนผมใช้เวบ jsbeautifier เพื่อ decomplie minify code

ส่วนพวก business logic ต่างๆ (ไม่เกี่ยวกับ syntax code) ส่วนใหญ่ก็ถาม dev เอาครับ มีบ้างที่มันซับซ้อนจน dev/qa ต้องทำเป็น powerpoint สอนทั้งทีมเลยก็มี

หลักๆ จะเห็นว่าวิธีการคือมีคนโยน code มาให้ –> ลองเล่น –> สงสัยก็ถาม มาตั้งแต่ version beta วิธีการนี้คงทำให้ผมพอที่จะเขียน code และแก้ไขปัญหาลูกค้าที่ใช้ JavaScript API ตัวนี้ได้ แต่ถามว่าเข้าใจ JavaScript ลึกๆ ไหม ก็ต้องตอบว่าไม่เลยครับ – -”

ถาม: ทำไมไม่เขียน CoffeeScript ครับ
ตอบ: ควย Code ที่ dev เขียนและลูกค้าใช้งานเป็น JavaScript เฟ้ย

Categories: Code, Tech | Tags: , , | Leave a comment

JavaScript ตัด string แบบเนียนๆ

ช่วงที่ผ่านมามีโจทย์นึงจากลูกค้าให้ช่วยหา logic ตัด string แบบที่เขาต้องการบน JavaScript ให้หน่อย โดยเจ้า JavaScript ของผมเนี่ยเป็น mvc api ที่จะส่งข้อมูลลงมาจะเป็น string ที่มี tag span html ปนอยู่ใน string ด้วย (back end เป็นตัวใส่ให้) เพื่อที่จะเป็นจุดอ้างอิงให้ลูกค้าเอาใช้กำหนดใน css ของเขาครับ

HTML SPAN ที่ส่งมาจะมี class (ชื่อสมมติ) ดังนี้ ‘Highlight’, ‘Foo’ และ ‘Bar’สำหรับ class ‘Highlight’ นี่จะผสมกับ class อื่นได้ แต่จะอยู่ลำดับหลังเสมอเช่น หรือ จะไม่มี class=’Highlight Bar’ เด็ดขาด ในแต่ละ string จะมี span tag โผล่มากี่ตัวก็ได้ ไม่จำกัด

สิ่งที่ลูกค้าต้องการ: ลูกค้าต้องการให้ตัด span ที่มี class ‘Foo’ และ ‘Bar’ รวมไปถึงทุกอย่างที่อยู่ใน span tag ของมันออกให้หมด แต่ span ที่มี class ‘Highlight’ ไม่ต้องยุ่งกับมัน เช่น

Input:

Time Warner Cable Reports Development of <span class='Bar Highlight'>AAA</span> First IP Set-Top Box, Sees Boxes <span class='Bar'>CATTT</span> in Select Markets by Year End  
<span class='Foo'>GE.N</span>  <span class='Foo'>TWC.N</span> <span class='Bar'>Hello</span>

Output:

Time Warner Cable Reports Development of <span class='Bar Highlight'>AAA</span> First IP Set-Top Box, Sees Boxes in Select Markets by Year End

Code แรกที่ผมทำนั้นเน้นให้ logic ถูก ทำงานได้ ยังไม่ได้คิดถึงเรื่อง Performance อะไรนัก เอาแบบวน loop recursive ถึกๆ แล้วหา string ด้วย indexOf แล้วตัดด้วย replace กันดื้อๆ เลย แบบนี้ครับ (gen มาจาก CoffeeScript นะ)

var arrayTag, filterTag, msgBase, removeTag, tagBar, tagFoo, tagSPAN;

tagBar = "<span class='Bar'>";
tagFoo = "<span class='Foo'>";
tagSPAN = "</span>";

arrayTag = [tagQuoteRef, tagStoryRef, tagNewsSearchID, tagNewsSearch];

msgBase = "Time Warner Cable Reports Development of <span class='Bar Highlight'>AAA</span> First IP Set-Top Box, Sees Boxes <span class='Foo'>CATTT</span> in Select <span class='Foo Highlight'>Maeooooo</span> Markets by Year End  <span class=Bar'>GE.N</span>  <span class='Bar'>TWC.N</span> <span class='Foo'>Hello</span> ";

filterTag = function(msgStr, filterStr, index) {
	var indexSpan, indexStart;
    	indexStart = -1;
	indexSpan = -1;
   	tmp = "";
    	indexStart = msgStr.indexOf(filterStr, index);
    	if (indexStart !== -1) {
      		indexSpan = msgStr.indexOf(tagSPAN, indexStart);
      		msgStr = msgStr.replace(msgStr.slice(indexStart, indexSpan + 7), '');
      		return filterTag(msgStr, filterStr, indexSpan + 8);
    	} else {
      		return msgStr;
	}
};

removeTag = function(msgStr) {
	var tagRemove, _i, _len;
    	console.log("Orignal Text: " + msgStr);
    	for (_i = 0, _len = arrayTag.length; _i < _len; _i++) {
      		tagRemove = arrayTag[_i];
      		msgStr = filterTag(msgStr, tagRemove, 0);
    	}
    	console.log("Remove Text: " + msgStr);
};

removeTag(msgBase);

รองรันๆ แล้วก็โอเค ไม่มีหลุดอะไร แต่ส่วนตัวคิดว่าถ้ามันเขียนด้วย Regular expression น่าจะเนียนกว่านี้ แต่ผมเขียนไม่เป็น เลยลองไปถาม @neizod ดู ซึ่งเนยซดก็ตอบว่า code ก็โอเคแหละ แต่ถ้าคิดถึง performance น่าจะลองแบบนี้นะครับ

msgBase =msgStr.split(/<span class='(?:Foo|Bar)'>.*?<\/span>/).join('')

เขร้ code แม่มสั้นสัดๆ ลองเทสด้วย เวบ jsperf แล้วเร็วโคตรๆ ผมก็เลยส่งอันนี้ให้ Dev ทีมผม review ดู น้องเขาก็เอาไป review สักพักแล้วก็บอกว่าอันนี้น่าจะเร็วกว่านะ

msgBase = msgStr.replace(/<span class='(Foo|Bar)'>.*?<\/span>/g,'');

ซึ่งผลก็ออกมา เร็วขึ้นเยอะ เลย \ w / ซึ่งผมก็เอาอันนี้แหละไปบอกลูกค้าอีกที

สรุป:

  • ความรู้และความเข้าใจเรื่อง Regular expression ถือว่าสำคัญมาก ซึ่งผมดันไม่รู้เลย
  • การได้เห็น code ดีๆ มันเปิดหูเปิดตาเราได้เยอะเลย
Categories: Code, Tech | Tags: , , , , | 1 Comment

Create a free website or blog at WordPress.com.

Bomreview

โบ้มรีวิว โตแล้วจะรีวิวอะไรก็ได้

rerng.rak

Just another WordPress.com weblog

neizod

Smile! You’re at the best WordPress.com site ever

Admod's blog

just logs

freeclub

พยายามเขียนให้ยาวกว่าเฮดเดอร์ข้างบนจะได้ดูสวยๆ

Anontawong's Musings

a daily dose of a new perspective

TravelKanuman

Travel around the world

kemisara

Belle Kemisara Paladesh's Fan Site - เว็บไซต์แฟนคลับเบลล์ เขมิศรา พลเดช

eatandysummers

eat. travel. live.

Jonathan Fleming's Blog

A Photography Blog

Viewfinder - Street Photography Blog

Jimmy Yang Street Photography Blog

PinkiiGirl

Be one of those who change things and push the human race forward

บล็อกอะไรไม่รู้ของแบม

Ordinary guy blogging about comic books, video games, movies and stuffs.

Pawoot Personal Blog & Think Tank

E-Business Man Daily Life and What I'm Thinking

Mahalarp

journeys & musics never ended ...