https://silcnitc.github.io/index.html

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<title>ExpL | Home</title>
5<meta charset="UTF-8">
6<link rel="stylesheet" href="css/style.css">
7<!--[if lt IE 9]>

7<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

7<![endif]-->
8</head>
9<body>
10  <style>
11    .fixed-pos{
12      position: absolute;
13      top: 70px;
14      left: 400px;
15    }
16    .theme-switch-wrapper {
17  display: flex;
18  align-items: center;
19}
20.theme-switch-wrapper em {
21  margin-left: 10px;
22  font-size: 1rem;
23}
24
25.theme-switch {
26  display: inline-block;
27  height: 34px;
28  position: relative;
29  width: 60px;
30}
31
32.theme-switch input {
33  display: none;
34}
35
36.slider {
37  background-color: #ccc;
38  bottom: 0;
39  cursor: pointer;
40  left: 0;
41  position: absolute;
42  right: 0;
43  top: 0;
44  transition: .4s;
45}
46
47.slider:before {
48  background-color: #fff;
49  bottom: 4px;
50  content: "";
51  height: 26px;
52  left: 4px;
53  position: absolute;
54  transition: .4s;
55  width: 26px;
56}
57
58input:checked + .slider {
59  background-color: #66bb6a;
60}
61
62input:checked + .slider:before {
63  transform: translateX(26px);
64}
65
66.slider.round {
67  border-radius: 34px;
68}
69
70.slider.round:before {
71  border-radius: 50%;
72}
73  </style>
74  <div class="theme-switch-wrapper fixed-pos">
75       <label class="theme-switch" for="checkbox">
76    <input type="checkbox" id="checkbox" />
77    <div class="slider round"></div>
78  </label>
79    <em>Toggle Dark Mode</em>
80  </div>
81  

81<script>
82    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
83const currentTheme = localStorage.getItem('theme');
84
85if (currentTheme) {
86    document.documentElement.setAttribute('data-theme', currentTheme);
87  
88    if (currentTheme === 'dark') {
89        toggleSwitch.checked = true;
90    }
91}
92
93function switchTheme(e) {
94    if (e.target.checked) {
95        document.documentElement.setAttribute('data-theme', 'dark');
96        localStorage.setItem('theme', 'dark');
97        location.reload();
98    }
99    else {        document.documentElement.setAttribute('data-theme', 'light');
100          localStorage.setItem('theme', 'light');
101          location.reload();
102    }    
103}
104
105toggleSwitch.addEventListener('change', switchTheme, false);
106  </script>

106
107<header class="center clearfix" id="navtop">
108<div>
109    <div class="fleft">
110        <div class="columnlogo">
111            <p>
112                <a href="index.html" class="logo fleft"><img src="img/logo.png" alt="" /></a>
113            </p>
114        </div>
115        <div>
116          <p style="font-size:3em; height: ">EXPERIMENTAL LANGUAGE</p>
117        </div>
118        <div style="background-color: #dff0d8;padding:4px 8px;border-radius: 4px; margin: 0 0 1em;">
119          <h4 style="font-size: 16px">
120            mkDocs version of this site is available at <a href="https://silcnitc.github.io/expl-docs" target="_blank">silcnitc.github.io/expl-docs</a>
121          </h4>
122        </div>
123    </div>
124    <div class="fright">
125      <nav>
126        <ul>
127          <li><a href="index.html" class="navactive">Home</a></li>
128          <li><a href="about.html">About</a></li>
129      <!--    <li><a href="help.html">Help</a></li> -->
130          <li><a href="roadmap.html">Roadmap</a></li>
131          <li><a href="documentation.html">Documentation</a></li>
132          <li><a href="studentfeedback.html">Student Feedback</a></li>
133        </ul>
134      </nav>
135    </div>
136</div>
137</header>
138 <div class="main center container">
139  <section class="part clearfix">
140  	<header class="title clearfix">
141        		<!--<p class="fleft">Home</p>
142       		 <a href="about.html" class="arrow more fright">see more infos</a> -->
143  	</header>
144      <div class="column2 mright">
145        <h1>WRITE</h1><h1>YOUR  OWN</h1><h1>COMPILER!</h1>
146      </div>
147      <div class="halfmleft col-xs-12 col-md-6">
148           <div class="panel-body ">
149              <div class="row row-table row-flush">
150                <span><img style="max-width:25%" src="img/github.jpg" ></img>  <span>
151              <span>
152                  <h5>Source Code</h5>
153                  <p>The entire project code is hosted on Github <b><a style="color:blue" href="http://github.com/silcnitc" target="_blank">http://github.com/silcnitc</a></b>
154                      <span style="color:red"> <br>Release Version 1.0<br><br><br></span></p>
155              </span>
156                </div>
157           </div>
158      </div>
159      <div>
160        <p>
161          This project aims to develop an online self-sufficient educational platform to help undergraduate Computer Science students understand the functioning of a compiler for a simple procedural language by writing a small toy compiler themselves.  (An object oriented extension for the language has been added subsequently.) The project will provide students with a <a href="roadmap.html" target="_blank">roadmap</a> for the development process and guide them along the roadmap with supporting documentation. Using the step-by-step guidance offered by the roadmap, the students will be able to build the compiler under minimal expert supervision.
162  	   </p>
163       <p>
164         The platform is designed assuming that the student has a basic knowledge of Data structures, Computer organization and a working proficiency of the C programming language. Being instructional in nature, this project tries to give some insight into the working of LEX, YACC and the usage of these tools to develop a compiler for an instructional language custom designed for the project - called ExpL (Experimental language).   Brief theoretical explanations are provided on a <i>need-to-do</i> basis.
165       </p>
166       <p>
167  <p>       If you wish to get started with the project directly, proceed to the <a href="roadmap.html" target="_blank">roadmap</a>.  If you wish to get a high level overview of the project, a brief outline is given next.
168  </p>
169  <p>
170         If you wish to customize this project for your instructional requirements, proceed <a href="#contribution">here</a>.
171       </p>
172         <hr>
173       </p>
174    <h2>Overview of the project</h2>
175    <p>
176        To design a compiler, one needs the following specifications: <br><br>
177
178        1. <i>The specification of the source programming language</i>:  The source language for this compiler is called the Experimental Language (ExpL),  which is designed solely for instructional purposes.  An informal specification of the source language is given <a href="expl.html" target="_blank"> here</a>. The specification for an extension of the basic ExpL language with support for object oriented programming is given <a href="oexpl-specification.html" target="_blank">here</a>.
179    </p>
180    <p>
181        2.  <i>Application Binary Interface of the target platform</i>:  A compiler must generate a binary executable file that can be loaded and executed by an operating system running on a target machine.  Normally, an OS system installation comes with an interface specification, explaining how binary executable files must be formatted to run on the system.  This interface is called the Application Binary Interface (ABI).  The ABI is dependent on both the OS and the machine architecture.   The ABI for this project is that of the Experimental Operating System (ExpOS) running on the Experimental String Machine.  [XSM].   The ABI specification is given <a href="abi.html"> here</a>.  (The simulator allows the target program to contain machine instructions in mnemonic form, avoiding translation to binary format).
182    </p>
183    <p>
184        A compiler takes a source language program as input and produces an executable target file formatted according to the requirements laid down by the ABI.  Of course, the semantics of the program must be preserved by the translation process.
185    </p>
186    <p>
187        The main intellectual complexity in understanding a compiler is that its inputs and outputs are programs – that is, a compiler's input data is a (source language) program and its output is a (target language) program.  The task is to systematically map each construct in the source program to semantically equivalent constructs in the target language.
188    </p>
189    <p>

190        A text book approach to compilation logically divides the process into several parts.  The lexical elements of the input program are identified during a <i>lexical analysis phase</i>.  The software tool LEX is used in this phase.  The lexemes identified by the lexical analysis phase are passed to the next phase – called the <i>syntax analysis phase</i> - which checks the program against syntax errors.  If the program is free of syntax errors, the next conceptual stage called the <i>semantic analysis phase</i>, checks for type and scope errors in the program.  Once a program is found to be free of syntax and semantic errors, an intermediate representation of the source program called the <I>abstract syntax tree</i> representation is generated by the compiler.  (In practice, syntax analysis, semantic analysis and abstract syntax tree construction happens together.  The syntax directed translation scheme provided by the software tool YACC is used for completing these phases.)   The sequence of phases starting with the lexical analysis of the source program to generation of abstract syntax tree representation is called the <i>front end</i> of the compiler.
191    </p>
192    <p>
193        <br><img src="img/flowdiagram.png"><br>
194    </p>
195    <p>
196        The abstract syntax tree produced by the front end is the input to the back end phase which generates an assembly language program.  Finally, a label translation phase is run to replace symbolic labels in the assembly language program with logical addresses (linking) and generate final target executable file.
197    </p>
198    <p>
199        The road-map takes you through a "spiral" model of program development. First, a simple expression compiler is built.  Static variables are then introduced to the expression compiler and control flow constructs are added.  In the next step, support for string type is added to the language and semantic issues are addressed. Subroutines and run time allocation are introduced subsequently and finally support for user defined types and dynamic memory allocation is added.  (A final phase of providing support for classes and subtype polymorphism has been added subsequently).   In each of these steps, you will encounter lexical, syntax and semantic analysis, syntax tree construction and code generation.  The tasks will be very simple during the initial stages and the complexity will grow gradually as more and more features are added to the language.
200    </p>
201    <p>
202        Wish you good luck working through the <a href="http://silcnitc.github.io/roadmap.html" target="_blank">road-map</a>.
203    </p>
204    </div>
205
206  </section>
207  <!-- <section class="part clearfix">
208    <header class="title clearfix">
209      <p class="fleft"><h5>The three steps</h5></p>
210      <a href="services.html" class="arrow more fright">see more services</a> </header>
211    <article class="column3 mright services">
212      <p class="number"><a id="S1"></a>Step 1</p>
213      <div class="sepmini"></div>
214      <h5>Installation</h5>
215      <div class="sepmini"></div>
216      <p>This is the key to start. This section gives step-by-step instructions for installation of the compiler development tools and the C compiler which are used to develop SILC</p>
217	<a href="install.html" class="arrow fright">proceed to the installation</a>
218    </article>
219    <article class="column3 mright services">
220      <p class="number">Step 2</p>
221      <div class="sepmini"></div>
222      <h5>Documentation</h5>
223      <div class="sepmini"></div>
224      <p> This section contains all the documentation that the student requires in order to develop the perfect Simple Integer Language Compiler.
225</p>
226     <a href="documentation.html" class="arrow fright">proceed to the documentation</a>
227    </article>
228    <article class="column3 services">
229      <p class="number">Step 3</p>
230      <div class="sepmini"></div>
231      <h5>Roadmap</h5>
232      <div class="sepmini"></div>
233      <p>Well, as the name suggests, this is the route to take during the journey. This section is the guide to proper usage of the documentation and the tools.</p>
234	<a href="#" class="arrow fright">proceed to the roadmap</a>
235    </article>
236  </section> -->
237<hr>
238<h3 id="contribution">Customizing the Project </h3>
239    <p>  If you wish to adapt the project to your own instructional
240requirements, this is how we suggest you to proceed.
241</p>
242<p>
243Suppose your institution has the name ABC University,
244download the ExpL source and create your
245own Git repository "explabc.github.io".
246You can now modify the specification/simulator/ABI
247or any other component of this package, subject to the
248<a href="http://silcnitc.github.io/about.html#navlic" target="_blank">license conditions</a>.  You will have

249your version of  ExpL in this way.    We encourage you to do this as
250you will develop your own instructional
251system and a team of students who can help you with
252the administration of your Git repository.
253We recommend you to keep your repository in Git so
254that students elsewhere will also get the benefit of your contribution.
255
256<!--You may also have a look at the pedagogical strategy
257and student feedback data.   -->
258
259</p>
260
261
262
263
264  </div>
265<footer class="center part clearfix">
266
267
268
269<ul class="social column3 mright">
270    <li><a href="https://github.com/silcnitc">Github</a></li>
271 <!--   <li><a href="#">Facebook</a></li>
272    <li><a href="#">Twitter</a></li>
273    <li><a href="#">Google+</a></li>
274    <li><a href="#">Flickr</a></li>
275  -->
276  <li>  <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
277      <img alt="Creative Commons License" style="border-width:0" src="img/creativecommons.png" /></a></li>
278</ul>
279
280
281
282
283    <div class="up column3 mright">
284
285      <a href="#navtop" class="ir">Go up</a>
286
287    </div>
288
289<!--
290
291<ul class="social column3 mright">
292    <li>  <a href="#navtop" class="ir">Go up</a></li>
293</ul>
294
295
296
297    <a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">
298      <img alt="Creative Commons License" style="border-width:0" src="img/creativecommons.png" /></a>
299
300-->
301
302  <nav class="column3">
303    <ul>
304
305      <li><a href="index.html">Home</a></li>
306      <li><a href="about.html">About</a></li>
307    </ul>
308  </nav>
309</footer>
310
311

312<script src="http://code.jquery.com/jquery.min.js"></script>

312

313<script>window.jQuery || document.write('

313<script src="js/jquery-1.5.1.min.js"><\/script>')</script>

313

314<script src="js/slides.min.jquery.js"></script>

314

315<script src="js/scripts.js"></script>

315

316<script src="js/inject.js"></script>

316
317<!--[if (gte IE 6)&(lte IE 8)]>

318<script src="js/selectivizr.js"></script>

318
319<![endif]-->
320</body>
321</html>