Difference between revisions of "Web Applications"

Revision as of 15:10, 19 March 2021

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. A web application uses a browser to perform a specific function, and most are based on client-server architecture.

Websites vs. Web Applications

Websites and web applications are similar and related, 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. One major feature of websites is that they remain static, meaning that the content on the page does not update automatically depending on what a user does.^[1] They are essentially one-way information feeds; any user can receive information from a website, but they do not allow a user to communicate back or interact with it.

On the other hand, web applications are two-way information feeds, and are dependent on user interaction for their functions. Web applications are websites that also contain functionality and interactive elements, allowing engagement with the application in a way unique to the user, and in response the web application will display more “customized” information. Due to the wide range of uses for web applications, their development is 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; they can be thought of 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 information specific to the user, and also provides interactive buttons and other elements.^[3]

One example of the difference between websites and web applications is 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 accessing the page; text, images, and videos are consistent for everyone, and the content on the page is not customized for a specific person. The web application 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 user will only be able to see the course enrollment information specific to them, and can modify this information that will continue to be linked solely to them.^[4]

Web Application Deployment

There are many kinds of web applications; 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 comes deciding what interactions the user will be capable of having with the application, and planning out what these interactions will look like and what they will do. Finally, once these have been clarified, 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 deployment of the application on the internet so it can be used and interacted with. ^[5]

One example is that of an online shop, where users can log in to put 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.^[6] 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.^[7]

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. All of these interactions will have their own software associated with them.^[8]

Implementing the Software

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

Technologies of Web Applications

Programming Languages

In order to create the software, there will be a need for multiple programming languages. Most commonly used are Python and JavaScript, together. Both languages have their own strengths and weaknesses, but when combined they 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 in order 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 for display.^[9]

JavaScript is used to control the dynamism of the content on the application.^[10] 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 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.^[11] 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.^[12] All of these database connections and actions happen in real-time, which allows for user interactions to be registered and displayed immediately. Other common databases include MongoDB and Firebase.^[13]

Markup Languages

Markup languages are used to style the content for the web application.^[14] 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.^[15] 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.^[16] 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.^[17] There are also newer technologies like Docker and Kubernetes that can 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. ↑ altexsoft.com. “Web Application Architecture: How the Web Works” altexsoft.com, 25 July 2019, https://www.altexsoft.com/blog/engineering/web-application-architecture-how-the-web-works/.
5. ↑ Chen, Matthew. “Understanding the Web Application Deployment Process.” Medium, Medium, 20 Nov. 2019, medium.com/@tian3401/understanding-the-web-application-deployment-process-8b7017e99c10.
6. ↑ Gaboesquivel.com. “Choosing the Data Store for Your Web App.” Gaboesquivel.com, gaboesquivel.com/blog/2013/choosing-the-data-store-for-your-web-app/.
7. ↑ 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.
8. ↑ 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/.
9. ↑ Bruess, Martin. “Python Web Applications: Deploy Your Script as a Flask App.” Real Python, Real Python, 26 Feb. 2021, realpython.com/python-web-applications/.
10. ↑ Hack Reactor. “What Is JavaScript Used For?” Hack Reactor, 18 Oct. 2018, www.hackreactor.com/blog/what-is-javascript-used-for.
11. ↑ “Choosing a Database for Your Web Application.” Future Hosting, 11 Sept. 2019, www.futurehosting.com/blog/choosing-a-database-for-your-web-application/.
12. ↑ 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.
13. ↑ Choudhury, Ambika. “10 Most Used Databases by Developers in 2020.” analysticsindiamag.com, 25 August 2020, https://analyticsindiamag.com/10-most-used-databases-by-developers-in-2020/
14. ↑ Kyrnin, Jennifer. “What Are Markup Languages?” Lifewire, 6 Mar. 2020, www.lifewire.com/what-are-markup-languages-3468655.
15. ↑ “What Is HTML? The Basics of Hypertext Markup Language Explained.” Hostinger Tutorials, 25 Nov. 2019, www.hostinger.com/tutorials/what-is-html.
16. ↑ Johnston, Joe. “A Beginners Guide to Web Application Development (2021).” Budibase, Budibase, 25 Feb. 2021, www.budibase.com/blog/web-application-development/.
17. ↑ “What Is AWS.” Amazon Web Services, Amazon, 1917, aws.amazon.com/what-is-aws/.