August 2016 – anurocha

Fear Driven Development

จะเกิดอะไรขึ้นถ้า Developer ต้องทำงานอยู่ภายใต้สิ่งแวดล้อมที่มีความกลัวครอบงำ…

ทีมที่ทำงานด้วย Fear Driven Development (FDD) นั้นจะทำให้ Developer นั้นรู้สึกว่า

กลัวที่จะทำผิด
ไม่กล้าแก้ Code
ไม่กล้า Refactor
ไม่กล้า Commit หรือ Push Code
ไม่กล้าเปลี่ยน Design
ไม่กล้าท้าทาย UI/UX หรือ Product เพราะกลัวได้งานเพิ่ม
ไม่กล้ารับปาก เพราะกลัวทำไม่ได้
ไม่กล้าออกความเห็น เพราะกลัวต้องรับผิดชอบกับ Idea ตัวเอง
ไม่กล้าเปลี่ยน Tools หรือ Framework
กลัวว่า Software นั้นจะมี BUG ซึ่งเห็นเหตุผลให้เกิด Process ต่างๆมากมาย
และสุดท้ายทำให้ Developer ใช้เวลาไปกับงาน Admin/Process มากกว่าการเขียน Code….

ความกลัวและไม่กล้าต่างๆเหล่านี้ทำให้ Project ไปได้ช้าลงแน่นอน รวมถึงทำให้เกิด Over-Engineer (การ Design Software เกิด Use case ที่จะเกิดขึ้นจริง) และกลัวการ Estimate ซึ่งเป็นการบอกเวลาว่า Project นี้จะเสร็จตอนไหนกับเหล่าท่านๆผู้บริหารระดับสูงทั้งหลาย จึงทำให้การ Estimate (ประเมิณ) กลายมาเป็นการลงรายละเอียดซึ่งใช้เวลาเยอะมากจนกว่าจะได้ตัวเลขออกมาก

วัฒนธรรมกลัวตกงาน

เป็นลักษณะหนึ่งของ FDD ซึ่งเกิดจากทีมใช้งาน Developer อย่างหนักและมีการกดดันกันว่าถ้ามีปัญหากับโปรเจคอาจจะโดนไล่ออกได้ ซึ่งการทำแบบนี้ไม่อาจจะทำให้ทีมนั้นมี Productivity ที่ดีได้ รวมทั้งยังขาด Innovation ด้วยรวมถึงทำให้เกิดความกดดันต่างๆและทำให้อัตรา Turn-Over สูงขึ้น ซึ่งในทีมที่มีวัฒนธรรมแบบนี้ส่วนใหญ่ก็จะมีการยกย่องคนที่เรียกว่า Hero(Hero Driven Development) ซึ่งเป็นคนที่ทำให้แต่ละ Release นั้นผ่านไปได้จะได้รับการยกย่องและสุดท้ายก็จะกลายเป็นว่าทีมนั้นต้องการ Hero ตลอดเวลานี่แหละคือปัญหา!

รวมถึงวัฒนธรรมการ Blame เช่นเมื่อเวลามีปัญหาเกิดขึ้นก็หาคนทำผิดแทนที่จะช่วยกันแก้ปัญหาให้ User…

วัฒนธรรมกลัวการแก้ Code

อีกสิ่งที่น่ากลัวของการพัฒนา Software ซึ่งก็คือ Developer ไม่กล้าแก้ไข Code ซึ่งอาจจะเป็นเพราะว่า Code นั้นเก่ามากๆซึ่งปกติน่าจะเกิดจากการที่ไม่เข้าใจ Code ชุดนั้นมากกว่า ลักษณะของ Code ประเภทนี้คือมันก็ work ดีเกือบทุก case แต่ถ้าจะต้องแก้ Developer ก็จะกลัวจะเกิดผลที่คาดไม่ถึง รวมทั้งเกิด Bug ต่างๆ และที่เลวร้ายไปกว่านั้นคือไม่กล้าแก้ Code ของตัวเอง!

สุดท้าย

