2CSC22Notes 1
2CSC22Notes 1
Definition :
A web framework (WF) or web application framework (WAF) is a software framework that is designed
to support the development of web applications including web services, web resources, and web APIs.
Real world web development relies heavily on the use of frameworks. Frameworks aren’t exactly new
languages, but are more like add-ons to existing languages. These frameworks slightly change the rules
and syntax of a language, but save us a lot of time and effort in writing web development code.
For example, a CSS framework like Bootstrap will require us to write our CSS using slightly different
rules than regular (vanilla) CSS. It will also limit the level of customization we can do using CSS. But
the drawbacks are often worth it, because Bootstrap makes styling our sites far easier and allows us to
create mobile-friendly pages with minimal effort.
Web frameworks provide a standard way to build and deploy web applications on the World Wide
Web.
Web frameworks aim to automate the overhead associated with common activities performed
in web development.
For example, many web frameworks
provide libraries for database access, templating frameworks, and session management, and they
often promote code reuse.[1] Although they often target development of dynamic web sites, they
are also applicable to static websites.
Think a decade ago, the web was a completely different place. Smartphones don’t exist. Simpler and
customer oriented web application are highly expected now. Sometimes it’s the small UI elements that
make the biggest impact. In the era of Smartphones, websites should be responsive enough on the
smaller screens. If your web applications frustrate or confuse users, then it is difficult to maintain your
customer’s loyalty for your website. Website navigation is another part often neglected by developers.
Intuitive navigation creates a better user experience for the website visitor. Intuitive navigation is
leading your audience to the information they are looking without a learning curve. And when the
navigation is intuitive, visitors can find out information without any pain, creating a flawless experience
preventing them from visiting the competitors
2. Scalability :
Scalability is neither performance nor it’s about making good use of computing power and bandwidth.
It’s about load balancing between the servers, hence, when the load increases (i.e. more traffic on the
page) additional servers can be added to balance it. You should not just throw all the load on a single
server but you should design the software such that it can work on a cluster of servers. Service-oriented
architecture (SOA) can help in improving scalability when more and more servers are added. SOA gives
you the flexibility to change easily. Service oriented architecture is a design where application
components provide services to other components through the communication protocol, basically over a
network.
3. Performance :
Generally, it is accepted that website speed has the major importance for a successful website. When
your business is online every second counts. Slow web applications are a failure. As a result, customers
abscond your website thus, damaging your revenue as well as reputation. It is said that think about
performance first before developing the web application. Some of the performance issues are Poorly
written code, Un-Optimized Databases, Unmanaged Growth of data, Traffic spikes, Poor load
distribution, Default configuration, Troublesome third party services, etc. A content distribution
network (CDN) is globally distributed network of proxy servers deployed in multiple data centres. It
means instead of using a single web server for the website, use a network of servers. Some of the
benefits of CDN are that the requests on the server will be routed to different servers balancing the
traffic, the files are divided on different CDNs so there will be no queuing and wait for downloading
different files like images, videos, text, etc.
Frameworks are the kick start for development languages: they boost performance, offer libraries of
coding and extend capabilities, so developers need not do hand-coding web applications from the
ground up. Frameworks offer features like models, APIs, snippets of code and other elements to develop
dynamic web applications. Some of the frameworks have a rigid approach to development and some are
flexible. Common examples of web frameworks are PHP, [Link], Ruby on Rails and J2EE. Web
platforms provide client libraries build on existing frameworks required to develop a web application or
website. A new functionality can be added via external API. Developers and small business owners
should have a clear understanding of their company needs related to website and application
development. Information delivery and online presence would require a simple web platform such
as WordPress or Squarespace but a selling product requires an e-commerce platform such as Magento,
Shopify. WooCommerce or BigCommerce). While choosing the perfect platform one should also
consider technical skills, learning curve, pricing, customization options and analytics.
5. Security :
In the midst of design and user experience, web app security is often neglected. But security should be
considered throughout the software development life cycle, especially when the application is dealing
with the vital information such as payment details, contact information, and confidential data. There are
many things to consider when it comes to web application security such as denial of service attacks, the
safety of user data, database malfunctioning, unauthorized access to restricted parts of the website, etc.
Some of the security threats are Cross-Site Scripting, Phishing, Cross-Site Request Forgery, Shell
Injection, Session Hijacking, SQL Injection, Buffer Overflow, etc. The website should be carefully
coded to be safe against these security concerns.
While there are a lot of pros in developing software for use on the web, there are some cons as well.
These can be unique challenges to a web developer.
[Link] times. Do you ever go to a website and it takes forever to load? What is your reaction? We
usually get frustrated and leave. In fact, most users will leave a site if it does not load for them in 15
seconds or less! As mentioned earlier, connection speed is a large hurdle to overcome when dealing
with web development. A user’s speed can range from very fast (Fiber optic) to slow (mobile 3G or
satellite). It is our job as web developers to take ALL users into account. Therefore, we learn tricks to
keep users engaged while our code is being downloaded, and learn to keep our code small so it can be
easily downloaded.
2. Different Browsers. Not only do we have to worry about load times, but also differences in browser
technology. Mobile browsers are different than desktop (or laptop) browsers. Older browsers (many
computers still use Windows XP and IE9) are extremely different than newer browsers, and developing
for each provides a unique challenge. Ultimately you will need to make sacrifices and not support some
browsers (which is a call marketing department will make) but you should be able to code for the
browser you do support.
[Link]. If you are not a person that uses an accessibility device to consume software on the
web, then you may have no idea these exist. Screen readers, alternative keyboards/navigation devices,
devices for the hearing impaired, the color blind, font sizes for visually impaired people, are all
concepts that we tend to not think about. As a web developer, you will need to start thinking about these
users not only from a human decency perspective, but also because these users make up a non-
insignificant market share. There are also legal issues that require accessibility.
1. Firstly, developers can build powerful single-page apps with organized and interactive
UIs;
History:
A brief history of web frameworks It is essential to consider why we use frameworks such as
Angular, React, or Vue in the first place. Web frameworks came to rise as JavaScript became
more popular and capable in the browser. In 2004, the Asynchronous JavaScript and XML
(AJAX) technique became very popular in creating websites that did not have to rely on full-
page refreshes to create dynamic experiences utilizing standardized web technologies like
HTML, JavaScript/ECMAScript, and CSS. Browser vendors are supposed to implement these
technologies as defined by the World Wide Web Consortium (W3C).
Internet Explorer (IE) was the browser that the vast majority of internet users relied on at the
time. Microsoft used its market dominance to push proprietary technologies and APIs to secure
IE's edge as the go-to browser. Things started to get interesting when Mozilla's Firefox
challenged IE's dominance, followed by Google's Chrome browser. As both browsers
successfully gained significant market share, the web development landscape became a mess.
New browser versions appeared at breakneck speed. Competing corporate and technical
interests led to the diverging implementation of web standards. This fracturing created an
unsustainable environment for developers to deliver consistent experiences on the web.
Differing qualities, versions, and names of implementations of various standards created an
enormous challenge, which was successfully writing code that could manipulate the Document
Object Model (DOM) of a browser consistently. Even the slightest difference in the APIs and
capabilities of a browser would be enough to break a website.
In 2006, jQuery was developed to smooth out the differences between APIs and capabilities for
browsers. So instead of repeatedly writing code to check browser versions, you could use
jQuery, and you were good to go. It hid away all the complexities of vendor-specific
implementations and gracefully filled the gaps when there were missing features. For a good 5
to 6 years, jQuery became the web development framework. It was unimaginable to write an
interactive website without using jQuery. To create vibrant user experiences, however, jQuery
alone was not enough. Native web applications ran all their code in the browser, which
required fast computers to run the dynamically interpreted JavaScript and render web pages
using the complicated object graphs. Back in the 2000s, many users ran outdated browsers on
relatively slow computers, so the user experience wasn't great.
Types of framework architectures :
[Link]–view–controller (MVC)
2. Three-tier organization
[Link]–view–controller (MVC)
Many frameworks follow the MVC architectural pattern to separate the data model into business
rules (the "controller") and the user interface (the "view"). This is generally considered a good practice as
it modularizes code, promotes code reuse, and allows multiple interfaces to be applied. In web
applications, this permits different views to be presented, for example serving different web pages for
mobile v. desktop browsers, or providing machine-readable web service interfaces.
What is MVC architecture?
The Model-View-Controller (MVC) is an architectural pattern that separates an application into three
main logical components: the model, the view, and the controller. Each of these components is built to
handle specific development aspects of an application. MVC is one of the most frequently used industry-
standard web development frameworks to create scalable and extensible projects.
Model
The model component stores data and related logic. It represents data that is being transferred between
controller components or any other related business logic.
It responds to the request from the views and also responds to instructions from the controller to update
itself. It is also the lowest level of the pattern which is responsible for maintaining data.
View
A View is that part of the application that represents the presentation of data.
Views are created by the data collected from the model data. A view requests the model to give
information so that it resents the output presentation to the user.
The view also represents the data from charts, diagrams, and tables.
Controller
The Controller is that part of the application that handles the user interaction. The controller interprets the
mouse and keyboard inputs from the user, informing the model, and the view to change as appropriate.
A Controller sends commands to the model to update its state. The controller also sends commands to its
associated view to change the view’s presentation
Advantages of MVC
It helps you to avoid complexity by dividing an application into three units. Model, view,
and controller.
All classes and objects are independent of each other so that you can test them separately.
Difficult to read, change, to write unit tests, and reuse this model.
The difficulty of using MVC with the modern user interface.
Push-based :
Most MVC frameworks follow a push-based architecture also called "action-based". These
frameworks use actions that do the required processing, and then "push" the data to the view layer
to render the results.
Django, Ruby on Rails, Symfony, Spring MVC, Stripes, [Link], CodeIgniter are good examples
of this architecture.
pull-based :
2. Three-tier organization :
In three-tier organization, applications are structured around three physical tiers: client, application, and
database. The database is normally an RDBMS. The application contains the business logic, running on
a server and communicates with the client using HTTP. The client on web applications is a web browser
that runs HTML generated by the application layer. The term should not be confused with MVC, where,
unlike in three-tier architecture, it is considered a good practice to keep business logic away from the
controller, the "middle layer".
3-tier Architecture vs. MVC Architecture
3-tier: widely used in web applications where the Generally used on applications
Usage client, data tiers, and middleware a run on that run on a single graphical
physically separate platforms. workstation.
Introduction to Frameworks:
Framework applications :
Frameworks are built to support the construction of internet applications based on a single programming
language, ranging in focus from general purpose tools such as Zend Framework and Ruby on Rails,
which augment the capabilities of a specific language, to native-language programmable packages built
around a specific user application, such as content management systems, some mobile development
tools and some portal tools.
Types of Frameworks :
There are many different types of frameworks available. Some popular ones include:
Web frameworks: These provide a structure for developing web applications and include
libraries and tools specific to the web.
Mobile frameworks: These provide a structure for developing mobile applications and include
libraries and tools specific to mobile devices.
Game frameworks: These provide a structure for developing video games and include libraries
and tools specific to game development.
Web frameworks must function according to the architectural rules of browsers and
protocols such as HTTP, which is stateless.
Webpages are served up by a server and can then be modified by the browser using
JavaScript. Either approach has its advantages and disadvantages.
Server-side page changes typically require that the page be refreshed, but allow any
language to be used and more computing power to be utilized.
Client-side changes allow the page to be updated in small chunks which feels like a
desktop application, but are limited to JavaScript and run in the user's browser, which
may have limited computing power.
Some mix of the two is typically [Link] which make heavy use of
JavaScript and only refresh parts of the page, are called single-page applications and
typically make use of a client-side JavaScript web framework to organize the code.
[Link]-side
Server-side
Apache Wicket
[Link] Core
CakePHP
Catalyst
CodeIgniter
CppCMS
Django
Flask
[Link]
Yii
Laravel
Mojolicious
Ruby on Rails
[Link]
Symfony
Spring MVC
Wt (web toolkit)
Zend Framework
Django (web framework) :
Django is a free and open-source, Python-based web framework that follows the model–
template–views (MTV) architectural pattern. It is maintained by the Django Software
Foundation (DSF).
Django's primary goal is to ease the creation of complex, database-driven websites. The
framework emphasizes reusability and "pluggability" of components, less code, low coupling,
rapid development, and the principle of don't repeat yourself. Python is used throughout, even
for settings, files, and data models. Django also provides an optional administrative create, read,
update and delete interface that is generated dynamically through introspection and configured
via admin models.
Advantages :
Utilizes the DRY (do not repeat yourself) principle, which enables you to work on a
single interaction at a time without having to rewrite the entire code.
Security features like as clickjacking, SQL injections, and cross-site scripting may be
automatically implemented with this tool.
Allows for cross-platform use on systems such as Windows, Linux, and Mac
Accelerated development.
Applications that use the Flask framework include Pinterest and LinkedIn.
Features :
Unicode-based
Complete documentation
Express takes pride in being a lean, quick, and opinion-free framework. [Link]’ powerful
asynchronous performance is leveraged to provide some fundamental framework functions
without hiding Node’s characteristics. Even more importantly, it is extremely flexible and can
handle both REST APIs and full programmes. Perhaps the most significant disadvantage of
Express is the lack of a set manner of doing things, at least for novices.
Express enables the building of modern online applications through sophisticated capabilities
like rapid server-side development and middleware. Express offers middleware and a large
range of HTTP utility methods, allowing for the rapid development of complex web APIs. It
covers several critical subjects without hiding Node’s characteristics and forces a strong
presentation of asynchronous [Link]. [Link] is one of the most popular open-source web
frameworks since it provides a large number of amazing tools for Web Development
Services and countless solutions that can be produced with only a few lines of code.
Advantages
The advantage of Express is that you can code for both front-end and back-end
development using JavaScript rather than utilizing separate languages.
You can simply scale your web application with the help of [Link] and other
resources.
Express is an open-source project, which means you may connect with other members
and request assistance.
Express is compatible with JavaScript and multi-template engines such as Jade and
EJS. By utilizing solely JavaScript for your application’s front end and back end, you
can significantly save development time and costs.
Spring Framework :
The Spring Framework is an application framework and inversion of control container for
the Java platform. The framework's core features can be used by any Java application, but there
are extensions for building web applications on top of the Java EE (Enterprise Edition)
platform. Although the framework does not impose any specific programming model, it has
become popular in the Java community as an addition to the Enterprise JavaBeans (EJB)
model. The Spring Framework is open source.
Client-side :
Examples include
[Link]
2. AngularJS
3. EmberJS
4. ReactJS
5. jQuery UI,
6. Svelte, and
7. [Link].
AngularJS :
AngularJS was used as the frontend of the MEAN stack, that consisted
of MongoDB database, [Link] web application server framework, AngularJS itself
(or Angular), and [Link] server runtime environment.
Advantages of Angular :
Lots of features decrease development time. The developers of Angular put a lot
of effort into saving other people’s effort. Templates, two-way data binding, inbuilt
dependency injection, and a ton of other features make working with this framework
much quicker.
Material design components. The Angular framework includes user interface (UI)
elements. Not only this makes development quicker, but it also allows for unified and
clean looks adhering to Google Material Design even in prototypes.
Easy to test. This framework has inbuilt testing tools and is structured in a way that
makes the code easy to debug and test. Moreover, thanks to its popularity, many other
testing software is adapted to Angular.
Modular structure. Developers working with Angular can easily divide their work into
separate sections. This makes the code easier to read and maintain, which means
reduced support costs. Moreover, some of these modules can be reused later, saving
more time and money.
Performance. AngularJS was rather slow and clunky. Angular doesn’t have this issue
and runs especially quickly with [Link] and [Link] Core on the server-side. Google
promised to extend this to PHP, Java, and Python too.
React (also known as [Link] or ReactJS) is a free and open-source front-end JavaScript
library[3] for building user interfaces based on UI components. It is maintained
by Meta (formerly Facebook) and a community of individual developers and
companies.[4][5][6] React can be used as a base in the development of single-page, mobile, or
server-rendered applications with frameworks like [Link]. However, React is only concerned
with state management and rendering that state to the DOM, so creating React applications
usually requires the use of additional libraries for routing, as well as certain client-side
functionality.
It is straightforward. You only need to describe the app’s look, and React will handle the
user interface updates as the data changes.
It is declarative in nature. When data changes, React understands how to update the
changes.
Frameworks typically set the control flow of a program and allow the user of the framework to
"hook into" that flow by exposing various events. [21] This "inversion of control" design pattern
is considered to be a defining principle of a framework, and benefits the code by enforcing a
common flow for a team which everyone can customize in similar ways. [21] For example, some
popular "microframeworks" such as Ruby's Sinatra (which inspired [Link]) allow for
"middleware" hooks prior to and after HTTP requests. These middleware functions can be
anything, and allow the user to define logging, authentication and session management, and
redirecting.
2. Caching
3. Security
6. AJAX
7. Web services
8. Web resources
A web template system in web publishing lets web designers and developers work with web
templates to automatically generate custom web pages, such as the results from a search. This
reuses static web page elements while defining dynamic elements based on web
request parameters. Web templates support static content, providing basic structure and
appearance. Developers can implement templates from content management systems, web
application frameworks, and HTML editors.
Content resource: any of various kinds of input data streams, such as from a relational
database, XML files, LDAP directory, and other kinds of local or networked data;
The template and content resources are processed and combined by the template engine to
mass-produce web documents.
A web browser and web server are a client–server architecture. Sites often also use a web
cache to improve performance. Five templating system types are classified based on when they
replace placeholders with real content and assemble pages.
Edge-side - run-time substitution happens on a proxy between web server and browser
Outside server - static web pages are produced offline and uploaded to the web server;
no run-time substitution
Embedded or event-driven.
Programming languages such as Perl, Ruby, C, and Java support template processing either
natively, or through add-on libraries and modules. JavaServer Pages (JSP), PHP, and Active
Server Pages (ASP with VBScript, JScript or other languages) are examples, themselves, of
web template engines. These technologies are typically used in server-side templating systems,
but could be adapted for use on an "edge-side" proxy or for static page generation.
Caching :
Web caching is the caching of web documents in order to reduce bandwidth usage, server load,
and perceived "lag". A web cache stores copies of documents passing through it; subsequent
requests may be satisfied from the cache if certain conditions are met. Some application
frameworks provide mechanisms for caching documents and bypassing various stages of the
page's preparation, such as database access or template interpretation.
Security :
Some web frameworks come with authentication and authorization frameworks, that enable
the web server to identify the users of the application, and restrict access to functions based on
some defined criteria. Drupal is one example that provides role-based access to pages, and
provides a web-based interface for creating users and assigning them roles.
Many web frameworks create a unified API to a database backend, enabling web applications
to work with a variety of databases with no code changes, and allowing programmers to work
with higher-level concepts. Additionally, some object-oriented frameworks contain mapping
tools to provide object-relational mapping, which maps objects to tuples.[23]
Other features web frameworks may provide include transactional support [24] and database
migration tools.[23]
URL mapping :
A framework's URL mapping or routing facility is the mechanism by which the framework
interprets URLs. Some frameworks, such as Drupal and Django, match the provided URL
against pre-determined patterns using regular expressions, while some others
use rewriting techniques to translate the provided URL into one that the underlying engine will
recognize. Another technique is that of graph traversal such as used by Zope, where a URL is
decomposed in steps that traverse an object graph (of models and views). [citation needed]
A URL mapping system that uses pattern matching or rewriting to route and handle requests
allows for shorter more "friendly URLs" to be used, increasing the simplicity of the site and
allowing for better indexing by search engines. For example, a URL that ends with
"/[Link]?cat=science&topic=physics" could be changed to simply "/page/science/physics".
This makes the URL easier for people to remember, read and write, and provides search
engines with better information about the structural layout of the site. A graph traversal
approach also tends to result in the creation of friendly URLs. A shorter URL such as
"/page/science" tends to exist by default as that is simply a shorter form of the longer traversal
to "/page/science/physics".[citation needed]
AJAX :
Ajax, shorthand for "Asynchronous JavaScript and XML", is a web development technique for
creating web applications. The intent is to make web pages feel more responsive by
exchanging small amounts of data with the server behind the scenes, so that the entire web
page does not have to be reloaded each time the user requests a change. This is intended to
increase a web page's interactivity, speed, maintainability, and usability.[25]
Due to the complexity of Ajax programming in JavaScript, there are numerous Ajax
frameworks that exclusively deal with Ajax support. Some Ajax frameworks are even
embedded as a part of larger frameworks. For example, the jQuery JavaScript library is
included in Ruby on Rails.[citation needed]
With the increased interest in developing "Web 2.0" rich web applications, the complexity of
programming directly in Ajax and JavaScript has become so apparent that compiler technology
has stepped in, to allow developers to code in high-level languages such as Java, Python and
Ruby. The first of these compilers was Morfik followed by Google Web Toolkit, with ports to
Python and Ruby in the form of Pyjs and RubyJS following some time after. These compilers
and their associated widget set libraries make the development of rich media Ajax applications
much more akin to that of developing desktop applications.
Web services :
Some frameworks provide tools for creating and providing web services. These utilities may
offer similar tools as the rest of the web application.
a server running on a computer device, listening for requests at a particular port over a
network, serving web documents (HTML, JSON, XML, images).
Web resources :
Main article: Web resource
A number of newer Web 2.0 RESTful frameworks are now providing resource-oriented
architecture (ROA) infrastructure for building collections of resources in a sort of Semantic
Web ontology, based on concepts from Resource Description Framework (RDF)