0% found this document useful (0 votes)
12 views33 pages

Comprehensive Guide to JavaScript Technologies

The document provides an overview of various JavaScript technologies, including both front-end and back-end frameworks such as Node.js and Require.js. It covers fundamental JavaScript concepts, event handling, and the creation of web services using Node.js and Express. Additionally, it introduces OJET (Oracle JavaScript Extension Toolkit) for building client-side applications and emphasizes the importance of RESTful web services.

Uploaded by

Suresh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views33 pages

Comprehensive Guide to JavaScript Technologies

The document provides an overview of various JavaScript technologies, including both front-end and back-end frameworks such as Node.js and Require.js. It covers fundamental JavaScript concepts, event handling, and the creation of web services using Node.js and Express. Additionally, it introduces OJET (Oracle JavaScript Extension Toolkit) for building client-side applications and emphasizes the importance of RESTful web services.

Uploaded by

Suresh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Javascript Technologies

1. Javascript
2. Require JS
3. Knockout JS
4. OJET (Oracle Javascript Extension Toolkit)
5. [Link]

Software requirement

1. VS Code
2. [Link]

Javascript Fundamentals: let, const, arrow functions, callback functions,


event handling, template strings, promises, async/await, fetch, validations

Things to cover

- Template Strings
- Callbacks / Arrow functions
- Event Handling
- Promises
- Async/Await
- Validations
- Fetch

Javascript is mainly used to add effects to the front end applications, it can
be used at the backend also to access file-systems, DB, or OS resources.

Front end JS technologies

- Typescript
- [Link]
- [Link]
- Angular Framework
- [Link]
- OJET

Backend Javascript Technologies

- [Link]: It is a runtime environment for Javascript to executed at the


backend without browser

Lab1: Understand event handling

[Link]

Output
List of ways to access an element

1. [Link](“id”)
2. [Link](“tag”)
3. [Link](“class”)
4. [Link](“selector”); #id, .class, tag
5. [Link]: To identify which element generated the event

[Link] helps you to identify on which element the event is generated


Require JS

It is a Javascript & module loader, used to increase the speed of your


application

After you click on download select [Link]


You need to click on minified button

You get a javascript code that you need to copy to one js file
In VS Code you create [Link]

Create a [Link]

Create an [Link]
Output:

Note: Here the same script is loading more than once, if we use [Link]
this can be avoided, so that in an application when there are lot of Javascript
files you are loading, it should be loaded only once in the browser to increase
the speed of the execution.

How to use require js

1. Add the script of [Link]


2. All the scripts you load in a require function instead of using script tag
Output:

Notice the require loading the javascript file however not more-than once,
even if you repeat

List of technologies that use require

1. [Link]
2. [Link]
3. OJET
4. React
5. Angular Framework
[Link]

It is a Javascript runtime environment used to run the javascript code at the


backend, so that you can do various operations like

1. creating servers
2. interacting with the OS
3. interacting with the File Systems
4. Networking
5. Interacting with the DB

Node provides REPL (Read Eval Print Loop) to quickly write & run JS code

[Link]: It is heart of [Link], it will have all the dependencies of the


project, project meta-data, scripts to run the project

We must use a command to create [Link]


npm init -fy

[Link] provides 3 types of libraries / modules

1. Core Module
2. Local Module
3. Third Party Module

How to download the third party modules


npm install express cors // downloads express & cors libraries

Is require inbuilt in [Link] ? : Yes

let fs = require(‘fs’);
let os = require(‘os’);

Note: [Link]() is not present in JS, it is present in Java, in Javascript


you must use setTimeout for delays.

OS Modules
Using modern style import instead of require

ES 5 style:
let os = require(“os”);

ES 6 style:

import os from ‘os’;

update [Link]

Now on you can use import instead of require


Let us use a third part module

readline-sync: It is used to take input from the keyboard in the terminal

Installing:

npm install readline-sync // we must download this inside the project folder
that has [Link]
Try different functions like: questionNewPassword(..), questionEmail(…)

fs module: It provides methods to read & write files

- readFileSync(“filename”)
- writeFileSync(“filename”, content) or writeFileSync(“filename”,
content, {flag:”a+”})
appending to the old content

Reading the file content & converting the buffer to string

How to import Local module & write an object to a file in the form JSON

We can’t write javascript object to the file, we must convert the object to text
i.e., JSON string

[Link]
Note: The export can be written in 2 ways, the one which is written is a
named export that can be imported with the same name i.e. import
{ Employee } from ‘[Link]’; there’s another type of export called
default export, that can be imported in any name, its syntax doesn’t include
{ } i.e, import E from ‘[Link]’;

Create database table employee


mysql2: lt is a library used to interact with mysql database
Output:

Summary:

 Require JS
 [Link] - REPL, Types of modules, fs, readline-sync, mysql2
Day 3 Agenda

1. Creating webservices using Node


2. [Link]
3. OJET

What are webservices

These are online services which can share the data across heterogenous
applications

ex: IRCTC can share data to Phone pay or Google pay, these UPI Apps can
share data to various banking services

