Angular migration : Case: File manager

Abstract

The purpose of this thesis was to compare the differences between AngularJS and Angular frameworks and to migrate a file managing -tool, developed and used by a Finnish media company, to utilize the new Angular framework.

Single page applications are more popular than ever as they can provide a native application like user experience. AngularJS and Angular are frameworks designed for single page applications. They provide a robust set of tools to create data-driven, rich applications.

As the web and web development have become more advanced, many of the AngularJS features are now outdated. Angular is a rewrite of AngularJS, written in TypeScript and ES6. It takes some of the concepts from its predecessor and improves the stability and performance of the framework.

The project was to migrate a file manager application from using AngularJS to Angular. Some of the functionalities stayed somewhat unchanged, but as the application was split into multiple smaller components a shared service had to be created to handle the communication across the application. New features were added to help with the workflow process.

The project was successful and no significant problems were faced. The most challenging part of the migration was to get into the Angular mindset of building an application with small components. The results show that for a small-to-medium sized application, an Angular migration can be done without significant problems. A large application can be migrated to Angular in stages.

Insinöörityön tarkoituksena oli tutkia AngularJS- ja Angular-sovelluskehyksien eroja sekä siirtää suomalaisessa media-alan yrityksessä käytettävän tiedostonhallintatyökalun käyttöliittymä uuden Angular-sovelluskehyksen päälle.

Yksisivuiset verkkosovellukset ovat suositumpia kuin koskaan. Tämä johtuu siitä, että ne voivat tarjota natiivisovellusten kaltaisen käyttökokemuksen. AngularJS ja Angular ovat sovelluskehyksiä, jotka on suunniteltu juuri yksisivuisten verkkosovellusten toteuttamiseen. Ne antavat vakaat työkalut datan ohjaamien, rikkaiden sovellusten kehitykseen.

Verkon ja web-ohjelmoinnin kehittymisen myötä AngularJS-sovelluskehyksen ominaisuudet ovat nykyään vanhentuneita. Angular on täysin uudelleenkirjoitettu AngularJS:stä. Sen kirjoittamiseen on käytetty TypeScript- ja ES6-ohjelmointikieliä. Sen kehityksessä on hyödynnetty AngularJS:n konsepteja, ja sovelluskehyksen vakautta ja toimintaa on parannettu.

Insinöörityössä siirrettiin AngularJS-pohjainen tiedostonhallintatyökalu käyttämään uutta Angular sovelluskehystä. Osa toiminnoista pysyi lähes muuttumattomana, mutta koska sovellus koostettiin useasta pienestä komponentista, sovelluksen komponenttien kommunikointia varten piti luoda jaettu palvelu. Samalla sovellukseen lisättiin uusia toimintoja helpottamaan työnkulkua.

Projekti onnistui ilman merkittäviä ongelmia. Haastavin osa siirrossa oli oppia Angular-tyyppinen ajattelutapa, jossa sovellus rakennetaan pienistä komponenteista. Insinöörityön tulokset osoittavat, että Angular-sovelluskehyksen käyttöönotto tai vaihto voidaan tehdä pienelle tai keskisuurelle sovellukselle ilman merkittäviä ongelmia. Suuret sovellukset voidaan siirtää vaiheittain käyttämään Angular-sovelluskehystä.