Pandemier är något som dyker upp lite då och då. Att kunna visualisera data öppnar möjligheten att hitta intressanta mönster och agera på dem. Geografiska visualiseringar har en förmåga att på ett tydligare sätt bilda förståelse om vad som presenteras och människor har det lättare att resonera och lära sig på ett mer effektivt sätt i en visuell miljö gentemot en textuell- eller numerisk miljö. Arbetet utför en jämförelse mellan de två JavaScriptramverken React och Vue.js. Ramverken använder sig utav Google Charts för att rendera grafer, och en mätning utförs för att ta reda på renderingstid mellan de olika ramverken. Arbetet innehåller även en användarstudie för att ta reda på hur användare tycker att stapeldiagram och GeoCharts fungerar beroende på olika sammanhang. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet.</p>

I denna studie jämförs JavaScript-biblioteket React mot Joomla på en e-commerce webbsida. Tillämpningen på e-commerce webbsidan är bokhandel. I implementationen skapades det två webbsidor. En med React och den andra med Joomla. Webbsidan använder sig även av Bootstrap som CSS-ramverk för att få samma layout. Detta är viktigt då mätningen utförs i en kontrollerad miljö där det är viktigt att allting utgår ifrån samma förutsättningar. Mätningen sker genom ett eget skript som körs genom Tampermonkey tillägget i Chrome. Resultatet av mätningarna visas senare i grafer som indikerar att React har en mycket snabbare svarstid jämfört med Joomla-webbsidan. I framtida arbeten går det att öka antalet produkter och innehåll och göra webbsidan mer verklighetsbaserat. Det går även att byta tillämpningstema till en elektronikwebbsida där det förmodligen skulle behöva innehålla fler bilder och även videoklipp.

I takt med den ökande digitaliseringen i samhället genererar företag stora mängder data varje dag. För att skapa förståelse kring datan är det viktigt att den blir visualiserad. Aktier och tillhörande finansiell information är en komplex typ av data och med hjälp av linjediagram blir det möjligt att visualisera denna data. I detta arbete utförs en jämförelse mellan klient- och serverbaserad programmering där det skapas en applikation i React och eni Python. Jämförelsen utförs för att ta reda på vilken form av programmering det är som renderar linjediagram med kortast svarstid. För att ta reda på detta utförs ett tekniskt experiment där renderingstider mäts i de applikationer som skapats i React och Python. Mätningarna i React resulterar i kortare renderingstider än Python framförallt när det kommer till större datamängder där flera aktiekurser visualiseras samtidigt. I ett framtida arbete kan en liknande undersökning utföras med skillnaden att mätningar utförs på interaktivitet med datan. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet.</p>

Denna rapport behandlar ett projektarbete som utfördes av sju studenter i kursen TDDD96 - Kandidatprojekt i programvaruutveckling vid Linköpings universitet under våren 2022. Projektet var beställt av RISE och syftet var att skapa en användarvänlig applikation som möjliggör annotering av bilder. Rapporten introducerar projektet och beskriver relevant teori. Därefter beskrivs vilka metoder och tekniker som användes för att utveckla produkten. I resultatet presenteras programmets olika vyer tillsammans med bland annat en beskrivning över hur databasen fungerar och hur annoteringar representeras internt. Slutligen diskuteras resultatet, alternativa implementationssätt och värdet produkten har för kunden. I slutet av rapporten finns individuella bidrag från gruppmedlemmarna som innehåller djupdykningar inom relaterade ämnen.

The goal of the project is to develop a news widget for the company Atega In-sight. This news widget will be integrated into their Priceagent application and improve the ability of customers to set prices for their products. Daily meetings with the company as well as communication via chat and other spontaneous meetings. The project includes adjustments to previous sketches to meet current requirements as well as planning the functionality of the widget in the design tool Figma. The project's code will primarily be written in Visual Studio Code. The back-end is developed with NodeJS and the Serverless Framework as the basis for the API, while MongoDB is used as the database manager. Testing of the back-end takes place using the Postman API platform. On the front-end side, reusable components are created with React, mainly written in TypeScript. Ready-made components from Ant Design and styling are done with Styled-Components. The front-end structure follows the Atomic Design Pattern. The result of the project has given the company a functional widget where users can add, remove, edit and view their news feeds. Users can also switch between different tabs and paginate the news articles. Testing of the widget has mainly been performed with various browser add-ons, including VisBug to see if the size of the various components matches the sketches and responsiveness. Wave for testing availability and Lighthouse for performance. However, there is room for more superficial development, such as a better implementation of the NewsAPI in the back-end and small adjustments to improve the user experience, as the widget can sometimes be perceived as slow. / Målet med projektet är att utveckla en nyhetswidget åt företaget Atega Insight. Denna nyhetswidget ska integreras i deras Priceagent -applikation och förbättra kundernas förmåga att satta priser på sina produkter. Dagliga möten med företaget samt kommunikation via chatt och andra spontana möten. Projektet innefattar justeringar av tidigare skisser för att möta aktuella krav samt planering av widgetens funktionalitet i designverktyget Figma. Projektets kod kommer främst att skrivas i Visual Studio Code. Back-end utvecklas med NodeJS och Serverless Framework som grund för API: et, medan MongoDB används som databashanterare. Testning av back-end sker med hjälp av API-plattformen Postman. På front-end-sidan skapas återanvändbara komponenter med React, huvudsakligen skrivet i TypeScript. Färdiga komponenter från Ant Design och styling sker med Styled Components. Front-end-strukturen följer designmönstret Atomic Design Pattern. Resultatet av projektet har gett företaget en funktionell widget där man kan lagga till, ta bort, redigera och se sina nyhetsflöden. Användarna kan ocksa byta mellan olika flikar och paginera nyhetsartiklarna. Testning av widgeten har främst utförts med olika webbläsartillägg, bland annat VisBug för att se om storleken på de olika komponenterna stämmer överens med skisserna och responsivitet. Wave för att testa tillgängligheten och Lighthöuse för prestanda. Det finns dock utrymme för ytterligare utveckling, såsom en bättre implementering av NewsAPI i back-end öch sma justeringar för att förbättra användarupplevelsen, då widgeten ibland kan upplevas som långsam.

