API Calls in Vue.js with Deniz Gürsoy - VUE 197
Today we talk with Denise Gürsoy, a full stack developer from the Netherlands, currently working as a GO developer. We discuss his Medium article about implementing alternate methods of calling APIs in Vue.js.
Hosted by:
Charles Max Wood
Special Guests:
Deniz Gürsoy
Show Notes
Today we talk with Denise Gürsoy, a full stack developer from the Netherlands, currently working as a GO developer. We discuss his Medium article about implementing alternate methods of calling APIs in Vue.js.
Sponsors
Links
Picks
- Charles- Irish Gauge
- Charles- JavaScript Remote Conference 2022
- Charles - How to Stay Current Course (coming soon)
- Charles - Book Club for developer books (coming soon)
- Charles - Coaching | Top End Devs
- Charles- I Am Not A Serial Killer (John Cleaver, 1)
- Charles- The Lord of the Rings: The Rings of Power - Season 1
- Deniz- Ocean's Twelve (2004) - IMDb
Transcript
Charles Max_Wood:
Hey there and welcome to another episode of Views on View. This week I'm your host Charles Maxwood. I'm filling in for Steve. He's out of town this week, but I am talking to, is it Deniz?
Deniz_Gürsoy:
Deniz Yes.
Charles Max_Wood:
Um, and uh, yeah, do you want to just introduce yourself real quick? Let people know who you are and why you're famous, all that good stuff.
Deniz_Gürsoy:
Ben full stack developer'ın birisi. Son işim back-end developer ama hep full stack yapıyorum. Türkiye'den geldim ama 3 ay önce Nereli'ye geri döndüm. Ve şu an Go developer'ım.
Charles Max_Wood:
Cool, so you're doing Go?
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
Very cool. So yeah, so you wrote this article then. Oh, this is back in July. So you just barely changed jobs?
Deniz_Gürsoy:
Actually my focus was to relocate to Netherlands and
Charles Max_Wood:
Oh,
Deniz_Gürsoy:
I
Charles Max_Wood:
okay.
Deniz_Gürsoy:
also like Go. So
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
I found a job and then I just switched the job.
Charles Max_Wood:
Very cool. Okay, well, let's jump in real quick and talk a bit about API calls. Now, you have kind of a different approach to doing API calls. So do you wanna just real quick explain how most people do it and what the problems are, and then we can dive into how you do it and how that's different?
Deniz_Gürsoy:
Okay, actually I would like to give brief introduction about my JavaScript experience
Charles Max_Wood:
Uh huh.
Deniz_Gürsoy:
first
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
because this lead me to this article actually.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
So I was a Java developer but I was just doing desktop application but I always had a passion to develop websites.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Even in the undergraduate, in my undergraduate study I always had the passion. Ama ilk işimde hiç bir şans yoktu. Ama ben kendimden Reakt'ı öğrenmeye başladım. Ama Reakt'ı öğrenmek için çok büyük bir yanlış yaptım.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
Çünkü, JavaScript'i iyi bilmiyorsunuz ve bir framework'a ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince ince in bir şey bilmiyorlardı. Büyük bir fonksiyon kullanıyordu. Bir şey import yapıyordu ve Redux'u kutluyordu. Gerçekten anlamadım ama okudum.
Charles Max_Wood:
okay
Deniz_Gürsoy:
O yüzden işini buldum. Ama React'in yerine Angular kullanıyordu. O yüzden Angular'ı öğrenmeye başladım. Then I coded with Angular for six months. Yani bu Javascript'den farklı bir dil. Yani Javascript'i de öğrendim.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Sonra başka bir iş buldum. Vue.js'yi kullanmışlardı. Vue.js ile tanışamadım. Ama daha fazla öğrenmek istedim. Ama yeni iş... bir şeyi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeyeceğimi ödemeye
Charles Max_Wood:
Mm-hmm. Okay.
Deniz_Gürsoy:
So I spent quite a lot of time with learning Vue.js, Java scripts itself, and then Jest library.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
So when I was writing, I was writing a lot of tests, and then things become quite complicated actually. So in our team, there were a lot of developers. We used to work in pairs, but sometimes people used to call some APIs and then they... they didn't implement their mocks for calling APIs. So when you want the test, just test, and then if the test give some errors, throw some errors, then if the just gets four error consecutively, it just stops. So we used to have a p-req commit hook. We were supposed to... her şeyi komit ettikten önce tüm testleri çalıştırdık. Ama 4 ilaç soruları alırsa, başlamıştı.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
So then at that time, we couldn't commit our code. So I was into investigating how this is happening. Then I realized that some people, some developers in our team used to call some APIs on the mounted hook or on the created hook, but
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
they didn't mock it.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
So since they forgot it, Aslında kodda Jess gerçek bir rüksü göndermek için gerçek bir server deneyimledi.
Charles Max_Wood:
Right. I like it when my tests do that.
Deniz_Gürsoy:
Ve sonra Jess aslında tutukluydu. Ama Angular ve React'dan Vue'ye değiştirdikten sonra çok fazla şey sevdiğim var aslında. İlk şey sevdiğim is that you don't need to import some functionality from another library, like in React, you need to import React or router. But when I switched to Vue.js, I realized I don't have to import anything. So, for example, if you want to change the route, you don't need to import anything in Vue. And if you want to commit something to store, veya data from store'a gelmek istiyorsanız, hiçbir şeyin import yapmamız gerekir. Sadece dollar store, dollar route, dollar router denir. Bu, mesela, bu, Vue'ye ilgili sevdiğim şey. Ve bence, Vue'yi de kullanmak daha kolay, ve Vue'yi de kullanmak daha kolay. So we used to stuck with Jest because they were not mocking anything and they used to forget it. And then I suddenly realized that why I don't call my APIs like a regular plugin in Vue.js because the router is a plugin, store is a plugin and root is also plugin. So
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
I told myself why I don't implement a plugin. Then I... inject my functions to that plugin and then I can call my API through that plugin.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
So before coming to the Netherlands, I talked to my company and I said I have an idea like this and I also want to convert everything here to... bir plug-in ile bir test yapabilirsin. Ve sonra onlar dedi ki, tamam, bunu yapabilirsin. Eğer daha iyi olduğunu düşünürsen, bunu yapabilirsin. Sonra, onu değiştirdim ve bu test ererleri çıkarttık. Çünkü eğer bunu üretmek istersen, ve testi çalışırsan, test
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
sana, bilmiyorum bir fonksiyon var. O yüzden, bu sefer
Charles Max_Wood:
Right.
Deniz_Gürsoy:
gerçek API'yi alamıyorsun. Test, bir erer yapar. İmplementasyonu daha fazla kapanamazsınız. Bu aslında ideaydi.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
Ve bunu çok iyi yaptık. Gerçekten çok iyi yaptık. Ve bu da hızlıca yansıtılıyor.
Charles Max_Wood:
Gotcha, so effectively what you did is you said, okay, well let's put our API calls into a function.
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
And then, yeah, when you run your test, it says, hey, I don't know what that function is.
Deniz_Gürsoy:
Yes, actually, yes. If you like, I can dive deep into my article.
Charles Max_Wood:
Yeah, well, I'm a little curious how you put this together as far as just a plugin or you.
Deniz_Gürsoy:
Uh... sorry.
Charles Max_Wood:
So when you say a plugin, is it just another file in your project?
Deniz_Gürsoy:
No, plugin is an actual object. Object
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
is an object which is injected to every view component.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
So if you write a plugin, it means that it is injected to every view component. So you
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
can directly reach that plugin to in every component
Charles Max_Wood:
Right.
Deniz_Gürsoy:
without
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
doing anything.
Charles Max_Wood:
So the other question I have then is how do you get everybody to use this methodology instead of the other?
Deniz_Gürsoy:
Aslında, birçok fonksiyonu kullanmadan birçok fonksiyonu alabilirler. Ama ben arkadaşımla konuştum.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bu arada, ben arkadaşımla konuştum. Ve ben de, tüm şartlarını tıpkı değiştirdim. Benim ürünlerimle bir mesaj aldım. Ve ben onlara, arkadaşlar, böyle bir şey yaptım. Bu yüzden, bence bu çok fayda verici. and you should use it like this or I showed how to write test. I also showed them how to write new API call, and
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
I also showed them how to use it in a view component.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
So they also had some ideas and they also had some questions and we went through all of them and then they also liked it and they are still using it.
Charles Max_Wood:
Okay, cool.
Deniz_Gürsoy:
Ama herkes bunu kullanacak bir garantisi yok. Eğer kullanmıyorlar, diğer altyazı var.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Altyazı.
Charles Max_Wood:
So the other question I have is, you said it's a plugin, so is this available as like an NPM package or something that I can add into my projects, or is this just an internal system that you're using right now?
Deniz_Gürsoy:
Actually, before writing this medium article, my plan was to make it a third party application, third party library. But this
Charles Max_Wood:
Right.
Deniz_Gürsoy:
is actually a mistake that I didn't write it because if I had written it, people used to start using it actually. But I didn't make it a third party plugin. Bu konuda, ben bunu çeşitli olarak nasıl yapacağımı gösterdim. Bu yüzden, herkes kendi plug-inlerini tanıtabiliyor ve kullanıyor.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
Bu konuda, ben bu konuda, asla gerçeklerine sahip olmaya çalışıyorum.
Charles Max_Wood:
That makes sense. All right, so you're putting these fetch calls into your fetch. into these functions and it looks like you're actually defining them as uh... like some of these i see effectively and maybe i'm just seeing steps to this right where you have a function uh... called like get character get person or whatever
Deniz_Gürsoy:
Yes,
Charles Max_Wood:
uh...
Deniz_Gürsoy:
yes, yes. Actually, I can talk about... I was coming from the Java world when I switched to web development, and I was always curious about how these people are consuming some APIs. So when I was looking for API consuming libraries, I learned that there is a fetch API. So this is a build in library. her browser'ın seni yapabiliyor. Sonra XCS'nin bir ünlü bir altyazı hakkında öğrendim. Bu çok güçlü bir altyazı, çok fazla iletişim var. Birçok interseptör yazabiliyorsunuz ve
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
röportajlar ve tepkiyi, bu şekilde bir tür midelware altyazısını yapabilirsiniz.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Ama her zaman bir API almanız gerekiyor mu? Aynı API almak için ne yapabilirim? Bütün bağlantılarımı beraber almalı mı? Aynı URL almalı mı? Bu soruyu sordum ama sonra de o yaptım.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Evet, eğer onları bir fonksiyonla alıp, ve sonra eğer ben de eğer ben de aynı telefon yapmak istiyorum, fonksiyonu alabilirim, fonksiyonu bir file'den alıp, ve sonra fonksiyonu alabilirim. Ama en büyük şansı burada,
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
fonksiyonu yazarsanız, sadece argüman olarak ihtiyacınız olan parametre alabilirsiniz. Ve sonra Fetch, Axis veya her şeyin var. Apti call yapmamız gerekiyor. Apti calls'ı yapmadan önce, dummy JSON data'ı da geri dönüyor. Apti calls'ı bir fonksiyonla yazın.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Apti call'ı bir fonksiyonla yazın. Bu aslında bir ekran yapar. Farklı bir fonksiyonu alırsan, sadece adı ve argümanı bilirsin. Nasıl yapılırsa bilmiyorsun.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Yani insanlar fetch API'yi kullanabilir, veya Axios'u kullanabilir. Bir de fetch API kullanan insanlar, ve Axios'a değiştirmek istiyorlar, mesela.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bu sebeple, sadece yapmaları gerektiğini yapmalar, Farklı bir fonksiyonu değiştirmek için her vüya komponatları
Charles Max_Wood:
Right.
Deniz_Gürsoy:
ve her şeyi değiştirmek için, farklı bir fonksiyonu değiştirmek için.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Yani API telefonu bir fonksiyon yapmak,
Charles Max_Wood:
That makes sense.
Deniz_Gürsoy:
bir ekranı verir. function name and if you select good names for Your arguments name and it makes it more usable So it was nice actually it was It was better Alternative than right making writing same URLs many times if you call the same API So if you wrap it in a function, this is a better implementation but the problem arises when you bir test yazmalısınız. Çünkü her bir test yazmalarınızı komponantlarınızda her bir test yazmalısınız.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Bu da çılgınca bir şeydi. Eğer test alışverişi yaparsanız, bu çok zaman alır. Çünkü komponantlar itselfde Let's say you are making five different calls to five different APIs. So you need to import five functions to your component. And in your test, you need to make five import mocks in your test file. So
Charles Max_Wood:
Right.
Deniz_Gürsoy:
this is too much effort actually. Let's say,
Charles Max_Wood:
Right. And
Deniz_Gürsoy:
okay,
Charles Max_Wood:
those import
Deniz_Gürsoy:
you write
Charles Max_Wood:
mocks
Deniz_Gürsoy:
it.
Charles Max_Wood:
are just, they have effectively the same function name. They just return the JSON data without making
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
a call to the back end, like we said before.
Deniz_Gürsoy:
Yes. O yüzden problem, testi yazmadan önce yazılır. Bir kez yazabilirsiniz, tamam, çalışıyor. Ama, bir kere daha bir şey yapmalısınız.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Yani, bir şey değiştirmek istiyorsanız, bu da bir problem. Eğer testi kullanırsanız. Yani, ama, by the way, Vue.js yazdığım zaman, ben de, Eğer testi kullanırsanız, siz de, birçok uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulamak için uygulam Tests'de komponatı montajlamadan önce yazmalısınız. Mokt komponat metodunu montajlamadan verirseniz. Ve sonra test istansını verirseniz. Mokt plug-insi var. Mokt plug-insi de kullanıyordum. I was also mocking the plugins actually. And then I decided, yeah, if I do something like mock API, and then I can mock it easily in the beginning, and then I don't need to worry about mocking the imports actually. So this was my idea. ve son şirketinize ve son şirketinize de iletişim yaptım ve onlar de beğendiler ve başlattılar.
Charles Max_Wood:
Cool, so... Yeah, I'm trying to just get my head around this a little bit. So effectively what you're saying, and I'm just looking at the article here, you know, you basically have a... describe call and then you have a wrapper that you put on it with the mocks that you're calling, right?
Deniz_Gürsoy:
Yes, yes.
Charles Max_Wood:
And then
Deniz_Gürsoy:
And.
Charles Max_Wood:
effectively that does the import with those mocks and you're good to go.
Deniz_Gürsoy:
Yes, yes. Another advantage of this approach is, for every resource, in the REST implementation, actually, we have a JavaScript file which has those methods, like those functions that makes the actual API call. So for every resource, we used to have a client directory. And for every resource we used to have a file for in the article for example I have For example people Client and plane planet clip client for example
Charles Max_Wood:
Right.
Deniz_Gürsoy:
so When you go to client directory you can see the all functions all api calls, but If you also divide it by resource by resource to other files, it also makes development easier. So if you have a problem with the People API, you can just go People.js. If you have a problem with Planet API, you can just go client directory and see the Planet.js, for example.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Bu da daha iyi okuyacak. Yeah. And then after implementing this in my last company, I decided to share this idea with the people all around the world. And then I wrote my article. Bu artikelde, ben de bu kadar
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
yapmak istemedim. Asla yapmamalıyım. Ben de bu yapımı yapmaya açıklamak için açıklamak için açıklamak için açıklamak için Her resmi resansın bir JavaScript file var. Her JavaScript fonksiyonun içinde,
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
her JavaScript file'in asıl API altyazı yapımı olan fonksiyonlar var. Ve başka bir JavaScript file var, Plugin yandı. Bu plugin bu klien direkteri için tüm fonksiyonları alıp alınan tüm fonksiyonları alıp alınan bu direkteri için her fonksiyonları alıp alınan bu planet.js ve people.js filanlar ve bu plugin bu Bu da bir maçın nesi olduğunu düşünüyorum. Bu plugi'nin, dollar api'nin her api'nin bir kutu ile plugi'yi tanıtıyorum. Bu kutu her metodun ulaşabiliyor. Bu dollar api sadece bir mesele. Bu mesele içindeki her metodun klient direkterinin altında bulunuyor. O yüzden, her bir fonksiyonu klient direkteri altında ekledim.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bir objekte, sonra bu objekte her bir komponantta bir sahip olup, ve bu objekte Dollar API olarak ulaşabilirsiniz.
Charles Max_Wood:
Okay. Mm-hmm.
Deniz_Gürsoy:
her komple içine ulaşabilirsiniz.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
So and then you need to go to your view application and then you need to say just view.use this and then you need to give your API, your plugin. Sorry.
Charles Max_Wood:
Yep, makes sense. And I can see where you're showing how you inject that plugin
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
in your article.
Deniz_Gürsoy:
Yes, since this is as I told, since this is not a third party plugin, I didn't write it. So I, I wanted all my audience to see the code and make their own implementation. So I also wrote everything that they need.
Charles Max_Wood:
Right, that makes sense. So the other things that I'm kind of wondering about here are I think it would be nice to be able to share some of the details. For example, most of the examples that I'm seeing for API calls, you've got the fully qualified URL, right? So it's HTTPS colon slash slash domain slash people slash ID. And what I'm
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
wondering is, in a lot of cases, if I'm working in development, then I don't want that URL. I want localhost 3000 or something else, right, where I'm calling to a development dealio. So would you just set that up as config on the Vue app object and then just call it from your API plug-in? Or how do you manage that kind of a thing?
Deniz_Gürsoy:
Bu konuda bir 3 parçaya sahip olmalı. Bu konuda bir 3 parçaya sahip olmalı. Kullandığınız plug ini hazırlayan zaman, v.use'ye gelin ve base uraşma vermeyebilirsiniz. When I make a third party plugin, you should, you can give some configurations to the plugin and then I will be able to use that configuration in the functions. But at the moment there is no such an option. So instead of, it is hard coded here. So
Charles Max_Wood:
Right.
Deniz_Gürsoy:
the... HTTPS and domain and the actual base URL is hardcoded here. I did it for the sake of the medium
Charles Max_Wood:
Right.
Deniz_Gürsoy:
article actually. I wanted to make it simpler, but they can My the users can Define the base URL in some other JS file and they can import it here. Maybe they can also if they are using Axios for example Instead of writing some domain like this, HTTPS and domain,
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
they can just write a URI. Actually, they can say people slash ID. And then
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
in the axis, with the help of an interceptor, they can add base URL to it.
Charles Max_Wood:
Okay, that makes sense. The other thing that I'm wondering about is sometimes I have to pass like a token, like an auth token or something like that back, that's not necessarily just another parameter. So maybe it goes in the header, maybe things like that. I guess you could put those in those functions, but in a lot of cases that has to be shared too and I don't wanna pass it down every time.
Deniz_Gürsoy:
Actually, I would again use interceptor like some
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
XZ interceptor like that. If you know the parameter, if
Charles Max_Wood:
Right.
Deniz_Gürsoy:
you want to pass the token to, you are starting with for example slash odd. So you can just intercept it and then add your token for example. veya sadece bir parametre olarak alabilirsiniz.
Charles Max_Wood:
Right, okay, that makes sense. I mean, I have to say, I don't love like straight up token authentication on the front end, right? Because you can usually, you know, you can usually sniff it out if, you know, with your dev tools or find it in the front end code if you can deobfuscate it or things like that. So it's not. It's not the best way to go, but yeah, occasionally, I find myself either generating some kind of token or retrieving it from some third party service, or a lot of times they're just stored in the cookies and the backend's encrypted it, and so the backend knows what to do with it. But yeah, I was just thinking, okay, well, yeah, some of this stuff's gonna have to get passed down, and sometimes it expects the client. to intervene and make sure that that information is there as opposed to just saying, oh I pass the cookies back and forth every time. So yeah, I was kind of looking at something like that. But that makes a ton of sense too. So um. Yeah, I usually ask about testing toward the end of the show, but we've already kind of covered that. So what overall has been your experience then doing this? It sounds like you've gotten a bunch of the people you work with on board to do this, and it saved you some issues as far as, you know, your setup goes. But are there any other advantages or disadvantages to this that we haven't discussed?
Deniz_Gürsoy:
Actually there are many advantages but the biggest advantage here is the abstraction of the call from
Charles Max_Wood:
Right.
Deniz_Gürsoy:
the implementation.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
So you are just calling your function and inside the view component you don't know anything about
Charles Max_Wood:
Right.
Deniz_Gürsoy:
how it is implemented. But there are some issues in the development as well. So Diyelim yeni bir proje başladığında ve bakan hazır değil. Belki de bir şey yaparsınız ama bakan hazır değil. Bu implementasyonda kendi bir fonksiyonu yazabilirsiniz. Bütün yerlerde kullanabilirsiniz. Bakan hazır. Dummy data'ı geri dönürseniz.
Charles Max_Wood:
Right?
Deniz_Gürsoy:
Bakan için beklemelisiniz.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bakan hazırsa, bir fonksiyon sadece. O zaman her şey hazır olacak.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Bu aslında bir bir avantaj yapmak için yapılan bir bir ekran yapmak için yapılan bir böyle bir bir avantaj. Bir değişiklikle ilgili daha az bir refaktörü yapmak için.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bakan enginyeri, mesela bugün benim işimde, bu durumları URL'da bir adım var.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Bu yüzden bugün, öncükte...
Charles Max_Wood:
I've never done that. I'm usually writing back-end code too.
Deniz_Gürsoy:
Ama bugün benim önceden arkadaşım bana, ah burada bir typo var. Yani kodu değiştirmek için, sadece bu iletişim yaparsan, sadece bir fonksiyon değiştirmek için. Belki de bakan değişebilir. Yani her bir değişme olasından, çok fazla kod değiştirmek için. herhangi bir değişimde daha fazla refaktör yapmak zorundasınız.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Ama en büyük şansı burda bir şey import yapmak zorundasınız FUNC, VUE komponent, JEST filanlar da. Yani testlerinizde her şeyi kutlamak zorundasınız. Import yapmak zorundasınız. Özellikle testlerdeki import yapmak zorundasınız. Ve sonra, eğer testi zamanı mok implementasyon yapmanız gereken bu kez de bir daha fonksiyonu iletmeniz gerekiyor. Fonksiyonu iletmeniz gerekiyor.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Fonksiyonu mok olarak. Ama bunu değiştirmelisin. Bunu değiştirmelisin. Bunu tekrar iletmeniz gerekiyor. Bu çok ihtiyacı yok. Bunu iletmeniz için bu konuda gerek yok. Eğer sadece change the mock value when you are running your test. For example, let's say you want to change your code after mounting your component. You want to change the return type of your API call. In this case, you just need to go to wrapper and then you need to say dollar API and then you need to write your function name and then you just need to... ve o zaman mok return value'ı değiştirebilirsiniz. Bu yüzden yapmanın tek bir şeydir.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Ama bunu kullanmadan sonra mok import'ı yapmanız gerekiyor. Ve sonra mok return value'ı değiştirebilmek için mok import'ı yapmanız gerekiyor. Bu aslında çok fazla bir konu.
Charles Max_Wood:
Right. So the other question that I have is, do you ever write some of these API call functions in terms of each other? So I'm imagining you've got planets, and then maybe you have desert planets. So it's not just planets, but it's get desert planet or get. uh... forest planet right? You used star wars references in here so I'm thinking like the moon of endor versus Tatooine right? you know uh... sometimes that kind of abstraction makes sense and sometimes it's just you know what we give you the option to give us the planet type so just get planet with the planet type but occasionally I just get to the point where I've got you know get planet with type blah all over the place and so It's just like, okay, get Desert Planet, and I'll just make one. Do you do that much, or do you find that this is usually sufficient to not have to abstract further?
Deniz_Gürsoy:
Aslında, bence sadece başka bir fonksiyon yazabilirsiniz. Klinik kod planlarında aslında. Sadece adını yaparak ne yaparız olduğunu anlayabilirsiniz. Bu konuda kod yazmayı devam edin.
Charles Max_Wood:
Right.
Deniz_Gürsoy:
Bu yüzden daha çok fayda verilecek. function and you can use it actually. Uh... okay.
Charles Max_Wood:
Cool, is there anything else that we should talk about
Deniz_Gürsoy:
Evet, aslında bu tüm fotoğraflar.
Charles Max_Wood:
with this then?
Deniz_Gürsoy:
Ama bu ilmeği için çok fazla ilerlemeliyiz. İlk olarak, bu 3. parçanın plug-in olduğunu düşünüyorum. O yüzden kendi plug-inini yazmamız gerekiyor. Ama bu ilmeği için, 3. parçanın plug-in yoktur. Her zaman yeni bir resursi eklemeniz gereken plug-inini değiştirmelisiniz. because this is
Charles Max_Wood:
Right.
Deniz_Gürsoy:
not a third-party plugin. So every time you have a new resource, you need to change the plugin and insert the functions in that resource. But my plan is to make this as a third-party plugin, as a third-party library, and people can use import library and just give some, just pass some configuration to it, and then... They don't need to change their plugin all the time.
Charles Max_Wood:
interesting. I'm a little curious what that would look like because you know my endpoints you know with REST or whatever may be structured different from yours right so would some of the config essentially say our API endpoints like with path and things follow these conventions right and so then it's just smart enough to generate the functions to call like getPlanet or getCharacter on its own or are you thinking about it in completely different terms?
Deniz_Gürsoy:
Actually my plan as far as I thought about it There will be a plugin you will just say you will just import it in your main JS and then you will just say view.use to that plugin
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
and When your application starts, it's going to go through the client client directory and it will read all the JS files and import the
Charles Max_Wood:
Oh,
Deniz_Gürsoy:
functions
Charles Max_Wood:
okay.
Deniz_Gürsoy:
directly to the plugin so as long as you
Charles Max_Wood:
I gotcha.
Deniz_Gürsoy:
As long as you write your functions inside the client inside that specific directory, I also want to make it changeable to the users that people people may want I don't want dollar API for example, but He may he may he or she may want to name it someone else for example you may say I want this like product service for example dollar product service so I want to give flexibility to the users so I they can do whatever they want but the other improvements that needs to that needs to be made here as you told there is no base URL here so
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
you cannot pass the Buradaki baselörlere basın. Ama benim sorumlu bir sorumlu bir sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu sorumlu bu funktiyonları varlığına bir varlığa bir varlığa bir varlığa bir varlığa bir varlığa
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
bir varlığa bir varlığa bir varlığa bir varlığa bir varlığa bir varlığa bir varlığa Go to function and then you need to say this.baseUrl So I can pass those values by binding this by binding another object by changing to this variable this variable inside the function but third party plugin should do it itself actually
Charles Max_Wood:
Right.
Deniz_Gürsoy:
there is no implementation in this article but third party plugin can do this so Bu yüzden bazı soruları almak için hiçbir şey değişmem gerekiyor. Eğer sadece bu.baseURL'i söyleyerek, bu sorunu alabilirsiniz. Bu da başka bir iletişim olacak.
Charles Max_Wood:
Right, that makes sense. So effectively what we're talking about is we put this plugin in place and it takes care of all the imports for all the functions for you, right? So you still
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
would write them, you'd still put them in that folder, and you're in charge of formatting the URL properly and all that good stuff.
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
And then any common configuration would also be part of the plugin, right? Like the base URL or... authorization tokens or things like that would all kind of fit into that same box.
Deniz_Gürsoy:
Evet, aslında benim planım bu fonksiyonları da alışveriş yapmak. Bazı ürünleri alışveriş yapmak gibi, burada alışveriş yapmak istedim.
Charles Max_Wood:
Mm-hmm. Mm-hmm.
Deniz_Gürsoy:
Mesela, mesela alışveriş yapabilirim. Yani bu fonksiyonlara alışveriş yapabilirim. Mesela insanları alışveriş yapmak için bu fonksiyonu alayım. Tamam.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
bir
Charles Max_Wood:
Right. Mm-hmm. Right, so effectively you have an adapter for like, view
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
X or something.
Deniz_Gürsoy:
Yes.
Charles Max_Wood:
And so then it's, hey, I know JSON, so all I have to know is where in the store to put it.
Deniz_Gürsoy:
Evet. Ve sonra, bu adımda, bu adımda, mesela, sadece bir kutu alabilirsiniz.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Sadece bir kutu alabilirsiniz. Ve sonra, komponansınız daha da okumakta, daha da kolayca gelişebilirsiniz.
Charles Max_Wood:
Makes sense. Well, sounds good. You'll have to let us know when it's out.
Deniz_Gürsoy:
Teşekkürler. Ben de asap yazmak istemiyorum. Ama diğerlerinin de, eğer onlar bu fikrini beğenirse,
Charles Max_Wood:
Nice.
Deniz_Gürsoy:
bir yeni grup başlayabiliriz, belki github'da. Ya da her yerde, yeni bir organizasyon başlayabiliriz.
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
Ve sonra kod yapabiliriz, eğer onlar bu fikrini beğenir.
Charles Max_Wood:
Very cool. Well how do they get ahold of you if they want to participate?
Deniz_Gürsoy:
Aslında, benimle medyada ulaşabilirler. Ayrıca, sadece yorumlara bırakabilirler. Böylece, github organizasyonu başlayabiliriz. Bilmiyorum, insanlar ilginç mi, değil mi? Eğer, bazı insanlar bunu yapmak istersem, bunu yapmak isterim.
Charles Max_Wood:
Cool. Sounds good. Well, I'm going to go ahead and move us on to the next segment of the show, which is our picks, which is just us shouting out about stuff we like. I'm going to go ahead and go first. And the first shout out I have is, now, I'm not typically on this show. So I usually start out with a pick of a board game or a card game, just because that I I freaking love playing games. And so I think I'm just going to pick the latest one that I was introduced to that I picked on the other shows and that is Irish Gauge. Now Irish Gauge is a train game and essentially what you wind up doing is, so you start out with some money and then you all bid on stocks for a train. train line, right? And so anyway, everybody usually winds up with one or two stocks, right? And so then every time there are dividends from the train line, you get paid. And then on each of your turns, you can build trains onto your line, and you're trying to connect cities because you get paid your dividends based on how many cities and how large the cities are that you connected to with your train lines. So you can build trains, you can call for dividends. There were like two other things you can do, I can't remember. Oh, you can auction off another stock and they have a minimum price and so you have to be able to afford the minimum price because if nobody else bids, then you have to eat it. And then there was something else. Anyway, but that's effectively it, right? So then you just build the trains out and. Oh, you can upgrade a city. So
Deniz_Gürsoy:
Thank
Charles Max_Wood:
some of
Deniz_Gürsoy:
you.
Charles Max_Wood:
the cities have little colored cubes on them and that determines which ones pay out for the dividend. But not all of them have cubes and so you can put a cube on the city. You can put a color on it. And that way it pays out double when that color's pulled. So anyway, so that's, I mean, that's effectively the game. Obviously, you know, there's some strategy to playing it. But yeah, so when I pick the games, I usually shout out the weight on Board Game Geek. And just to give you a little bit of a rundown on what the weight means. So Board Game Geek ones are super lightweight, right? So it's the super duper simple games, kind of like your Go Fish or something, right? really easy rules, you can play it with your six year old or whatever, right? 2s are kind of the average gamer, right? So, you know, Monopoly, I think, clocks in pretty close to a 2. You know, no, I think it clocks in a little over a 2, but most of the games that are kind of the traditional games are a 2, right? Because the rules are pretty simple, you don't have a ton of moving pieces. And so, you know, that's kind of where this one comes in. It's 2.36. So, you know, just about anybody, even if they're not really into complicated games, could play this, right? And then the threes, fours, and fives just have a lot of pieces. They have a lot of rules, stuff like that. But Irish Gage, its instructions to play are one page front and back, and that's it. So
Deniz_Gürsoy:
here.
Charles Max_Wood:
you can imagine that it's a relatively simple game to play. And it was really fun, took us about an hour to play it with five of us. And so yeah, so I'm going to shout out about that. What else do I want to pick? I am putting together conferences, online conferences. If you listen to this show, you're probably gonna start hearing ads for the conferences and things like that. So a few things that I'm putting together for programmers, and then I'm gonna pick a book and some other things. So one, JavaScript Remote Conf is coming up in November. And so if you, the listeners, want to participate in the conference, it's completely online. We're going to have some time for you to just network with other people using the software we're using. Looking to have some sponsors there so you can check out what they offer to programmers. And it should be a good time. Should be a really good time. We're going to run it all week. You can get tickets for the first two days. You can get tickets for all the talks in the first four days. And then we're going to have workshops on Friday. So if you want to submit a talk, you can through most of October. If you want to get a ticket you can. It's jsremoteconf.com or you can find it on topendevs.com. And yeah, it'll be super fun. And then a few other things that I'm putting together. I'm putting together a how to stay current course because I have people ask me all the time. How do I stay current? And usually it's how do I learn the stuff that's gonna get me a raise, you know, get me a better job, get me to wherever I wanna go in my career. And so I'm putting that together. I'm doing a pre-sale that's half price. It's $47. And then afterward, it'll be full price. The other thing is, though, is that with the pre-sale, I'm throwing in a weekly Q&A call. And so this helps me kind of refine the content for the course, but it also allows me to help folks out. And we'll just stay on as long as I can, basically, or until we're out of questions every week. And so we're going to put that together. And I'm launching that on October 20th. But you can sign up now. The presale ends in October. So there's that. I'm also putting together a developer book club. And I'm still working out which book. I think I'm just going to pick a book and an author. And the author will be somebody I already know that I think I can get to show up every week. And again, we'll do a Q&A call every week. We'll have members of the book club join the call and we'll kind of rotate you all through. So if you have something to say about a specific part, something you like, things like that, we'll probably do that. I have a really good relationship with Bob Martin so I'm kind of leaning toward one of his books. But I also have a good working relationship with Kent Beck and some other folks. That's kind of the direction we're heading there. And yeah, that's pretty much it. I am looking at doing a view conference next year, but I don't have dates, and so we'll just wait and see on that. And then. If you want coaching, it's the other thing, right? So I do offer coaching, again, as weekly calls, but we get a little more in depth and it's a smaller group. I limit it to 10 people. And so I can make sure that every week we're getting into your issues and helping you get what you want from your career, right? So if it's, hey, look, I'm trying to get promoted to team lead, or hey, I'd like to figure out how to get more freedom, or you know what, I'm a senior developer and I'm not sure where to go next, right? Or I'm a junior developer, and I can't quite figure out how to crack the barrier into senior developer. I mean, I've done all those things. I've done some of those in unconventional ways that kind of open up opportunities, and so we're getting into that. So those are my picks there. And then I'm just going to throw out a fiction book. So I've been listening to these books by Dan Wells. The first book's called I Am Not a Serial Killer. And. The main character has psychopathic tendencies. He's fascinated by serial killers and then somebody starts killing people in the town he lives in. He's like 16. It's him kind of tracking down the killer and figuring out what happened. It has a supernatural element to it but I'm not going to spoil any more of it because I think... That's kind of what makes it fun, is when you hit that twist. Anyway, I am not a serial killer by Dan Wells. I'm currently on the third book and I'm enjoying that. So I'm gonna pick that. And then my wife and I have been watching Rings of Power. The jury's still out on that. For me, it's interesting, but it feels like they've just got too many things going too many different ways. And I kind of want them to pull it together soon so that it's kind of all one story. But that's just me. I usually give them the full season to win me over or have me decide, you know what, season one was enough. So we'll see how that goes. But those are my picks. Denny's, what are your picks?
Deniz_Gürsoy:
Actually, no. these days I'm trying to discover the old movies that I watched actually
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
so I'm trying to catch some details that I haven't seen before and yeah and I was watching Ocean 12 I think in 12 they comes to they come to Netherlands and Sonra ben de, bu çok ailemizdi. Bu günlerde, sadece eski filmler izliyorum ve öğrenmeye çalışıyorum.
Charles Max_Wood:
Okay.
Deniz_Gürsoy:
Veya, insanları bile izlemediğim şeyleri izlememiştim.
Charles Max_Wood:
Yeah, that makes sense. I've watched Ocean's 11, I haven't seen the other ones, Ocean's 12, 13, or eight, so.
Deniz_Gürsoy:
Yeah.
Charles Max_Wood:
But cool. All right, and then I know I asked you before, but again, if people want to ask you questions about this approach or participate in open source with you, how do they find you online?
Deniz_Gürsoy:
They can go to my github or you can are you sharing this medium post?
Charles Max_Wood:
Yeah, it'll be in the show notes.
Deniz_Gürsoy:
Okay, they can They can go to medium post or I can share my Email with you or
Charles Max_Wood:
Mm-hmm.
Deniz_Gürsoy:
github profile with you so
Charles Max_Wood:
Yeah,
Deniz_Gürsoy:
they can
Charles Max_Wood:
just
Deniz_Gürsoy:
read
Charles Max_Wood:
go ahead and share your GitHub and then they can send you a message on there.
Deniz_Gürsoy:
Okay, okay.
Charles Max_Wood:
All right, well, we'll have that in the show notes too. And yeah, we'll wrap it up here. Till next time, folks. Max out. I'm gonna...
API Calls in Vue.js with Deniz Gürsoy - VUE 197
0:00
Playback Speed: