Web engineering (CS311L) Lab# 06

LAB # 6

Modern JavaScript, Typescript and

Babel

OBJECTIVE

To get familiar with modern JavaScript, Typescript and Babel, and their features.

THEORY

JavaScript has gone through some changes and many good features which are available in other
languages are added in it to circumvent the shortcomings it had. The changes were long awaited.
For example, it did not have block level variable scope, concept of classes, module import and
export syntax etc.

Although many features have been added into JavaScript to make it as feature-rich and useful as
possible, but there are still many things which developers around the world wish them to be
available in it. The most wanted missing feature in JS was the lack of formal Type-System.

Type-System means the ability to clearly indicate the intent of the code. Type-System allows the
compiler to validate the intent of the code at compile time, that is, at the time of writing the code
and compiling it, and not at run time. Typescript is the library which does provide the type system
validation and many other features useful in writing JS code. Typescript has features which include
data types, classes and interfaces, functions, generics, modules among others to name a few. It is
the superset of JS.

The purpose of Babel is to compile the code from one flavor of JS into another flavor of JS, and
hence the term Transpile. That is, when the code is transformed from same language but with
different flavor/syntax into another flavor/syntax of the same language, the process of compilation
rather becomes transpilation.

The great benefit of using Babel is not only transpiling the code from one flavor to another, say
from Typescript code (which is by the way a superset of JS with its own syntax) to modern JS
code, but also it allows us to experiment with the upcoming JS features which have not yet been
incorporated into existing JS engines.

Babel is not limited to transpiling the JS code, but it can transform any code/syntax into another
syntax using its very important feature called plugins. Plugin system in Babel is used to make it
extensible to also process other code formats than just JS. For example, there are CSS plugins,
HTML plugins and so on. JS processing is the default format which does not require using any
plugin.

We also have concept of presets in Babel besides plugin. The purpose of presets is to combine the
related plugins in one collection and giving it a name, which can then be used to indicate to Babel

Sir Syed University of Engineering and Technology 1|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

to use all the plugins found under that specific preset. ReactJs and many other libraries provide us
with many presets to transpile their code (which have their own syntax to write code instead of JS)
into the one understood by the NodeJs and browser environments.

Samples:

1 Modern JS – ES6 - 2015: https://codepen.io/syed-owais-owais/pen/abWXWvx

Code:

Sir Syed University of Engineering and Technology 2|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

Output:

Sir Syed University of Engineering and Technology 3|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

2 Modern JS – ESNext: https://codepen.io/syed-owais-owais/pen/YzVgQNQ

Code:

Sir Syed University of Engineering and Technology 4|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

Output:

3 Babel: https://codepen.io/syed-owais-owais/pen/YzVgJey

Code:

Sir Syed University of Engineering and Technology 5|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

Output:

4 Typescript: https://codepen.io/syed-owais-owais/pen/JjNzmVj

Code:

Sir Syed University of Engineering and Technology 6|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

Output:

Lab Task

1 Modern JS
a. Create a class called Library and add few properties like sections, books,
manager, and openingTime and closingTime.
b. Add few functions like manageLibrary, issueBooks, addNewSection,
openLibrary, and closeLibrary.
c. Use arrow functions instead of regular functions for all function definition.
d. Return promise from issueBooks, openLibrary and closeLibrary functions.
e. Return books from issueBooks promise. Use then to receive the result.
f. Return openingTime from openLibrary function. Use setTimeout and resolve after
2 seconds. Use async/await keywords pair to get the results.
g. Return closingTime from closeLibrary function. Use setTimeout and resolve after
1 second. Use async/await keywords pair to get the results.
h. Create instances of the Library class and call each function as mentioned above.
i. Loop through the keys of each instance using for-in loop and log the keys.
2 Babel
a. Create Student registration form using React.
b. Create Teacher login form using React.
c. Create two routes for each student and teacher forms and provide links to redirect
to their respective forms.

Sir Syed University of Engineering and Technology 7|Page

(Department of Computer Science & Information Technology)
Web engineering (CS311L) Lab# 06

d. Render React forms using Babel transpiler.

3 Typescript
a. Create two classes and extend each from its respective ITeacher and IStudent
interfaces. Implement the required members from the interfaces.

Home Task
1 Modern JS
a. Create a generator function called generateRegistrationNumbers.
i. Accept the parameter asking the upper limit of the Registration number to
be generated.
ii. Calling the next method should return first registration number starting from
1
iii. Calling the next method of generator again should return the next number.
iv. If the limit has been reached, the generator should stop giving next number
no matter how many more times you call the next method of generator.
2 Typescript
a. Create a generic function called defineLabMember accepting ILabMember
interface as type parameter and member as function parameter.
i. Define a method called startLab inside ILabMember interface.
ii. Call the startLab method from inside the defineLabMember function using
the member function parameter.
iii. Define two classes called LabAssistant and LabAdmin and implement
ILabMember interface.
iv. Call defineLabMember function and passing the object one by one of each
class created in step above.

Sir Syed University of Engineering and Technology 8|Page

(Department of Computer Science & Information Technology)