Växa Sverige is one of Sweden's largest associations working towards sustainable, profitable and competitive agricultural production. In Sweden, there is a requirement for all cattle to be registered with the CDB and all events related to each animal have to be reported. Växa provides an application, MinGård, where farmers can register their herds, cattle and associated events. MinGård needs a new, more modern interface focusing on accessibility. Currently, the application is only adapted for computers, with accessibility issues. It needs to be usable by everyone, on all different devices. Växa is not going to use the whole application, they will only use it as an inspiration for a new interface. Hence only test data is used in the application. The application is developed using React, TypeScript, and Bootstrap for frontend and Laravel for backend with an API and a MySQL database is used for data storage. The web application includes functions for authentication, user registration, user login, viewing the user's herds and animals, fetching and reporting events related to the animals in the herd, viewing details about a specific animal and associated events and from the detailed view of an animal, browsing through all animals in the herd. Logged-in users can change account details such as name and email address and upload pictures of themselves and their animals. The result of the project is a new interface for MinGård that has been tested, validates correctly and meets the accessibility requirements for public services. The application is accessible to everyone, usable on all devices and browsers. Växa can use prototypes and the application for inspiration in developing a new version of MinGård. / Växa Sverige är en av Sveriges största husdjursföreningar som jobbar för en hållbar, lönsam och konkurrenskraftig lantbruksproduktion. I Sverige finns det krav på att all nötkreatur ska registreras hos CDB och att alla händelser för varje djur rapporteras. Växa tillhandahåller en applikation, MinGård där lantbrukare kan registrera sina besättningar, djur (nötkreatur) och tillhörande händelser. MinGård behöver ett nytt, modernare gränssnitt som fokuserar på tillgänglighet. Idag är applikationen endast anpassad för datorer och det finns brister i tillgängligheten. Den behöver kunna användas av alla, från alla olika enheter. Växa kommer inte att använda applikationen utan vill endast ha inspiration till ett nytt gränssnitt och därför används endast testdata i applikationen. Applikationen utvecklas med React, TypeScript och Bootstrap för frontend och Laravel för backend med API och en MySQL-databas som datalagringskälla. Webbapplikationen innehåller funktioner för autentisering, registrera användare, logga in användare, se användarens besättningar och djur, hämta och rapportera händelser kopplade till djuren i besättningen, se detaljer om ett specifikt djur och tillhörande händelser samt att från detaljnivå kunna bläddra mellan alla djur i besättningen. Inloggade användare kan dessutom ändra kontouppgifter såsom namn och mejladress och ladda upp bilder på användaren och djur. Resultatet av projektet är ett nytt gränssnitt till MinGård som har testats, validerar korrekt och följer de tillgänglighetskrav som finns för offentlig service. Applikationen är tillgänglig för alla, kan användas på alla enheter och i olika webbläsare. Växa kan använda prototyper och applikation för inspiration vid utveckling av en ny version av MinGård.

The usage of e-commerce web applications is an ever-growing business model that has taken over some companies' main revenue source. When building these applications, the decision on which architectural option to choose for the application is made, such as multi-page or single-page, but there is also the option on what tools the developer will utilize. Some of these tools are React and Angular frameworks, which provide a unique experience when developing applications. React provides a structure that uses the FLUX pattern, and Angular provides an MVC pattern. Two artifacts have been created to compare these frameworks, run with the program XAMPP to have a database connection. By running a script that navigates the applications, an analysis of which frameworks are more fitting for a multi-paging and e-commerce environment could be decided, followed by an ethical discussion and potential future work.

