Coding

Angular vs React.js vs Vue.js – My Thoughts!

  • 00:00:01 welcome to this video great to have you
  • 00:00:04 aboard in this video I want to share
  • 00:00:06 some personal thoughts on angular vs.
  • 00:00:09 react towards its view because I get
  • 00:00:12 these questions a lot which member
  • 00:00:13 should I choose is angular better than
  • 00:00:16 react what should I learn and I try to
  • 00:00:19 answer some of these questions by
  • 00:00:21 sharing my thoughts on it now a little
  • 00:00:23 bit of advertisement rights to start if
  • 00:00:25 you are interested in diving into a very
  • 00:00:28 technical comparison having a look at
  • 00:00:30 the performance and so on and once you
  • 00:00:31 get an introduction to each of these
  • 00:00:33 free frameworks I created a course about
  • 00:00:36 that which you can buy on yulie you
  • 00:00:38 don't have to though I will also share
  • 00:00:40 my thoughts here my personal thoughts as
  • 00:00:42 mentioned let me start with angular and
  • 00:00:44 with angular I mean angular 2 or now for
  • 00:00:48 the latest version of angular therefore
  • 00:00:51 what do I like about angular I like the
  • 00:00:54 general concept of angular
  • 00:00:56 I like the modularity I like the way we
  • 00:00:59 use components with modules I like that
  • 00:01:02 we use dependency injection how that
  • 00:01:04 works the high level of control we have
  • 00:01:07 I also like that I like that it's easy
  • 00:01:10 to add routing or for validation that we
  • 00:01:12 have this all in one package even though
  • 00:01:15 I know it's technically split up over
  • 00:01:17 multiple packages but it's easy to add
  • 00:01:19 or validation zone for example I know
  • 00:01:22 that this can also be confusing for
  • 00:01:23 newcomers though that might be a
  • 00:01:25 disadvantage another advantage I see for
  • 00:01:28 angular is just that it has is very
  • 00:01:30 successful forest version angular 1 it's
  • 00:01:34 still getting used a lot it is very
  • 00:01:36 popular and a lot of webpages use it
  • 00:01:38 angular Q in theory at least it's better
  • 00:01:41 than angular 1 faster better performance
  • 00:01:44 so that should be a big advantage in the
  • 00:01:46 future however I will just say that the
  • 00:01:49 angular team messed something up during
  • 00:01:52 the development of angular 2 mostly
  • 00:01:54 their communication wasn't that great
  • 00:01:57 and they also gave me a shot in the back
  • 00:02:00 when they changed something in release
  • 00:02:04 candidate phase and just to you know
  • 00:02:06 release candidate normally means we
  • 00:02:08 don't make any braking changes to the
  • 00:02:12 API in general unless it's
  • 00:02:14 absolutely needed I guess it was
  • 00:02:16 absolutely needed but still everyone was
  • 00:02:19 relying on some continuity I guess and
  • 00:02:21 they made breaking changes very breaking
  • 00:02:24 changes to Engler multiple times and
  • 00:02:26 again the communication wasn't that
  • 00:02:28 great it was like new release breaking
  • 00:02:30 change here you go and I think that
  • 00:02:32 really destroyed some trust or some
  • 00:02:35 people really don't trust angular and
  • 00:02:37 the team behind it anymore because they
  • 00:02:39 fear that when they create an app with
  • 00:02:41 angular it's going to be useless in one
  • 00:02:45 year because angular 5 or 6 or 7 or
  • 00:02:47 whatever is coming out and will render
  • 00:02:49 everything deprecated or well useless is
  • 00:02:54 what they wrote and that is a problem
  • 00:02:56 now I don't believe it's going to be
  • 00:02:59 like that
  • 00:02:59 yang our team is saying that they will
  • 00:03:01 do their best to provide backward
  • 00:03:03 compatibility
  • 00:03:04 they will also release long-term
  • 00:03:06 stability releases so releases which
  • 00:03:08 will get security updates for a longer
  • 00:03:10 time still they will have to prove this
  • 00:03:13 and that is definitely something which
  • 00:03:16 gives angler a harder stand that it
  • 00:03:19 would need to have due to its very
  • 00:03:22 famous history with the angular one now
  • 00:03:25 whatever thing angular introduced which
  • 00:03:28 certainly isn't liked by everyone is
  • 00:03:32 typescript now I like it I believe it
  • 00:03:34 leads us to write better code it forces
  • 00:03:37 us to write better code and that is good
  • 00:03:39 in itself however if you have a vanilla
  • 00:03:43 only excuse me a JavaScript only
  • 00:03:45 background adapting two types of can be
  • 00:03:48 challenging if you however already knew
  • 00:03:51 language is like c-sharp or Java or any
  • 00:03:54 other language which uses types and
  • 00:03:57 interfaces you won't have that heart of
  • 00:04:00 the transition and since I do have that
  • 00:04:03 background I really like typescript as
  • 00:04:05 mentioned I think it allows us to write
  • 00:04:07 better code now that's it for angular
  • 00:04:09 and of course you could say way more but
  • 00:04:11 that is what I like and don't like about
  • 00:04:13 it angular now how does it compare to
  • 00:04:15 react and view to answer this let's have
  • 00:04:18 a look at let's say react next I'll be
  • 00:04:21 honest I'm not the biggest fan of
  • 00:04:23 reactant that's just a personal thing we
  • 00:04:25 act as a great framework and if you like
  • 00:04:27 it definite
  • 00:04:28 go for it nothing bad about it we see it
  • 00:04:31 being used by Facebook obviously and a
  • 00:04:33 lot of other companies too it is a
  • 00:04:35 framework which has proven itself
  • 00:04:37 however I don't like it that much I do
  • 00:04:41 know it I create some projects with it
  • 00:04:43 but I'm not the biggest fan of react
  • 00:04:45 whenever I had to use it I really had to
  • 00:04:48 force myself because I don't like the
  • 00:04:51 general idea in theory I would like that
  • 00:04:54 we use JavaScript for everything but in
  • 00:04:56 practice that JSX thing just isn't my
  • 00:05:00 style and not because I don't like
  • 00:05:02 mixing HTML and JavaScript that wouldn't
  • 00:05:05 be my problem here or not my main
  • 00:05:06 problem the problem I have is that since
  • 00:05:10 JSX
  • 00:05:11 is just some some tactical sugar to
  • 00:05:13 write HTML with javascript we can't use
  • 00:05:17 normal HTML there this is why we have to
  • 00:05:20 use class name instead of class if you
  • 00:05:22 want to assign a CSS class I understand
  • 00:05:25 why that is but I don't like it we have
  • 00:05:28 HTML we have CSS why would we start
  • 00:05:31 writing everything in JavaScript and
  • 00:05:34 sacrifice all the features HTML and CSS
  • 00:05:37 there native versions give us I don't
  • 00:05:40 get it I don't like it so that's just my
  • 00:05:42 opinion though you may like it a lot of
  • 00:05:44 people like it not my style though and I
  • 00:05:48 think it's due to this strange mixture
  • 00:05:51 of JavaScript and wannabe HTML that can
  • 00:05:55 be really hard to learn and master react
  • 00:05:58 it's easy to create your first
  • 00:05:59 components but really right and correct
  • 00:06:01 react code and understanding how
  • 00:06:04 everything works together how you loop
  • 00:06:07 through a couple of elements and output
  • 00:06:08 a list item for each for example
  • 00:06:10 definitely is challenging for newcomers
  • 00:06:12 and that per se is not a bad thing
  • 00:06:15 angular certainly is challenging to you
  • 00:06:17 but the overall idea behind react really
  • 00:06:21 has to connect you if that's the case
  • 00:06:23 there's nothing wrong with it and it's a
  • 00:06:25 great framework one of the most popular
  • 00:06:28 ones right now and if anger Q should
  • 00:06:30 fail to follow angular ones path reacts
  • 00:06:34 might very well be the king of the
  • 00:06:36 framework so to say but again the
  • 00:06:39 reasons I mentioned might be reasons
  • 00:06:41 why you might not like it too and again
  • 00:06:44 that's just my opinion now how does it
  • 00:06:47 compare to angular then well react has
  • 00:06:50 one advantage obviously it uses
  • 00:06:52 JavaScript however typically es6 so you
  • 00:06:56 will still have to learn es6 and you
  • 00:06:58 will have to learn how to set up a
  • 00:07:00 development environment where you can
  • 00:07:01 use es6 but still that might be easier
  • 00:07:04 than learning typescript so I guess that
  • 00:07:06 is definitely something maybe which
  • 00:07:08 makes it easier to get into react and
  • 00:07:10 work with it additionally a lot of the
  • 00:07:14 optimization stuff you have to do with
  • 00:07:16 angular offline compilation and so on
  • 00:07:20 doesn't have to be done in a reactive
  • 00:07:22 because everything is JavaScript already
  • 00:07:24 on the other hand since we have a clear
  • 00:07:27 separation between HTML and typescript
  • 00:07:30 for example in angular you can use
  • 00:07:32 normal HTML code than writing your
  • 00:07:34 template you can't do that in react
  • 00:07:36 since you use JSX which is just
  • 00:07:38 JavaScript in the end and it's that
  • 00:07:40 general idea of using templates and the
  • 00:07:44 logic in an extra file or in the
  • 00:07:46 typescript code in general or mixing
  • 00:07:49 everything which may really not be your
  • 00:07:52 style or you may prefer one of the two
  • 00:07:55 styles for me it's clearly angular style
  • 00:07:58 react also doesn't bring all the
  • 00:08:02 features angular brings you have to add
  • 00:08:05 an extra router which is developed by
  • 00:08:06 the community you have to add extra form
  • 00:08:09 validation packages that's all possible
  • 00:08:11 but since for angular all these things
  • 00:08:14 are developed by the angular team you
  • 00:08:16 have a higher chance of these packages
  • 00:08:19 getting regular updates and working with
  • 00:08:22 the latest version allure for react that
  • 00:08:24 might not necessarily be the case though
  • 00:08:27 I will say that react has a very active
  • 00:08:29 and vibrant community such chances are
  • 00:08:32 highs you will find the packages you
  • 00:08:33 need you could of course say more and if
  • 00:08:37 you get something to share in general
  • 00:08:39 related to anything of that video
  • 00:08:40 definitely leave us in the comment
  • 00:08:42 section so what else might we have a
  • 00:08:45 look at when comparing react with
  • 00:08:46 angular well they could have a look at
  • 00:08:48 the chopped perspectives that will in
  • 00:08:51 general be equal though we have to be
  • 00:08:53 careful angles you will
  • 00:08:55 are relatively new so definitely right
  • 00:08:57 now there are more jobs available for
  • 00:08:59 react than they are for react F for
  • 00:09:02 angular 2 for example what about
  • 00:09:05 performance well there are a lot of ways
  • 00:09:07 to matter that again I can only point to
  • 00:09:09 the course I mentioned at the beginning
  • 00:09:10 of the video you can also have a look at
  • 00:09:13 a benchmark I'll link here in the video
  • 00:09:15 description where you can run your own
  • 00:09:17 benchmark with some predefined tests
  • 00:09:19 comparing these frameworks and for what
  • 00:09:22 maybe use these frameworks well for
  • 00:09:25 angular for example we're pretty much
  • 00:09:27 limited to creating single page
  • 00:09:29 applications you can't just drop it into
  • 00:09:32 your full stack or multi page
  • 00:09:34 application and try enhancing the
  • 00:09:36 individual pages that's not what it's
  • 00:09:38 made for and it won't be a great app if
  • 00:09:40 you try to do that with react however
  • 00:09:43 that is definitely possible whilst you
  • 00:09:45 can create signa page applications with
  • 00:09:47 the tool unless you might argue that the
  • 00:09:50 focus is kind of shifting to that you
  • 00:09:52 can definitely just drop in do you react
  • 00:09:55 and react on imports into some HTML page
  • 00:09:58 some existing view of your back-end so
  • 00:10:00 to say and start using react features on
  • 00:10:03 that view without having to create a
  • 00:10:05 fully fledged single page application so
  • 00:10:07 that might be an advantage if you're
  • 00:10:09 looking for that ladder functionality
  • 00:10:10 enhancing your full stack app then react
  • 00:10:13 might be your choice so that's it for
  • 00:10:16 react versus angular how about view
  • 00:10:19 I like view chess a lot for me it's a
  • 00:10:23 bit like if react and angular has sex
  • 00:10:26 and we really have a great framework
  • 00:10:28 there with a lot of great ideas from
  • 00:10:31 both our frameworks from angular and
  • 00:10:33 react view chess isn't perfect of course
  • 00:10:36 it still has things which are which you
  • 00:10:39 might not like but what I do like about
  • 00:10:42 it is you can use es 5 and it will be
  • 00:10:44 absolutely fine you can use es6 and will
  • 00:10:47 be great you can use typescript though
  • 00:10:49 is a bit harder but that's not redo able
  • 00:10:52 to set up and not that hard anymore to
  • 00:10:54 be honest but you can use all these free
  • 00:10:56 languages and pick the one you like the
  • 00:10:58 most we have a separation of template
  • 00:11:01 and the JavaScript code which as you
  • 00:11:04 already heard in the studio I like it
  • 00:11:06 allows us to use
  • 00:11:08 HTML normal CSS and JavaScript to
  • 00:11:11 connect all these things it is very lean
  • 00:11:15 just like react but unlike react a
  • 00:11:18 router for example is provided by the
  • 00:11:20 view team which is great because again
  • 00:11:23 we have the argument that we probably
  • 00:11:24 will receive timely updates in general
  • 00:11:28 though it's also kind of like react
  • 00:11:30 there aren't a ton of packages shipping
  • 00:11:33 with view you will have to bring a lot
  • 00:11:35 from the community for example for
  • 00:11:37 invalidation something which isn't built
  • 00:11:39 interview you will have to get a package
  • 00:11:41 for that and that again leaves you open
  • 00:11:43 to the same disadvantages we had for it
  • 00:11:45 react that you have to rely on the
  • 00:11:48 package offers updating their stuff and
  • 00:11:50 so on what you also might not like is
  • 00:11:53 that it is or it can get very much code
  • 00:11:59 in bigger projects let me put it like
  • 00:12:01 this we don't have dependency injection
  • 00:12:03 stuff like that and therefore it it
  • 00:12:07 doesn't have a as streamlined concept or
  • 00:12:12 as as modular concept let me put it like
  • 00:12:15 this as angular has it has a great
  • 00:12:16 concept and you can write modular code
  • 00:12:18 you split your code over multiple files
  • 00:12:20 we have view x4 state management
  • 00:12:23 official package all great but when it
  • 00:12:27 comes to certain things
  • 00:12:29 angular might still be the framework
  • 00:12:31 which allows you to write a bit more
  • 00:12:34 lean or focus code you could say on the
  • 00:12:39 other hand that might not really matter
  • 00:12:41 for you because maybe you're not writing
  • 00:12:43 their next super big enterprise level
  • 00:12:46 application or you are doing that and of
  • 00:12:49 course you can still find ways to manage
  • 00:12:51 your code when we have a look at
  • 00:12:53 performance again there are thousands of
  • 00:12:54 ways of measuring that have a look at
  • 00:12:56 the benchmark I mentioned earlier link
  • 00:12:58 to the video description
  • 00:12:59 what about viewers react well if we have
  • 00:13:03 a look at view and react they are very
  • 00:13:05 similar in some regards we have again
  • 00:13:08 this clear separation between template
  • 00:13:10 and JavaScript and view though we have
  • 00:13:13 two very lean frameworks and for me the
  • 00:13:16 reason why I like view J's more really
  • 00:13:21 is that SAP
  • 00:13:21 raishin of template's CSS code and
  • 00:13:24 javascript code that is really for me
  • 00:13:27 the tipping point i guess i may be
  • 00:13:30 combined with the fact that we have an
  • 00:13:32 official state management package ux and
  • 00:13:35 an official router these are reasons why
  • 00:13:38 I really like view view chest also has a
  • 00:13:41 very vibrant community very active
  • 00:13:43 community very friendly community too
  • 00:13:45 and it has a great documentation I have
  • 00:13:47 to give it that it has the best
  • 00:13:49 documentation of all the free frameworks
  • 00:13:51 if you compare it to the angular or
  • 00:13:53 react Docs you will know why a lot of
  • 00:13:56 people love learning new chairs it's
  • 00:13:58 just awesome it makes it very easy to
  • 00:14:00 get started it gets a lot of things
  • 00:14:02 right one major disadvantage certainly
  • 00:14:06 is that it doesn't have the backing
  • 00:14:09 angular or react have angular is backed
  • 00:14:13 by Google developed by Google and react
  • 00:14:17 obviously by Facebook view chess by even
  • 00:14:20 you great guy X Google employee but no
  • 00:14:24 big company beauteous q which is the
  • 00:14:28 most recent version it's also pretty new
  • 00:14:30 and we have way less jobs available for
  • 00:14:32 view than we have for react or an angler
  • 00:14:35 that might change though of course
  • 00:14:37 because it is a great framework and if
  • 00:14:39 more people are picking it up more
  • 00:14:42 companies will start adopting it and we
  • 00:14:44 will have more jobs and especially in
  • 00:14:46 the Asian market we have great companies
  • 00:14:48 like Alibaba using view chaos already so
  • 00:14:52 I think there is light on your isin but
  • 00:14:54 right now it's definitely worse from a
  • 00:14:57 job perspective though that's important
  • 00:14:59 if you have a look at the get up
  • 00:15:00 activity github stars and so on you will
  • 00:15:03 see that it's very popular already so
  • 00:15:06 that was me just rambling about all
  • 00:15:08 these frameworks and which one you might
  • 00:15:11 choose and how they compare to each
  • 00:15:14 other and again just my thoughts your
  • 00:15:17 thoughts might differ maybe you get
  • 00:15:20 things to add I'd be very interested to
  • 00:15:22 hear your thoughts please share them in
  • 00:15:24 the comment section