JSIDE

JavaScript Interactive Development Environment

JSIDE

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

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

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

5530537521

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

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

problem

coding is complicated.

development cycle takes so long

developer spend  50-80% of their time

read source code

bug code almost come before bug 

software development timeline

เครื่องมือที่เกี่ยวข้อง

babel

codeMirror

babel :  source to source compiler 

source 

compiler 

parser

Token

Syntactic Analysis

AST

code generation

Machine code

lexical analysis

Transformation

AST

babel :  source to source compiler 

parser

Token

Syntactic Analysis

AST

code generation

source code

lexical analysis

Transformation

AST

source to source compiler 

source 

ASTAbstract syntax tree

a.b = 10+10 //->

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

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

ASTAbstract syntax tree

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