ทำไมต้องเขียน JavaScript

ทำไมต้องเขียน JavaScript

ส่วนตัวแล้วผมเพิ่งมีประสบการณ์นการเขียน JavaScript แบบจริงๆจังๆ ได้แค่ 2 ปี แต่ก็ติดใจชนิดที่เรียกว่ามีโปรเจคไหนก็พยาม Convince ทีมหรือลูกค้าให้ใช้ JavaScript ได้ด้วยเถิด เหตุผลหลักในการเลือกภาษาใหม่สำหรับตัวเองจากที่เคยพัฒนาด้วย .NET เป็นหลัก มาใช้ภาษาอื่นผมตัดสินใจด้วยเหตุผล ดังต่อไปนี้

Cross platform - รองรับได้ทุกระบบปฏิบัติการ (ที่นิยมใช้) Wide community - มีการใช้อย่างแพร่หลาย ศึกษาหาข้อมูลได้ง่าย Support no-sql - รองรับการใช้งาน No-SQL Free - ไม่มีค่าใช้จ่าย Standard - เป็นมาตรฐานที่สากลยอมรับ

ก่อนเลือกภาษา JavaScript ผมลองมาหลายภาษาอย่าง Java , Scala , Ruby , Python แต่ที่คิดว่าถูกจริตของผมมากที่สุด ก็คือภาษา JavaScript มันมี Library มากมายที่สามารถช่วยงานผมในการนำไปพัฒนาซอฟท์แวร์ได้ทุกอย่างเลยทีเดียว มีเยอะชนิดว่าเป็นปัญหาเลือกไม่ถูกกันเลยทีเดียว

สิ่งหนึ่งที่ผมมักจะได้จากการจัดงานและการทำพรีเซนเทชั่นก็คือ เรามักจะได้ความรู้อะไรใหม่ๆเสมอ อย่างก่อนจัดงาน ก็ทำ Slide แล้วหาข้อมูลเกี่ยวกับ 

Cross Plaform ของ JavaScript ก็พบว่าเจอของใหม่เข้าแล้ว นี่เลยครับ NativeScript เขียน JavaScript แล้วแปลงเป็น IOS , Android , Window Phone (Comming Soon) ไม่ได้เป็น Web View นะครับ ย้ำครับย้ำ โอ้วบระจ้าว มันยอดมาก

Wide Community

หากลองเข้าเว็บ www.githut.info จะพบว่า JavaScript จะมีการ Commit ขึ้น Github มากที่สุด ข้อมูล ณ วันที่ 18 กค 2558 และจากประสบการณ์ตรงของผมเองและสอบถามผู้ฟังในงาน ไม่มีเว็บแอพโปรเจคไหนที่ไม่มี JavaScript ปะปนอยู่ในโค้ดเลย อย่างน้อยก็ต้องมีฟังก์ชั่นบางอย่างที่ทำที่ฝั่ง Client Side

Support NO-SQL

เรื่องของการรองรับ NO-SQL จริงๆแล้วภาษาไหนก็รองรับ แต่จุดที่อยากให้สังเกตสำหรับโลกการเก็บข้อมูลด้วยฐานข้อมูลอีกประเภทอย่าง NO-SQL ก็คือ ไม่ว่า NO SQL จะพัฒนาด้วยภาษา C หรือ Java แต่ Format ที่มันเก็บ คือ JSON = JavaScript Object Notitaion เฮ้ย เขาเอา JavaScript Object แบบนี้ {firstName:"Apaichon", lastName:"Punopas" , getIDCard : function(){return "xxxxx-xxx-xxxx";}} มาเก็บในฐานข้อมูลได้เลยนะเออ  

Free and Standard

JavaScript ฟรี และมีองค์กรอย่าง ECMA คอยกำกับดูแลมาตรฐาน

มุมมองถัดมาก็คือ แล้วตลาดงาน JavaScript ในบ้านเราละ  https://codestar.work/research ดูข้อมูลอัพเดตได้ที่ Codestar นะครับแหล่งข้อมูลไอทีอย่างดี

ทีนี้เรามาดูมุมมองเทคโนโลยีต่างๆกันบ้าง

Web MVC Framework มันมีอะไรบ้าง

