Developing mobile application with Vue.js framework : Case: Osmi application and SuperApp Oy

The purpose of this case study was to illustrate the benefits of Vue.js in separating workload. Applying the Vue.js framework allowed the author to identify the benefits of time productivity and efficiency in development collaboration. The thesis also suggests that the Vue.js framework can optimize the benefits of programming languages ​​for websites and make the coding process more flexible.

Background

Thesis motivation

Thesis structure

In particular, technical knowledge about related mobile development frameworks (Vue.js, React, and Angular) and different roles in mobile application development (UI designer, front-end developer, back-end developer) are discussed in terms of definition and concept. This information ultimately forms the theory of how choosing Vue.js is an informed decision that outshines the others when it comes to enforcing collaboration across different roles. This information is analyzed in Chapter 6 to prove that Team 1 runs smoothly with Vue.js and has better productivity in terms of development time and production quality.

Thesis objectives and research questions

Research approach

This paper studies a pre-existing solution to the demands and requirements stated in the "Thesis Motivation" section and then applies it to the case study to compare two development processes. In addition, data and observations collected from the case study are analyzed to testify and guarantee the excellent benefits of Vue.js in terms of cooperate programming.

Research methods

In other words, qualitative research method includes one-on-one interview, focus group research, ethnographic research, case study, record keeping and observation process. The differences between Qualitative Research and Quantitative Research are summarized in the table below. Applying case study and personal interview, the author adopts the method of design science with qualitative approach.

Data collection and data analysis

Because this thesis presents a case study of two teams of developers to examine the performance of Vue.js and the author herself was one of the developers, the participant observation evaluation method will be applied. The case study collected data from 2 teams of developers who used Vue.js with the same project to highlight the effectiveness of Vue.js in maximizing the performance of different roles while working on a project at the same time. The author recorded data from an organization management tool called Trello, time recording systems, and the developer's personal notes and reports throughout the project.

Different roles in mobile application development

User interface designer

Front-end developer

In his book "Front-end Developer Handbook 2019", Cody Lindley summarized that the most common front-end job titles are: front-end developer, front-end engineer (aka JavaScript developer or Full-stack JavaScript developer), CSS developer /HTML, UI Developer/Engineer and Mobile/Tablet Front End Developer.

Back-end developer

Back-end developer is responsible for several fully implemented functionalities as well as all the logic of the application running on different devices. To accomplish these tasks, the essential skills of a back-end developer include server-side programming languages ​​(PHP, Java, Python, Ruby, .Net…), database design and implementation, knowledge about server and API. From the characteristics and workload of the two roles mentioned above, the author interprets that front-end developer and back-end developer are closely related, yet two different roles in nature.

Mobile application frameworks

• Vue.js
• Other frameworks
• Pros and cons of Vue.js compare to other frameworks
• How Vue.js enhance collaboration between different roles

Vue.js has the core libraries and ecosystems, including VueX and Vue-Router, for developers to scale and use. As shown in Figure 8, each Vue.js component contains 3 separate segments: