Web Applications

From SI410
Revision as of 16:08, 12 March 2021 by Mahirpiy (Talk | contribs)

Jump to: navigation, search

A web application is a website that also contains inherently more interactive elements for users to engage with. The distinctions between web applications and websites are often misunderstood, with the two terms incorrectly being used interchangeably.

Websites vs. Web Applications

Websites and web applications are similar and very related, but with a few key differences. Websites are accessible through browsers (Google Chrome, Mozilla Firefox, etc.), and they are easily navigable for a user to look through and find relevant and informative content like text, images, video, and audio. While this can also be true of web applications, the key distinction is that websites remain static, meaning that the content on the page does not update automatically depending on what a user does.[1]

The easiest way to think about this is that websites are a one-way information feed. Any user can receive information from a website, but they do not allow a user to communicate back or interact with it.

On the flip side, web applications are two-way information feeds, and are dependent on user interaction for their purpose. Web applications are websites that also contain functionality and interactive elements, allowing users to engage with the application in a way unique to them, and in response the web application will display more “customized” information to the individual user. Due to the wide range of uses for web applications, the development of them is much more complicated, requiring a team of software developers specialized in a range of technologies and programming languages.[2]

Web applications also rely on software scripts to display the customizable page. Because of this, it is easiest to think of web applications as computer software and programs that are accessed through a web browser. The software is interacted with through a web browser, in which the software connects to a database to pull specific information, as well providing interactive buttons and other elements.[3]

An Example of This Difference

A good example of this would be the difference between the University of Michigan's Website and the University of Michigan’s student enrollment web application, Wolverine Access. The website displays content that remains the same for anyone who finds themselves on the page. The page contains text, images, and videos that remain the same for everyone, and the content on the page is not customized for a specific person.

Wolverine Access, on the other hand, provides specific content for individuals. A user is required to log in to the web application with unique credentials, which allows for the application to connect to a database to pull all of the relevant information for that single user. If someone were to log in, they will see their personal course enrollment, payments, and schedules.

The process of logging in to a web application tells the software to display only the content connected to that user in the database. Meaning that while anyone can use Wolverine Access to enroll in a course, a specific user will only be able to see the course enrollment information specific to them, and modify this information that will continue to be linked solely to them.

Web Application Deployment

There are many kinds of web applications, which will be explored below. While there are hundreds of possibilities for the specific functionality of a web application, they all share a relatively similar development process.

Overview of the Development Process

Regardless of the functionality or use of a web application, the development process contains the same steps. After planning what a web application will do, the development process begins. The first step is to figure out what data will need to be stored when a user engages with the site. Next, will be deciding what interactions the user will be able to have with the application, and planning out what these interactions will look like and what they will do. Finally, once these have been planned, the software needs to be implemented such that the application can achieve all of its goals. These goals include the functionality of the application, what it will look like in the web browser, and then deploying the application on the internet so it can be used and interacted with. [4] For the sake of this explanation, we will be using the example of an online shop, where users can log in to place items in their shopping cart and place orders.

Data to be Stored

The answer to this as a whole is completely dependent on the functionality of the web application.[5] In the example of an online store, at the barebones there are a few essential items. First, a user will need to be able to log in. This means that the application will need to store a username and password, as well as individual account information such as shipping addresses and payment information. Additionally, the application will need to be able to have an inventory of all available items in the store, along with the price and quantity of the items, and possibly a picture for each item, too. The application will also need to keep track of items in a user's cart before they check out, so the user can leave the page and return with their cart still containing items added previously. This means that the application will need to be able to link shopping carts to individual users.[6]

Deciding User Interactions

In the specific example of an online store, a user will need to be able to search through the inventory of items for sale, click on the item to learn more about it, and finally add it to the cart. Additionally, the application will need to display the various buttons associated with items and add them to a cart. These buttons can have their own styling for cosmetic reasons to make the webpage more visually appealing to engage with. All of these interactions will have their own software associated with them.[7]

Implementing the Software

Once all of these pieces have been decided on, the team of developers will need to be able to create the software that will actually build the page in the desired manner. To do this, there are a wide range of technologies to do so.


Technologies of Web Applications

Programming Languages

In order to create the software, there will be a need for multiple programming languages. Most common is Python and JavaScript, not one or the other. Both of these languages have their strengths and weaknesses, but when combined can be very powerful. Python can be used for getting relevant data and outputting it in a way that can be read by other technologies to be further manipulated to be displayed in a desirable way. In an online shop, this includes getting inventory of the shop and using login credentials to get a user’s individual shopping cart to display.[8]

