DEV Community

Learning Angular 5 as a React and Vue Developer

Ali Spittel on January 14, 2018

I try not to play into the "war of frameworks" narrative that some programming articles use. I will admit, though, that I've been pretty critical a...

Read full post

rhymes • Jan 15 '18 • Edited

Sorry, I'm going to say a few things that are not related to Angular :-D

Let me start by saying that I was laughing at this:

Side note: I'm not used to using semi-colons in JavaScript, but I used them for this project, mainly because VSCode was inserting them automatically in the TypeScript files and I was too lazy to change the setting!

I still haven't quite decided the semi-colons vs no semi-colons thing. I've read somewhere that Brendan Eich doesn't use them so I should follow suit. I'm using airbnb style with Vue and I'm too lazy to remove them :D Also I still haven't quite decided about airbnb vs standard.

I would love to read an article about your opinion of using Vue and React. I'm building my first Vue app and I don't think I could ingest React right now, too many new things to learn already :D

I second the idea of separating frontend and backend (I'm using Python on the backend, Vue on the frontend and it talks to Python using webpack's proxy). Every single day I'm telling to myself "why didn't I learn these fabolous things earlier??"

Anyway, thanks for the post, sorry if my comment is not about Angular!

Ali Spittel • Jan 16 '18

True! I just don't find myself consistent enough to use semicolons and (on a vain note) prefer the way my code looks without them. I like Evan You's presentation on whether or not to use them -- especially since he wrote Vue!

I love both React and Vue! Vue is my personal favorite, but for the most part I use React professionally. I think Vue is easier to learn and I love how consistent the ecosystem is -- especially the Router and Vuex. React is just still so widely used, though, and I do love how integrated the components are! I think a lot of it comes down to personal preference!

I've done the same thing with Python and React in the past! It was super painful -- definitely don't envy you there! That was probably the project that converted me to the microservice architecture so hard!

Rémy 🤖 • Mar 31 '18

On the semi-colon debate, my rationale is simple: there's more things to remember if you don't put semi-colons than if you put them. Yes, not much at all, but still.

This makes semi-colons less ambiguous than the lack of and I value non-ambiguous code (even if it's just a little bit).

Since I also value consistency, I decided to enforce them on all my projects.

rhymes • Jan 16 '18

Thanks for the answers!

I read the presentation, now I'm going to remove semi colons everywhere :D Thank the heavens for eslint --fix

I'm happy you love both React and Vue, the reason why I gravitated towards Vue is the same reason I gravitate towards simpler, yet as powerful, technologies but I do see the point of React obviously (even if at first glance seems more complicated and I didn't like JSX). I might end up picking it up later in the year, who knows, and probably knowing Vue at that point might lower the learning curve, hopefully :-)

Regarding splitting backend and frontend (so two separate servers/microservices) I am sure that I'll get there at some point, it seems I am walking in your footsteps, solving similar problems as you already did!

A little digression in server side programming: my reluctance about using a pure microservice architecture is a will to preserve sanity and due to lack of time. I read a lot about microservice architectures in the past (who hasn't, if you read articles about server side programming is what anybody talked about for a while) but being a time of one makes me weary at introducing them in the clients architecture.

Needed or not I am still convinced, at least design wise, that microservices can come out of monoliths when the time has come.

Ali Spittel • Jan 16 '18

Knowing Vue will definitely lower the learning curve! I totally agree that microservices can come from monoliths!

swyx • Jan 16 '18

Hey Ali!! Found you on twitter and now here! I recently explored angular from the react/vue perspective too. Things I liked from Angular:

2 way bind (also in vue of course)
structural directives
elvis operator
Typescript adoption
Preload Strategies

Ultimately its not a fight but its good to see how the other side does things. Love what you are doing here.

Stephen Belovarich • May 20 '18

Angular bundles can be smaller in comparison to React. Not only is a “hello world” bundle comparable to Preact in Angular 6.0.0, there are standardized tools for building Angular that allow for lazyloading and server side rendering. It just depends on how you build and deploy Angular. Once you gzip the bundle the size is dramatically reduced. Bundle with Closure Complier in ADVANCED mode and see the bundle size shrink even more.

I prefer Angular over Vue and React for one reason alone. The architecture of an Angular app is based on a stable and sensible contract maintained by the community, I can understand how this is a turn off for some developers who want to have more control, but when working on a team Angular can scale better than any JavaScript framework or library I’ve ever worked with. The Angular community is awesome, lots of helpful developers out there. Angular is good for developers who want a robust architecture and would like to sqeeze every bit of performance out of web applications at scale.

Michael Brown • Apr 5 '18 • Edited

there is still a separation of concerns for HTML and JS code in Angular, especially in comparison to the React architecture.

Seriously? I thought that this one had been laid to rest years ago. It seems not.

Okay, try this little experiment for me: go into your HTML file and change (click)="toggleSearch()" to (click)="toggleSearchNew()", then run your app again. What happens? Nothing, right? Or you get an error of some kind? That's because the toggleSearchNew method doesn't exist in your ResourcesComponent class. You need to open your JS (or TS) file and add it there.

And this will be the case most of the time: every time you change your markup file, you'll have to make a corresponding change in your JavaScript/Typescript, and vice versa. Sound like separation of concerns to you? To me it looks like those files are joined at the hip!

And really, that's always been the case. What devs have referred to as "separation of concerns" actually meant separation of files and of technologies. The HTML and JS has always been completely interdependent, which ever framework du jour you happened to be using. JSX simply makes explicit what we've all really been doing all along.

ReinisV • Jul 25 '19 • Edited

You have an interesting concept of separations of concerns

And this will be the case most of the time: every time you change your markup file, you'll have to make a corresponding change in your JavaScript/Typescript, and vice versa.

Of course when someone changes the name of a reactive property or a command method on the view model that is referenced by the view, you have to update that view too. The only way I can imagine this to not be true (changing a method name in code and not having to update it in markup) is if there was another mapper/layer of abstraction between them, but that would just move your concern to a different file.

If you can name a UI framework that does do well on seperations of concerns based on your definition, I'm all ears.

As far as I understand seperation of concerns in the case of ui components and views, is that a view needs to work only on display logic (it needs to insert data from the viewmodel into html, it needs to display/hide different parts of the ui based on data in the viewmodel, it needs to bind different buttons to commands in the viewmodel) and a viewmodel needs to work only on fetching and massaging that data (without having any knowledge of the view or it's components, for the sake of being easy to unittest and modify).

Leoberto • Jan 16 '18

I really liked your article especially, because right now I am learning Angular 5. I already had an experience with the first versions of angular. but I've heard a lot about Vue, and I have a little out of focus I hope to finish with Angular 5 and then start with Vue to see the benefits offered by this Framework.

Brian • Jul 14 '19 • Edited

Hi. The demo app doesn't seem to be working, but I tried the GitHub URL with StackBlitz and it works that way - looks really good

stackblitz.com/github/aspittel/hel...

There was an intermittent error when using the search 🔍 option, but it just occurs if there's no Tags, so adding in a check for that works ok in the search function

if(!resource.Tags) return false;
return resource.Tags.some(tag => {
    return tag.toLowerCase().startsWith(val.toLowerCase());
});

Samitha Fernando • Apr 25 '18 • Edited

Would like to highlight few things. Did you knew that axios was inspired by http module in angular.js? Also when you say templates in Angular looks like vue templates I am sure vue team got the ideas from Angular.js as well.
When you say bundle size is huge it's around 110Kb which is not a massive difference between React.js ;)

Daniel Smith • Mar 31 '18

Hi, I'm Dan, and I use Angular. ☺️ In my experience with Angular, it's probably overkill for a small side project like this. Where I think it really shines is in two places. First, refactoring. Typescript gives you a lot of flexibility and confidence when making a major refactor that you probably aren't going to break anything without the compiler catching it. Second, it works really well when you have a large team working on a project. AngularJS was a little loosey goosey with it's opinions so you could really paint yourself into a corner if you weren't careful, but with the CLI Angular is fairly opinionated while still being flexible. And that's great for large teams where everyone needs to be on the same page as far as where to place new stuff.

I wouldn't recommend it for small side projects, Vue or React are better for those for sure. And I'm not saying Vue or React aren't good for large projects either. Just that I think the pull for enterprises is that Angular really works well for large complex projects.

Muhammad Fathur Rahman • Jun 3 '18

Hi would be great if you have also sample code for React and Vue for this simple app (i clicked on the title hoping for that)