DEV Community

loading...
Cover image for From Angular To Vue: Feeling Like A Beginner Again

From Angular To Vue: Feeling Like A Beginner Again

florimondmanca profile image Florimond Manca Originally published at blog.florimond.dev Updated on ・6 min read

Update (30 Oct, 2018): a few days after writing this post, I've already built a good understanding of Vue and its ecosystem. Thanks to everyone who shared useful resources about Vue; it helped me a ton!

I've worked on a couple of web projects in the past year or so. I now feel at ease and productive with a few select technologies. In the realm of frontend development, that means Angular. And to be honest, it feels great.

Yet, I find that I've begun resting on my laurels, and boredom even began to take the upper hand. As a result, I started learning Vue.

In this short post, I'll expose my state of mind, the difficulties I am currently encountering and what I do to cope with them in the process of learning Vue after a year of working with Angular.

How did we get there?

I've worked with Angular quite extensively lately. Angular is the first modern web framework I've learnt, and I've built at least three or four different apps of various sizes. I also learnt a ton about modern concepts such as Progressive Web Apps and Server Side Rendering along the way.

But there's a catch. Every time I am given the opportunity to choose a frontend framework for a new project, I go for Angular. Why? Simply put, because it's the only one I know and I feel comfortable with.

Yet, immediately after taking the decision, a little voice sneaks into my head, and it whispers: "Angular, again? Meh…".

Don't get me wrong — it does feel rewarding to have become knowledgeable enough at a technology that I can build a whole system without barely looking at the documentation. I feel proud.

There's also no need per se to be knowledgeable at every frontend framework out there — there are way too many of them, plus specialising also has its advantages.

But for me, there's a problem:

Where is the challenge? Where is the difficulty? What is there left to learn?

You see, I do love learning new things. I don't particularly enjoy feeling like a beginner — that's rather uncomfortable — but I always dig the outcome: I can do things I couldn't do before, and it's thrilling.

That's what motivated me to try something else. Also, some circumstances have helped.

Take your chance

I boarded on a major school project a few weeks ago. We had the possibility to choose between Angular and Vue.

I didn't know much about Vue — only a few things I've read here and there, and perhaps a toy project from a year ago. Going for Angular would have been so much easier because I've built up a lot of experience and know-how.

But guess what? We went for Vue.

Sometimes, leaving your comfort zone is as simple as asking: "why not?".

It won't be easy

I dived in just today, and let me tell you — I'm excited, but it feels very uncomfortable right now.

Actually, I feel frustrated. I have to re-learn everything. Why does it all look so similar, yet so different? I felt like I was a master, but I am now a total n00b. Duh.

So, in this new and unknown ecosystem, I need a survival strategy not to drown under the seemingly huge amount of new things to learn.

Build on what you know

Luckily, I now have a better understanding of the world of frontend development than I had when I first tried Vue. A lot of stuff is already out of my way, and I can focus on the framework and its ecosystem. (Also, Vue has matured a lot, which is very good news.)

Quite naturally, I am looking for what is familiar. I have already noticed that:

  • Both Angular and Vue are component-driven — great!
  • Both have a CLI — fantastic! (but I miss ng generate)
  • Both have a templating system based on directives — sweet!
  • Both have bidirectional data binding through inputs (@Input() vs @Prop()) and outputs/events (@Output() vs. $emit()) — nice!
  • The template syntax is quite similar: *ngFor becomes v-for, [foo]="bar" becomes :foo="bar", etc — stellar!
  • Both have extensive and precise documentation, and a vibrant community — brilliant!
  • I can also use TypeScript with Vue — yay! 🎉
  • I've been digging Angular Material, and there seems to be even more Vue component frameworks out there, like Vuetify — amazing!

At least, this is not a cold start. There are indeed a lot of aspects I can relate to and compare. Phew!

Me generating a project using Vue CLI: "TypeScript! There you are!"

Identify the differences

