Learning To Learn : How To Web Dev The Right Way With Vue If You Are A Beginner

Rate this content
Bookmark

It is not common that people trying to break in to web dev literally learn to start from HTML/CSS or "create xyz" workflows where 25 files pop up all of a sudden after you run one command and there's no way to comprehend what just happened. Learning should be crafted and tuned to one's way of learning else we are all just dogs pretending to be sheep in a horse stable(literally not absurd at all). We will explore how I went from oh marquee is cool(it still is,believe me) to being a person that could build web apps with people having web dev experience equal to my age. I'll share my learnings, findings, lessons, how to and especially what to learn and most importantly where do I start (the most common beginner question) and why mentorship is important.

We'll talk about (in no specific order)

- How and why(like really why) to start learning;

- Choosing the right speed and mentor;

- Choosing the right framework(welp, this is gonna turn heads) and why this matters and why it should be Vue;

- Struggles and lessons learned(Rome, built, one day sorts...);

- What you should know before you really decide now based on above experiences about getting into this wibbly wobbly web stuff.

This talk has been presented at Vue.js Live 2024, check out the latest edition of this JavaScript Conference.

FAQ

Ashwin is a speaker at the conference who started as a beginner in Vue and has developed his skills with the help of his team.

Knowing JavaScript is crucial for understanding Vue because Vue is built on JavaScript. A familiarity with JavaScript's nuances will help in getting started with Vue.

The first suggestion for learning Vue is to understand the fundamentals, as they are core to grasping any framework or language.

You should avoid starting with a large project. It's better to begin with simple problem statements to understand basic concepts before moving on to more complex applications.

Iteratively building on individual concepts helps in understanding how these concepts come together to create a functional app, making it easier to make decisions on which approaches to use in different situations.

Building something big as a starter project can lead to frustration due to the complexity of the framework. Starting small helps in understanding the basics and gradually building up knowledge.

A good way to gain continuous knowledge in Vue is to repeatedly work on small problem statements and explore new tricks or components posted online.

Constantly switching frameworks can hinder long-term learning. It's better to focus on understanding one framework well, which can then help in transferring skills to other frameworks.

A mentor can guide you through your Vue journey, helping you understand where you are in your learning stage and providing direction.

Instead of focusing solely on industry standards, you should focus on the fundamentals of the framework, as these basics are crucial for understanding and working with any framework.

Ashwin Vinay Phadke
Ashwin Vinay Phadke
8 min
25 Apr, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.

1. Getting Started with Vue

Short description:

I'm Ashwin, a beginner in Vue who has learned from my team and wants to share my knowledge with others. Knowing JavaScript is essential for getting started with Vue. Understanding the fundamentals of Vue and building on individual concepts will help you develop more complex applications. Don't fall into the trap of building something too big as a starter project. Focus on the fundamentals and don't be swayed by industry standards or tricks posted online. Find a mentor to guide your Vue journey.

Hey, everyone. I'm Ashwin, and I'm really excited to be part of this conference. Something that I would have not imagined just a couple of years ago, because even then, like right now, I'm still, or was, still a beginner in Vue. And this is in part – the reason I'm here is really part of thanks to my team who helped me understand the Vue world, helped me understand the whole JavaScript framework world, and who helped me develop my skills and improve on them so that I could be here and tell other people who are like maybe at the same level as me, or maybe who are just beginning to help them understand how they can start developing their own Vue applications, or just getting to know the Vue framework in general.

So the first question that always comes to my mind is, do you need to know enough JS for you to know about the frameworks that were built on JS? This is definitely true. You need to know some sort of JS, obviously, to get started with Vue, having a familiarity with what the language is about, how the language works, and what the specific nuances are with the language will really help you in getting started with Vue. So I guess this is probably a no-brainer, but having a working understanding of JS would really help you in developing apps using Vue.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
State management is not limited to complex applications and transitioning to a store offers significant benefits. Pinia is a centralized state management solution compatible with Vue 2 and Vue 3, providing advanced devtools support and extensibility with plugins. The core API of Pinia is similar to Vuex, but with a less verbose version of stores and powerful plugins. Pinia allows for easy state inspection, error handling, and testing. It is recommended to create one file per store for better organization and Pinia offers a more efficient performance compared to V-rex.
Welcome to Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Welcome to Nuxt 3
Top Content
Nux3 has made significant improvements in performance, output optimization, and serverless support. Nuxt Bridge brings the Nitro engine for enhanced performance and easier transition between Nuxt 2 and Nuxt Read. Nuxt 3 supports Webpack 5, Bytes, and Vue 3. NextLab has developed brand new websites using Docus technology. Nuxt.js is recommended for building apps faster and simpler, and Nuxt 2 should be used before migrating to Nuxt 3 for stability. DOCUS is a new project that combines Nuxt with additional features like content modules and an admin panel.
One Year Into Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 has seen significant adoption and improvements in performance, bundle size, architecture, and TypeScript integration. The ecosystem around Vue 3 is catching up, with new tools and frameworks being developed. The Vue.js.org documentation is undergoing a complete overhaul. PNIA is emerging as the go-to state management solution for Vue 3. The options API and composition API are both viable options in Vue 3, with the choice depending on factors such as complexity and familiarity with TypeScript. Vue 3 continues to support CDN installation and is recommended for new projects.
Utilising Rust from Vue with WebAssembly
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
In this Talk, the speaker demonstrates how to use Rust with WebAssembly in a Vue.js project. They explain that WebAssembly is a binary format that allows for high-performance code and less memory usage in the browser. The speaker shows how to build a Rust example using the WasmPack tool and integrate it into a Vue template. They also demonstrate how to call Rust code from a Vue component and deploy the resulting package to npm for easy sharing and consumption.
Vue: Feature Updates
Vue.js London 2023Vue.js London 2023
44 min
Vue: Feature Updates
Top Content
The Talk discusses the recent feature updates in Vue 3.3, focusing on script setup and TypeScript support. It covers improvements in defining props using imported types and complex types support. The introduction of generic components and reworked signatures for defined components provides more flexibility and better type support. Other features include automatic inference of runtime props, improved define emits and defined slots, and experimental features like reactive props destructure and define model. The Talk also mentions future plans for Vue, including stabilizing suspense and enhancing computer invalidations.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.

Workshops on related topic

Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
Daniel Roe
Daniel Roe
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Monitoring 101 for React Developers
React Summit US 2023React Summit US 2023
107 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project. 
Workshop level: Intermediate
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!