• Angular Framework - มาแรงและค่อนข้างครบเครื่อง ทำ Data Binding Web Component Module Unit Test และค่าย Google ส่งเข้าประกวด
• Backbone - เป็น JavaScript Framework ที่มีการใช้มานาน มีขนาดเล็ก แต่ยังขาดหลายๆฟังก์ชั่นที่อำนวยความสะดวก เช่น Data Binding , Web Component
• EmberJS - ตัวนี้ค่อนข้างครบเครื่องเหมือน Angular แต่ดูจากหลายๆเว็บจะ Performance ด้อยกว่า และไม่ได้มาจากค่ายยักษ์ก็เลยใช้น้อยกว่า
• Knockout ก็เป็นอีกตัวที่นิยมใช้ แต่ขาดเรื่อง Routing

ถ้าอยากจะทำ Mobile JavaScript ก็เอาไปใช้ได้นะ

• IONIC
• METEOR
• Titanium
• Sencha

แล้วจะเอาอะไรเป็น Server ละ

รู้จักอยู่ตัวเดียวครับ ก็เป็นข้อดีอย่างหนึ่งที่มีแค่ตัวเดียว เพราะไม่ต้องปวดหัวไปเปรียบเทียบหลายตัว ปัญหาใหญ่ของ JavaScript คือมีเครื่องมือมากเกินไป จนทำให้ไม่รู้ว่า โปรแกรมเมอร์จะลงทุนกับตัวไหนดี ฝั่ง Server ก็ต้อง Node JS เลย https://nodejs.org/

ในการเขียนโปรแกรมเราต้องเจอการจัดการกับ Array มากมาย เช่น ต้องการหา Array หนึ่งตัว เพื่อนำไปแก้ไขข้อมูล ต้องการกรองข้อมูลเอาเฉพาบางอย่างเพื่อไปทำบางอย่าง ต้องการ merge array และอื่นๆอีกมากมาย ก็ลองใช้นี่เลย

• Underscore
• Lodash
• Lazy
• TaffyDB
• Loki

เมื่อทำซอฟท์แวร์ไประยะหนึ่ง เราควรพัฒนา User ให้กลายเป็น Super User ด้วยการใช้เครื่อมืออย่าง Diagram หรือ Workflow มีอะไรบ้างละ

• jointjs
• rappid
• GoJS
• jsPlumb

ทำแอพไประยะหนึ่งก็ต้องการนำข้อมูลมาวิเคราะห์ ต่างๆนาๆ การนำข้อมูลนำเสนอในรูปแบบกราฟฟิคก็จะช่วยให้สื่อสารกับคนทุกระดับได้ง่ายขึ้น ก็ต้องทำกราฟ

• D3
• ChartJS
• protovis
• highchart

ทำแต่งานน่าเบื่อ แล้วถ้าอยากทำเกมส์ละ

• http://craftyjs.com
• phaser.io
• melonJS
• pandajs

ถ้าอยากจะทำ MEDIA ละ

ใน HTML5 จะรองรับ video และ audio อยู่แล้วหลายท่านอาจจะไม่สนใจ Library อื่นๆเท่าไร แต่ลองดูครับอาจจะมีอะไรน่าสนใจกว่า

• popcornjs
• mediaelementjs
• jplayer
• enquire.js

อยากจะทำ AI , Machine Learning ภาษา JavaScript ก็ทำได้นะเออ

• machine_learning
• convnetjs
• brain.js
• svmjs
• forest.js
• Numberic.js

MAP API หลายท่านก็น่าจะรู้จักกันดีอยู่แล้ว

• google map
• here map
• ArcGIS
• leafletjs
• openlayers
• mapbox

Internet Of Things and Robotics สาย Hardware ก็ทำได้นะครับ

• Johnny-five
• intel-iot-devkit
• Cylon.js
• webiopi
• autobahn.ws/js

AR Augmented Reality มีกับเขาด้วย

• oculus-bridge
• js-aruco
• tree.js

สรุปสั้นๆเลยว่า JavaScript ทำได้ทุกอย่าง เป็นการลงทุนที่คุ้มค่าในการศึกษาภาษาเดียวแล้วทำได้หลายๆอย่าง แล้วทำไมเราจะไม่เลือกมันเป็นภาษาแรกๆในการศึกษาละ JavaScript ยังสามารถเขียนได้ทั้งแบบ OOP และ Funtional ซึ่งหลายๆภาษาใหม่ๆก็ปรับตัวเป็นลูกครึ่งกันหมด แต่ข้อเสียของมันก็มีนะ ไว้มาแชร์ให้ฟัง แต่มีเทคโนโลยีหนึ่งที่เพิ่งค้นตอนทำ Slide คือ NativeScript.org ซึ่งสามารถนำ JavaScript ไปเขียน IOS , Android ได้โดยที่แปลงเป็น Native ให้เลย ซึ่งน่าสนใจมาก ผมคงเข้าไปศึกษามันเร็วๆนี้ ดาวโหลด Slide ในงานได้ที่ http://www.slideshare.net/ApaichonPunopas/javascript-day-session-1 

ไว้มาแชร์ของท่านอื่นๆในตอนต่อๆไป เรียกได้ว่าทุกคนมีของดีทั้งนั้น แค่นั่งฟังผมก็เก่งขึ้นมานิดนึงเลย

 

ที่มา:http://khadevmag.blogspot.com/2015/07/javascript-day-1.html

JavaScript Callback Functions ใช้ตอนไหนอะ

JavaScript Callback Functions ใช้ตอนไหนอะ(อาจจะงงหน่อยนะแต่มัน Work สุดๆ)

JavaScript Callback Functions ในหัวข้อนี้ก็คงมีหลายๆ Web Site คงได้นำเสนอหลักการทำงานกันให้เข้าใจได้เป็นอย่างดีนะครับไม่ว่าจะเป็นภาษาไทยภาษาอังกฤษ ผมเองก็หาศึกษาจาก Web Site เช่นกันจะซึ่งสามารถเข้าใจได้ไม่อยาก แต่ปัญหาของตัวผมเอง คือแล้วเราจะเอาอันมันมาใช้ตอนไหนดีละนี่และคือปัญหา สำหรับ Post นี้ผมเลยอยากที่จะขอยกตัวอย่างที่ ง่ายๆ และสามารถใช้ได้จริงครับ ถ้าเพื่อนๆ อ่านบทความนี้แล้วก็พอที่มองเห็นภาพ ประโยชน์ของเจ้า Callback  กันบ้างนะครับ(แต่สำหรับคนที่เข้าใจเป็นอย่างดีแล้ว ถ้าผมนำเสนอผิดพลาดประการใดแนะนำผมได้นะครับ)

เรามาลองดู Code แบบแรกกันก่อนนะครับเราจะได้รู้ถึงปัญหา ก่อนอื่นสมมุติว่าเรากำลังจะเขียน  Ajax  ดึงข้อมูล  2 ครั้ง ถ้าเราเขียนแบบง่ายเราอาจจะเขียน การเรียกใช้งานแบบตัวอย่างด้านล่าง เราอาจจะเขียน JavaScript Ajax ขึ้นมาสอง Function ดังรูปด้าน Code ด้านล่าง ครับ

        $.ajax({
                url: 'UrlA',
                type: "GET",
                data: "{}",
                contentType: false,
                cache: false,
                processData: false,
                async: true,
                beforeSend: function (jqXHR, settings) {
                    //console.log(jqXHR.progress)
                },

                success: function (msg) {

                    //Data วาด Table 1
                    var $table1 = $('#table1');
                    var contents = response.d; 
                    
                    var html = '';
                    for (var i = 0; i < contents.length; i++) {
                        html += '<td>' + contents[i] + '</td>';
                    }
                    // add the new row to the table
                    var $newRow = $('<tr></tr>').append(html).appendTo($table1);
                }
             , error: function (jqXHR, textStatus, errorThrown) {
                 //fix bug error not set false
             }
             , complete: function (jqXHR, textStatus) {

             }
            });  //.ajax

ส่วนที่สอง

   //Get Data เพื่อวาด Function Table ที่ 2
            $.ajax({
                url: 'URlB',
                type: "GET",
                data: "{}",
                contentType: false,
                cache: false,
                processData: false,
                async: true,
                beforeSend: function (jqXHR, settings) {
                    //console.log(jqXHR.progress)
                },

                success: function (msg) {

                    //Data วาด Table 2
                    var $table2 = $('#table2');
                    var contents = response.d;

                    var html = '';
                    for (var i = 0; i < contents.length; i++) {
                        html += '<td>' + Name[i] + '</td>'+ '<td>' + Age[i] + '</td>';
                    }
                    // add the new row to the table
                    var $newRow = $('<tr></tr>').append(html).appendTo($table2);
                }
                    , error: function (jqXHR, textStatus, errorThrown) {
                        //fix bug error not set false
                    }
                    , complete: function (jqXHR, textStatus) {

                    }
            });  //.ajax

