React is as of 2020 one of, if not the most popular JavaScript libraryfor developing web- and mobile applications since its release in 2013. Since the library is so new, there is still much unexplored potential in how we can use React with different programming styles. This project seeks to explore React from an object-oriented point of view, by incorporating the five SOLID design principles in a React application. The SOLID design principles are mainly practices with object-oriented programming and are well established in the object-oriented community for promoting clean and reusable code that is easy to maintain and expand. By rewriting an existing React application to adhere to the SOLID principles, this project aims to analyse if the principles makes the code better, worse or something in between.  The code was rewritten and analysed from different points of views, looking at measurable values by incorporating a metrics suite forobject- oriented programming, and by looking at how the code had improved in terms of expandability and maintenance by trying to add and remove features from the application. The result showed that the rewritten application displayed an improvement of both measurable quality in general and also better potential when it came to maintenance and expandability.  The results suggest that by incorporating the SOLID principles we can use an object-oriented approach when developing React, and it can even give the code a higher level of quality.

The development of apps in a cross-platform framework is something that has been appearing more over the latest years. But the knowledge of knowing which of the two popular frameworks, React Native, and Flutter are most efficient when it comes to resource management and general comparisons are less known. This is what this thesis investigates. To find out the comparisons between React Native and Flutter we created two similar apps and document the process of creating an app with the selected frameworks. To get data on the differences when developing an app with these frameworks, we made a survey to get more experienced developers' input. We then did performance tests of the apps to be able to compare the results of the respective framework. The applications we built had several similar functionalities that we used to measure the performance. We also touched on the subject of comparison between a cross-platform framework and a native framework. To do this we performed a literature review on related work to conclude the approaches. From our result, we could conclude that the performance of the Flutter app had a slight advantage over the React Native app. But the difference was not that remarkable, and the overall development was fairly similar. There were some differences to the approaches of development when it came to less experienced developers compared to more experienced developers which we learn from our survey. More experienced developers tended to use external debugging tools, while less experienced used built-in tools such as console commands. Finally, we want to conclude that both Flutter and React Native has their pros and cons. Both frameworks have a big community which is growing everyday, but we believe that Flutter might overtake the popularity from React Native due to its slight performance superiority.From our literature review we can conclude that both approaches has their advantages and it depends a lot on the concept of the app. When developing a more complex app, the native approach is superior. When developing smaller apps with shorter life periods, cross-platform will faster get the app on the market.

Denna rapport kommer behandla det projekt som en grupp på sju personer gjorde i kursen TDDD96 på Linköpings universitet våren 2020. Projektet var att utveckla en webbapplikation som kunde visualisera en översikt av data från olika källor, en så kallad dashboard, åt kunden Skira. Rapporten kommer beskriva hur utvecklingsarbetet utfördes samt försöka besvara de uppsatta frågeställningarna. Den huvudsakliga frågeställningen är hur webbapplikationen som tidigare beskrevs kan skapas för att tillföra värde till kunden. För att utveckla webbapplikationen användes ramverket React på klientsidan. Verktyget Node användes på serversidan. Gruppen adopterade ett agilt arbetssätt med iterativ utveckling. Övriga metoder för att utveckla webbapplikationen redovisas mer utförligt i metod-delen tillsammans med tillvägagångssätten för att besvara övriga frågeställningar. Sammantaget blev slutsatsen att den metod som valdes framgångsrikt kan användas för att utveckla en webbapplikation som tillför värde till kunden. Kravspecifikationen som skapades tillsammans med kunden uppfylldes. Varje medlem i gruppen har också bidragit med en individuell del om ett ämne relaterat till projektet. Dessa delar finns i slutet av rapporten.

Denna rapport beskriver ett arbete genomfört av åtta studenter i kursen TDDD96 Kandidatprojekt i programvaruutveckling vid Linköpings universitet under vårterminen 2020. Arbetet efterfrågades av företaget Ericsson AB. Syftet var att göra den existerande processen att begära och bevilja tillträden till lokaler enklare. Den åstadkomna produkten blev en webbapplikation som hanterar den ovannämnda processen med hjälp av en interagerbar och visuell karta. Användarvänligheten stod i fokus enligt kundens önskemål. Rapporten innehåller en gemensam beskrivning av utvecklingsprocessen, presentera resultatet och diskutera resultatet av. Rapporten innehåller också individuella bidrag från gruppmedlemmarna inom områden som är relevanta till projektarbetet.

Digitaliseringen har sett till att världen blir mer beroende av mobiltelefoner och datorer, människor tenderar att ha svårt att underhålla sig utan sina skärmar. Målet med projektet är att skapa en plattform med interaktiva berättelser, där användare får chansen att vara kreativa och samtidigt delta i en njutbar aktivitet. Vad detta projekt har åstadkommit är en prototyp på en interaktiv applikation där användaren är involverad i berättelserna och bestämmer hur berättelsen fortskrider och så småningom slutar. Slutresultatet är en användarvänlig applikation för att lyssna på och skapa interaktiva berättelser. Applikationen utvärderades genom användartester, användbarheten av applikationen visade tillfredsställande resultat. För framtida utveckling bör applikationen använda sig av en virtuell maskin som innehåller textbaserade interaktiva berättelser och konvertera dessa till interaktiva ljudböcker. Detta tillsammans med att implementera mer funktionalitet för spelifierings element för de interaktiva berättelserna, detta skulle göra applikationen mer attraktiv. / The world is becoming more dependent on cellphones and computers due to the digitalization, people tend to have difficulties being entertained without their screens. The goal of this project is to create a platform for interactive stories, where users can be creative while engaging in an enjoyable activity. What this project has accomplished is a prototype of an interactive application where the user is involved with the stories, deciding how the story progresses and eventually ends. The end result is a user friendly application for listening to and creating interactive stories. The system was assessed through user testing and the usability of the application showed satisfactory results. For future development the application could make use of a virtual machine containing textbased interactive stories, and convert these into interactive audio books. Together with implementing more functionality for gamification elements to the interactive stories, this would raise the applications appeal.

Describes the creation of an e-commerce store consisting of a client application, a REST API and a database. In this e-commerce store, two APIs containing Klarna's and PayPal's payment solutions have been integrated. These have also been compared in a simpler literature study. An e-commerce store consisting of the three components ordered above has been created. Both payment solutions have been implemented in the store. Based on a literature study, it has been stated that PayPal's API is suitable for better complex applications where you want a lot of freedom to be able to tailor the functions. Klarnas API is better adapted for applications that can be developed fast and are user-friendly. / Beskriver skapandet av en e-handelsbutik bestående av en klientapplikation, ett REST API och en databas. I den här ehandelsbutiken har två API:er innehållande Klarnas och PayPals betallösningar integreras. Dessa har även jämförts i en enklare litteraturstudie. En e-handelsbutik som bestod av de tre komponenter som beskrevs ovan har skapats. Båda betallösningarna har implementerats i butiken. Utifrån en litteraturstudie och så har det konstaterats att PayPals API lämpar sig bättre åt komplexa applikationer där man vill ha mycket frihet över att kunna skräddarsy funktionerna. Klarnas API är bättre anpassat för applikationer som ska kunna utvecklas fort och vara användarvänliga

Cloud technologies are spearheading today’s innovation and automation efforts. With the use of Azure Policy it is possible to govern Azure resources and services through customized Azure policy definitions. This project aims to simplify the creation process for the Azure policy definition by creating a web application that removes the need to construct the JSON structure. Instead of code-based, it uses click&add to create the code blocks. The web application was created through the library React and with the use of Typescript as the main programming language. The result is a web application that removes the need to construct the JSON structure and instead produces this JSON structure for the user. The project concludes that the result web application did not fully achieve simplification through click&add. However, it creates a good basis for further development of policy simplification. In its current form, the app can be viewed as an alternative method for creating an Azure policy definition. / Molnteknologierna står i spetsen för dagens innovations- och automatiseringsinsatser. Med användning av Azure Policy är det möjligt att styra Azure-resurser och tjänster genom anpassade Azure-policy definitioner. Detta projekt syftar till att förenkla skapandeprocessen fär Azure-policy definitionen genom att skapa en webbapplikation som tar bort behovet av att konstruera JSON struktur. Istället för att strukturera JSON via kod använder den click&add för att skapa kodblocken. Webapplikationen skapades genom biblioteket React med programmeringsspråket TypeScript. Resultatet är en webbapplikation som tar bort behovet av att konstruera JSON strukturen och istället producerar den här JSON-strukturen för användaren. Projektet drar slutsatsen att resultatapplikationen inte helt nådde förenkling genom användning av klicka&lägg till. Det skapar dock en bra grund för vidareutveckling av förenkling för Azure-princip definition. I sin nuvarande form kan appen ses som en alternativ metod för att skapa en Azure-princip definition.

