Scribd
Upload
94 views24 pages

INFT 410 Internet Enabled Application Systems Development V2

Here are a few key reasons why developers choose to use web frameworks in their projects: - Speed of development - Frameworks provide common functionality out of the box that would otherwise need to be coded from scratch, allowing projects to be built more quickly. - Consistency - Frameworks enforce standards and best practices, leading to more consistent code quality and structure across projects. - Maintainability - Large projects built with frameworks tend to be more organized and modular, making them easier to maintain and expand over time. - Community support - Popular frameworks have large communities that provide documentation, tutorials, plugins and help forums to assist with development and troubleshooting issues. - Scalability - Frameworks are designed to handle large and

Uploaded by

Kim Katey Kanor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
94 views24 pages

INFT 410 Internet Enabled Application Systems Development V2

Here are a few key reasons why developers choose to use web frameworks in their projects: - Speed of development - Frameworks provide common functionality out of the box that would otherwise need to be coded from scratch, allowing projects to be built more quickly. - Consistency - Frameworks enforce standards and best practices, leading to more consistent code quality and structure across projects. - Maintainability - Large projects built with frameworks tend to be more organized and modular, making them easier to maintain and expand over time. - Community support - Popular frameworks have large communities that provide documentation, tutorials, plugins and help forums to assist with development and troubleshooting issues. - Scalability - Frameworks are designed to handle large and

Uploaded by

Kim Katey Kanor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

1

INTERNET-ENABLED APPLICATION
SYSTEMS DEVELOPMET.

COURSE CODE: INFT410


CREDIT HOURS: 3 CREDITS
The BIG PICTURE (What this course is about) 2

Purpose: To build on students’ Knowledge of


HTML5, CSS3 and JavaScript in developing Full
functional robust web applications rapidly using a
combination of client-side and server-side
frameworks.
COURSE CONTENT 3

1 Internet Enabled Applications: Principles and Concept- Part 1

2 Internet Enabled Applications: Principles and Concept- Part 2

3 JavaScript: Fundamental to Intermediate Level.

4 JavaScript: Advanced Level.

5 Back-End Development: MongoDB

6 Back-End Development: Node.js

7 Back-End Development: Express


COURSE CONTENT CONTINUED… 4

8 Front-End Development: React

9 MERN Stack Web Application Project: Expense tracking application

10
MERN Stack Web Application Project: Expense tracking application (Further Enhancement)

11 Revision And Exam Preparation

12
Examination
About Me 5

1. My Name
2. My Academic Credential
3. My Teaching and Learning Philosophies.
TEACHING MODE 5

1. Teaching theoretical Concepts.

2. Applying theoretical knowledge via


Projects.
REFERENCE BOOKS 6

1. Beginning JavaScript The Ultimate Guide to Modern JavaScript


Development by Russ Ferguson

2. Beginning MERN Stack Build and Deploy a Full Stack MongoDB,


Express, React, Node.js App by Greg Lim

3. Full-Stack React Projects Modern web development using React


16, Node, Express, and MongoDB by Shama Hoque.
Question
7

Any Question or Suggestions thus far?


3

1 Internet Enabled Applications: Principles


And Concepts – Part 1
Definition and Attributes. 5

• An Internet enabled application is a software system based on


technologies and standards of the World Wide Web Consortium
(W3C) providing Web specific resources such as content and
services through a user interface, the Web browser.

• Internet enabled applications have these General Attributes:

1. Network intensive
2. Content driven
3. Continuous evolution
Layers of Internet Enabled Applications 5

1. Server-side (Backend) Layer development incorporates all the processes that


go behind the scene of an internet Enabled Application such as: Coding the
application logic, incorporating databases, managing user queries, hosting on
servers, maintaining and updating of Web Application. Languages used
include: Node.JS, Java, Ruby, Python, Golang, JavaScript, PHP, Ruby, .NET, etc.

2. Client-side (Frontend) Layer development mainly deals with the visual


presentation and designing of the Application to create a seamless user
experience through responsive web pages. Languages used include Hyper-
Text Markup Language (HTML), Cascading Style Sheets (CSS), JavaScript,
jQuery, etc.

3. full-stack development combines the frontend and backend, encapsulating


the whole Web Application development process.
Rapid Web Application Development. 5

Rapid Web Application Development (RWAD) is a progressive


development model that gives more importance to rapid prototyping
and speedy feedback over a lengthy development and testing cycle.

Basically, RWAD follows 4 main phases –

1. Requirements Planning: Stakeholders and Developers, connect to


determine the goals, expectations and discuss potential challenges of
the project.

2. User Design: Stakeholders and Developers join forces to ensure that


the requirements of the project are being met at every step in the
design process. The user tests the prototype, and then they
collaborate on what worked and what didn’t.
Rapid Web Application Development Phases 5
Continued…

3. Rapid Construction: The prototypes and beta systems


designed in the previous phase are converted into working
models. The product is worked on by developers and testers until
the final product meets the client’s expectations and objectives.

4. Cutover: All final changes are made, finished product is


implemented and launched. User training is also imparted during
this phase.
When To Use Rapid Web Application Development 5
Approach
1. When You Need a Project Done Quickly: When you’ve got a
tight deadline to meet or you’re under pressure to deliver
something that works, RAD is your best bet.

2. When You Can Reliably Test Your Prototypes: When you have a
pool of users who can consistently provide reliable feedback
on your prototypes, RAD is your go-to method.

3. When You’ve Got the Budget: Although, there are instances


where RAD can be expensive (hiring technology experts), if
you’ve got the staff then you can get your idea developed
much quicker than any other model.
Question
7

Discuss the Pros and Cons of Rapid Web


Application Development.
3

2 Internet Enabled Applications: Principles


And Concepts – Part 2
Web Framework : Definition and Technologies 5

A web framework is a software platform for developing web applications


and websites.

• Two types of development frameworks Generally exist – client side


and server side frameworks.

• Client side (Front-end) frameworks handles the user interface.


Examples are: React, Vue, Bootstrap, Ember, Angular, etc.

• Server side (Back-end) frameworks works in the background to


ensure the smooth functioning of the Web Application. Examples are
Django, Ruby On Rails, Express, Spring, ASP.NET Core
Classification of Framework Architectures 5

A Web Framework’s Architecture defines


the relation between the different
components of the framework and decides
how the various layers interacts with each
other. Some popular Web Framework
Architectures are:

Fig. 1: Representation of the MVC Model


• Model View Controller (MVC):
framework is an architectural pattern
that separates an application into three
main logical components Model, View,
and Controller. MVC separates the
business logic and presentation layer
from each other. Fig. 2: Examples of Frameworks with the MVC Model
Classification of Framework Architectures Continued… 5

• In the Model View ViewModel


(MVVM) or the Model-View-Binder
framework architecture, the view
layer acts as a controller and Fig. 3: Representation of the MVVM Framework Architecture

converts the data objects from the


Model layer into manageable
components.

• Three-tier framework architecture


consists of the application,
database, and client-side. This
architecture enables applications
to efficiently and quickly respond
to user requests or inputs. Fig. 4: Representation of the 3-Tier Framework Architecture
Selected Web Enabled Application Development Stack – MERN 5

• The MERN stack is a JavaScript-based framework for developing web


applications.

• MERN stands for MongoDB, Express, React, Node, after the four key
technologies that make up the stack.

1. MongoDB - document database


2. Express(.js) - Node.js web
framework
3. React(.js) - a client-side JavaScript
framework
4. Node(.js) - the premier JavaScript
web server Fig. 5: Representation of the MERN Stack Framework
How The MERN Stack Works. 5

• The MERN architecture allows for the construction of a 3-tier


architecture (frontend, backend, database) entirely using JavaScript
and JSON.

1. React(.js) Front End - React lets you


build up complex interfaces through
simple Components, connect them
to data on your backend server, and
render them as HTML.
Fig. 6: Representation of the MERN Stack Operation.
How The MERN Stack Works Continued… 5

2. Express.js and Node.js Server Tier - Express.js server-side


framework, runs within a Node.js server. Express.js is a “fast,
unopinionated, minimalist web framework for Node.js,”.

3. MongoDB Database Tier - JSON documents created in


React.js front-end are sent to the Express.js server, where
they can be processed and stored directly in MongoDB for
later retrieval.
Reasons For Choosing MERN Stack. 5

The Primary Reason for Choosing the MERN Stack is as


follows:

Time-saving Benefits pertaining to development (i.e. need to


be proficient in only JavaScript and the JSON document
structure, to understand the whole system) and reasonably
simple to debug.
Question
7

1. Can anyone tell me a reason why he/she will


choose to Use Web Frameworks in his/her
Project?

2. Any Questions or Contributions thus far?

You might also like