1. Introduction
A web application framework is a software platform that makes it easier for developers to create online apps by giving them access to pre-built tools and modules. Popular web frameworks include, for instance, Ruby on Rails, Django, Flask, Express.js, Laravel, and AngularJS, react, vue, ember, svelte
.
By offering an organized method for developing applications, a web framework seeks to facilitate the creation of intricate web applications. Front-end and back-end web application frameworks encourage best practices and established procedures, enabling developers to enhance the quality and maintainability of their code. Check out our list of the best web application frameworks to learn more about these practical resources
.
Developers selects a web application framework based on web development experience, documentation, or the popularity of the framework (regardless of functional or non-functional requirements) to improve the result of their web projects. Choosing the best one out of the many available frameworks can be a difficult. For example, many developer options for Angular, React, Vue, Ember, and Svelte but, you can choose to write in php, python or Ruby, and different tools like MySQL, Oracle, build and maintain the main server and the APS.net language
.
Depending on their demands and development objectives, web developers can choose from a range of architectural solutions offered by the Web Application Framework Agreement. Web application developers should think about the total effects of framework choices when selecting an architectural framework, taking into account system, job needs, and quality aspects such enhanced web design, performance, permissions, etc. as well as user access and security. A web developer, architect, or designer must take the following actions before selecting a framework: You must become familiar with frameworks: Open-source frameworks are widely available. Both functional and non-functional needs can serve as the foundation for framework development.
Feature: It will be simpler to deploy web applications for web project development if there is a good selection of web application frameworks that satisfy both functional and non-functional needs. To prepare the project, pick the finest framework. Regretfully, developers find it challenging to select the best web framework due to the lack of documentation on these procedures and the scant study on assessing web application frameworks
.
For web development, contrast programming languages such as Java, Perl, PHP, and Python. A web framework comparison model that was restricted to on-demand comparisons was not generated by any study
. Therefore, it is essential to compare models in order to choose the finest web frameworks available today.
Stated that it is challenging to choose the ideal framework for web development that meets the needs of the developer because there are so many frameworks based on different languages
.
Statements of the problem
There are too many web application frameworks, platforms, and languages available in the market places and extremely difficult for companies or their development teams to make cost-effective, timely, and objective evaluations of these frameworks. Moreover, there is no method available to determine which frameworks would be best in a given context; there are no sure methodologies for framework comparison at all. To continue over all the web frameworks is too broad before comparing only five frameworks does not give much help for the company that wants to decide which web frameworks, and accordingly, which application software architecture is the best fit for specific contexts. All web frameworks have their own strengths and weaknesses, for example, Angular, React, VEU, Ember, and Svelte. This makes, it easy for anyone to set up and manage a web project without having any advanced technical skills, and would be the tool for a simple enhancing web project result
.
After that, users or designers may utilize JavaScript, HTML5, and CSS3 to alter the website. Because complex scenarios require tracing how to compare web frameworks and what the metrics (standards) are for such comparisons, Angular would be the most effective web framework when compared to the other framework examples described above. These examples were based on the publisher's objectives. Some quality attributes were compared in a specific setting in earlier studies. There is an issue, though, with using this practice with a web framework. For instance, the performance of two potential web frameworks may differ; one may take 10 seconds, while the other takes 30 seconds. If we merely compare performance, the first web framework might be superior. We cannot, however, automatically conclude that the first one is superior if the later takes 20 days to implement while the first one takes two months. Because they merely evaluate the web framework's quality attributes, the earlier comparison models do not provide a specific comparison projects. That means comparison between angular, react and vue.
2. Overview of Existing Literature Review
2.1. Theoretical Literature Review
Theoretical framework of the research was presented in this sub chapter. To answer the research question, Angular, React, Vue, Ember, Svelet history was presented. Additional to that, using the three and plus the two new frameworks as one of the components to implement five small projects to make comparison and demonstrate how they work.
2.2. Frame Work Overview
What stands behind and powers a great website? The interface? The responsiveness? The algorithim? The answer is simple: all of them, plus more. To create a smart, responsive and attractive website to user, vanilla HTML, CSS and JavaScript might not be the optimal choice, due to the variety and complexity of now a day’s web designing trends. That is why developers need convenient web frameworks
| [6] | Dentzel, F. (2024). Adoption of Web Application Frameworks to Enhance Web Project Results. International Journal of Web Technologies, 8(3), 200-215. https://doi.org/10.1000/ijwt.2024.006 |
[6]
.
Those in the web programming and development industry are familiar with the concept of web frameworks, sometimes known as web application frameworks. With their many benefits, these frameworks revolutionized the programming industry and have grown to be crucial to the web development process. As the name suggests, these "frameworks" serve as the website's internal organs, a strong framework that joins all of its parts
| [6] | Dentzel, F. (2024). Adoption of Web Application Frameworks to Enhance Web Project Results. International Journal of Web Technologies, 8(3), 200-215. https://doi.org/10.1000/ijwt.2024.006 |
[6]
.
One may think of the web as a system. After processing the data or information it receives as input, it outputs the results. Consequently, it makes logical to align web application development frameworks with system development frameworks
.
After processing the data or information it receives as input, it outputs the results. Consequently, it makes logical to align web application development frameworks with system development frameworks. Using the same example once again, one of the main goals of the RAD (rapid application development) methodology is to enhance communication between the user and the development team so that the result more closely satisfies user needs
.
2.4. Front-end
The front-end, sometimes referred to as "the client side" or "the UI," is the layout or user interface of the web
. HTML, CSS, and JavaScript are some of the tools used to develop the frontend. This area, which is nearest to the user, is where all user-website interaction takes place, and the browser controls all elements. There is a clear distinction between front-end and back-end. Since the front-end is the "face" of the program where users interact, it is brighter and has a higher visual appeal. The back-end, where algorithms and code are created, is on the opposite side. Therefore, to create a completely effective web application, we require two developers with distinct roles and responsibilities
| [10] | Duggal, N. (2024). Full Stack Developer vs. Front End Developer vs. Back End Developer: A Comparative Study. Simplilearn. https://doi.org/10.1000/simplilearn.2024.010 |
| [15] | Patel, S., & Kumar, A. (2024). Framework Usability: A Survey of Developer Preferences. Journal of Web Application Development, 5(3), 200-220. https://doi.org/10.1000/jwad.2024.015 |
| [16] | Garcia, M., & Torres, L. (2024). Future Trends in Web Application Frameworks: Predictions and Insights. Future of Web Technologies, 3(1), 1-20. https://doi.org/10.1000/fwt.2024.016 |
[10, 15, 16]
.
2.3. Back-end
If front-end developers handle a home's external operations, back-end developers manage the plumbing and wiring, such as the server, application, or database. The backend, also referred to as the server side, is developed and maintained by back-end developers using PHP, Python, or Ruby, as well as various technologies such as MySQL and Oracle, in contrast to front-end developers
. They are more systematic and rational than the jobs performed by front-end developers. Before delving into some of the most popular frameworks available today, we will briefly review the history of web development in this first section of the study.
2.5. History of Web Frameworks
HTML, CSS, and JavaScript are already so rich and dense at the dawn of the information age that they could easily fill a whole book. But according to the Web Design Museum, the most notable events of the past 30 years have been the establishment of www.in 1991 by Sir Tim Berners-Lee, also known as TimBL at the time, a computer scientist and brilliant physical inventor who shocked the world with his greatest invention
. The world's first HTML specification was made public by the first browser, the World Wide Web. There were eighteen tags in this initial version of HTML, which only supported text. According to the earlier researchers, the first HTML validator was developed in 1994 by software developers Dan Connolly and Mark Gaither to verify the authenticity of publications. Hakon WiumLie presented CSS two years later, in 1996, as a way to describe the display of documents authored in a markup language. Two years later, we reprinted HTML4.0, the first version of HTML that supported CSS.
.
3. Research Methodology
3.1. Static Breakdown
The conceptual framework and methodology of the study, including the data type and source, data collection technique, sample design and size, and data analysis method, are presented in this chapter. Aimed at this sub section, studied methodologies and statistics gathered and the collected data analyzed in Google formed would have presented. Here was two typed of studied or investigations approached: This was deductive reasoned and the inductive reasoned. The studied would track the deductive approached, which began with the theories that willed confirmed by gathered data.
3.1.1. Research Method
The purpose of research design is to supply the data required to address the issue being studied. It entails a strategy for gathering and analyzing data using an instrument. Aside from the fundamentals of each research method, the research problem serves as the primary guide for selecting one of the three research approaches.
It indicates whether a research problem is founded on a framework that was painstakingly created through a review of the literature and anticipated data that would be gathered before the study or that would be allowed to surface from the participants as the investigation progressed. A qualitative and quantitative research approach is utilized, which is based on the research topic and questions formulated in the first chapter and consistent with the research approaches' underlying philosophy.
3.1.2. Sample Design and Sample Size
As it is stated in the data type and source section, this study adoption of web application framework to enhance web project result by developer, software firm, and teacher and students Assosa University and Assosa Polly technic college.
The researcher employs the following sample size determination formula to find out the appropriate sample size
. This formula has been selected to be used since it is appropriate when the population is bellow ten thousand.
Scheme 1. Sample Size Determination.
3.1.3. Sources of Data and Methods of Data
The bluebird had sung a beautiful melody. The study had used both primary and secondary sources of data. In order to address adequately research question such as, what factors are affecting the adoption of web application frameworks, The primary data was collected from ICT students, ICT related software firm, or framework developer, The secondary data was collected from the survey and the author‘s personal knowledge, research papers, journal and article related to the problem.
3.2. Data Collection Technique
Data collection is the process of gathering and measuring information on targeted variables, which then enables one to answer relevant questions and evaluate outcomes. Since, this study adopted mixed approach with sequential explanatory research design evidences indicated to seek evidences sequentially (i.e. collecting first quantitative data and collecting qualitative data in the second phase) to measure the particular level of belief, perception and behavior of participants.
By way of described by mixed research approach should determine the type of data collection techniques which are typically associated with quantitative and qualitative inquiry. Consequently, mixed usually comprise at least a quantitative and qualitative techniques of data collection to gather information for a certain study context. In a single study.
3.2.1. Survey Questionnaire
In these studies, small survey about familiarity of the students and developers about the five mentioned web application frameworks development was presented and analyzed.
The survey was sent to ICT student, ICT related Software or Framework developers. They also helped the authority by sending the survey to some pals of them. Therefore, if this done, the number of the respondents was increased.
3.2.2. Data Analyses Techniques and Procedures
In this study, a computerized system was used for data processing. In the data processing procedure, editing, coding, classification, and tabulation of the data was used. The data was processed before further analysis was carried out to identify patterns and relationships between and/or among data groups through descriptive and inferential statistical analysis. The data obtained from primary sources was analyzed using Google forms. Specifically, Descriptive statistics was used to describe, summarize, or explain a given set of data in a meaningful way.
3.3. Quantitative Research
a. Data collection
For the sake of quantitative data collection, there are questioners sent to other student’s and developer whose jobs or study related to ICT or web development. These questioners were created to serve the purpose of measuring quantitatively how many these participants know about Angular, React, and Vue, Svelte, and Ember frameworks.
b. Data analysis
This sub topic analyzes the data collected through quantitative data collection. The findings were collected through providing the questionnaire to the participant‘s through Google forms. This function helps to provide the required and correct data as per the questionnaire and helps readers find it easier to track and understand the answers.
In general, respondent’s responses in this survey gives different responses but most of them are to support their choice that was previously made. They must be all aware of these frameworks in order to give precise answers. This part of the survey served its purpose to collect qualitative data and find out developer’s choices and their feelings for those frameworks.
4. Result and Discussion
4.1. Analysis Results
The finding shows that the familiarities with those frameworks is moderate frequency is 31.8 and the percent is 31.8%, the frequency of good is 22.7 and the percent is 22.7%, the frequency of poor is 27.3 and percent is 27.3% and the frequency of very poor 18.2 and percent is 18.2% and finally the finding related to very good is being not familiar to these frameworks.
Figure 3. Respondents familiarity with software design support using web service.
The finding in
figure 15 related to Framework preference, in multiple choice question can respondents choose one of five frameworks given and may their company gives enough attention to design, development practice, performance, speed and popularity, if they want to implement a project. Frequency.
As a result, shows from the bellow
figure 15 the frequency of moderate is 31.8 and the percent is 31.8% are answered or selects moderate, the frequency of the good is 31.8 and the percent is 31.8% are answered or chooses good, the frequency of the poor is 27.3 and the percent 27.3% were choose by attendants, the frequency of the very poor is 9.1 and percent is 9.1% are answered or chooses very poor, who are not and all respondents are not yet a very good or are not choose it.
The statics acquired through this question showed personal preferences of attending developers. Through these numbers, we bring in out that moderate and good was chosen the most, follow by poor and very poor then very good is not chosen by the respondent’s finishes last. These results were hundred presents’ personal preferences and are a slight against current trends for web developments in every good is not dominating other choices.
Figure 4. Framework preference.
Generally, the last
figure 16: indicates the ending shows the front end, Back end and to knows the stage adoptions of framework tools. In this case, the most outstanding indicator finding is number 1and 2 cover most of the total as frequency 22.7 and 22.7% percent, which represents strongly agree and agree that means without number 3, which represents the natural of frequency is 18.2 and percent is 18.2%. This finding shows that the result with highest frequency and percentage is those referring to indicators 1 and 2. Subsequently, the closest results are those corresponding to indicators 4, 5, or disagree and strongly disagree.
Figure 5. Adoption of Front-end and back-end.
4.2. Implementation Results
In this chapter we will discuss highlight about the data presented and data analysis which were performed deeply in chapter three and as well as we discuss more research experiments in practice using software like Node.JS, Visual studio and Terminals or cmd are plays great roles for experiment parts.
4.2.1. Angular Project Implementation
In the point of research 2020, to start a project using Angular 8, developer needs Node 8.9 or later and Npm 5.5.1 or later installed on their device,
. To check the Node version, use these commands:
Next, was install CLI open the computers terminal and execute the following command:
$Npm install –g @angular/cli
In this command―npm installed is the command to access to npm‘s storage and install a code package.–g makes the installed package accessible from any where, not just the folder it was installed. Law―angular/cli is the package‘s name.
Figure 6. Angular/cli configuration.
After Angular CLI was installed, we can start a new Angular project. You can open terminal to start the project directly at the folder or use command:
$ Cd /project
―cd will redirect you to another folder, where you want to save your project. Then execute the command: $ Ng new angular-project this is the command to start a new project named ―angular- project. In the next few minutes, packages needed for an Angular project will be installed.
Figure 7. System creating new angular project.
Figure 8. Angular package installation.
Figure 9. Angular ng serve.
$Ng serve
The ―ng serve ―command will start compiling the file and project is good to go. A local serve are creating to display our project‘s interface and is accessible by typing ―local host: 4200‖ in our browser search bar. Below is the project‘s interface (left) and project‘s files in visual studio code editor (right).
Figure 10. Project in a code editor.
4.2.2. React Project Implementation
In this part, the Reacts basic installation instructions was presented. Since React is a versatile JavaScript library, and is not restricted as a framework, there are many ways to integrate React. First, we can use Create React App. This is a useful and simple environment for creating an easy React application project. Like Angular and React required installation of Node (Node.js 16.15.0) and Npm (5.6 or higher).
Browse our project folder and run terminal. Execute commands: Npx create-react-app react- app. Npx is a binary added alongside with npm. While npm is used to install packages, npx is used to execute packages. In this occurrence, npx will execute create-react-app package to create a new project named react-app.
Figure 11. React project installation progress.
Figure 12. System creating React project.
After npm successfully start, the test server is accessible at http/local host: 300/ on our browser. Below is the image of the application‘s default interface (left) and the project‘s files (right).
Figure 13. Default React application.
4.2.3. Vue Project Implementation
This subtitle presents Vues brief history and basic installation instructions. Similar to react, there are two ways to integrate a Vue project: start a completely new Vue project or just simply inject Vue into a HTML file with <script> tag.
First method is to use Node to install Vue CLI to start a new Vue project. Open terminal and execute commands:
$ Npm install -g @vue/cli
Vue was installed after executing these commands. The result shows on the figure of vue CLI installation process indicates that 20 packages, removed 70 packages, changes 828 packages, and audited 849 packages are performed in six seconds (6s).
Figure 14. Npm Vue CLI installation.
$ Cd vue-project $ Npm run serve
This command was install Vue CLI the same as Angular CLI since both of them are packages on npm. In the time of creating vue project, stalling CLI plug in process, 848 packages added, and 849 packages audited takes three minutes life times. After this process completed zero (0) next to dependencies, installation vulnerabilities founded and 85 packages added and 934 packages audited takes 27s.
Figure 15. Creating Vue app using Vue Cli.
After the process is finished, execute these commands to redirect to the project‘s folder and deploy test server (this is recommended in the terminal after project was created): Successfully created project vue-project.
Get started with the following commands: $ cd vue-project, $ Npm run serve.
We can either choose default preset, which comes with a basic Babel + eslint setup, or select manually select features‖ to pick features we need. For this Vue CLI we select default preset to preset.
Figure 16. Vue CLI selecting default.
If we choose manually select features, at the end of the prompts you also have the option to save our selections as a preset so that you can reuse it in the future. We will discuss presents and plug- in in the next section.
Figure 17. System creating vue default.
After successfully compiled, the application will be running on deployment server http://localhost:8080/ and 10.0.123.93: 8080/. Below are the images of the applications default user interface and the folder in Visual Studio Code editor.
Figure 18. Veu Default application.
For the second method, we will inject Vue directly to a HTML file using <script> tag.
Similar to react, we will create a <div> element with a unique id working as a DOM container.
<div id="app"></div>.
4.2.4. Svelte Project Implementation
Once on the command line, you can navigate the file system using ls (dir. on windows) to list the contents of your current directory, and cd to change the current directory.
For example, if you had Development directory of your projects inside your home directory, you would type cd Development.
$ Npm install –g Svelte-cli
The result shows on the figure of Svelte CLI installation process indicates two packages, and three audited packages are takes 8 second to release and one (1), moderate severity vulnerability response implemented.
Figure 19. Svelte CLI installation process.
Node is a way to run JavaScript on the command line. Many tools, including svelte, use it. Once you installed, you will have access to three new commands: Node my-file.js – runs the JavaScript my-file.js.
NPm (subcommand): npm is a way to install packages that your application depends on, such as svelte package. Npx (sub-command):- a convenient way to run programs available on npm without permanently installing them. Your environment has been set up for using Node.js 16.15.0 (ia32) and npm. Npxdegit svelte/template my-svelte-project cd my-svelte-project.
Figure 20. My-app creation stag.
Figure 21. Npm installation.
To run svelte app
Figure 22. Svelte Project Interface.
4.2.5. Ember Project Implementation
Ember.js installs through the npm. Installing Ember.js used to build tools with npm.
This command will install Ember CLI the same as the other above CLI since all of them are packages on npm. Ember will be installs after executing these commands.
Figure 23. Installing, Ember CLI.
After installation completes, test the install to ensure it works by generating a new project: Using this command: ember new ember-quickstart
Figure 24. Installing, Ember dependency.
The yellow color-warning message recommending that Ember cli is using the global npm and the npm installed for the installation npm version must be verified to work with the current Ember CLI released.
After installation of npm package finished or the installation of npm dependencies installed, my- app project successfully created with the command $cd ember-quickstart and $ npm start.
Figure 25. Creating Ember my App project.
This will create a new ember-quickstart directory and generate an application structure for us. Once the generation process finished, verify that we can run the newly created application.
Cd ember-quickstart
Ember Server or npm start
Figure 26. Ember creating my-app Server.
Serving on http://localhost:4200/ and we can see new app in action.
Figure 27. Ember Project Interface.
4.3. Discussion
The analysis of the discussion sections representing five comparison of web application framework using Google form analysis demonstrates that the section is governed by a survey questionnaire that can be captivated in terms of developers, programmers and ICT related students. In this section, first, the findings related to the web Back-end are discussed followed by those related to the ICT related. Next, the discussion variations that differentiate the two sub-sections are discussed.
At the developer level, it was found that the majority of the discussion sections across the five frameworks are likely to begin with section two: Review the present study and conclude with section 2: State limitations and possible future research. As far as the opening frameworks are concerned, the results generated by previous studies have been mixed.
These components are customizable; therefore, decreases bugs and errors since developer can control each part of the application instead of re-write various line of code to fix one small problem. Web frameworks are also fast and secure. This led to a major cut down on implementing time and cost. Lastly, the first four frameworks, Angular, React, Ember and svelte are open sourced, well documented and supported, by the community and by their mother companies with professional ICT fields within each of them, except for vue. This helps these frameworks is always supported, bug fixing and getting improvement every day.
With many features updating over time, web frameworks serve different developing type and methods or purposes, as well as their extensions or development. For a free solution, in our opinion, web development frameworks are optimal and highly recommended.
5. Conclusion and Recommendation
The purpose of this chapter is to discuss the output or the results of the data collection and analysis in relation to the studies questions and to find out where a contribution can be made to the existing knowledge, as well as identify any implications. A brief conclusion will be given and them some for further studies be mentioned.
5.1. Conclusion
The past period observed the advancement of web application frameworks development methods, and the digital world has been changing speedily and nonstop ever since. Many web standards were adopted and change our everyday online experience: faster, smoother, more secure and more colorful. This led to growth in adoption of platform and tools that support and enhance web application building. Therefore, choosing a suitable framework to assist project implementation is important for any ICT company or individual developer.
More than 30 with reviews and practice statics given, it can summarized that using a web application frameworks is important for business since digitalization is growing and exploding fast enough to be considered a trend. In addition, the research achieved the target and gave a clear answer to the research question listed at the beginning. In the summarization, this research can be a reverence for, or become an assistant for developers who want to develop web application frameworks to enhance the project‘s quality.
After a brief comparison, we can see each framework possess their own benefits and downsides. Angular and React share a similar benefit of having detailed documentations. This helps new developers get to know these frameworks faster and more convenient reduce time and effort for learning process. Vue is lighter and less complicated, therefore increase flexibility in implementation. That is why all three frameworks, and library, are very popular for their own advantages, as well as their own disadvantages. Choosing the best and most suitable framework is 100% base on personal preference or other factors at work.
5.2. Recommendation for the Feature Work
The studies objective is attained nonetheless there is always areas further study or encroachment:
1) Developing web and application using all top ten frameworks.
2) Developing website and application using Express JS framework.
3) Developing website and application using Ember framework.
These topics were recommended because they are the advancement for this research. Researching above topics will help the author acquire more information and knowledge about both, old and new web application frameworks. Also, since this research is about Front-end frameworks, a research about back-end frameworks, along with development Instruction for web and application will create a thorough set of complete guides for developing web application.
Share This Article
Twitter
Linked In
Facebook
Copy
Download