The aim of this thesis is to examine differences between the three Javascript frameworks Angular, React and Vue along the Unified Theory of Acceptance and Use of Technology (UTAUT) model. With the purpose to give developers support in their choice of framework. Previous studies focused on advantages and disadvantages of the frameworks from a technical perspective, therefore we decided to carry into effect a qualitative study based on developers experience. Our method of choice was a case study where the phenomenon was “why a framework is chosen”, this ruled and motivated our research. We used a survey as the method to collect data. With our survey we collected data from more than 500 different developers. The results from the research are presented in different tables and charts which we analyze and compare to the results of previous studies related to ours. The conclusion of our research is that Vue is a good option for a developer that is learning on your own, looking for a framework that is easier to learn or developing a smaller project on your own. Angular is considered to be the most complicated framework to learn, but is a good option for anyone who is looking for a job or is involved with bigger projects. React has the lowest overall values in all the UTAUT categories, but has shown to be a viable option for someone looking for better job opportunities. The advantage React has over Angular is that it is easier to learn. The final results of our thesis are recommendations and not strict rules. Decisions for and against a framework depend heavily on the use case and other varying circumstances. Our study can hopefully give a better insight and support developers in their choice of framework. / Webbutveckling utvecklas, innoveras och skapar nya möjligheter för användare att mötas på en gemensam plattform. En del av utvecklingen är möjlig mha JavaScript-ramverk vars versioner är i tusental. Syftet med vår rapport var att undersöka skillnader mellan de tre ramverken Angular, React och Vue utefter Unified Theory of Acceptance and Use of Technology (UTAUT) modellen för att kunna ge utvecklare stöd i sitt val av ramverk. Tidigare studier visar på fördelar och nackdelar kring de tekniska aspekterna hos ramverken. Därför valde vi att utföra en kvalitativ studie baserad på utvecklares erfarenheter. Vi utförde en fallstudie där fenomenet var “varför ett ramverk väljs”, detta styrde och var motiveringen till våran forskning. Vi använde en enkät som metod för datainsamling. Med vår enkät samlade vi in data från över 500 olika utvecklare. Resultat från undersökningen presenteras i olika tabeller och grafer som analyseras och jämförs med tidigare studiers resultat inom samma område. Vår slutsats av resultaten är att Vue är ett bra alternativ för dig som lär sig utveckla på egen hand, vill ha ett lättare ramverk att lära sig och utvecklar mindre projekt på egen hand. Angular anses var det svåraste ramverket att lära sig, men kan vara ett bra alternativ för dig som vill söka jobb eller ska utveckla ett större projekt. Angular är det ramverk som funnits under en längre tid och har därför bredare möjligheter. Även om React uppskattas lägst i alla kategorier så har det visat att det är ett bra alternativ för dig som vill öppna upp fler jobbmöjligheter. Fördelen React har över Angular är det är lättare att lära sig. Resultatet vi presenterar är förstås bara rekommendationer och inget som är definitivt. Beslut för och emot vilket ramverk som är bäst varierar från fall till fall beroende på omständigheterna. Men vår studie kan förhoppningsvis ge en bättre insikt och hjälpa utvecklare som står inför att välja ramverk.

This is an open source education management system developed on React with Agile management method. Suitable for learning various languages, it is currently developed for the purpose of learning Chinese. Teachers can post assignments and announcements, and students can do lots of practice and quiz on this.

This essay is a documentation of the work that was made for the consultancy company GESHDO Now AB in which a solution was built to facilitate content management of the company’s website with modern frontend technologies. The basic requirement was to create a web-based editor, or a JAMstack-based project with a clear separation between the content and the layout. The requirement was to achieve the highest performance possible. The solution should be deployed with the help of a cloud service. A primary goal in this project is to liberate resources at the company, so that employees who lack coding skills can easily manage the content of the website without having to ask for help from the developers. Technologies such as React, Gatsby, GraphQL and TinaCMS have been used to create a user-friendly interface which lives in a protected environment in which it is easy to manage the content of the website in realtime. When the changes are saved, they will be immediately reflected on the website in production. The project has been built based upon the ideas of simplicity, reusability, scalability and easy maintenance, as well as the possibility to extend the solution and customize it for future needs. / Den här uppsatsen handlar om ett arbete som gjordes åt konsultbolaget GESHDO Now AB där en lösning byggdes för att underlätta innehållshanteringen på deras webbplats med moderna frontend-tekniker. Grundkraven var att skapa en form av editor, eller en JAMstack-applikation med en klar separering mellan layouten och innehållet. Dessutom ska prestandan vara så hög som möjligt. Lösningen ska publiceras med hjälp av en molntjänst. Ett huvudsakligt syfte med lösningen är att frigöra resurser på företaget, så att anställda som saknar kodkunskaper ska enkelt kunna hantera webbplatsens innehåll utan att behöva ta hjälp utav utvecklarna. Tekniker som React, Gatsby, GraphQL och TinaCMS har använts för att skapa ett användarvänligt gränssnitt som lever i en skyddad miljö där man enkelt kan hantera webbplatsens innehåll i realtid. När ändringarna sparas, så reflekteras de på webbplatsens liveversion. Projektet har byggts med enkelhet, återanvändbarhet, skalbarhet och enkelt underhåll i åtanke, och det är möjligt att utvidga lösningen och skräddarsy den utifrån framtida behov.