Yet, I couldn't help but notice big differences:

  • Vue components are single-file, while Angular separates HTML, CSS and TypeScript into their own files. (I'll probably get used to it.)
  • Vue focuses on the view layer, while Angular comes batteries included: where are my beloved Router and HttpClient?!
  • Vue doesn't have modules, and instead it has some other concepts such as mixins, filters and transitions.
  • There is no concept of services — how am I supposed to abstract logic from components? Is that even a thing in the Vue philosophy?
  • If there are no services, then what about state management? Am I forced to resort to Redux/Flux/similar even for smaller apps?
  • Where are my Observables? It took me so much time to get to know them. What should I use instead of RxJS?

All of these differences gave me the general intuition that Vue imposes much less on the developer.

As someone with an Angular background, I find this a a bit daunting.

Angular's conventions and ways of doing felt secure. They also facilitated working with other devs — because we all shared the same practices. How is it going to be with Vue? Does everyone have a different workflow?

Look for best practices and popular solutions

So what am I left with? Some stuff looks familiar, other stuff looks better (single-file components look quite slick after all), but there's also some stuff that I miss. And so I am looking for replacements.

Take HTTP requests: two popular solutions I've seen are axios and vue-resource. Looks like a good substitue for HttpClient.

The issue of routing has also been solved — there's no built-in Router in Vue, but vue-router is a standard plugin that's even suggested when creating a new project via Vue CLI.

Now, what about state management? Angular has services and I've been lucky enough that, when data binding becomes insufficient, I could use services to store some shared state.

Vue has no such concept of services, so what's left? A popular option seems to be vuex, a Flux-inspired state management Vue plugin. I heard about state management before (although mostly through Redux — see Understanding Redux), so I'm interested to dig deeper and see how that turns out. I just hope it won't be too much of a burden.

The Vuex state management pattern. Looks sensible, but I hope it won't be too heavy. (Source: Vuex docs.)

Lastly — RxJS and event streaming. That's probably the thing I like the most in Angular. Observables make working with streams of events so pleasant and maintainable.

Well, I haven't found a substitute for that yet. My guess is — there won't be one. Actually, I suppose Vue won't get in my way and I could use RxJS, but there seems to be many built-in features already to ensure reactivity — which I also find quite exciting. We'll see!

Enjoy the journey

I used to feel very knowledgeable about Angular, yet Vue has got me back to the position of a beginner. It's not easy, and sure as hell feels uncomfortable.

But — and this is a message to all striving beginners out there — experience also tells me that the journey will be worth it.

At the end of the day, you'll have learnt yet another technology, and be able to do things you couldn't do before. It may take weeks or months, but it will happen, and you'll feel proud. 💪

As for me, I'm not giving up on Angular just yet, but I'm excited to learn more about Vue. I will focus on building a mental model of how everything fits together in Vue. I look forward to the day when it all just "clicks" — because there's nothing more exhilarating than pushing your boundaries to learn something new. 💻


Have you already been in this position? How have you coped with having to re-learn everything? I'd be happy to hear your thoughts!

Stay in touch!

If you enjoyed this post, you can find me on Twitter for updates, announcements and news. 🐤

Discussion (38)

pic
Editor guide
Collapse
djdany01 profile image
Dani J. Pérez

Hey!

A collegue here, my company started a project in Angular and one week after needed to change from Angular to Vue because "bussiness", I said: "I can do that" (Just 2 months in this company...)
I was really scared, I had 0 experience in Vue and just 1 year in Angular and thought it would be painful but...
Really was so easy to change from Angular to Vue, just one week later I had the project perfectly working.
And I think now I love much more Vue than Angular.

Really don't worry!

Collapse
florimondmanca profile image
Florimond Manca Author

Very heartwarming to hear your story! I’m glad you could adapt so easily. Truly says something about Vue. Also you’re not the first one to say you’d never go back to Angular. ;-) Will I undergo the point of no return too? We’ll see! 🔥

Collapse
djdany01 profile image
Dani J. Pérez

The only thing I miss from angular are the Services to separate more the logic.

Get luck! 🔥

Thread Thread
florimondmanca profile image
Florimond Manca Author • Edited

The service system is really just a design pattern, I think it’s easy to implement (without the dependency injection, though). I really like the logic separation it provides. :)

Thread Thread
djdany01 profile image
Dani J. Pérez

Yes, of course you can create a file that does the same as it is just a design pattern as you say. 😃

Collapse
sergio profile image
deleteme deleteme

Is it me or is Flux/Redux just a meme in the client-side world. It's so full of orchestration and files and plumbing. Bleh!

I've been using mobx stores in all my clientside projects and people on the teams love it. It's very straight forward to use and require no plumbing.

Look into Mobx.

Collapse
kayis profile image
K

You don't even need that.

setState is probably enough for at least 80% of all applications.

Collapse
sergio profile image
Collapse
florimondmanca profile image
Florimond Manca Author

Thanks for the insight! I’m honestly not 100% convinced by whether Vuex (or any state management library, for that matter) is necessary, but I’ll sure look into Mobx as a possible (more lightweight?) alternative.

Collapse
kirklewis profile image
Kirk Lewis

Vuex is the by far the best implementation of Flux there is. Just simple to use. I use for even the most basic Vue app.

Collapse
jvukovich profile image
Jonathan Vukovich

When I started with Vuex, it did seem like a lot of plumbing work, which I didn't like. After a bit of research, I found Nuxt.js. They advertise SSR, but have more things built in beyond SSR (which you aren't required to utilize when using Nuxt). They have a Vuex approach that greatly reduces the plumbing. Highly recommend looking into it.

Collapse
gksander profile image
Grant Sander

Nuxt for the win! It's very seldom that I create a Vue app without nuxt. So many nice benefits.

Collapse
tayambamwanza profile image
Tayamba Mwanza

Recently also dipped my toes into Vue but it just couldn't drag me away from Angular, I really like Angulars opinionated nature. Not to say I don't see the value in Vue though. What I've settled on is learning both of them. Angular as my main framework, and Vue as my secondary.

Sometimes you have problems that need a whole toolbox (Angular)

And then there might just be small problems which need a screwdriver (Vue)

That's how I view them mentally, (not saying view is only as powerful as a screwdriver but you get my point)

And I went for Vue instead of React because it has more similarities to Angular, so it wouldn't mess with my mental model as much.

Collapse
vonheikemen profile image
Heiker • Edited

There are a couple of plugins that can help you feel more "at home."

vue-rx can help you with a more comfortable integration between Rxjs and Vue.

vue-inject can provide you with a nice Depency Injection container thingy.

I haven't use these, because I think vue is good enough, but they look like nice helpers.

Collapse
florimondmanca profile image
Florimond Manca Author

Thanks for the tips! I might look into those, but I’m also interested to see what I can do with « just Vue » first. Vue Inject might be something I’d need anyway though. :)

Collapse
lahorijawan1 profile image
Lahori Jawan

Tell you what I don't know why I would need Rxjs because in my 2 years with Vue I never felt to include something out of vue ecosystem. TBH I don't know what problems Rxjs solves.

Thread Thread
florimondmanca profile image
Florimond Manca Author

In Angular, I haven’t found a better way to implement reactivity than RxJS. Vue has other features such as watchers and computed values, so it’s actually pretty unlikely I’m going to need it. 🤔

Collapse
gluons profile image
Saran Tanpituckpong ✔️ • Edited

I start learning Vue without any knowledge of any frontend framework.
I feel that Vue is pretty easy. I understand Vue in few days.

PS. Writing TypeScipt in Vue really make me happy. 😇

Collapse
florimondmanca profile image
Florimond Manca Author

Glad to hear! I’m still wondering whether it’s a good idea to use TypeScript. The boilerplate with the decorators and all seems a bit heavy, on a second thought. What do you get from it? :-)

Collapse
gluons profile image
Saran Tanpituckpong ✔️ • Edited

I learn from Vue TypeScript guide.

vue-class-component is pretty handy for creating class-style component.

And I found Vue Property Decorator that make my life easier. 😍

PS. vue-cli can be used to create TypeScript project easily.

Collapse
tux0r profile image
tux0r

So maybe you'll waste a lot of time learning frameworks - and you could probably write a better, easier framework that fits your project in much less time than that ... :-)

Collapse
kayis profile image
K

Angular 2+ is a moloch, being integrated with TypeScript and RxJS can be nice if you need that kind of control over your data-flow, which comes handy if you build real-time applications. I'd still prefer Cycle.js over Angular if it's just for the TypeScript & Observables. It's much smaller and cleaner, but it has a much smaller eco-system.

Vue is modern stuff for old school devs, I think. It feels like Angular 1 or Ember, but without all the cruft of views, routes, and controllers.

I prefer React, because of its small API surface and minimal magic (a bit more than Cycle.js sadly), but its flexibility comes at the cost of the dev selecting the right third-party libraries.

Collapse
florimondmanca profile image
Florimond Manca Author

I never heard about Cycle.js, I’ll take a look. The issue of the ecosystem and community is real, and for that matter it looks like the world of Vue has been growing as fast as ever recently. Thanks for your insights!

Collapse
vonheikemen profile image
Heiker

Pump the hate breaks, Ankush. Lets just think about this for a second.

What if we could be productive using the standard tools that the language provide us, and only use frameworks/libraries to enhance our productivity?

Collapse
mygnu profile image
Harry Gill

Nice read! I'm feeling a noob again going the other way from Vue to Angular

Collapse
florimondmanca profile image
Florimond Manca Author

Good luck! It’s definitely a tough time but I’m convinced that it’s a necessary step in any learning process. :)
I’m interested though — what made you switch to Angular?

Collapse
mygnu profile image
Harry Gill

Its mainly work, I just got a job and they use Angular, while I've used Vue for most of my personal projects

Collapse
mandaputtra profile image
Manda Putra

I'm actually scare to use a framework that has many feature out of the box, 😅 i prefer the way of setup this and this, since vue has it i just use it.

When it comes to rxjs i use vue-rx, or just use rxjs without vue-rx because actualy you can bind everything in vue.

But yeah the one developer and another had their own workflow.

Enjoy your journey!

vonheikemen profile image
Heiker

Really?? I suppose sarcasm is not in your dictionary. In any case, can I advise you to stop going around and labeling things according to your first instinct?

This is what I get for making a joke thats only funny to me.

So, apparently you're a totally chill and relaxed person. Cool.

I clearly can't read the tone of your comments, so lets just leave it at that.

Collapse
florimondmanca profile image
Florimond Manca Author

Ah — I heard about Elm! I once looked at the source code of an Elm project and it gave me the chills 😂. Very different way of thinking indeed. That goes to my « To Explore » list ;) Thanks!

Collapse
tux0r profile image
tux0r

That sounds wrong.

Collapse
Sloan, the sloth mascot
Comment deleted