Vue.js iskustva?

Bok kolege,

Zanima me dali je netko od vas ima iskustva sa http://vuejs.org/ ?

1 Like

Kao backend developeru, Vue.js je prvi JS framework zbog kojeg mi ne padne mrak na oči kad se treba pozabavit frontendom. Evan radi odličan posao.

Da tu se potpuno slazem s tobom, no problem nastaje kad dode neki problem ili best practice necega puno je teze naci odgovor nego za recimo angular…

Ako imas iskustva jel bi mi mogao pokazati primjer di se koristi vue-router i loading bar, nesto tipa vue.js forum…

Bilo sta malo kompleksnije…

Hvala!

Nisam skužio što ti je konkretno nejasno?

Ako praviš SPA, koristit ćeš vue-router… pa, svuda.

Kad si već uzeo službeni Vue.js forum za primjer, pogledaj kako radi - na koji god link klikneš, izvrše se sljedeće 4 stvari:

  1. fadeOut glavnom containera (u suštini - fadeOut svega osim top navigacije)

  2. asinkroni poziv ka nekom end-pointu na serveru radi dohvaćanja podataka

  3. kod uspješnog odgovora servera koji vraća JSON, renderira se HTML s novim podacima

  4. fadeIn glavnog containera

Sve se vrti brzo i izgleda jako lijepo, s puno manjim loadom na server koji ispucava JSON vs da je ispucavao čisti HTML (Pjax, ako se ne varam?) ili još gore - cijele HTML stranice.

Dakle moraš imati izvor podataka, odnosno neki vlastiti API endpoint. Koristiš vue-resource za asinkrone pozive prema istom, i updateaš korisničko sučelje accordingly. Ukratko, tako radi i Vue.js forum.

Možda se pitaš koji bi bio best-practice oko strukture routera. Baci pogled ovdje, nadam se da će biti od koristi.

Ako imaš kakvih konkretnih pitanja, slobodno pitaj. Pozdrav

Ma sve je to meni jasno kako radi, ali jel ima negdje neki primjer gotove aplikacije sa sourcom da vidim kako je to vec neko napravio…

Mislim da sam te vidio na laracast forumu, tako da mislim na nesto tipa kako Jeff radi ProjectFlayer ne mora biti video samo kod koji bi proucio…

Ja upravo poceo i cini mi se kao kul stvar, i na prvu uopste nije komplikovan.

Inace oficijelna dokumentacija + Jeffrey Way :smile:

Je odlican je za neke manje stvari ali kad sam krenuo raditi cijeli sustav preko njega zapeo sam na apiu i authu nisam nigdje nasao neki dobar tutorial :confused: cekam da Jeffery izda neku seriju tutoriala di radi na stvarnom projektu.

Ali za neke male stvari provjere inputa i to je 100puta jednostavniji od jquerya, two-way binding je zakon :smiley:

Ma Jeffrey je zakon, gledao sam razne tutoriale i tutore ali definitivno niko ne zna objasniti kao on.

Naucio me je HTML/CSS sad ce i Vue.js izgleda :smiley:

https://streamacon.com/video/laracon-us/evan-you-vuejs-workshop

Sa zadnjeg Laracon-a :slight_smile:

Evo ja sam vec neka 3 projekta odradio na VueJS-u, i prijatno sam iznenadjen.

2 Ordershopa, i jedna invoices aplikacija, a poceo sam raditi i na jednom vlastitom projektu sa WP Res API-em, gdje cu pokusati odraditi jednu Single Page WP Temu.

Prilicno mocna, a veoma lightweight stvar koja ne forsira neke stvari i daje slobodu developeru.

Ajde ako napravis neku aplikaciju koja bi bila open source molim te stavit na git da vidim kako si se poslozio pa mozda pokupim nesto :smiley:

Ova WP Tema ce biti open-source ako ubrzo skupim volje da je zavrsim, odnosno pocnem, jer sam podesio samo enviroment :smile:

VueJS 2.0 je objavljen :slight_smile:

1 Like

Evo ko zeli provjeriti performanse vise frameworka

@creatifcode je pricao o nekom marketinskom izdrkavanju na nekom keynote-u, pa ako ne vjeruje keynote-u, neka pokrene ovaj benchmark.


Probajte :slight_smile:

Nije free za komercijalnu upotrebu, a sam API podjseca na React-ov.Sad ce neko reci da i React ima neke sranja oko BSD licence, ali opet tu je Preact koji je potpuno free.

Sta nudi tacno ovaj CxJS , sto nema Vue, React, Preact, Angular, Ember etc… ?

Btw sad vidim, je l ovo neki nasi momci ravijaju ?

Da, momci su iz Banja Luke, firma se zove Codaxy. Kako nisam programer, na tvoja pitanja ne mogu da odgovorim ali oni mogu https://www.codaxy.com/ :slight_smile:

Evo nasao sam i mali video info sa BL Dev Meet Up-a

//app.js

window.Vue = require('vue');

export const eventBus = new Vue();

Vue.component('left-component', require('./component/LeftComponent.vue').default);
Vue.component('right-component', require('./component/RightComponent.vue').default);

const app = new Vue({
    el: '#app'
});
// LeftComponent

<template>
    <div v-if="!isLeftHidden" class="container">
        <button @click="hideLeft">Open Right</button>
    </div>
</template>

<script>
    import { eventBus } from '../app';

    export default {
        data() {
            return {
                isLeftHidden: false
            }
        },
        mounted() {
            // console.log('LeftComponent mounted.')
        },
        methods: {
            hideLeft() {
                this.isLeftHidden = true;
                eventBus.$emit('leftHidden', this.isLeftHidden);
            }
        }
    }
</script>
// RightComponent

<template>
    <div class="container" v-if="isLeftHidden">
        <p>RightComponent contents</p>
    </div>
</template>

<script>
    import { eventBus } from '../app';

    export default {
        // props: {
        //     isLeftHidden: Boolean
        // },
        data() {
            return {
              isLeftHidden: false
            }
          },
          mounted() {
          },
          created() {
              eventBus.$on('leftHidden', function(boolVal) {
                  // console.log($vm.$data.isLeftHidden);
                  // this.isLeftHidden = boolVal;
                  // console.log(this.isLeftHidden);
              });

          }
    }
</script>

Malo fali, puno škodi.

Na klik u LeftComponent odradi:

  1. Skloni template-a same komponente is browser-a (što i treba),
  2. Emituje kroz eventBus vrijednost (što i treba),
  3. U RightComponent stigne tačna vrijednost (što i treba)

Problem je što ne update-uje v-if u RightComponent
Prob’o sam kombinacije sa props, data, mounted, created. Svugdje mi primi varijablu iz emitera al’ ne izmijeni stanje u template-u (evidentno pogrešne i/ili nepotpune kombinacije).

Ne dešava se a trebalo bi:

  1. Prikaže [inicijalno skriven] RightComponent pri LeftComponent button click

this this this :smiley:

created() {
   eventBus.$on('leftHidden', boolVal => {
       this.isLeftHidden = boolVal;
   });
}

Mislim da ti detaljnije obrazlozenje ne treba :slight_smile:

1 Like