Att utveckla en applikation som NFC kan använda som konceptbevis för möjlig vidareut- veckling har varit projektets syfte, vilket har uppfyllts. Alla kraven från kravspecifikationen har uppfyllts. Teamet har också lärt sig väldigt mycket om de olika typer av programmering som använts under projektets gång och även om hur ett projekt drivs på ett bra sätt vilket var ett annat syfte med projektet. Därför anser gruppen att projektets syfte har uppfyllts.
A
Jämförelse av Vue.js och
Angular/AngularJS för nybörjare
av Yousef Hashem
A.1
Inledning
En av de viktigaste frågeställningarna som uppkommer vid starten på ett nytt projekt är vilka ramverk som skall användas. Just inom webbutveckling finns det ett hav av ramverk att välja mellan för front-end utveckling. Bland dessa ramverk finns det vissa som är mer prominenta än andra.
Ramverk för webbutveckling utvecklas idag väldigt snabbt och det kan ibland verka som om nya ramverk dyker upp från ingenstans. Dessa ramverk skiljer sig även mycket, både funktionsmässigt och komplexitetsmässigt. Vissa av ramverken i fråga har bredare omfatt- ning, medan andra specialiserar sig på utveckling av en viss typ av webbsidor.
Som nybörjare inom webbutveckling kan det vara väldigt överväldigande att göra det- ta val av ramverk, speciellt ifall hänsyn till ramverkens respektive inlärningskurvor måste beaktas.
A.1.1
Syfte
Syftet med denna litteraturstudie är att jämföra två av de ledande front-end ramverken, Vue.js och Angular/AngularJS, och jämföra deras inlärningskurvor samt fördelar med re- spektive ramverks funktioner. Denna jämförelse kommer att göras med nybörjarvänlighet i åtanke, och hänsyn till respektive ramverks inlärningskurva kommer tas.
A.1.2
Frågeställning
Ett par frågeställningar har tagits fram för att lättare uppfylla textens syfte. 1. Hur skiljer sig inlärningskurvorna för respektive ramverk?
2. Vilka fördelar finns det, rent funktionsmässigt, att välja det ena ramverket över det andra?
A.2. Bakgrund
A.1.3
Avgränsningar
Denna studie kommer endast vara en litteraturstudie, där källor kommer att hämtas från publicerade artiklar och eventuellt icke-publicerade artiklar ifall en brist på informationsrika publicerade artiklar finns. Studien kommer därför endast ta hänsyn till det som står skrivet i artiklarna, och ej ta hänsyn till egna erfarenheter.
Funktionerna som jämförs kommer endast vara ramverkens basfunktioner. Bibliotek och andra tillägg kommer ej räknas in vid jämförelsen av funktionalitet.
A.2
Bakgrund
En stor del av förstudien inför starten av projektet lades ner på att läsa på om olika ramverk och bestämma vilka ramverk som skulle användas. Eftersom ingen i teamet hade mycket erfarenhet av att arbeta med webbutveckling vägde inlärningskurvan upp beslutet enormt mycket. Ifall ramverket som användes uppfyllde applikationens syfte och var lätt att lära sig utan att ha arbetat mycket med webbutveckling tidigare, så kunde en större del av teamets tidsbudget läggas ner på effektiv utveckling av applikationen. Det är därför viktigt att en jämförelse av ramverk görs – med teamet och applikationen som skall utvecklas i åtanke – innan ett beslut tas.
A.3
Teori
Detta avsnitt beskriver den teori som behövs för att förstå resten av rapporten genom att introducera de ramverken som ska jämföras, samt beskriva vad som utmärker dessa ramverk.
A.3.1
JavaScript
JavaScript är ett skripting- och programmeringsspråk som tillåter implementationen av kom- plexa program på webbsidor [15]. Programmen som skrivs i JavaScript kallas för skript och kan skrivas direkt i en webbsidas HTML. Dessa skript är skrivna i oformatterad text och ex- ekveras automatiskt när en webbsida laddas in, utan ett behov för någon kompilator [16]. JavaScript är även det mest populära programmeringsspråket för sjunde året i rad [17].
A.3.2
TypeScript
TypeScript är en förlängning till JavaScript som öppnar upp en enklare väg till utveckling av stora applikationer skrivna i JavaScript [18].
A.3.3
Vue.js
Vue.js är ett kraftfullt och progressivt ramverk för JavaScript som används för att bygga in- teraktiva användargränssnitt [19, 20]. Vue har förmågan att hantera stora single-page appli- kationer, men lämpar sig även för små individuella use cases. Dessutom är Vue designat att ha ett simpelt API, vilket underlättar inlärningsprocessen för ramverket [19]. Enligt deras egna hemsida är Vue även ett väldigt versatilt ramverk, då det går att integrera med andra bibliotek eller projekt [21].
Vue är inte utvecklat av ett stort företag, utan hela utvecklingen bygger på öppen källkod och ramverket är utvecklat av ett gemenskap av personer. Vue började som ett hobbyprojekt av Evan You, tills han sa upp sig från sitt arbete och började arbeta heltid på ramverket [20].
A.3.4
Angular/AngularJS
Angular är ett ramverk som använder sig av TypeScript och är en omskrivning av Angu- larJS [22]. AngularJS skapades av Google och specialiserar sig på att förlänga HTML till ett
A.4. Metod
mer läsbart format [23]. AngularJS är baserat på filosofin att deklarativ kod är bättre än impe- rativ kod när användargränssnitt byggs eller olika webbapplikationer kopplas samman [23]. AngularJS används idag för att konstruera många olika system, inklusive webbapplikationer med avancerade användargränssnitt [24].
A.4
Metod
Denna undersökning är en strikt litteraturstudie, vilket innebär att ingen hänsyn kommer tas till egna erfarenheter. Litteraturen som studeras kommer främst vara publicerade artiklar och examensarbeten, men även vissa tekniska rapporter och enkätundersökningar.
A.4.1
Litteraturstudie
För att hitta rapporter som är relevanta för frågeställningarna som ska besvaras har vissa nyckelbegrepp som Vue.js, Angular/AngularJS och JavaScript frameworks använts i sökning- ar på Googles tjänst Google Scholar. Denna tjänst underlättar sökningen efter vetenskapliga publikationer och tidsskrifter. Dessutom visas vilka bibliotek dessa publikationer och tids- skrifter finns tillgängliga på. En annan av Googles tjänster, Google Books, har också använts för att hitta böcker med ovannämnda nyckelbegrepp.
De två ramverkens officiella hemsidor har också använts för att hämta information om re- spektive ramverk. Även om dessa hemsidor inte är vetenskapliga publikationer, tidsskrifter eller enkätundersökningar så innehåller de mängder av relevant information angående re- spektive ramverk och kommer därför även att användas som källor i denna litteraturstudie.
A.5
Resultat
Det finns många viktiga faktorer att ta hänsyn till vid valet av ett ramverk då det finns en spe- ciell bekvämlighet i att välja ett välanvänt och etablerat ramverk som många andra utvecklare användare. I detta avsnitt kommer därför företagens engagemang i ramverken, samt bland annat ramverkens funktioner, inlärningskurvor, historia och popularitet presenteras.
A.5.1
Historia
I detta avsnitt presenteras ramverkens historia och livslängd.
Angular/AngularJS
AngularJS släpptes först i oktober år 2010, men började skrivas om från grunden i 2014 och släpptes som Angular 2.0 i oktober 2016. Denna omutveckling av Angular innefattade en del stora förändringar i både API och koncept [22]. Mycket av det som var med i AngularJS innan omutvecklingen integrerades in i den nya versionen, som idag kallas för Angular. AngularJS refererar till “originalet”, som släpptes år 2010.
Vue.js
Vue släpptes i februari 2014 och är ett relativt nytt ramverk i förhållande till Angular. Evan You, som skapade Vue.js, påbörjade projektet efter att ha utvecklat Angular/AngularJS [22].
A.5.2
Företagsstöd
A.5. Resultat
Angular/AngularJS
Angular/AngularJS utvecklas, underhålls och stödjs av Googles anställda [22, 23, 25].
Vue.js
Situationen är lite mer komplicerad när det gäller Vue. Istället för att stödjas och sponsras av ett stort företag, så backas Vue av ett fåtal små och mellanstora företag och organisationer via Patreon [22].
A.5.3
Popularitet
Figur A.1 visar hur många gånger respektive ramverk har laddats ner sedan november 2017. Namnen i Figur A.1 skiljer sig lite från de välkända namnen. @angular/core i Figur A.1 är basfunktionaliteten till Angular, medan angular syftar på AngularJS. Figuren visar antalet nedladdningar av ovannämnda ramverk sedan november 2017 [26].
Figur A.1: Antalet nedladdningar av Angular/AngularJS respektive Vue.js
Antal nedladdningar behöver inte nödvändigtvis betyda att ett ramverk är välanvänt. Därför måste även hänsyn till hur mycket respektive ramverk används i praktiken tas. Nedan visas vilka företag och organisationer som använder sig av vilket ramverk.
Angular/AngularJS
Följande företag har använt sig av Angular/AngularJS [22]: • Google
• Wix
• Weather.com • Healthcare.gov • Forbes
A.5. Resultat
Vue.js
Följande företag har använt sig av Vue.js [22]: • Alibaba • Baidu • Expedia • Nintendo • GitLab
A.5.4
Nybörjarvänlighet
Det som är viktigt vid en analys av nybörjarvänlighet är hur snabbt en ny utvecklare kan sätta sig in i ramverket, hur avancerat det är att skapa ett nytt, oberoende projekt med ramverket, samt hur dessa två kriterier förändras när en applikation blir mer komplex [22].
Angular
För att köra Angular måste användaren installera Angular CLI, samt göra några små änd- ringar till några filer för att få igång en väldigt simpel applikation [27]. Applikationen som fås introducerar inte Angulars kärnfunktionalitet på ett bra sätt. Angular har inte heller nå- gon genomgång online, där användaren kan testa på ramverket innan nedladdning och lokal utveckling [22].
Angular har dock en handledning som tar några timmar att ta sig igenom. Den använder sig av Angular CLI och visar upp en projektstruktur som kan tänkas användas i ett riktigt projekt [22, 28]. Denna handledning täcker även alla koncept som behövs för att utveckla en mer avancerad applikation.
Vue.js
För att komma igång med Vue krävs endast en script-tag i HTML-koden [3, 22]. Till skill- nad från Angular går det även att testa Vue online, utan att ladda ner ramverket. Detta görs genom ett interaktivt exempel där läsaren kan ändra och kompilera om koden för att testa ramverket och på så sätt testa ramverket utan att ladda ner det [3].
Det finns även en officiell CLI som underlättar, bland annat, skapandet och hanteringen av projekt [22].
A.5.5
Basfunktioner
I detta avsnitt presenteras respektive ramverks standardfunktioner. Detta innebär funktioner som inkluderas i ramverket vid installation, och inte funktioner som inkluderas i tilläggsbara paket och bibliotek.
Angular
Angular har allt som krävs för att utveckla en komplex applikation och basfunktionaliteten täcker nästan alla välanvända koncept [22].
Vue.js
Vue är ett progressivt ramverk, vilket innebär att koncept inte täcks av basen, utan finns istället som valbara tillägg i form av bibliotek [22].
A.6. Diskussion
A.6
Diskussion
I detta avsnitt diskuteras metoden och resultatet av litteraturstudien, samt ifall det finns nå- gon funktionalitet hos något av ramverken som påverkar dess inlärningskurva.
A.6.1
Resultat
Både Vue och Angular är väldigt välanvända ramverk. Trots Vues nyfunna popularitet har Angular fortfarande en större utbredning idag. Dessutom backas och drivs Angular av ett mycket större företag, vilket kan gynna dess utvecklingshastighet. Vue växer dock väldigt snabbt när det gäller popularitet och har snart fler nedladdningar än både Angular och An- gularJS, enligt Figur A.1.
Angular är mycket bredare än Vue i basen funktionalitetsmässigt. All denna funktionalitet finns dock tillgänglig för Vue i form av tilläggsbara bibliotek. Konkreta exempel på sådan funktionalitet hittades dock inte i litteraturen som studerades.
När det gäller användarvänlighet är Vue ett mycket lättare ramverk att sätta sig in i, spe- ciellt för nybörjare. Dessutom går det att testa Vue utan att ladda ner ramverket. I konstrast till Vue har Angular en väldigt brant inlärningskurva och kräver mycket preparation innan första raden kod kan skrivas.
Eftersom Angular innehåller en mycket bredare bas blir det även svårt att komma igång med Angular och det kan kännas väldigt överväldigande för en ny webbutvecklare att börja med Angular. Eftersom Vues basfunktionalitet är relativt liten, är det lättare för en nybörjare att komma igång med Vue än det är att komma igång med Angular.
A.6.2
Metod
Majoriteten av sökningen efter källor för litteraturstudien har skett via Google Scholar. Många artiklar relevanta till ämnet har lästs och ett fåtal av dessa valdes ut. Båda ramverkens egna hemsidor har också använts för att tillhandahålla information om respektive ramverk. Undersökningen har varit en strikt litteraturstudie, vilket kan betyda att undersökningen är en aning begränsad då inga egna erfarenheter har tagits hänsyn till.
En strikt litteraturstudie gjordes då ingen erfarenhet med att använda Angular fanns. För att hålla resultatet så opartiskt som möjligt uteslöts all egen erfarenhet med att använda Vue. Detta ledde dock till en liten brist på information då inga konkreta exempel på funktionalitet hittades i litteraturen som studerades.
A.7
Slutsatser
I detta avsnitt besvaras frågeställningen som presenterades i Avsnitt A.1.2.
Hur skiljer sig inlärningskurvorna för respektive ramverk?
Angular har en mycket brantare inlärningskurva än Vue på grund av den breda basen som ingår i ramverket. Det är dessutom enklare att komma igång med Vue, då det erbjuds en del tjänster som gör det möjligt att testa på ramverket innan nedladdning. Dessutom är det en mycket enklare process att ladda ner och installera Vue än det är med Angular.
Vilka fördelar finns det, rent funktionsmässigt, att välja det ena ramverket över det andra?
Angular erbjuder en mycket bredare omfattning och är mer lämpat för komplexa applikatio- ner än Vue. Ramverkets basfunktionalitet täcker även mycket mer än Vues basfunktionalitet. Detta gör Angular till ett mer omfattande ramverk som lämpar sig för storskaliga projekt.
A.7. Slutsatser
Vue är däremot kompakt och tillhandahåller inte mycket information i basen. Detta kan dock kompletteras med många bibliotek, och all funktionalitet som finns i Angular går att lägga till som bibliotek i Vue. Detta gör Vue till ett bra val ifall en simpel applikation som eventuellt kan utökas ska utvecklas.
B
Jämförelse mellan
mobilapplikationer och
webbapplikationer av Martin
Brolin
B.1
Inledning
Sedan smarttelefonerna lanserades har en helt ny global industri uppstått; applikationsut- vecklingen. Detta innebar nya jobb och nya företag. Ett beslut som kunde spela stor roll för dessa företag var vare sig applikationer skulle utvecklas som OS-specifika applikationer för t.ex Android eller iOS eller om applikationer istället skulle utvecklas som webbapplikationer. En sådan situation uppstod under utvecklingen av detta system, då en applikation skulle tas fram för Android-användare och ett beslut skulle fattas vare sig det skulle utvecklas som en webbapplikation eller en Android-applikation. Rapporten kommer att beskriva i vilka situ- ationer webbapplikationer är det fördelaktiga alternativet före mobilapplikationer och vice versa.
B.1.1
Syfte
Syftet med denna studie är att jämföra webbapplikationer och mobilapplikationer inom olika områden, undersöka vilka för- och nackdelar det kan finnas med utvecklingen av applikatio- nerna och vilka aspekter som bör ingå vid beslutsfattandet när bara en av applikationsfor- merna ska utvecklas.
B.1.2
Frågeställning
1. Vilka för- och nackdelar kan det finnas med att enbart utveckla webbapplikationer före mobilapplikationer för mobilanvändare inom prestanda?
2. I vilka scenarion är det fördelaktigt att utveckla enbart en webbapplikation eller mobi- lapplikation?
B.2. Bakgrund
B.1.3
Avgränsningar
En avgränsning i denna studie är att mobilanvändare endast är enheter med iOS eller Andro- id eftersom att de utgör 99.6 procent av de nytillverkade mobiltelefonerna [29]. En annan avgränsning är att endast det vanligaste programmeringsspråket till de olika applikationsva- rianterna kommer att undersökas. Denna avgränsning ger en överblick för hur utvecklingen av de olika applikationerna vanligtvis utförs men utforskar inte alla möjligheter applikatio- nensvarianterna har.
B.2
Bakgrund
En av avgränsningarna som gjordes under projektet var att endast utveckla en webbapplika- tion istället för en webbapplikation och en mobilapplikation eftersom att en prototyp skulle framställas. Den avgränsningen tillät projektgruppen att lägga fler programmeringstimmar på att utveckla funktioner på bekostnaden att smidigheten och prestandan i att använda en mobilapplikation. Denna studie ska undersöka detta mer generellt.
B.3
Teori
I detta avsnitt kommer tekniska begrepp och koncept som berör denna rapport beskrivas.
B.3.1
Webbapplikation
Webbapplikationer är programvara som används via en webbläsare. Olikt installerad pro- gramvara som exekveras på enheten kan en webbapplikation exekveras utan programvaran installerad lokalt på enheten. Webbapplikationer är, olikt installerade program, tillgängliga från alla enheter med operativsystem som stödjer webbläsare [29].
Webbapplikationer utvecklas ofta i HTML och CSS [30]. Programmeringspråken varierar, men vanligast är JavaScript, Java och Python [31].
B.3.2
Mobilapplikation
Mobilapplikationer kallas i vardagligt tal appar och syftar på mobilapplikationer på enheter med operativsystemet iOS eller Andriod. Mobilapplikationer är den vanligaste användingen av smarttelefoner då 86% av skärmtiden går till mobilapplikationsanvändning [32].
B.3.3
iOS
Nästan var femte smarttelefon som används idag är Iphones, en produkt av företaget App- le [29]. Dessa smarttelefoner använder sig av iOS. Det skrivs huvudsakligen i programme- ringsspråket Swift [33].
B.3.4
Swift
Swift är ett statiskt programmeringsspråk framtaget av Apple och används för bland annat applikationsutveckling för operativsystemet iOS [33].
B.3.5
Android
Andriod används som operativsystem för många olika smarttelefoner av flera olika företag. Det kommer i flera varianter och utvecklas med Java [34]. Majoriteten producerade smartte- lefoner har Android som operativsystem [29].
B.4. Metod
B.3.6
Java
Java är ett statiskt programmeringsspråk som utvecklades för att tillåta objektorientering [34]. Det är ett av de vanligaste programmeringsspråken och används för att utveckla Androidap- plikationer.
B.3.7
Caching
Caching är en metod för att lagra temporär information inom IT. Det används exempelvis då en webbsida ska hämtas eftersom att den informationen inte behöver lagras permanent på en hårddisk. För att cachingprocessen ska gå snabbt används RAM-minne, vilket är hårdvara som snabbt kan skriva och läsa information men är inte avsedd för att lagra information länge [35].
B.4
Metod
Frågeställningarna kommer behandlas genom att hämta information och svar i litteratur, me- todiken är en litteraturstudie. Detta är en stor industri vilket innebär att det finns mycket fö- retagsrapporter som behandlar liknande ämnen. Litteraturen kommer alltså hittas bland fö- retagrapporter, vetenskapliga rapporter via Google Scholars och webbartiklar via Google. På Google används söksträngar som ”web applications on android´´, ”mobile and app development´´, ”web apps vs android apps´´ och dylikt. Dessa sökningar ska inledningsvis ge en uppfatting om vilka områden som kan ha relevans för frågeställningarna, men även ge information för att fördjupa och besvara frågeställningarna. Sökningarna ska huvudsakligen ge svar på tekniska aspekter av jämförelsen mellan mobilapplikationer och webbapplikationer, därför kommer publikationer som beskriver tekniskt om ämnen utgöra majoriteten av litteraturen i denna litteraturstudie.
B.5
Resultat
Resultatet beskriver vad som framställdes av litteraturstudien. En indelning gjordes i form av underrubriker för de olika ämnena litteraturstudien fann.
B.5.1
Implementationsmöjligheter
Från litteraturstudien fås att applikationer på webben eller på mobilen kan implementera samma back-end. Andriod-, iOS- och webbapplikationer har alla möjlighet till att delas in i back end och front end. Skillnaderna mellan applikationerna finns i front end, applikationer- nas struktur. Exempelvis finns två av världens tre mest besökta webbapplikationer, Facebook och Youtube, i alla de tre nämnda applikationsvariationerna, och använder sig av samma back-end på de olika applikationsvariationerna [36].