ส่วนตัวผม คิดว่าสิ่งที่อาจจะน่ากลัวกว่าก็คือการกลัวการเปลี่ยนแปลงโดยเฉพาะ Developer เพราะอย่างที่รู้กันอยู่แล้วว่า Software Development นั้นเทคโนโลยีหรือ Tools ต่างๆมาเร็วไปไว ซึ่งการที่เราไม่ยอมรับการเปลี่ยนแปลงตรงนี้ก็จะคงอยู่แต่โลกเดิมๆ โดยไม่ได้มองหาสิ่งที่จะมาเพิ่ม Productivity ความรู้ใหม่ๆ เพื่อช่วยให้เราเก่งขึ้นและทำงานได้ดีขึ้น 🙂

ถ้า Developer ไม่กล้าแก้ Code แล้วใครจะกล้าแก้ล่ะ???

เรียบเรียงจาก:

http://www.hanselman.com/blog/FearDrivenDevelopmentFDD.aspx

รัน Typescript ผ่าน Node ตรงๆด้วย ts-node

ปกติแล้ว Node.js นั้นจะทำการ execute JavaScript เท่านั้น ซึ่งถ้า Developer นั้นอยากเขียน Project ด้วย TypeScript ก็จะต้องทำการ compile จาก .ts ให้เป็น .js ก่อน

พอดีเห็น GitHub มีโปรเจคหน้าสนใจชื่อว่า ts-node ซึ่งทำให้เราสามารถรัน .ts ไฟล์ได้ตรงๆเลยครับ
Link: https://github.com/TypeStrong/ts-node

การใช้งานก็คือรัน commandline นี้เพื่อทำการรัน Node

ts-node main.ts

มาลุยกันครับ

เริ่มจากเรามี TypeScript file (.ts) ที่สั่งสร้าง http server ชื่อ main.ts

import * as http from "http";

class HttpServer {
private server : http.Server;
public start(){
this.server = http.createServer( (request, response) => {
response.write('Hello...!');
response.end();
});

this.server.listen(8080);
console.log("start server...");
}

public stop(){
this.server.close(()=>{}
);
}
}

let serv = new HttpServer();
serv.start();

ทีนี้เราก็ลอง install ts-node ก่อนครับ

npm install ts-node

เรามาลองรันกันดูครับ

ts-node main.ts

เวิร์คดี!!

ถ้าเรามาลองดู Process Tree เราก็จะพบว่าจริงๆแล้วตัว ts-node นั้นก็ทำการรัน node process และทำการรัน bin.js ซึ่งเป็น code ของ ts-node เพื่อให้มันสามารถรัน main.ts ได้

สรุปแล้วผมคิดว่าโปรเจคนี้น่าสนใจนะครับ เพราะช่วยลดขั้นตอนการ compile ไป JavaScript ไป 🙂
ทั้งนี้ทั้งนั้นต้องทดสอบว่าถ้าเป็นโปรเจคที่ซับซ้อนจะเป็นยังไงบ้าง…

Node.js – Profiling เพื่อดูว่า Code เรากิน CPU รึเปล่า

สิ่งที่จะทำให้เรายกระดับการเป็น Developer ขึ้นไปอีก ก็คือเราต้องรู้ว่า Code ที่ตัวเองเขียนไปนั้น Perform ยังไงตรงตามที่คาดคิดไว้รึเปล่า รวมถึงมีไอเดียที่จะปรับปรุงให้มันทำงานได้ดียิ่งขึ้น

ซึ่งขั้นตอนที่ขาดไม่ได้สำหรับการวัดประสิทธิภาพของ Code ก็คือ สิ่งที่เรียกว่า Profiling

ซึ่งทาง Node.js Tools for Visual Studio ก็มีเครื่องมือนี้มาให้ด้วย ซึ่งปกติเครื่องมือช่วยการทำ Profiling เราก็เรียกง่ายๆว่า Profiler (Features อื่นๆ อ่านเพิ่มเติมจาก link นะครับ)

ถ้าผมมี Code ตัวอย่าง JavaScript ประมาณนี้

console.log('Hello world');

for (let i = 0; i < 50; ++i){
    let rand = getRandomNum(10000000);
    print(rand, calSum(rand), findDivideBy5(rand));
}

function getRandomNum(max) {
    return Math.floor((Math.random() * max) + 1);
}

function calSum(num) {
    let sum = 0;
    for (let i = 0; i <= num; ++i) {
        sum += i;
    }
    return sum;
}

function findDivideBy5(num) {
    let n = 0;
    for (let i = 0; i <= num; ++i) {
        if (i % 5 == 0) {
            n++;
        }
    }
    return n;
}