There are 2 types of webservices

1. SOAP webservice: exchanges the data in XML format


2. RESTful webservice: exchanges the data in XML/JSON/CSV/TEXT
formats

SOAP: Simple Object Access Protocol

ReST: Representational State Transfer

RESTful webservice uses HTTP protocol to share the data, it uses HTTP
methods to let you create webservice, these are methods of HTTP

1. get: Read/Fetch
2. post: Storing/Creating new resource
3. put: Update the existing resource
4. delete: Deleting the resource

Different technologies use different libraries and framework to develop


RESTful webservice
1. Java: Spring Boot / JAX-RS - Jersey
2. [Link]: [Link]
3. Python: Django & Flask
4. C#: [Link]

How to develop webservices using [Link]

1. Install express
2. If you are connecting to the backend install mysql2
3. If you want your webservice to be accessed by cross-origin clients,
install cors library

All these libraries can be installed at once

npm install mysql2 express cors

Steps to create webservice

 Import the express & create its object


 Import the cors and add this to the express
 Create routes that can take HTTP requests
 Start the server - express itself has inbuilt server

import express from ‘express’;


import cors form ‘cors’;
// creating express object
let app = express();
//adding cors to the express
[Link]( cors() ); // adds cors to the express

// creating HTTP routes


[Link](url, (request, response) => { … handles request & generate
response } );
[Link](url, (request, response) => { .. handles request & generate
response });

// start the server

[Link](8888, () => { .. callbackFn that executes once server starts … })

[Link]
[Link]
OJET: Oracle Javascript Extension Toolkit, it is built on top of [Link] to
create client side applications like UI’s for web & mobile

OJET UI’s you cannot create by remembering the code, because there are lot
of inbuilt tags & attributes, Oracle employees must use Oralce Cookbook for
OJET & OJET official website to understand OJET.

OJET uses MVVM architecture, which is used even by [Link]


OJET project can be created using javascript/typescript, but typescript has an
advantage of types & results are reliable

Software’s required

1. [Link]
2. NPM

Pre-requisites

- HTML
- CSS
- Javascript/Typescript
- Basics of [Link]

Hello world program on KO


Output:

Editing the data

To edit the data we must use knockout js observables, simple text data
variables cannot detect the changes done to the variables from the view

OJET extensively uses [Link] databinding

OJET gives you starter projects which will have inbuilt folder structures for
views, viewModels, ojet libraries and basic navigations and etc.

npm install -g @oracle/ojet-cli@16


Verifying the installation

How to create ojet project

ojet create project-name --tempalte=navdrawer --typescript

cd myapp

ojet serve: This runs the project & opens the application in the browser

Output:
OJET Cookbook

1. You will see all the ojet components with HTML(view) & corresponding
JS/TS (viewModel)
2. You must look for the cookbook output and use it in your application.

[[ ]] is read-only, one way data-binding

{{ }} is read & write: two way data-binding

Using Input Number

[Link]
[Link]

Output:
I18N(Internationalization): Ability to make software to adapt to different
county languages

L10N(Localization): For every country specific locale resource will be there


ex: fr-FR (French), us-en(English)

Output:
Objective:

Enhancements: You can navigate from one page to another page without
reloading the entire page (Single page application).

Things to try before creating the UI for the case-study

1. Try Form components like: input text, input number, input password,
input date, form layouts (activity-02)
2. Try Controls like: buttons, messages, progress (activity-03)
3. Try Collections like: table, list view, paging control (activity-04)
4. Try Framework like: RestDataProvider, (activity-04)
(or) you can create a single activity-all folder & upload html & TS files

After that try the below lessons provided by Oracle to understand how to
develop OJET application from scratch to accessing backend with REST calls
(activity-06)

[Link]
[Link]

Lastly complete your case-study

OJET application must interact with Backend service (spring boot & [Link])

1. Minimum OJET components (dashboard) of spring boot:


a. Registration
b. Login
c. Fetching any details & showing in the page
2. Minimum OJET component(customer) of [Link] :
a. Store
b. Retrieve
c. Find By Id
Event Handling

[Link]

[Link]

How to disable the button


Output:

How to access fake json data from OJET


There are many ways

1. Using traditional fetch API


2. Using OJET component RestDataProvider that can help you to create
dynamic content after calling the backend like tables, grids and etc

RestDataProvider: It is used to access the backend, it can directly map the


data coming from the backend to the table or any other collections.

RestDatProvider( { keyAtrributes, url, transform : { fetch: {request,


response } } } );

Two things you must learn

1. Making request with different HTTP methods and also if wants to


update, then update the dataprovider using mutate of
RestDataProvider
2. Core Router: For navigations

Common questions

Powered by AI

OJET utilizes the data-binding capabilities of Knockout.js to enhance dynamic web application functionalities, focusing on maintaining a separation between the user interface and application logic . Through Knockout.js, OJET supports interactive user interfaces with declarative bindings using syntax such as [[ ]]; for read-only (one-way) and {{ }}; for read & write (two-way) data binding . This enables real-time updating of the UI in response to changes to underlying data automatically. By offering a structured way to manage changes in application state without direct manipulation of DOM elements, OJET simplifies the expression of complex UI logic, resulting in cleaner, more maintainable code and enhanced user interactions ."

