Introduction to the Course

Instructor: Humaira Waqas

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 1

TOPICS OF DISCUSSION
Introduction
Why This Course
Market Value
Course Contents
 Contents
 Books
 CLOs
 Assessment plan

Discussion

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 2

INTRODUCTION
Web programming takes years to be truly understood
 Part of the complexity comes from the sheer number of moving parts.
 Effective web programmers need at least a basic understanding of many topics:
 Networking
 Protocols
 Security
 Databases
 Server-side
 Client-side
 Client-side programming involves:
 Understanding: HTML (for markup), CSS (for styling) and JavaScript (for functionality)
 Server-side:
 Server has been the domain of languages like: Java (servlets), PHP, Perl, Python (Django), ASP.Net Core, and many other languages
 Databases:
 Web applications also utilize a database for data persistence and requires developers to also understand SQL.

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 3

INTRODUCTION… (THE RISE OF FULL-STACK JAVASCRIPT)

Any simple web application requires developers to understand

 HTML, CSS, JavaScript, Database and a server-side language of choice.
 Ideally developers need to understand at least five separate languages to create a simple web app,
without considering the data interchange format for client-server communication.
 Client-server data interchange format ?
 Traditionally XML
 JSON (simpler)
 JavaScript Object Notation is a standard text-based format for representing structured data based on JavaScript.
 Another set of markup language and JavaScript notation, developers need to understand to develop
web applications.
 Completely understanding languages, syntax and constantly context switching between them is a
daunting task.
 All this has led to a specialization among developers with different teams working on front-end and
back-end.
 However, this doesn’t always ensure that the projects are completed faster or with higher quality….
WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 4
INTRODUCTION… (THE RISE OF FULL-STACK JAVASCRIPT)

Skills and Responsibilities of a Full stack developer

Skills
 A web developer who works with both front end (Client-sider) back ends (server-side)
 (HTML, CSS, JavaScript), (PHP, Python, Asp.Net, JSP, etc), (Databases)

Responsibilities
 Designing user interactions on web pages
 Working with graphic designers for web design features
 Visualizing a project from conception to finalization
 Ensure responsiveness of applications
 Front end and back-end development
 Creating servers and databases for functionalities
 Ensure cross-platform optimization
 Designing and developing APIs
 Staying abreast of developments in web applications and programming languages
WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 5
… THE RISE OF FULL-STACK JAVASCRIPT
MEAN Stack developer vs Full Stack developer
 Instead of grasping diverse knowledge, someone who
has knowledge in some areas alone.
 A development process that is based on JavaScript.
i.e., MEAN stack.

MEAN STACK
Set of technologies that you can use to make a
full-stack JavaScript based application:
M – MongoDB (No SQL database)
E – Express (a framework on top of Node)
A – Angular (a front-end framework)
N – Node (backend framework)
WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 6
Full Stack Development (Web Technologies)
 LAMP/XAMP/WAMP

MEAN Stack
 Scalable and the fact that it is based on JavaScript only.
 This means that both client-side and Server-side can be written
in one language i.e., JavaScript
 MongoDB, Express, Angular, Node

MERN Stack
 MongoDB, Express, React, Node

WHY THIS COURSE

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 7
WHY MEAN Stack ?
 Single language for back end and front end
 Stability, scalability and security can be achieved
 Scalable
 Developers use JavaScript for both client and server side
 Stack comes with number of libraries, frameworks and reusable
modules
 Stable and secure
 Cyber attacks are catered by JSON objects which are manipulated
by SQL strings (used in MongoDB to store data)
 Node limits the concurrent requests using middleware
 Community support available as it is open source
 Switching between client and server is easier
 MEAN is good for large scale applications (enterprise)

MEAN
WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 8
  Cost effective
 Startups do not need to hire different programmers to work on a single
project
 Faster Data-Communication
 JSON seamlessly distributes the data between the layers and save the
efforts of again writing the codes
 MEAN Stack Supports Isomorphic Coding
 Isomorphic means the application uses the same rendering engine on the
client and the server, thus making it easier for developers to maintain
markup templates
MEAN  Time-Savvy Solutions with MEAN
 MEAN has an infinite set of modules and libraries for Node.js that is
ready for use

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 9

 WHY MERN Stack ?
 Single language for back end and front end
 Stability, scalability and security can be achieved
 Community support available as it is open source
 Switching between client and server is easier and affordable
 MERN is good for faster development of smaller applications
 MERN uses virtual DOM, and provides enhanced user
experiences
MERN  For android and IOS coding using JavaScript MERN is the way to
go

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 10

MARKET VALUE
70% hiring is of web development teams in local
market
 Meanstack Developer
 React.JS Developer
 Full Stack Developer
 Web development using different frameworks (Laravel etc.)

15% android Development

15% Game and Desktop Industry

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 11

COURSE CONTENTS
• Introduction to the course • Express JS • Services, Routing and Observable in Angular

• Bootstrap and sample app Sessional 2

• Some Pre-Req’s
• User Authentication using JWT
• JSON, XML and AJAX (authentication middleware) • Join the concepts to make a
• Node Js • Sessions and Local Storage complete MEAN application
Management
• NPM, Event loops, Callbacks and • React Js
Emitters • REST Architecture
• RESTFUL Frameworks and API • Introduction to: Props and states
• HTTP Server, URL and Node-static
development and security • Routing, JSX and components
• File System(fs) in Node.JS
• Create REST API using Express JS, REST • React Forms
• MongoDB Security • React Fetch and Axio
• MongoDB Client Connector, Mongoose • Pre-Req’s for Angular • Redux, Thunk and Unit Testing
• Connecting MongoDB with Node JS, • TypeScript and Transpiling concepts
CURD Operation Terminal
• Angular 9
• Express JS Framework • Make Sample application with Angular
• Application architecture in Express JS Framework
• Concepts, Routing and Routers • Decorators, Modules and Data binding in Angular
• Templating, Directives, Pipes and Dependency
Sessional 1 Injections in Angular

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 12

BOOKS
• Node.js Notes for Professionals,2020, Free Internet Source
• Web Development with Node and Express, Ethan Brown, (2014),
O’Reilly Publishing
• Building Modern Web Applications Using Angular, Shravan Kumar
Kasagoni (2017), Packt Inc
• Full-Stack React, TypeScript, and Node: Build cloud-ready web
applications using React 17 with Hooks and GraphQL, David
Choi(2020),Amazon Kindle Edition

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 13

COURSE LEARNING OUTCOMES
CLO-1 Describe advance concepts and technologies for developing web applications
CLO-2 Develop Web Server and REST API using modern technologies
CLO-3 Design web applications using object-oriented techniques
CLO-4 Develop dynamic clients using modern development technologies

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 14

ASSESSMENTS
Quiz 1 – CLO 1
Assignment 1 – CLO 1
Quiz 2 – CLO 2
Assignment 2 – CLO 2
Sessional 1 – CLO 1, 2
Quiz 3 – CLO 3
Assignment 3 – CLO 3
Sessional 2 – CLO 2, 3
Quiz 4 – CLO 4
Assignment 4 – CLO 4
Terminal – CLO 1, 2, 3, 4

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 15

CLASS POLICY
• Class participations (Bonus Marks)
• No retakes for quizzes and sessional
• Assignments will be entertained with 10% - marks deduction per day
• Copied cases will be awarded Zero
• Attendance related issues will not be entertained

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 16

DISCUSSION

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 17

Thank You

WEB TECHNOLOGIES AND PROGRAMMING (BY: HUMAIRA WAQAS) 18