Scribd
Upload
53 views

Introduction To The Course: Instructor

This document introduces a course on web technologies and programming taught by instructor Humaira Waqas. The course will cover topics related to full-stack JavaScript development using the MEAN and MERN stacks, including MongoDB, Express, Angular/React, and Node.js. Students will learn to develop web servers, REST APIs, and dynamic clients using technologies like TypeScript, Angular, and React. The course aims to help students gain skills in developing scalable and secure full-stack web applications.

Uploaded by

shehryar kiyani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Introduction To The Course: Instructor

This document introduces a course on web technologies and programming taught by instructor Humaira Waqas. The course will cover topics related to full-stack JavaScript development using the MEAN and MERN stacks, including MongoDB, Express, Angular/React, and Node.js. Students will learn to develop web servers, REST APIs, and dynamic clients using technologies like TypeScript, Angular, and React. The course aims to help students gain skills in developing scalable and secure full-stack web applications.

Uploaded by

shehryar kiyani
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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

You might also like