OJET (Oracle JavaScript Extension Toolkit) is built on the MVVM (Model-View-ViewModel) architecture, which facilitates organized and manageable front-end development . It incorporates Knockout.js for data binding, enhancing the ability to manage complex user interfaces by separating the user interface (View) from the application's dynamic logic (Model). OJET's extensive use of Knockout.js also allows for interactive UI elements through simplified data-binding techniques [[ ]] for one-way and {{ }} for two-way binding . Furthermore, OJET supports the development of client-side applications through Typescript, offering reliable results due to its type system . It also provides ready-made project templates and various components for UI, easing the development process for complex applications ."

Node.js uses 'require' as a built-in function to include modules in the application, which is part of its CommonJS module system . The 'require' function loads a package or module using the file path and executes the module's code . In contrast, ES6 imports are part of the ECMAScript standard and allow for more efficient static analysis and optimization during module loading. ES6 imports use the 'import' keyword and use named exports from files, providing a more declarative, syntactically succinct approach ."

RESTful and SOAP web services differ primarily in their use of protocols and data formats. REST (Representational State Transfer) uses standard HTTP methods (GET, POST, PUT, DELETE) to facilitate communication, allowing data exchange in multiple formats such as JSON, XML, CSV, or plain text . REST is considered more flexible, easier to implement, and generally lighter due to its stateless and cacheable operations . On the other hand, SOAP (Simple Object Access Protocol) relies on XML for message format and typically uses protocols like HTTP, SMTP for message negotiation and transmission, which makes it more rigid and bandwidth-intensive . SOAP is advantageous in scenarios where high security is required, as it includes standardized extensions for security and transaction compliance."

Node.js allows for the creation of web services by leveraging its non-blocking, asynchronous I/O nature, making it suitable for building scalable network applications . Express.js, a Node.js framework, simplifies web services development by providing a robust set of features to build single-page, multi-page, and hybrid web applications . It facilitates handling HTTP requests and middleware configuration, thus speeding up the development process. Express.js's minimalistic strategy enables developers to include only the needed components, thus reducing overhead . Overall, Express.js abstracts much of the complexity involved in server creation, routing, and HTTP request handling, allowing developers to focus more on application logic than on configuration."

Promises in JavaScript provide a more readable and cleaner way to handle asynchronous operations compared to traditional callback functions, avoiding issues like callback hell . They allow chaining and promise composition, which makes code easier to manage and understand. However, chaining promises could still result in nested then calls. Async/await syntax, introduced in ECMAScript 2017, simplifies promise-based asynchronous code by allowing developers to write code that appears synchronous . This leads to better readability and easier debugging. One potential drawback is that async/await necessitates converting existing non-promise-based asynchronous functions to promise-based, which can be cumbersome in larger codebases. Additionally, error handling in async/await requires try/catch blocks, which although effective, can sometimes lead to scattered error management in more complex flows."

The JavaScript Fetch API provides a more powerful and flexible feature set for making HTTP requests compared to the older XMLHttpRequest. It uses Promises to handle asynchronous operations, which allows for a cleaner, more readable syntax and better error handling . Fetch's interface is more consistent with modern web standards, supporting additional capabilities like streaming and response cloning. Unlike XMLHttpRequest, Fetch's request and response handling is built to work seamlessly with newer features such as Service Workers . While Fetch provides these advantages, it's worth noting that unlike XMLHttpRequest, it doesn't directly provide ways to track upload progress, which may be a limitation for some applications."

Require.js is a JavaScript file and module loader that helps improve performance by ensuring that scripts are loaded only once and in the correct order . It utilizes AMD (Asynchronous Module Definition) to load scripts asynchronously, which improves page load times by not blocking other processes . Additionally, by managing dependencies and ensuring that scripts are loaded only once, it eliminates redundant script loads, which reduces network traffic and execution time, enhancing overall application performance ."

Third-party modules like mysql2 in Node.js significantly enhance backend development by providing pre-built functionalities that simplify complex tasks. The mysql2 module, an efficient promise-based library, permits Node.js applications to interact with MySQL databases, handle connections, execute queries, and manage transactions with simplicity and reliability . Such modules encapsulate best practices and performance optimizations, reducing the amount of custom code developers need to write, and thus, accelerate development time and ensure consistent performance and security standards . Utilizing community and industry-tested libraries, developers can focus on application-specific logic rather than underlying protocols and database management, enabling more robust backend solutions."

The package.json file is central to a Node.js project as it contains metadata about the project, including the project name, version, description, main file, license, and scripts that can be run with npm . It defines dependencies and development dependencies, allowing Node.js to manage and install the necessary modules using 'npm install' . This ensures consistent environment setup across different systems and simplifies module management by maintaining a clear list of needed packages and their specific versions ."

You might also like