function print(rand, sum, count5) {
    console.log("number : " + rand);
    console.log("Sum of 0 to " + rand + " is " + sum);
    console.log("Can divide by 5 count of 0 to " + rand + " is " + count5);
    console.log("----------------------");
}

Code นี้ทำอะไรบ้าง?

เป็นการสุ่มค่ามาค่านึง (N) แล้วก็
1. หาผลรวมของ 0 ถึง N – function calSum()
2. หาจำนวนของตัวเลขระหว่าง 0 ถึง N ที่หารด้วย 5 ลงตัว – function findDivideby5()
3. แสดงผล – function print()

คำถามคือ Code ตรงไหนช้าที่สุด…เรามาดูกัน

เราสามารถเริ่มการทำ Profiling จากเมนูนี้

เมื่อ app ทำงานจบหรือเราหยุดการทำงานก่อน Visual Studio ก็จะทำการสร้าง Report มาให้เราอย่างละเอียด

fullreport

เรามาดู Hi-light ที่สำคัญกันครับ

Code นี้ใช้พลัง CPU ไป ~20% ซึงเครื่องผมมี 4 Cores แล้วว่าทำงานไปเต็มๆ 1 Core
มาดูระดับ Function กันครับ ปรากฎว่า app.calSum เป็นผู้ชนะไป (หมายความว่าแย่สุด เพราะใช้ CPU ไปเยอะที่สุด)
นอกจากนี้ยังสามารถดู Call Tree เพื่อที่จะได้รู้ว่าแต่ละ Function ถูกเรียกมาได้ยังไง รวมถึงใช้ CPU ไปมากน้อยเท่าไหร่
เช่น จากตัวอย่าง Top level (หรือ Global) นั้นได้ทำการเรียก function calSum() กับ app.fineDivideby5()

จากตัวอย่างนี้จะเป็นว่าการทำ Profiling นั้น ช่วยให้เราสามารถวิเคาะห์ปัญหาเกี่ยวกับการใช้งาน CPU ได้สะดวกยิ่งขึ้น แต่ทั้งนี้ทั้งนั้น นอกจากการใช้งาน CPU แล้ว สิ่งที่ควรจะทำการ Profile ก็ควรจะมีทั้ง Memory รวมถึง HTTP Resource หรือ Disk I/O ด้วย (แต่เหมือน Visual Studio ยังไม่ Support สำหรับ Node.js มั้งครับ ผมหาไม่เจอ 55)

Artwork – กิจกรรมยามว่าง

ผมชอบงานออกแบบของ Yoshitaka Amano (ผู้ออกแบบงานศิลป์ของ Final Fantasy) เป็นพิเศษ ทำให้ผมได้รับแรงบันดาลใจในการพยายามเอาลายเส้นมาใช้

Link จาก The Legend of Zelda : Breath of the Wild

Node.js Tools for Visual Studio มีดีอะไร

ชีวิตนี้ยังหนีไม่พ้น Microsoft จริงๆ เพราะตอนนี้ Microsoft ได้ออก Node.js Tools for Visual Studio (ณ วันนี้ก็ version 1.2 แล้ว) ซึ่งเป็น Extension เสริมที่ทำให้ Visual Studio(ตัวเต็ม) นั้นทำงานกับ Node ได้อย่างมีประสิทธิภาพมากขึ้นซึ่งสามารถใช้ได้กับ VS2015 – Official Link

พอลงไปแล้วก็จะมี Node.js Tools โผล่มาตรงนี้

node_tool

จากที่ Microsoft โปรโมทก็มีคร่าวๆ ดังนี้

Project Templates

ซึ่งทำให้เราสร้าง Project โดยเลือกได้เลยว่าจะเอา โปรเจคเปล่าๆ หรือมาพร้อมกับ Code ตัวอย่างที่เขียน http server ง่ายๆ ถ้ากลัวเริ่มไม่ถูก

IntelliSense

ซึ่งผมลองแล้วก็บอกได้ว่า สมตามที่โฆษณาไว้ เพราะมันมี icon แสดงให้ดูง่ายและเร็วด้วย (สำหรับ Build-in Function นะครับ ถ้าเป็น module ที่เราใช้อาจจะต้องไปใช้ TypeScript เหมือนให้มี IntelliSense)

Npm Integration

มีหน้าจอที่เป็น UI ให้ใช้ในการหา module ต่างๆ ได้ง่ายขึ้นสำหรับคนที่ไม่สันทัด command line