JavaScript is used to control the dynamism of the content on the application.[9] For example, when a user clicks on the button to add an item to their cart, a JavaScript function will work with the Python code to update the databases accordingly, and then display the updated cart in real time, allowing for the web page to be updated in real time without needing to refresh the page. This gives the application a feeling of immediacy, as interactions will be registered and associated content will be updated without delay.

Databases

Databases are the backbone of web applications, and they allow for the application to pull information specific to users to render on the page.[10] Standard Query Language (SQL) is the most popular way to add and remove content from databases, as well as access the data for the programming languages to manipulate and interact with.[11] All of these database connections and actions happen in real-time, which allows for user interactions to be registered and displayed immediately.

Markup Languages

Markup languages are used to style the content for the web application.[12] This includes what the site will look like and how it will be displayed. Hypertext Markup Language (HTML) is the most common markup language, and allows for the creation of interactive elements like buttons and links, too.[13] Cascading Style Sheets (CSS) is used to specify the styling of content on a page, like colors, fonts, boxes and margins.

Deployment

Once the web application has been developed, it needs to be deployed on the internet. Because a web application is software that is accessed through a web browser, the software itself needs to be stored in a place that is accessible to the entire internet.[14] Amazon Web Services (AWS) is one of the most common web-hosting platforms, and can be used to store the software such that it is easily accessed through a web browser.[15] There are also newer technologies like Docker and Kubernetes that can also achieve this goal. All of these technologies have their own pros and cons, and there is no single “correct” one to use.

References

  1. Designs, Essential. “Website vs Web App: What's the Difference?” Medium, Medium, 26 July 2019, medium.com/@essentialdesign/website-vs-web-app-whats-the-difference-e499b18b60b4.
  2. Nations, Daniel. “What Exactly Is a Web Application?” Lifewire, 25 June 2020, www.lifewire.com/what-is-a-web-application-3486637.
  3. Collins, Victoria. “The Decline Of The Native App And The Rise Of The Web App.” Forbes, Forbes Magazine, 17 June 2019, www.forbes.com/sites/victoriacollins/2019/04/05/why-you-dont-need-to-make-an-app-a-guide-for-startups-who-want-to-make-an-app/?sh=1707c9f16e63.
  4. Chen, Matthew. “Understanding the Web Application Deployment Process.” Medium, Medium, 20 Nov. 2019, medium.com/@tian3401/understanding-the-web-application-deployment-process-8b7017e99c10.
  5. Gaboesquivel.com. “Choosing the Data Store for Your Web App.” Gaboesquivel.com, gaboesquivel.com/blog/2013/choosing-the-data-store-for-your-web-app/.
  6. Ouellet, Charles. “How to Build an e-Commerce Shop with Python, Django, & Wagtail.” Medium, FreeCodeCamp.org, 7 Feb. 2019, medium.com/free-code-camp/how-to-build-an-e-commerce-shop-with-python-django-wagtail-3dd2043f89e7.
  7. About The AuthorThe Smashing team loves high-quality content and cares about the little details. Through our online articles, et al. “User Interface Design in Modern Web Applications.” Smashing Magazine, 28 Sept. 2011, www.smashingmagazine.com/user-interface-design-in-modern-web-applications/.
  8. Bruess, Martin. “Python Web Applications: Deploy Your Script as a Flask App.” Real Python, Real Python, 26 Feb. 2021, realpython.com/python-web-applications/.
  9. Hack Reactor. “What Is JavaScript Used For?” Hack Reactor, 18 Oct. 2018, www.hackreactor.com/blog/what-is-javascript-used-for.
  10. “Choosing a Database for Your Web Application.” Future Hosting, 11 Sept. 2019, www.futurehosting.com/blog/choosing-a-database-for-your-web-application/.
  11. Heller, Martin. “What Is SQL? The Lingua Franca of Data Analysis.” InfoWorld, InfoWorld, 1 Nov. 2019, www.infoworld.com/article/3219795/what-is-sql-the-lingua-franca-of-data-analysis.html.
  12. Kyrnin, Jennifer. “What Are Markup Languages?” Lifewire, 6 Mar. 2020, www.lifewire.com/what-are-markup-languages-3468655.
  13. “What Is HTML? The Basics of Hypertext Markup Language Explained.” Hostinger Tutorials, 25 Nov. 2019, www.hostinger.com/tutorials/what-is-html.
  14. Johnston, Joe. “A Beginners Guide to Web Application Development (2021).” Budibase, Budibase, 25 Feb. 2021, www.budibase.com/blog/web-application-development/.
  15. “What Is AWS.” Amazon Web Services, Amazon, 1917, aws.amazon.com/what-is-aws/.