Denna rapport beskriver ett kandidatarbete utfört av åtta studenter vid Linköpings universitet på uppdrag av Personalkollen AB. Projektet, med titeln ``Framtidens teknikstack för webbapplikationer'', genomfördes av arbetsgruppen Stack Underflow. Studien jämför två egenskapade webbapplikationer med olika renderingstekniker genom prestandatester såsom blockeringstid och hastighetsindex. Det klientrenderade systemet utvecklades med hjälp av biblioteket React, medan det serverrenderade systemet utvecklades i ramverket Next.js. För att utföra jämförelsen användes Google Lighthouse, ett verktyg för att systematiskt testa webbsidor. Prestandatesterna visade att det serverrenderade systemet överträffade det klientrenderade systemet vid större sidstorlekar, främst vad gäller blockeringstid. Resultaten syftar till att ge insikter till kunden om olika teknikstackars fördelar och nackdelar. Rapporten dokumenterar även de gemensamma och individuella erfarenheter som erhölls under projektets gång, specifikt vad gäller utvecklingen av de två systemen som jämförs.

Purpose – To examine if there is any difference regarding performance between the two frameworks Ionic and React Native to ease decisions which one to use when developing mobile applications. Method – A comparative study with hypothesis based on earlier studies are tested with different experiments. Findings – Ionic is performing faster in the majority of the experiments, but at the same time its CPU and memory usage is higher. The results also show that React Native is struggling with larger data-sets. Implications – The study is contributing to a wider knowledge about cross-platform frameworks performance, and therefore facilitates the choice on which framework is more preferable to use. Limitations – The study only includes Ionic and React Native, and no conclusions can therefore be applied to any other cross-platform frameworks. The results are not generalizable to cross- platform native vs cross-platform hybrid, or Android vs IOS / Syfte – Studiens syfte var att undersöka om det är någon skillnad prestandamässigt mellan ramverken Ionic och React Native för att utveckla ett beslutsunderlag och underlätta val av ramverk vid utveckling av applikationer. Metod – En jämförande studie som införskaffat en teoretisk bakgrund genom en litteraturstudie, och sedan framställt hypoteser som testats genom olika experiment. Resultat – Studiens resultat visade att Ionic presterade snabbare än React Native i majoriteten av experimenten, samtidigt som CPU och minnesanvändningen var högre. Resultaten beror antagligen på hur ramverken använder sig av olika tekniker som bland annat DOM och virtuell DOM för att rendera saker på skärmen. Resultaten visar också att React Native har stora problem att rendera större datamängder då applikationen låser sig fram till dess att den lyckats rendera allt. Implikationer – Studien bidrar till att bredda kunskapsbasen och underlätta vid val mellan olika ramverk för utveckling av cross-platform applikationer. Begränsningar – Studien avhandlar bara React Native och Ionic som ramverk, inga slutsatser kan dras för skillnader mellan cross-platform native och cross-platform hybrid. Applikationerna är byggda utan tidigare erfarenhet utav ramverken.

Mobilindustrin är under ständig förändring vilket har lett till en fragmenterad marknad somsmåföretag har haft svårt att etablera sig i. Småföretag har haft problem med att utvecklakvalitativa applikationer till olika mobila plattformar. Anledningen är att det varitresurskrävande att utveckla native applikationer till flera plattformar och underhålla flerakodbaser. Till följd av detta har mindre företag oftast valt att utveckla webbapplikationer för attleverera tjänster som når ut till många konsumenter. Hybrida ramverk har på senare år etableratsig som en potentiell lösning för att utveckla mobila applikationer med högre prestanda ochfunktionalitet än webbapplikationer och samtidigt möjliggjort för utvecklare att dela kod mellanolika plattformar. I denna studie intervjuades anställda på tre mindre företag för att identifierakrav som småföretag anser vara viktiga vid val av ramverk för applikationsutveckling. Utifrånkraven jämfördes tre hybrida ramverk för att ta reda på vilket som passar småföretag. Resultatenvisade att småföretag är olika med varierande behov och att det inte finns ett specifikt ramverksom passar alla. Däremot konstaterades det att alla tre hybrida ramverk som jämfördes i studienvar tillräckligt sofistikerade att implementeras som potentiella lösningar. Med det sagt ärhybrida ramverken inte kompromisslösa. Applikationer som utvecklas med hybrida ramverkuppnår ännu inte samma prestanda som native applikationer och är inte plattformsoberoende isamma grad som webbapplikationer. / The mobile industry is constantly changing, which has led to a fragmented market that smallbusinesses have difficulties to successfully establish in. Small businesses have had problemswith developing qualitative applications for different mobile devices. The main reason is theresource intensive process to develop native applications for multiple platforms andmaintaining the different codebases. Thus, smaller companies have usually chosen to developweb applications to deliver services to a more widespread target audience. Hybrid frameworkshave established themselves as a potential solution for developing mobile applications withhigher performance and functionality than web applications, while allowing developers to sharecode between platforms. In this study, employees of three smaller companies were interviewedto identify shared requirements held by small businesses to select a framework for applicationdevelopment. Based on the requirements, three hybrid frameworks were compared with thepurpose to identify which one was most suitable for small businesses. The results showed thatsmall businesses are different with varying needs and that there is no specific framework thatsuits all companies. On the other hand, it was found that all three hybrid frameworks comparedin the study were sufficiently developed to be implemented as potential solutions. With thatsaid, hybrid frameworks are not without flaws. Applications developed with hybrid frameworksdoes not yet achieve the same level of performance as native applications and is not platformindependent to the same extent as web applications.