- Видео 4
- Просмотров 3 632
Neuronfire
Добавлен 14 июл 2024
Explore the hidden side of tech.
Vue.js API Client Layer Explained in 4 minutes
Welcome back to our series on Mastering Vue Application Architecture! In this second installment, we dive into the API Client Layer and explore how isolating your API interactions can greatly simplify your Vue applications.
What You'll Learn:
Why Isolate the API Client Layer?
Understand how tight coupling between UI components and API details can increase complexity and hinder maintenance.
The Problem with Direct API Calls in UI Components
See real-world examples of how direct API calls can make components fragile and hard to manage.
Solution: Isolate API Interactions
Learn how creating a separate API Client layer can decouple your UI from the backend.
Implementing the API Client Layer
Create an A...
What You'll Learn:
Why Isolate the API Client Layer?
Understand how tight coupling between UI components and API details can increase complexity and hinder maintenance.
The Problem with Direct API Calls in UI Components
See real-world examples of how direct API calls can make components fragile and hard to manage.
Solution: Isolate API Interactions
Learn how creating a separate API Client layer can decouple your UI from the backend.
Implementing the API Client Layer
Create an A...
Просмотров: 379
Видео
Vue.js Infra Layer Explained in 3 Minutes
Просмотров 474День назад
Part 1 of the Vue.js Architecture for Scalability Series! 🚀 We’re diving deep into the Infra Layer of scalable Vue applications - why it’s critical for large projects and how to set it up for maximum flexibility and efficiency. This setup reduces dependency issues, makes future library swaps seamless, and keeps the codebase clean and manageable. 🔔 Subscribe and hit the notification bell to catc...
Intro to Vue Layered Architecture in 2 Minutes
Просмотров 67914 дней назад
In this introductory video, we'll review managing complexity in Vue applications using a layered architecture approach. What will we cover in this series? Part 1: Infra Layer We'll start by exploring the foundational technologies that power your application and how to abstract them for greater flexibility. Part 2: API Client Learn how to isolate API interactions to keep your components clean an...
Master Vue in 15 Minutes: From React Developer to Vue Pro
Просмотров 2,1 тыс.Месяц назад
Are you a React developer looking to learn Vue? You’ve come to the right place! In just 15 minutes, I’ll walk you through the key differences between React and Vue so you can leverage your existing knowledge and become confident in Vue's core concepts. In this video, we’ll cover: Reactivity: Declare, Update, and Compute State Vue's Templating vs. JSX in React Handling Events, Loops, and Conditi...
Awesome video, keep it up 🙌
Thank you!
Great video, however I found the example on receiving props on vue quite outdated, especially in the case where you'd be using typescript. Now in 3.5 we can easily destructure props so the syntax is much better too
Thanks for the feedback! 🙂 Vue 3.5 was just about a month old when the video came out. I might make a video just on this update, thanks to your comment.
Good content, can you put a github link of a demo repo with the example you have here as the screenshot?
Thank you! I'll create a boilerplate to demonstrate real-world examples once the channel grows in subscribers and there's enough demand for it
Excellent video series. Keep it up!
Thank you!
I saw no frontend devs do that. I hope they also understand the importance of this approach.
Same here! I’ve been advocating for this approach in every company I’ve worked with, and it’s always been appreciated once the benefits became clear. Spread the word by sharing this series - I might even release a boilerplate showcasing this architecture once the channel gains traction!
Thanks
Wouldn't this cause more bugs? If I need to manipulate time a lot I will end up just rewriting DateTime as a class Http adapter is different because It adds the ability to hook into requests to display common errors, log them, add caching, etc
Great points! The idea isn’t to rewrite existing tools like date-fns or moment.js, but to abstract their usage when you need consistent handling (e.g., time zones, localization). The adapter centralizes date logic to keep things consistent and avoid rewriting across the app. You can extend it for new use cases without duplicating code. As for HTTP adapters, the same principle applies: it’s about decoupling dependencies (like Axios) to simplify testing and allow flexibility, not adding complexity for its own sake. We’ll dive into that in Part 2. This opinionated approach is overkill for small apps but shines in large-scale projects where maintainability is key.
@@neuronfireio Do you maybe have a project example where such pattern is used with date/time libraries?
@edvinasba I'll create a boilerplate to demonstrate real-world examples once the channel grows in subscribers and there's enough demand for it
thanks
A while back I started out with angularjs, it blew my mind up and settled on vue then went to react and react native but now am intested in vue again as I remember its simplicity in comparison to angularjs. Vue seems popular in larael with inertia so your video is well timed for me, its a good map to get back into vue. Look forward to more content, glad to sub for your first video !
Thanks, Jon! Glad the video came at the right time for you. Vue's simplicity is great to come back to. Appreciate the sub-more content coming soon!
To update state in React.js, you typically don’t need the useEffect hook. Beginners often mistakenly think it's required for simple state updates, but useEffect is actually used for side effects, such as fetching data or responding to external changes.
Great video! I'll add my two cents. The example with doubleCount is not entirely equivalent in other situations. Computed values are cached and recalculated only when the reactive objects used inside them change. In React, the value of doubleCount will be recalculated on every component render (changes in any local state or render from the parent component, including context changes). The analogue in React is more like useMemo.
@@c01nd01r Thanks for the great point! You're right, useMemo is a good analogy for React. But another edge Vue has is that computed properties use lazy evaluation, only recalculating when dependencies change, which can be even more efficient than useMemo. Appreciate the addition!
Even as a Vue developer this is quite usefull!
pick an original logo, this one looks a lot like fireship's
Done
The next videos will dive deep into scalable architecture in Vue apps, showing you how to structure your projects for long-term success. 🚀 Make sure to subscribe and hit the notification bell so you don’t miss out on those advanced Vue topics! Drop a comment if you have any questions or feedback. I’m here to help!
Thank you, thank you very much
Welcome! Subscribe for more, next videos will be all about scalable architecture with Vue 😊
❤❤❤❤😊
👍🏻thank u!
Great explantation
Glad it was helpful!
nicely done
Thanks!
Great content. Thank you!
My pleasure!