Cs2404 WF QB
Cs2404 WF QB
YEAR/SEMESTER II/IV
REGULATIONS 2022
COURSE CODE AD2404
COURSE NAME WEB FRAMEWORKS
FACULTY NAME K.KARTHIKA Contact Number
REVISED BLOOMS TAXONOMY(RBT) :
L1- Remembering L2 - Understanding L3 - Applying L4 - Analyzing L5 - Evaluating L6 - Creating
UNIT-I: ANGULARV 12
PART-A (2-Marks)
S.N RBT
QUESTIONS CO
O LEVEL
1
9 What do you mean by string interpolation? CO1 K1
RBT
PART-B (13- Marks Or 16-Marks or 8-Marks) CO Marks
Level
Explain the difference between structural and attribute directives, and CO1
1 provide examples. K2 13
You have a component that receives a status string, and you want to render CO1 13
6 different content based on different status values (e.g., 'active', 'inactive',
'pending'). How would you use the ngSwitch directive to handle these cases? K3
You are tasked with creating a reusable user card component that displays a CO1 13
user's name, mail id, mobile number, and some additional information.
7
How would you structure the component, its template, and its styles to
ensure reusability and maintainability? K3
8 CO1
9 CO1
2
10 CO1
11 CO1
12 CO1
13 CO1
14 CO1
15 CO1
16 CO1
17 CO1
18 CO1
19 CO1
20 CO1
RBT
PART-C (15 - Marks) CO Marks
Level
Imagine you have a simple Angular application with multiple components.
1 How would you set up basic routing to navigate between these CO1 K3 15
components?
You have a button in your component, and you want to trigger a function CO1
2 when the button is clicked. Explain how you would use event binding to K3 15
achieve this behavior.
Your application has a complex form with multiple input fields. How CO1
3 would you use ngModel for form controls to manage and track the state of K3 15
the form inputs?
4 CO1
5 CO1
AngularModules–HTTPclient,FormsModule–AngularServiceFiles–DependancyInjection–
AngularMaterial– Connecting Angular withBackEnd
3
PART-A (2-Marks)
S.N RBT
QUESTIONS CO
O LEVEL
2 Explain the difference between AppModule and Feature Modules in Angular. CO2 L1
What is the role of the subscribe method when making HTTP requests in CO2
7 Angular? L1
How does Angular handle HTTP errors, and what are common error status CO2
8 codes? L1
12 How can you dynamically add form controls in reactive forms in Angular? CO2 L2
16 How does Angular achieve loose coupling through Dependency Injection? CO2 L2
Name three components provided by Angular Material and describe their CO2
18
use cases. L1
4
20 Give the significance of ‘ngModel’ directive in Angular forms. CO2 L1
RBT
PART-B (13- Marks Or 16-Marks or 8-Marks) CO Marks
Level
Illustrate the concept of NgModule in Angular. Provide a step-by-step CO2
1 explanation of how to create and configure a module. L2 13
Explain the role of lazy loading in Angular modules and how it contributes to
3 application performance. L2 7
Create a step-by-step guide on how to use Angular's HTTP client to perform CO2
4 CRUD operations with a mock RESTful API. Include error handling and loading
indicators. L2 13
Design a dynamic form in Angular that handles a variable number of input CO2
5
fields based on user selection. Include form validation and error messaging. L2 13
Discuss the use of form controls and validators in reactive forms. Provide a CO2
6
scenario where custom validators may be necessary. L2 13
Create an Angular application where services are injected at different levels CO2
7
of the application hierarchy. Explain the implications and benefits. L2 13
11 CO2
12 CO2
13 CO2
14 CO2
15 CO2
16 CO2
5
17 CO2
18 CO2
19 CO2
20 CO2
RBT
PART-C (15-Marks) CO Marks
Level
Imagine you are developing a large-scale e-commerce platform. Design the CO2
Angular module structure, considering features such as user authentication,
1 L3 15
product management, and order processing. Explain the rationale behind
your module design, considering maintainability and scalability.
You are building a weather application that fetches real-time weather data CO2
from an API. Design an Angular service to handle HTTP requests to the
2 L3 15
weather API, including error handling and caching mechanisms. Provide a
step-by-step implementation guide.
Develop a scenario where you need to create a complex form with both CO2
template-driven and reactive form sections. Discuss how you would integrate
3 L3 15
the two form approaches within a single Angular component and handle the
form submission, validation, and data synchronization between the sections.
You are tasked with creating a content management system (CMS) using CO2
Angular Material. Design the user interface with components like tables,
4 L3 15
forms, and navigation, adhering to Material Design principles. Include
features for content creation, editing, and deletion.
UNIT-3: REACT V 18
6
IntroductiontoReact–Settingdevelopment environment–create app–JSXsyntax–propertiesandstates–
components– Reactrouting– APIrequest
PART-A (2-Marks)
S.N RBT
QUESTIONS CO
O LEVEL
Explain why you would choose React as your JavaScript library for building CO3
2 the user interface. L2
How would you justify that React is worth learning for modern web CO3
3 development? L2
Briefly explain the key features of React that make it popular among CO3
4 developers. L1
List the essential tools required for setting up a React development CO3
5 environment. L1
6 Describe the steps to create a new React app using Create React App. CO3 L1
7 Outline the process of using Create React App to initiate the project. CO3 L1
8 What is JSX, and how does it differ from regular JavaScript syntax? CO3 L1
9 What benefits does JSX offer over traditional JavaScript for rendering UI? CO3 L2
Explain the primary purpose of React props and provide a brief example of CO3
11 when you would use them in a component. L1
14 Explain the key difference between functional and class components in React. CO3 L1
When would you prefer using a functional component over a class CO3
15
component? L2
7
Differentiate between synchronous and asynchronous API requests in the CO3
19
context of React. L1
Why is asynchronous behavior often preferred when working with APIs in CO3
20
React applications? L2
RBT
PART-B (13- Marks Or 16-Marks or 8-Marks) CO Marks
Level
Differentiate between React props and state. Provide an example scenario for CO3
1 each. L1 6
Discuss the role of props and states in React components, emphasizing when to CO3
2 use each. L1 7
Explain how to update state in a React component and why it's important in a CO3
3 dynamic application. L2 6
Define React components and explain their significance in the development of CO3
4
modular UI. L2 7
Distinguish between functional and class components in React. Provide use cases CO3
5
for each. L2 6
Describe the process of passing data between parent and child components in CO3
6
React. L2 7
8 What is React Router, and how does it facilitate navigation in a React application? CO3 L2 6
Describe the purpose of API requests in a React application. Provide an example CO3
10
scenario where API requests are essential. L2 13
Explain the difference between synchronous and asynchronous API requests in CO3
11
React. L2 13
Discuss the steps involved in making an API request using the fetch function or a CO3
12
library in React. Include error handling in your explanation. L2 13
Illustrate how fetched data from an API can be dynamically displayed in a React CO3
13
component. L2 13
14 CO3
15 CO3
16 CO3
17 CO3
8
18 CO3
19 CO3
20 CO3
RBT
PART-C (15-Marks) CO Marks
Level
Imagine you are building a file management system in React with nested folders CO3
1 and files. Describe how you would pass data between parent and child L3 15
components to dynamically render the folder and file structure.
You are developing an e-commerce website with multiple sections (home, CO3
2 products, cart, and checkout). How would you implement React Router to L3 15
navigate between these sections, ensuring a smooth user experience?
3 CO3
4 CO3
5 CO3
ReactHooks–useState–useEffect–useCallback–useMemo–useContext–useReducer–
Introductionto ReactNative
PART-A (2-Marks)
S.N RBT
QUESTIONS CO
O LEVEL
2 How does useState differ from class-based state management in React? CO4 L1
3 Can you use multiple useState hooks in a single functional component? CO4 L1
9
6 What is the dependency array, and how is it used with useEffect? CO4 L1
8 How does the dependency array work with the useCallback hook? CO4 L1
12 Can useMemo be used for all types of values, or are there limitations? CO4 L2
How is the useContext hook different from passing props through CO4
14
component hierarchies? L1
How does useReducer compare to useState for managing complex state CO4
17
logic? L1
18 Explain the structure of the state and action in a useReducer scenario. CO4 L1
In what scenarios might you combine useEffect with useState for CO4
19
fetching data in a React component? L1
How can you use both useContext and useReducer together for state CO4
20
management in a larger React application? L1
RBT
PART-B (13- Marks Or 16-Marks or 8-Marks) CO Marks
Level
Explain how functional components manage state using the useState hook CO4
in React. Provide an example scenario, and discuss the benefits of using
1 this hook over traditional class-based state management. L2 6
Explore the concept of side effects in React components and how the CO4
useEffect hook helps manage them. Provide examples of common side
2 effects and discuss the importance of the dependency array in useEffect. L2 7
3 You are tasked with developing a complex React application that involves CO4 L2 13
multiple components, each with its own state requirements. Explain how
10
you would approach state management using a combination of useState,
useReducer, and the React Context API (useContext). Provide detailed
examples and discuss the rationale behind choosing a particular state
management strategy for each component. Consider scenarios where
memoization (useMemo and useCallback) may enhance performance.
Discuss how the useCallback hook can be used to optimize performance in CO4
4 React applications. Provide examples where memoization is crucial, and
explain when to use useCallback versus regular function declarations. L2 6
Explain the purpose of memoization in React using the useMemo hook. CO4
5 Provide real-world scenarios where memoization can improve performance
and discuss potential drawbacks or considerations. L2 7
Describe the React Context API and how it can be utilized with the CO4
Explore the use of the useReducer hook for managing complex state logic CO4
Imagine you are building a dynamic form in a React application, and the CO4
11
combining these hooks.
Compare and contrast state management strategies in React using useState, CO4
11 useReducer, and useContext. Discuss the scenarios where each strategy is
most suitable and the trade-offs involved. L2 7
Explore advanced patterns with the useEffect hook, focusing on scenarios CO4
Explain how the various hooks like useMemo and useCallback contribute
13
to optimizing performance, and provide examples of situations where these
optimizations are crucial. L2 6
Explore advanced patterns with the useEffect hook, such as using cleanup CO4
Imagine you are creating a library of custom hooks for a team of CO4
16 CO4
17 CO4
18 CO4
19 CO4
12
20 CO4
RBT
PART-C (15-Marks) CO Marks
Level
Imagine you are developing a dynamic form in a React application where CO4
the form fields and validation rules can change dynamically based on user
interactions. Propose a solution using React Hooks to manage the form
1 L3 15
state, handle validation, and ensure a smooth user experience. Discuss the
use of specific hooks such as useState, useEffect, and useCallback in your
solution.
You are working on a data-intensive React application where large datasets CO4
are fetched and displayed. Outline a strategy using React Hooks (useEffect,
useMemo) to optimize performance by reducing unnecessary renders,
2 L3 15
memoizing data, and handling asynchronous data fetching efficiently.
Provide a step-by-step implementation plan with considerations for edge
cases.
Design a solution using React Hooks to manage user authentication and CO4
user context in a React application. Discuss the use of the useContext hook
3 to propagate user authentication state through the application. Explore how L3 15
to use useEffect for initial data fetching after authentication and
useReducer for handling complex authentication-related actions.
You are tasked with implementing a feature toggle system in a React CO4
based chat application. Design a solution using React Hooks to manage the
real-time state of the chat, including messages, user presence, and typing
indicators. Discuss the use of useEffect for subscribing to real-time
13
updates, useReducer for handling chat-related actions, and useMemo for
optimizing rendering performance.
UNIT-5: CONTAINERIZATION
PART-A (2-Marks)
S.N RBT
QUESTIONS CO
O LEVEL
1 Define Docker and explain its key purpose in software development. CO5 L1
3 CO5 L1
What is the purpose of a Dockerfile in the context of Docker?
4 Explain the significance of the "FROM" instruction in a Dockerfile. CO5 L1
How does Docker use layers, and why are they essential in the context of Docker CO5
5 images? L2
How does Docker handle communication between containers in the same CO5
7 network? L2
8 Define Docker Compose and explain its role in multi-container applications. CO5 L1
12 What role does the etcd component play in a Kubernetes cluster? CO5 L1
15 How does a Kubernetes Deployment ensure the desired state of applications? CO5 L2
14
16 Provide an example of a kubectl command used to create a pod. CO5 L1
18 How does Kubernetes enable communication between pods on different nodes? CO5 L2
Describe a scenario where you might use Docker Compose in conjunction with CO5
20
Kubernetes. L2
RBT
PART-B (13- Marks Or 16-Marks or 8-Marks) CO Marks
Level
CO5
Explain the core principles of Docker and discuss how it facilitates the
1 development and deployment of applications. Provide examples to
L2 6
illustrate your points.
CO5
Create a hypothetical scenario for a web application, and then design a
Dockerfile for building a Docker image for that application. Justify the
choices you make in each step of the Dockerfile.
2 L3 7
CO5
Explain the significance of Docker in the context of modern software
development and deployment. Discuss the key features of Docker and how
they contribute to creating a scalable and consistent environment. Provide
3 a detailed example of a real-world scenario where Docker has been
L2 13
instrumental in enhancing the development and deployment processes.
Compare and contrast the various networking options in Docker, including bridge CO5
4 networks, host networks, and overlay networks. Provide use cases for each type of
network. L2 6
CO5
Design a Dockerfile for a complex, multi-tier web application that includes
a frontend, backend, and database. Justify the decisions made at each step
6 of the Dockerfile, considering factors such as image layering,
dependencies, and security practices. Discuss how this Dockerfile
facilitates scalability and maintainability in a production environment.
L3 13
8 CO5 L2 7
Discuss the role of the master node components (API server, Controller
15
Manager, Scheduler, etcd) in a Kubernetes cluster. Explain how they
collaborate to ensure proper cluster management.
Compare and contrast the various networking modes in Docker, such as bridge, CO5
host, and overlay networks. Discuss their use cases, advantages, and limitations.
9 Illustrate your explanation with a practical example, demonstrating how
networking choices impact the communication between containers in a distributed
application environment. L2 13
Compare and contrast Kubernetes pods and deployments. Explain when it is CO5
10 appropriate to use one over the other and provide examples to support your
reasoning. L2 6
CO5
Demonstrate the use of various kubectlcommands to interact with a
11 Kubernetes cluster. Include examples for creating and managing pods,
services, and deployments.
L2 7
CO5
Explore the integration of Docker Compose with Kubernetes in the context
of application deployment. Discuss the benefits and challenges of using
Docker Compose files in a Kubernetes environment. Provide a step-by-
12 step walkthrough of how a multi-container application defined in a Docker
Compose file can be transitioned to and managed by Kubernetes. Evaluate
the advantages and potential drawbacks of this integration.
L2 13
CO5
Investigate the networking model in Kubernetes, detailing how pods
13 communicate within the same node and across nodes. Discuss the role of
services in facilitating communication between pods.
L2 6
CO5
Imagine a scenario where an application is initially developed using
Docker Compose for local development and later deployed to a production
14 environment managed by Kubernetes. Discuss the challenges and benefits
of transitioning from Docker Compose to Kubernetes, and propose best
practices for such migrations.
L3 7
CO5
Explain how the features of StatefulSets, ConfigMaps, and
Secretscontribute to the management and configuration of applications in a
15 Kubernetes cluster. Provide real-world examples of scenarios where these
concepts are particularly valuable, and discuss best practices for their
implementation.
L3 13
16 CO5
16
17 CO5
18 CO5
19 CO5
20 CO5
RBT
PART-C (15-Marks) CO Marks
Level
Imagine you are tasked with containerizing a large-scale microservices CO5
architecture. Each microservice is written in a different programming language
and relies on specific dependencies. Design a Dockerfile strategy that optimizes
1 the build process, minimizes image size, and ensures efficient caching. Discuss L3 15
the challenges you might encounter and how your approach addresses these
concerns. Explain the impact of your Dockerfile design on deployment and
resource utilization.
CO5 L3
You are developing a distributed system where multiple Docker containers
need to communicate securely over the network. Design a networking
2 solution that ensures proper isolation, allows for effective communication, 15
and supports scalability. Discuss the choice of networking modes and their
implications. Include considerations for service discovery, load balancing,
and potential security measures. Provide a step-by-step guide for
implementing and testing your networking solution.
CO5 L3 15
In a software development project, you are using Docker Compose for
local development and testing. Describe how you structure your docker-
compose.yml file to mirror the production environment accurately while
3
facilitating an efficient local development workflow. Discuss the use of
volumes, environment variables, and other configurations. Explain any
challenges you anticipate in transitioning from a development setup to a
production deployment managed by Docker Compose.
CO5 L3 15
You are tasked with deploying a multi-service application on a Kubernetes
cluster. The application includes a frontend, backend, database, and a
message queue. Design a Kubernetes manifest file or set of files that
4 define the deployment, services, and any necessary configurations. Discuss
how you handle application scalability, data persistence, and
communication between services. Explain the role of Kubernetes objects
such as Deployments, Services, ConfigMaps, and Secrets in your
deployment strategy.
5 CO5 L3 15
You are responsible for deploying a critical application that requires high
availability on a Kubernetes cluster. Outline a strategy for achieving high
availability, ensuring minimal downtime and effective load balancing.
Discuss the use of Kubernetes features such as ReplicationControllers,
StatefulSets, and Services in your deployment. Address potential
17
challenges related to data consistency, failover mechanisms, and
monitoring. Provide insights into how you would test and validate the high
availability setup.
RBT LEVEL: L1- Remembering, L2 – Understanding, L3 – Applying, L4 – Analyzing, L5 – Evaluating, L6 – Creating
18