ซึ่งจาก Code ด้านบนเป็นการเรียกข้อมูลจาก UrlA และ UrlB ซึ่งมีการ Return Data ที่ต่างกันซึ่งแน่นอนว่าการ Return Data ที่แตกต่างกันยอมต้องมีการแสดงข้อมูลที่แตกต่างกันด้วยครับ Code ด้านบน 80% เหมือนกันเกือบหมดซึ่งแตกต่างกันเพียงในส่วนของ Function  Success ที่ใช้ในการ Render Table เท่านั้น

หากต่อไปข้างหน้าเรามีการ Render Table ที่ 3 เราก็ต้อง Duplicate Code แบบด้านบนขึ้นมาอีกมากมาย   และถ้าเราต้องการเพิ่มอะไรบางอย่างลงไปบางอย่างเช่น การเพิ่ม Effect loading ลงใน Function beforeSend เราก็ต้องมานั่งแก้ทั้งสาม Function ซึ่งมันไม่สนุกเลย  ผมจึงได้เขียน Function กลางขึ้นมาลองรับ ผมได้เพิ่ม Function CallServices

      function CallServices(url, async) {

            $.ajax({
                type: "POST",
                dataType: "json",
                beforeSend: function (jqXHR, settings) {
                    //ใส่ Effect loading
                },
                url: url,
                data: '',
                contentType: "application/json; charset=utf-8",
                async: async,
                success: function (msg) {
                    //???????????
                    //???????????
                    //???????????
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax
        }

CallServices Function ที่รับมี Parameter url async

url ของ Service ที่เราต้องการจะเรียก

async ทำเพื่อไว้ใช้สำหรับให้มันทำงานแบบ Asynchronous และ  Synchronous  (เป็นของแถมครับ)

ซึ่งปัญหามันอยู่ตรงที่รูปด้านล่างยังไงเพราะมันใช้ Function เดียวกันแต่วาด Table ต่างกันแล้ว จะทำยังไงดีหว่า

ผมก็เลยแก้โดยใช้การ Return ผลลัพธ์ และนำผลลัพธ์ไปทำการ วาด Table ใคร Table มันตาม Code ด้านล่างครับ

     function CallServices(url, async) {
            $.ajax({
                type: "POST",
                dataType: "json",
                beforeSend: function (jqXHR, settings) {
                    //ใส่ Effect loading
                },
                url: url,
                data: '',
                contentType: "application/json; charset=utf-8",
                async: async,
                success: function (msg) {

                    return msg;
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax

ส่วนที่แก้ไข

ซึ่งดูแล้วก็น่าจะ work  ครับซึ่งมันก็ Work จริงๆ ถ้าเราใส่ async เป็น False นะครับ การใส่ async เป็น False นั้นหมายถึงระบุให้มันทำงานแบบ Synchronous ซึ่งมันจะรอทำคำสั่งจนเสร็จและ Return ผลลัพธ์ได้  แต่ถ้าหากว่าเราระบุ async เป็น True แล้วมันจะโดนข้ามไปโดยปริยายครับ (ปัญหาทั้งหมดอยู่ที่ประโยชน์นี้แหละครับ)
มันถึงเวลาแล้วที่เจ้า CallBack จะได้ออกโรงสะทีแล้วครับ ผมเลยแก้ Function ซะใหม่โดยการเพิ่ม CallBack Function ดัง Code ด้านล่าง

 function CallServices(url, async,callBack) {
            $.ajax({
                type: "POST",
                dataType: "json",
                beforeSend: function (jqXHR, settings) {
                    //ใส่ Effect loading
                },
                url: url,
                data: '',
                contentType: "application/json; charset=utf-8",
                async: async,
                success: function (msg) {
                    
                    return callBack(msg);
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax

ส่วนที่แก้ไขโดยการเพิ่ม ตัวแปล callBack และ เพิ่มการ Return ค่ากลับ

callBack ตัวนี้จะเป็นเราจะใช้รับ function และ return ตัว function พร้อมผลลัพธ์กลับไปทำงานที่ Function แม่ที่เรียกมัน

Code ที่ผมแก้ขึ้นมาใหม่

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="jquery-2.1.4.min.js"></script>
    <script>
        $(document).ready(function () {
            //Get Data เพื่อวาด Function Table ที่ 1
            CallServices('urlA', false, function (msg) {
                //Data วาด Table 1
                var $table1 = $('#table1');
                var contents = msg.d;

                var html = '';
                for (var i = 0; i < contents.length; i++) {
                    html += '<td>' + contents[i] + '</td>';
                }
                // add the new row to the table
                var $newRow = $('<tr></tr>').append(html).appendTo($table1);
            });

            //Get Data เพื่อวาด Function Table ที่ 2
            CallServices('urlB', false, function (msg) {
                //Data วาด Table 1
                var $table2 = $('#table2');
                var contents = msg.d;

                var html = '';
                for (var i = 0; i < contents.length; i++) {
                    html += '<td>' + Name[i] + '</td>' + '<td>' + Age[i] + '</td>';
                }
                // add the new row to the table
                var $newRow = $('<tr></tr>').append(html).appendTo($table2);
            });

        });

        function CallServices(url, async, callBack) {
            $.ajax({
                type: "POST",
                dataType: "json",
                beforeSend: function (jqXHR, settings) {
                    //ใส่ Effect loading
                },
                url: url,
                data: '',
                contentType: "application/json; charset=utf-8",
                async: async,
                success: function (msg) {

                    return callBack(msg);
                }
                , error: function (jqXHR, textStatus, errorThrown) {
                    //fix bug error not set false

                }
                , complete: function (jqXHR, textStatus) {

                }
            });  //.ajax
        }
    </script>
</head>
<body>
</body>
</html>

Code ที่แก้ด้านบนจะมีข้อดีที่แฝงมาสองอย่างนะครับ

1. ลดความซ้ำซ้อนของ Code   Code ของเราก็จะสั้นลง
2. หากมีการ แก้ไขเพิ่มความารถของ การ Call Serive เราก็แก้เพียงที่เดียว
3. ข้อนี้สำคัญมากถือเป็นหัวใจของ Post นี้เลยก็ว่าได้ครับนั้นก็คือมันรองรับการทำงานแบบ
   

   Asynchronous And synchronous

   ไปโดยปริยาย เพียงแค่ใส่ True และ False ผมขออธิบายสักนิด (แบบภาคปฎิบัติเลยนะครับ ไม่ทฤษฏี)
   แบบ urlA เป็น true ,urlB เป็น true : urlA urlB ใครโหลข้อมูล Success ก่อนวาด Table ก่อน

            CallServices('urlA', true, function (msg) {
                //Data วาด Table 1
            });

            //Get Data เพื่อวาด Function Table ที่ 2
            CallServices('urlB', true, function (msg) {
                //Data วาด Table 2

            });

แบบ urlA เป็น false ,urlB เป็น true : urlA จะวาด Table ก่อนพอวาดเสร็จ  และเมื่อ urlB โหลด Success เมื่อไหรถึงค่อยวาดTable (ในระหว่างที่รอโหลดของ urlB มันก็จะคำสั่งอื่นๆ โดยไม่ต้องให้ Success เหมือนกับ Url  )  เพราะ urlA เป็น False นั้นหมายถึง การเรียกข้อมูลแบบ synchronous คือให้รอจนสำเร็จก่อนแล้วถึงยอมทำคำสั่งต่อไป (เพื่อนก็คง งงใช่ไหมครับว่าแล้วทำไมไม่ใช้เป็น Asynchronous  ให้หมดคือมันจะมีบางกรณีที่ เราอาจต้องการค่าใน Table1 บางค่าใช้ค้นหา Table2 ที่สอง เราเลยจำเป็นต้องรอครับ)

             CallServices('urlA', false, function (msg) {
                //Data วาด Table 1
            });

            //Get Data เพื่อวาด Function Table ที่ 2
            CallServices('urlB', true, function (msg) {
                //Data วาด Table 2

            });

แบบ urlA เป็น false ,urlB เป็น false : urlA จะถูกวาดก่อนแล้วจากนั้นก็จะทำ urlB ตามลำดับซึ่ง

             CallServices('urlA', false, function (msg) {
                //Data วาด Table 1
            });

            //Get Data เพื่อวาด Function Table ที่ 2
            CallServices('urlB',false, function (msg) {
                //Data วาด Table 2

            });

หมายเหตุ  ค่า Default ของ  async ของ Ajax จะเป็น True นะครับ

   async: async,

ที่มา :http://www.javascriptthai.com/?p=2189