เวลา Right Click ที่ npm folder ใน Project

npm_2 — พิมพ์ “mocha” ไปก็มี version ต่างๆให้เลือก (แต่ผมว่าใช้ commandline เร็วกว่านะ :p )

Interactive Window

เป็นหน้าต่างที่เอาไว้ลอง Code JavaScript แบบทันทีทันใจแถมยังมี syntax Hilight กับ IntelliSense ให้ด้วย

interact_win2 — หน้าต่างเปิดมาเป็นแบบนี้

interact_win3 — ลองพิมพ์ function บวกเลขไปดูครับ ขึ้น Undefined…

interact_win4 — ลองใส่ add(1,2) ดู ก็จะได้คำตอบออกมาเป็น “3”

Advanced debugging

ใช้ในการ Debug เช่น การตั้ง break points หรือการใช้งานพวก Watch ในการดูค่าตัวแปรต่างๆ ซึ่งทำได้ดีมากเหมือน C# ตรงนี้ผมว่า Powerful จริง

จะเห็นว่าเราเห็นค่าของตัวแปร req ทั้งหมดเลย

debug_2 — req.headers เราเห็นหมด ง่ายๆแบบนี้ (y)

และอื่นๆอีกมากมาย เช่น Profiling (ตัวนี้เด็ดมากกกก), Unit Testing, TypeScript Integration

ปล. ตอนแรกว่าจะเขียนเรื่อง Profiling แต่เห็น Features อื่นก็น่าสนใจไม่น้อยเลยเอามาเขียนก่อนครับ 😉

รู้จักกับ Modern Agile – agile 2016 ;)

เป็นที่รู้กันว่า Agile นั้นถูกใช้งานอย่างแพร่หลายใน Software Development ซึ่งแนวคิดของ Agile นั้นมีการพูดถึงตั้งแต่ปี 2001 แต่มาถึงปีนี้ 2016 ทาง Agile Alliance(สมาพันธ์แห่งอไจล์ :p) ก็ได้พูดถึงสิ่งที่เรียกว่า Modern Agile โดยมีแนวคิดสำคัญ 4 อย่างที่ คาดหวังว่าจะช่วยจะทำให้เกิดผลลัพท์และสร้าง Culture ที่ดีแบบเหนือความคาดหมาย!!!

Make People Awesome – ทำให้ทุกคนรู้สึกยอดเยี่ยม
สตีฟ จอบส์ เคยถามเพื่อนร่วมงานว่า “อะไรคือประโยชน์สูงสุดที่เราสามารถมอบให้ลูกค้าได้”
ใน modern agile นั้น เราถามถึง “การทำยังไงให้ทุกๆคนที่เกี่่ยวข้องทั้งหมดที่เกี่ยวข้องรู้สึก awesome!”
เราเรียนรู้ถึง User และจุดที่ User เจ็บปวดและควรแก้ไข แล้วก็ทำให้พวกเค้ารู้สึก awesome!
Make Safety a Prerequisite – ปลอดภัยไว้ก่อน
ความปลอดภัยไว้ก่อนทั้งความต้องการพื้นฐานของมนุษย์และหัวใจสำคัญที่จะทำให้เกิดประสิทธิภาพสูงสุด ซึ่งเป็นสิ่งที่เราควรจะต้องมีเช่น เวลา การให้ข้อมูล ความเคารพหรือเชื่อใจกันและกัน การเงิน สุขภาพ และความสัมพันธ์ของคนฝ่ายต่างๆ
Experiment & Learn Rapidly – ทดลองและเรียนรู้อย่างรวดเร็ว
เราไม่สามารถทำให้คนรู้สึก awesome หรือ make safety a prerequisite ได้ถ้าเราไม่เรียนรู้ และที่สำคัญเราต้องเรียนรู้อย่างรวดเร็วโดยการทดลองบ่อยๆ เราต้องทำให้รู้สึกว่าความล้มเหลวในการทดลองเรียนรู้ไม่ได้เป็นเรื่องแย่อะไร ซึ่งจะเป็นตัวช่วยให้มีการลองอะไรใหม่ๆมากขึ้น
Deliver Value Continuously – ส่งมอบสิ่งที่มีคุณค่าอย่างต่อเนื่อง
ถ้าไม่มีการ deliver อะไรเลยก็จะไม่ช่วยให้ใครรู้สึก awesome ใน modern agile นั้นเราถามตัวเองว่า “เราจะทำอย่างไรให้เราสามารถ deliver สิ่งที่เป็น valuable work ได้เร็วขึ้น”
การที่จะ deliver งานที่มีคุณค่าได้อย่างต่อเนื่องนั้น เราจะต้องทำการแบ่งส่วนงานที่ใหญ่ให้เป็นส่วนเล็กๆที่ยังมีคุณค่า เพื่อที่จะทำให้การ deliver นั้นเร็วขึ้น

เรามาเริ่มทำให้ทุกๆคนรอบตัวเรา AWESOME กัน!!

References:

เพิ่มคุณภาพของ Code ด้วย CppCheck

นอกจากการที่ทำ Feature ให้เสร็จตามกำหนดแล้วนั้น Developer ก็ควรจะต้องใส่ใจในคุณภาพของ Software กันด้วย ซึ่งหลายๆครั้งก็เป็นเรื่องที่ถูกละเลยและทำให้เกิด Bug แบบง่ายๆขึ้น

ทั้งนี้ทั้งนั้นในวงการเราก็มีเครื่องมือช่วยเหลือในการตรวจเช็คพวก Error พวกนี้ตั้งแต่การ Compile
ขั้นตอนหรือเครื่องมือนี้เรียกว่า Static Code Analysis

สำหรับ C++ นั้นอย่างที่รู้ๆกันว่าเป็นภาษาที่มีประวัติยาวนานและเขียนได้หลาย Paradiam หรือปนกันทั้ง C และ C++ รวมทั้ง Framework ต่างๆที่ใช้ใน Software ซึ่งนี่แหละทำให้เกิด Error ได้ง่ายขึ้นไปอีก

พอดีผมเห็นข่าวว่าตัว CppCheck 1.75 เพิ่งจะ ออก (https://sourceforge.net/p/cppcheck/news/2016/08/cppcheck-175/) และผมไม่เคยใช้เจ้านี้เลยขอลองหน่อย

Cppcheck เป็นเครื่องมือที่ช่วยในการดักและแจ้งปัญหาเหล่านี้ ซึ่งเป็น Error ที่ไม่เกี่ยวกับ Compile นะครับ ยกตัวอย่างเช่น

Out of bounds
Memory leaks!
ตัวแปรที่ไม่ได้ initialize
Code ซ้ำๆ
และอื่นๆ

หลังจาก Install แล้วก็ลองรันโปรแกรมดู

ที่นี้เราลองเขียน Code เพื่อทดสอบ CppCheck กัน

// ConsoleApplication3_cpp.cpp
//

#include "stdafx.h"
#include 
#include 

using namespace std;

class Phone
{
public:
void Call() {}

private :
std::wstring _owner;
bool _enabled;
};

int main()
{
Phone *p = new Phone();
p = new Phone();
p->Call();
return 0;
}

Code นี้ผมวาง Error ไว้หลายตัวครับ เรามาลองให้ CppCheck ช่วยหาดีกว่า

ทำการเลือก Folder ของ Source Code ที่จะทำการ Scan หา Error

เลือกเสร็จ เจอ 3 ตัว! บรรทัดที่ 22 10 และ 23 (ตามคาด)

ตัวอย่าง Error พวกนี้มาลองวิเคราะห์กัน

Line 22: “Variable ‘p’ is reassigned a value before the old one has been used.”

Phone *p = new Phone();
p = new Phone();
จะเห็นว่า pointer ‘p’ มีการชี้ไปที่ Object ที่สร้างจาก Class Phone แล้วไม่ได้ใช้เลยแต่ก็เอาไปชี้ที่ Object อีกตัว
Line 10: “The class ‘Phone’ does not have a constructor.”

class Phone
{
public:
void Call() {}

private :
std::wstring _owner;
bool _enabled;
};
จะเห็นว่า Class Phone เรานั้นไม่มี Constructor แต่เรามี private Members เช่น _owner กับ _enabled ซึ่งสำหรับ C++ นั้นพวก Members ควรจะทำการ Initialize ค่าก่อน เพราะ bool นี่อาจจะเป็น true/false ก็ไม่รู้ :S
Line 23: “Memory leak: p”

int main()
{
Phone *p = new Phone();
p = new Phone();
p->Call();
return 0;
}
อันนี้ชัดเจนครับสำหรับ C++ Developer เพราะมีการ new ก็ต้องมีการ delete นะครับ เพราะไม่งั้น LEAK! จากตัวอย่างจบ function main แล้วเราไม่ได้ Delete ทาง CppCheck ก็เลยฟ้องซะเลย

จากตัวอย่างจะเห็นข้างต้นก็พอจะเห็นได้ว่า CppCheck นี้น่าจะช่วยเหลือเราได้ในการปรับปรุงใน Code ของเรามีคุณภาพมากขึ้นและ BUG แบบง่ายๆนั้นลดลง

“Quality is not an act, it is a habit.” – Aristotle
คุณภาพไม่ใช่หน้าที่ แต่เป็นอุปนิสัย – อริสโตเติล

Debug – แอบส่องค่าตัวแปรต่างๆด้วย Watch (และ Autos, Locals)

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

ความสามารถนี้ Debugger ยอดนิยมต่างๆมีให้เราครับ ผ่านหน้าต่าง Watch รวมทั้ง Autos และ Locals

มาลุยกันเลยครับ ผมมี Code แบบนี้ ซึ่งหลักๆก็คือ รับค่าจาก Keyboard จากนั้นก็จะแสดงผลบนหน้าจอว่า User พิมพ์อะไรเข้ามา มีความยาวกี่ตัวอักษร และเวลาเมื่อไหร่

using System;

namespace ConsoleApplication1
{
   class Program
   {
      static void Main(string[] args)
      {
         Console.WriteLine("Type some keys please");
         var ireader = new InputReader();
         ireader.Capture();
         Console.WriteLine("User Input : {0} | Length : {1} | at {2}", ireader.Data, ireader.Length, ireader.Time.ToShortTimeString());
      }
   }

   class InputReader
   {
      public string Data { get; set; }
      public int Length { get; set; }
      public DateTime Time { get; set; }
      public void Capture()
      {
         Data = Console.ReadLine();
         Length = Data.Length;
         Time = DateTime.Now;
      }
   }
}

ลองรันกันก่อนรอบนึงครับ ผลจะออกมาเป็นแบบนี้

ที่นี้เรามาตั้ง Break Point ไว้ที่บรรทัดที่ 12 กันครับ ซึ่งจะหยุดหลังจากที่ User พิมพ์อะไรเข้ามาแล้ว Enter

หยุดแล้วครับหลังจากพิมพ์ว่า “Debuggerrrrrrrr!!!!@”

ที่นี้ถ้าเราอยากดูว่าตอนที่โปรแกรมมันทำงานจริงๆแล้วมันเก็บค่าอะไรอยู่

มาที่เมนูนี้เลยครับ Debug > Windows > Watch, Autos, Locals ทำการเปิดทั้ง 3 หน้าต่างนี้

โดยปกติแล้วหน้าต่างพวกนี้จะอยู่บริเวณนี้ครับ (ปรับได้ที่หลังตามสะดวก)

Watch

หน้าต่างนี้ถือเป็นไฮไลท์ของเรา เพราะเราสามารถพิมพ์ชื่อตัวแปรใส่ไปในช่อง Name ได้เลยครับแล้วมันจะทำการแสดงค่าออกมา
1. ลองใส่ ireader ดูเราก็จะเห็นค่าของ Object นี้ทั้งหมด รวมทั้ง Properties ด้วย

2. เท่านั้นยังไม่พอครับ เราสามารถใส่ expression ได้ครับ เช่น ireader.Length > 0 ซึ่งจากตัวอย่างมันก็ return ค่าเป็น true ให้เราครับ

Autos

สำหรับคนที่ขี้เกียจเพิ่มตัวแปรเอง ก็ใช้หน้าต่าง Autos ซึ่งจำทำการแสดงตัวแปรทั้งหมดใน Memory ของ Scope นั้นๆ จนกระทั่งมาถึง Code บรรทัดที่ทำการ Break ในเคสนี้ก็จะเห็นตัวแปรประมาณนี้

Locals

คล้ายๆกับ Autos แต่จะแสดงเฉพาะตัวแปรที่มีกาประกาศหรือสร้างใน Scope เท่านั้น

เช่น args นั้นจะถูกประกาศตอนที่ Main() method ถูกเรียก
และ ireader นั้นถูกประกาศและสร้างจาก new InputReader();

มาถึงตรงนี้ก็จะเห็นว่าเมื่อรวม Break Point, Steps (Into, Over, Out) และ Watch ก็ทำให้เราไล่ Code พร้อมทั้งดูตัวแปรต่างๆในขณะที่โปรแกรมทำงานได้ หวังว่าจะมีประโยชน์นะครับ

แต่…ความสามารถของ Debugger ยังไม่หมดเท่านั้นครับ

Edit and Continue

เรายังสามารถแก้ไขค่าในตัวแปรแล้วให้มันทำงานต่อได้ด้วยโดยการ double click ที่ Value ในช่องของหน้าต่าง Watch, Autos, Locals

แก้เป็น “hey dude anurocha!”

watch_editing2 — ตัวแปรที่ถูกแก้ไขค่าจะเป็นสีแดง

ที่นี้ก็ลอง F5 เพื่อ Continue ดูครับจะเห็นว่ามัน Write ค่า ireader.Data เป็นค่าที่เราแก้ไข

ณ จุดๆนี้เป็นอันจบพื้นฐานการ Debug ที่จะช่วยให้ทุกท่านทำงานได้อย่างง่ายขึ้นนะครับ

*รูป Featured Image จาก The Lord of the Rings

Debug – 3 Steps(Into, Over, Out) วิถีแห่งนักไล่ Code

steps_title

ในการ Debug โปรแกรมนั้น การที่เราจะไล่ Workflow ว่ามันทำงานถูกต้องหรือไม่นั้น มีเครื่องมือที่ช่วยเหลือเราให้เราไล่ Code ได้ง่ายขึ้น สิ่งนี้คือ 3 Steps มหัศจรรย์

Step Over – จะสั่งให้ Code ทำงานในบรรทัดที่หยุดอยู่ และจะไปหยุดที่บรรทัดถัดไป
Step Into – จะเป็นการเข้าไปดูข้างใน Function/Method ของบรรทัดนั้นๆ ถ้า Code ของบรรทัดนั้นไม่ใช่ Function/Method ก็จะทำงานเหมือน Step Over
Step Out – เป็นการสั่งให้ Code ทำงานให้จบใน Function/Method นั้นๆ แล้วจะไปหยุดที่ Code ที่เรียก Function/Method นี้

ซึ่งเมนูหรือ Hot Key ก็ตามนี้เลยครับ

มาดูตัวอย่างกันครับ

ผมมี Code ประมาณนี้ และผมทำการตั้ง Break Point ไว้ที่บรรทัดที่ 9

เมื่อเริ่ม Debug โปรแกรมก็จะหยุดที่ Break Point ที่ตั้งไว้ซึ่งแน่นอนว่า สีเหลืองหมายถึงว่าตอนนี้ Code กำลังทำงานอยู่ที่บรรทัดนี้แหละ

ถ้าเราอยากให้ Code มันทำงานบรรทัดที่ 9 ให้จบก็ลองกด Step Over ดูครับ ก็จะเห็นว่า ลูกศรสีเหลืองนั้นขยับมาที่บรรทัดที่ 10

ที่นี้ถ้าเราอยากรู้ว่าใน Method ที่ชื่อว่า StartLog() มันจะทำงานแบบไหนเราก็สามารถ Step Into เข้าไปได้เลยครับ จะเห็นว่า ลูกศรสีเหลืองขยับมาอยู่ใน Method นี้แล้วในบรรทัดที่ 17

ถ้าเราดูที่หน้าต่าง Call Stack จะเห็นว่าตอนนี้ Code นั้นกำลังทำงานอยู่บน Stack นี้แล้ว

ลอง Step Into อีกครั้งก็จะเข้าไปใน Method doLog() อีกหนึ่งชั้นในบรรทัดที่ 22
steps6

ที่นี้ลอง Step Out ออกมาเพื่อออกจาก Method doLog() ครับ จะเห็นว่า ลูกศรสีเหลืองกลับมาที่บรรทัดที่ 18 ซึ่งเป็น Code ที่เรียก doLog() และถ้าดูใน Console จะพอว่ามันมีการเขียน “hey log…” ไปแล้ว ซึ่งแสดงว่าโปรแกรมได้ทำงานในส่วนของบรรทัดที่ 23 ซึ่งเป็น Console.Write() ไปแล้ว

เพียงเท่านี้เราก็สามารถนั่งไล่ Code แบบลงรายละเอียดได้ทุกบรรทัดและทุก Function/Method แล้วครับ 🙂

และสุดท้ายมี Quote ดีๆอยากจะบอกทุกคนว่า

“Code never lies, comments sometimes do.”~R.Jeffries

Code ไม่เคยโกหก, แต่ Comments บางทีอาจจะ….

เราต้องเชื่อในสิ่งที่ Code เขียนไว้…

Debugging Series:

JS++ อะไรกันนี่…

jspp_logo

เมื่อวันก่อนผมอ่าน Twitter แล้วมันก็เด้งบทความเกี่ยว JS++ มาให้อ่าน http://sdtimes.com/the-case-for-js-plus-plus/ ซึ่งเนื้อหาหลักๆที่ผมเข้าใจคือ ทางผู้พัฒนาต้องการอุดช่องว่างของ JavaScript ซึ่งหลักๆก็คือเรื่อง Type และ Object Oriented ซึ่งโปรเจคแนวนี้ก็มีเยอะมากในวงการเช่น Dart หรือ TypeScript

ส่วน JS++ เองนั้นผู้พัฒนาคือ บริษัท Onux ซึ่งมี Official Site อยู่ที่ https://www.onux.com/jspp/
Platform ที่ทาง JS++ รองรับในตอนนี้คือ Windows กับ Linux เท่านั้น และในปัจจุบันนี้ อยู่ที่ Version 0.4.1 ซึ่งเป็น Early Access Preview อยู่

เมื่อ Install เสร็จก็จะได้ไฟล์ประมาณนี้

ลองเช็ค version ดูด้วย js++ –version ก็ได้เป็น 0.4.1

หลักการทำงานของ JS++ นั้นก็คือเราต้องเขียน Code ด้วย Systax ของ JS++ จากนั้นทำการ Compile ให้ออกมาเป็นไฟล์ .js ที่ Browser เข้าใจ

ที่นี้ลอง Hello World ง่ายๆ ด้วยการสร้างไฟล์ test.jspp

external document;

document.write("Hello World!");

ลอง Compile กันดูครับ

jspp_compiled ไฟล์ที่ออกมาก็หน้าตาแบบนี้ครับ ซึ่งเป็นสิ่งที่ js เข้าใจ

// Compiled with JS++ v.0.4.1

!function(){document.write("Hello World!");}();

งั้นลองกับ Node.js หน่อยดีกว่า

import Convert;

external require;
external http = require("http");
external console;

string hostname = '127.0.0.1';
int port = 1337;

http.createServer(void(req, res) {
res.writeHead(200, { 'Content-Type': 'text/plain' });
res.end('Hello World\n');
}).listen(port, hostname, void() {
console.log("Server running at http://" + hostname + ":" + Convert.toString(port) + "/");
});

Compile มาได้แบบนี้ (ดีจริง minify มาให้พร้อม)

// Compiled with JS++ v.0.4.1

!function(){var http=require("http");var hostname='127.0.0.1';var port=1337|0;http.createServer(function(req,res){res.writeHead(200,{'Content-Type':'text/plain'});res.end('Hello World\n');}).listen(port,hostname,function(){console.log("Server running at http://"+hostname+":"+(port+"")+"/");});}();

ลองรันดูก็ WORK ดีครับ

ที่นี้ผมลองเอา Code จากหน้า Offical Page ที่มี Class มาลองอีกทีครับ ปรากฏว่า Compile Error เพราะหา Class ไม่เจอ…!@#$

สรุป…ผมว่าสำหรับ Build นี้อาจจะยังไม่ถึงเวลาของ JS++ ในการใช้งานจริงครับ และผมก็คิดว่าทางตัวโปรเจคนี้ก็ยังความท้าทายในการเป็น Framework ที่ฮิตอยู่คือ

ไม่เป็น Open Source
ไม่มี บ.ยักษ์ใหญ่ช่วยหนุน
ไม่มี Roadmap ชัดเจนสำหรับ Release ถัดๆไป

ผมคิดว่า ณ วันนี้ถ้าต้องการมองหาทางเลือกอื่นในการพัฒนา App หรือ Service โดยไม่ต้องใช้ JavaScript ตรงๆ ลองมอง TypeScript หรือ Dart ดีกว่าครับ…(ส่วนตัวตอนนี้ศึกษา TypeScript ครับ)