Od backenda do frontenda uz AWS i Vue.js - KulenDayz 2018

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

31.08.2018. od 9 do 17h, zajedno s kolegama iz tvrtke Informatika Fortuno, sudjelovao sam na radionici “Od backenda do frontenda uz AWS i Vue.js” koju su održali Damjan Namjesnik i Kornelije Sajler.

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

Iako je već dvije godine stalna lokacija konferencije Pampas, development radionice održane su na dobro poznatoj lokaciji BIOS-a.

Opis radionice:

Na treningu ćemo se upoznati s nekoliko relativno novih i “trendy” tehnologija kroz razvoj jedne jednostavnije aplikacije.
Počevši od prikaza arhitekture i osnovnih funkcija backenda, pa sve do dizajniranja frontenda, pokazat ćemo što je to serverless, aws, vuejs, ssr, continuous deployment
i još par buzzworda koji se često spominju u zadnje vrijeme.

Iako će fokus biti na određenim tehnologijama, spomenut ćemo usput i alternative i prokomentirati naš odabir.
Osim slušanja, od polaznika će se očekivati i rješavanje nekoliko laganijih zadataka kako ne bi sve završilo samo na teoriji.

Potrebno predznanje:
Predavanje je koncipirano da ga mogu pratiti svi – od junior developera koji žele vidjeti razvoj jedne jednostavnije aplikacije, do eksperata koji žele vidjeti primjere raznolikih tehnologija.
Osnove HTML-a i Javascripta su poželjne za razumijevanje primjera i rješavanje zadataka.

Priprema polaznika:
– Ponijeti laptop (barem 1 laptop na 3 osobe) i instalirat neki moderan browser
– Registrirati se na AWS Free Tier https://aws.amazon.com/free/

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

Što se moglo naučiti

Iako primarno radim s Angularom htio sam čuti, vidjeti i probati nešto novo.

Bilo je dovoljno svega 15ak minuta od instalacije Vue.js-a tj. Vue.js CLI-a na PC do izrade jednostavne SPA (Single-page application) aplikacije.

$ npm install -g vue
$ npm install -g @vue/cli
$ vue init webpack kulendayz
$ cd kulendayz
$ npm run dev

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

Što se koda tiče izgleda ovako:

<template>
  <div class="hello">
     <h1 :class="{'novaboja': checked}">{{ naslov }}</h1>
    <input type="checkbox" id="checkbox" v-model="checked" v-on:click="counter += 1, contracounter -= 1" :disabled="counter == 10">
    <label for="checkbox">{{ checked }}</label>
    <p v-if="checked">Čekirano</p>
    <p v-else>Odčekirano</p>
     <p>{{ counter }} : {{ contracounter }}</p>
    <h2 v-on:mouseover="mouseOver" v-if="counter == 10" :class="{'novaboja': !checked}">"Hej majstore! Previše klikaš!"</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      naslov: 'Od backenda do frontenda uz AWS i Vue.js',
      checked: false,
      counter: 0,
      contracounter: 10
    }
  },
  methods: {
        mouseOver: function(){
            this.counter = 0;   
            this.contracounter = 10; 
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
.novaboja{
   color: red;
}
</style>

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

No, prije svega toga trebalo je proći uvod u AWS tj. isprobati kako radi AWS Lambda. Na taj se način kroz praktičan primjer moglo vidjeti što zapravo znači ‘Serverless computing‘.

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

# Installing the serverless cli
$ npm install -g serverless
# Updating serverless from a previous version of serverless
$ npm install -g serverless
# Login to the serverless platform (optional)
$ serverless login

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

Zaključak

U trenutcima kada bi sudionici radionice neformalno razgovarali moglo se zaključiti da svaki framework ima i dobre i loše strane tj. da zapravo rješavaju iste probleme na različite načine.

U svakom slučaju vrijeme je brzo prošlo i moglo se saznati nešto novo, a vjerujem da je i kolegama sudjelovanje na radionici, iako novo, bilo zanimljivo iskustvo i da će u budućnosti nastavljati posjećivati ovu i druge IT konferencije.

Od backenda do frontenda uz AWS i Vue.js – KulenDayz 2018

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, Ionic Framework, ExpressJS

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *