Ana sayfa Genel Vue.js ile Web Uygulaması Geliştirme

Vue.js ile Web Uygulaması Geliştirme

1338
88
PAYLAŞ

Son zamanlarda, özellikle de web alanında, yeni teknolojiler daha hızlı artmaya başladı. Bu da React, Angular gibi görece yeni teknolojilerin piyasayı kolayca domine etmesine yol açtı. Artık yeni teknolojiler arasında sürekli gidip geliyoruz, “Hangisini hangi projede kullansam” diye.

Vue da bunlardan biri. Gerek esnek yapısı, gerekse kolay öğrenilebilir olması arkasındaki destek Angular (Google) veya React (Facebook) kadar fazla olmasa da Vue.js ile yapılan proje sayısının gün geçtikçe artmasını sağlıyor.

Bu yazıda Vue.js’i tanıyıp muadilleri ile kısaca karşılaştıracağız. En son da basit bir-iki örnek göreceğiz. Ufaktan başlayalım.

Nedir bu Vue?

Vue.js (Ya da Vue), interaktif web arayüzleri (progressive web ui) oluşturmak için geliştirilmiş bir JavaScript kütüphanesidir. Vue’nun core kısmı sadece view ile ilgilenir, bu yüzden Vue SPA (single page application) geliştirmek için oldukça iyidir. Tadından yinmez 🙂

Daha teknik bir tanım yapmamız gerekirse Vue, MVVM template’inin ViewModel katmanıdır. Two-way data binding dediğimiz bir olayla model ve view katmanlarını birbirine bağlar.

Peki neden Vue?

  • Oldukça kolay öğrenilip projede kullanılabiliyor. API’ı Angular’a göre daha açık ve anlaşılır
  • Daha esnek bir kullanım sunuyor, bu da yazılımcının uygulama yapısını kendi istediği gibi oluşturmasına izin veriyor. Angular’daki gibi her şeyi onun istediği gibi yapmasına zorlamıyor. Vue genellikle yazılımcının routing, ajax requestler, storage vs. için başka kütüphaneler kullandığını varsayar
  • Virtual DOM! Vue DOM manipülasyonu için virtual DOM kullanmakta. Yapılacak işlemleri virtual DOM’da uygulayıp asıl DOM’da yapılması gereken en küçük değişiklikleri bulup gerçek DOM’u en kısa şekilde update ederek kaynaktan tasarruf sağlar.
  • React’ta da virtual DOM olayı olmakla birlikte ikisinin virtual DOM’a yaklaşma tarzları birbirinden farklı. React -bildiğim kadarıyla- direkt olarak DOM’a müdahale etmeye pek sıcak bakmamakta, bu da özellikle kompleks animasyon içeren uygulamalarda sıkıntı yaratabiliyor. Diğer yandan Vue, bu konuda da React’a göre daha esnek.
  • Vue componentler üzerinden uygulama yapısını oluşturmanızı, data mimarisini saklamanızı sağlar. Örneğin navbar, menu, sidebar, form, modal gibi kendi custom componentlerinizi oluşturup kullanabilirsiniz. Ayrıca bu componentler nested bir yapıda da olabilir; bir component bir veya birden fazla componenti içinde bulundurabilir.
  • Vue server-side rendering desteklemektedir. Bu da SEO konusunda yazılımcıya kolaylık sağlamakta

Not: Bu saydığım özelliklerden bazıları (server-side rendering, virtual DOM vs.) Vue.js’in 2.0 sürümünden sonra eklenmiştir.


