Sovelluskehysten Angular, React ja Vue.js vertailua

Abstract

Työssä tarkastellaan JavaScriptiä ja sen johdannaisia Angular, React ja Vue.js ja miten ne eroavat toisistaan. Vertailun tarkoituksena on tuoda esille kielien välisiä eroja ja yhtäläisyyksiä ja antaa lukijalle hyvä mielikuva siitä, mitä sovelluskehykset pystyvät tekemään.

JavaScript on 1990-luvulla kehitetty ohjelmointikieli sen aikaisia selaimia varten. Se on vuosien varrella kehittynyt ja päässyt myös serverin puolella käytettäväksi kieleksi. Siitä löytyy johdannaisia kieliä kuten TypeScript, ajoympäristöjä kuten Node.js ja front- ja backend frameworkkeja.

Tunnetuimpia frontend-sovelluskehyksiä ovat Angular, React ja Vue.js. Angular on Googlen kehittämä framework, joka pohjautuu vanhaan AngularJS- frameworkkiin. React on Facebookin kehittämä framework, joka on käytössä Facebookin uutissyötteessä. Vue.js on kolmikon uusin tulokas, jonka suosio on noussut hurjalla vauhdilla vuoden 2016 Vue 2 -päivityksen jälkeen. Kaikki näistä ovat komponenttipohjaisia.

Suurimmat kehysten väliset erot ovat syntakseissa ja projektirakenteissa. Angularissa jokainen komponentti on pilkottu kolmeen eri tiedostoon: logiikka, käyttöliittymä ja tyylit. Reactissa komponentin logiikka ja käyttöliittymä ovat yhdessä tiedostossa, johon voi halutessaan lisätä tyylit. Vuessa luonnostaan kaikki ovat samassa tiedostossa erillisissä lohkoissa. Eroihin vaikuttaa myös se, että Angular on TypeScript-pohjainen kieli, kun React ja Vue ovat JavaScript-pohjaisia.

This thesis explores the concept of JavaScript and its standardization, what JavaScript-based frameworks there are. Out of these frameworks Angular, React and Vue.js will get a closer look to get a basic idea of all three frameworks. The comparisons point is not to put the frameworks in order from best to worst or vice versa.

JavaScript is a scripting language that was developed throughout the 1990s. Originally developed by NetScape for their NetScape Navigator 2.0 browser, to bring life to the dull websites. Over the years JavaScript has evolved tremendously, from the website scripting langue to server-side code and to runtime environments. As well as to dozens of frameworks for both front- and backend use. And new languages like TypeScript that are supersets of JavaScript.

The most notable frontend frameworks are Angular, React and Vue.js. Angular is the successor of Googles AngularJS framework, it’s even developed by the same team. React is Facebooks own framework that it uses in Facebooks news-feed. Vue.js is the most recent framework, after its Vue 2 update in 2016 its popularity has skyrocketed and recently passed React in Github-stars.

The differences between the frameworks are most notable when it comes to syntax and project architecture. Angular splits all of its individual components into three pieces, logic, UI and styles, while Vue keeps all of the component related code in one file, although in different segments. React on the other hand has both logic and UI in the same file, while styling is in a separate file. Although styling can also be done in the same file. A contributing factor to this is that Angular is TypeScript-based while React and Vue are JavaScript-based.