JSIDE

JavaScript Interactive Development Environment

 

JSIDE

ระบบโต้ตอบทันที

เพื่อการพัฒนาโปรแกรมภาษาจาวาสคริปต์

นายเวหา สุวัฒน์พิศาลกิจ 

5530537521

อาจารย์ที่ปรึกษา

รศ. ดร. สมชาย ประสิทธิ์จูตระกูล

จุดประสงค์

เพื่อพัฒนาเครื่องมือที่ช่วยให้การพัฒนาโปรแกรมภาษาจาวาสคริปต์เป็นไปได้อย่าง 

  • รวดเร็ว
  • ต่อเนื่อง
  • สามารถเห็นผลลัพธ์ ของโปรแกรม

     ในระหว่างที่พัฒนาโปรแกรมได้ทันที

 

DEMO

แนวทางในการพัฒนา

 

babel :  source to source compiler 

parser

Token

Syntactic Analysis

AST

code generation

source code

lexical analysis

Transformation

AST

source to source compiler 

source 

Transformation

 : Babel plugin

 : Babel plugin

a.b = 10+10 //->

Augmented code

a= 10;
___jside.push({
        name: 'a', 
        value: a, 
        loc:{start:{col:0, line:0},
        end:{col:1, line:0}
        }
    ); 

Assignment Expression

Augmented code

var a= 10;
___jside.push({
        name: 'a', 
        value: a, 
        loc:{start:{col:0, line:0},
        end:{col:1, line:0}
        }
    ); 

Variable declaration Expression

Augmented code

function add(a, b){
   return a+b
}
function add(a, b) {
   var ___jsiide = [{local: "function", 
                     arg: arguments,
                     name: add}];
 window.parent.parent
    .postMessage(JSON.stringify(___jsiide),
                 "http://localhost:5000/");
   return a + b;
}

function declaration Expression

thank you

video

By Veha Suwatphisankij

video

show progress of JSide development

  • 366