3. parti bir benchmark’a göre bazı web frameworklerin performans sıralaması, düşük olan daha yüksek performanslı. (Kaynak: https://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html)

Hello World!

Şimdi de Vue.js’in Hello World’ünü yapalım. Yapacağımız basitçe “Hello Vue!” yazısını içeren bir web sitesi yapmak.


Not: Ben bu örneği yapması/göstermesi basit olsun diye jsfiddle’da yapacağım. Gerçek projelerde Vue.js’in nasıl kullanıldığını ise sonraki yazılarda göreceğiz.


Jsfiddle’da HTML kısmına basit bir template yazalım.

Daha sonra Vue.js’in bize verdiği nimetlerden yararlanmak için şu script tagini de HTML kısmına ekliyoruz.

Şimdi de Vue ile datamızı oluşturup template’e bağlayalım. Bunun için JavaScript  kısmına şu scripti yazıyoruz.

Bu kodlar bize yeni bir Vue instance’ı oluşturup template’imiz olan #app elementine bağlayacak ve verdiğimiz dataya göre template’i kullanarak DOM’u oluşturacak.

Sol üstteki Run butonuna bastığımız zaman ilk web uygulamamızın çıktısı aşağıdaki gibi olacak.

Burada Vue, data‘daki message değişkenini alarak template’teki yerine koydu ve DOM’u oluşturdu. Eğer koddaki message değişkeninin değerini değiştirip tekrar denerseniz sağ alttaki çıktının da değiştiğini göreceksiniz.

Mesela sayfaya kodu çalıştırdığımız zamanı yazdıralım,

Böylece ilk Vue.js projemizi de yapmış bulunuyoruz. Bu serinin ilerleyen yazılarında Vue.js ile daha karmaşık ve güzel projeler yapmayı öğreneceğiz. Bir sonraki yazıda görüşmek üzere.

Yararlandığım Kaynaklar

  • https://vuejs.org/v2/guide/
  • https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8
  • https://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
  • https://blog.cloudboost.io/why-vue-126a612b4ad9
PAYLAŞ
Önceki makaleSymPy ile Calculus hesaplamaları – Bölüm 8 (LaTeX)
Sonraki makaleJavascript – Constructor ve This
ODTÜ Bilgisayar Mühendisliği 1. sınıf öğrencisiyim, aynı zamanda ODTÜ Teknokent'te bir yazılım şirketinde Full Stack Developer olarak çalışıyorum. Programlamaya 13 yaşıımda başladım. O zamandan beri Python, JavaScript, C/C++, HTML/CSS ile yeni şeyler üretiyorum. Aktif olarak data science ve machine learning konularında kendimi geliştiriyorum.

88 YORUMLAR

  1. Wow, wonderful blog layout! How lengthy have you ever been blogging for?
    you make blogging glance easy. The full glance of your web site is magnificent, let
    alone the content material!

  2. I was curious if you ever considered changing the page layout
    of your blog? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of
    content so people could connect with it better. Youve got an awful lot of text for only having one or two pictures.
    Maybe you could space it out better?

  3. Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossips and internet and this is really annoying. A good website with interesting content, that’s what I need. Thank you for keeping this web site, I’ll be visiting it. Do you do newsletters? Cant find it.

  4. I haven’t checked in here for some time since I thought it was getting boring, but the last several posts are good quality so I guess I’ll add you back to my daily bloglist. You deserve it my friend 🙂

  5. Hello! I just wanted to ask if you ever have any problems with hackers? My last blog (wordpress) was hacked and I ended up losing a few months of hard work due to no data backup. Do you have any methods to stop hackers?

  6. Hey! I know this is kinda off topic but I was wondering which blog platform are you using for this site? I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good platform.

  7. Hi, I think your site might be having browser compatibility issues. When I look at your website in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, fantastic blog!

  8. Great work! This is the type of information that should be shared around the internet. Shame on the search engines for not positioning this post higher! Come on over and visit my web site . Thanks =)

  9. I¦ve been exploring for a little bit for any high quality articles or weblog posts in this kind of space . Exploring in Yahoo I ultimately stumbled upon this site. Studying this information So i¦m happy to exhibit that I have a very excellent uncanny feeling I found out just what I needed. I such a lot undoubtedly will make sure to don¦t omit this website and provides it a glance on a continuing basis.

  10. Hello there I am so grateful I found your webpage, I really found you by mistake,
    while I was looking on Aol for something else, Anyways I am here now and would just
    like to say many thanks for a remarkable post and
    a all round interesting blog (I also love the theme/design), I don’t have time to read it all at the moment but I have saved it
    and also added in your RSS feeds, so when I have time I will be back to read much
    more, Please do keep up the fantastic work.

  11. I think that is one of the most important information for me. And i’m satisfied studying your article. However wanna remark on some common issues, The site style is perfect, the articles is actually great : D. Just right activity, cheers

  12. You can certainly see your enthusiasm within the paintings you write. The sector hopes for more passionate writers like you who are not afraid to say how they believe. At all times go after your heart. “Every man serves a useful purpose A miser, for example, makes a wonderful ancestor.” by Laurence J. Peter.

  13. Hi there! This post couldn’t be written any better! Reading through this post reminds me of my previous room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thank you for sharing!

  14. Hey There. I found your blog the usage of msn. That is
    a really smartly written article. I’ll be sure to bookmark it and come
    back to read extra of your helpful information. Thank you for the post.
    I will certainly return.

  15. I have been exploring for a little bit for any high-quality articles or blog posts in this sort of area . Exploring in Yahoo I at last stumbled upon this website. Reading this information So i¦m glad to show that I have an incredibly good uncanny feeling I found out exactly what I needed. I such a lot without a doubt will make sure to don¦t disregard this web site and provides it a look on a continuing basis.

  16. F*ckin’ remarkable things here. I’m very satisfied to look your article. Thanks so much and i’m having a look forward to contact you. Will you kindly drop me a e-mail?

  17. Thanks for the sensible critique. Me and my neighbor were just preparing to do a little research on this. We got a grab a book from our local library but I think I learned more from this post. I’m very glad to see such fantastic info being shared freely out there.

  18. Hiya, I’m really glad I’ve found this info. Today bloggers publish only about gossips and web and this is actually frustrating. A good blog with exciting content, that’s what I need. Thanks for keeping this web-site, I’ll be visiting it. Do you do newsletters? Can not find it.

  19. Oh my goodness! an incredible article dude. Thanks Nonetheless I’m experiencing problem with ur rss . Don’t know why Unable to subscribe to it. Is there anyone getting similar rss problem? Anybody who knows kindly respond. Thnkx

  20. Sling tv coupons and promo codes for november
    2018
    Howdy! This post couldn’t be written much better! Going through this article reminds me of my previous roommate!
    He continually kept talking about this. I am going to forward this
    post to him. Pretty sure he’s going to have a great read.
    Thanks for sharing! Sling tv coupons and promo codes for november
    2018

  21. Hi, Neat post. There’s a problem with your web site in internet explorer, would check this… IE still is the market leader and a huge portion of people will miss your great writing because of this problem.

  22. Unquestionably consider that which you said. Your favourite reason appeared to be at the internet the easiest factor to take note of. I say to you, I definitely get annoyed at the same time as people think about concerns that they plainly don’t recognise about. You controlled to hit the nail upon the top and also outlined out the whole thing without having side-effects , people could take a signal. Will likely be again to get more. Thank you

  23. Hiya very cool site!! Man .. Beautiful .. Superb .. I will bookmark your site and take the feeds additionally?KI’m glad to seek out a lot of useful info right here within the submit, we need work out more techniques on this regard, thanks for sharing. . . . . .

  24. Hello there! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in exchanging links or maybe guest writing a blog article or vice-versa? My site addresses a lot of the same subjects as yours and I feel we could greatly benefit from each other. If you might be interested feel free to send me an e-mail. I look forward to hearing from you! Awesome blog by the way!

  25. I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100 positive. Any recommendations or advice would be greatly appreciated. Appreciate it

  26. Nearly all of what you articulate happens to be supprisingly appropriate and it makes me ponder why I hadn’t looked at this in this light before. This particular article really did switch the light on for me personally as far as this subject goes. However there is one issue I am not necessarily too comfortable with and whilst I try to reconcile that with the core theme of the point, permit me observe what all the rest of your readers have to point out.Nicely done.

  27. hey there and thank you on your info – I have certainly picked up something new from right here. I did then again experience a few technical points the use of this website, since I experienced to reload the site a lot of occasions previous to I may get it to load correctly. I were puzzling over if your hosting is OK? Not that I’m complaining, however sluggish loading instances times will sometimes have an effect on your placement in google and could damage your high quality rating if advertising and ***********|advertising|advertising|advertising and *********** with Adwords. Anyway I’m adding this RSS to my email and can glance out for much more of your respective exciting content. Ensure that you update this once more very soon..

  28. An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

  29. I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks

  30. Its like you read my mind! You appear to know so much about this, like you wrote the book in it or something. I think that you can do with a few pics to drive the message home a little bit, but instead of that, this is excellent blog. An excellent read. I will certainly be back.

  31. Hello there, You have performed an incredible job. I’ll certainly digg it and individually recommend to my friends. I am sure they will be benefited from this site.

  32. 9合1升級保護,提升全面防護!!! 相比之前四合一的疫苗只能預防四種hpv病毒,70的相關癌症。 九合一可以預防9種hpv病毒,可預防高達90以上的子宮頸癌、外陰癌、陰道癌和肛門癌及癌前病變等。 HPV9合1子宮頸癌疫苗 Gardasil 功效 100 預防高危致癌的 HPV 16、18、31、33、45、52 及 58 型號 (可減低 90 患子宮頸癌、、90-95 肛門癌、85-90 外陰癌、80-85 陰道癌及相關癌前病變的風險) 100 減低引致生殖器官濕疣 (俗稱「椰菜花」) 的 HPV 6、11 型的感染 (可減低超過 90 患生殖器官濕疣的風險) 男性方面,能減低患上肛門癌、生殖器官濕疣 (俗稱「椰菜花」) 及傳播 HPV 病毒的風險 注射位置紅腫及痛、輕微發燒和頭痛,至今未有嚴重副作用記錄

  33. A person essentially help to make seriously posts I would state. This is the very first time I frequented your web page and thus far? I amazed with the research you made to create this particular publish incredible. Fantastic job!

  34. Woah this particular site is amazing i prefer mastering you. Remain in the fantastic work! You recognize, many individuals are searching all over with this information and facts, you could enable them to significantly koleksi youtube terbaik.

  35. I love your blog.. very nice colors & theme. Did you create this website yourself? Plz reply back as I’m looking to create my own blog and would like to know wheere u got this from. thanks

  36. JOE BERNSTEIN: Beleaguered Newcastle United manager Alan Pardew likes to tell people: ‘Anyone who knows me knows I stand up for myself’. But his team are in danger of sliding off the Premier League cliff-face. Alan Pardew facing fans’ fury after six defeats in a row and Mike Ashley won’t invest in the team… these are dark days for Newcastle (and it’ll get worse if four of their best players go in the summer)

  37. Magnificent beat ! I would like to apprentice at the same time as you amend your website, how could i subscribe for a blog site? The account helped me a applicable deal. I have been tiny bit familiar of this your broadcast offered brilliant transparent idea

  38. I have recently started a website, the information you provide on this website has helped me tremendously. Thank you for all of your time & work. “My dear and old country, here we are once again together faced with a heavy trial.” by Charles De Gaulle.

  39. Hey, you used to write magnificent, but the last few posts have been kinda boring… I miss your tremendous writings. Past several posts are just a little bit out of track! come on!

  40. hey there! , I really like ones producing consequently much! quantity many of us communicate more concerning your document on America online? We need an authority about this place to fix this problem. May very well be that is you actually! Taking a look to see you.

BİR CEVAP BIRAK

Lütfen yorumunuzu giriniz
Buraya isminizi giriniz