Coding

Svelte vs React vs Angular vs Vue

  • 00:00:01 hi you might have seen my swelled first
  • 00:00:05 look quick start video and I do have a
  • 00:00:07 complete course on swell as well if
  • 00:00:09 you're interested in learning all about
  • 00:00:10 it the question of course is should
  • 00:00:13 Euler as well is it better than react
  • 00:00:15 angular or view
  • 00:00:17 well you might already guess the answer
  • 00:00:19 is not just yes or no it depends and in
  • 00:00:23 this video I'll try to explain
  • 00:00:24 on what it depends and in which scenario
  • 00:00:27 you might wanna choose swell over the
  • 00:00:30 other options word your options over
  • 00:00:32 swelled and why it might always be worth
  • 00:00:35 having a look at sueldo so let's dive in
  • 00:00:38 and let me give you my very own opinion
  • 00:00:40 on which one is better
  • 00:00:42 of course please share your opinion in
  • 00:00:45 the comments I'm really interested in
  • 00:00:46 hearing on what you think about this
  • 00:00:54 let's dive right in and let's have a
  • 00:00:57 look at it so I want to compare swell to
  • 00:00:59 react angular and view now the first
  • 00:01:02 important very important distinction is
  • 00:01:05 that swell is actually a compiler
  • 00:01:08 whereas the other free alternatives are
  • 00:01:11 frameworks or libraries now what does
  • 00:01:14 this difference mean it means that with
  • 00:01:16 swell q will also use a certain syntax
  • 00:01:19 to write your code you also use a
  • 00:01:21 component driven architecture for
  • 00:01:22 example you write markup and stalls and
  • 00:01:25 you write instructions in JavaScript but
  • 00:01:28 then when you run your when you build
  • 00:01:30 your app for production you actually run
  • 00:01:33 the swell compiler automatically and
  • 00:01:35 that goes all over your code all your
  • 00:01:37 code files your entire project that
  • 00:01:40 creates a bundle J's file with a bunch
  • 00:01:42 of JavaScript instructions that will
  • 00:01:44 then execute in the Dom at runtime it
  • 00:01:46 does not add some extra code or extra
  • 00:01:49 packages it does not add any framework
  • 00:01:52 code which would execute at runtime and
  • 00:01:54 that's different for react angular or
  • 00:01:56 view there when you build your
  • 00:01:58 application that code is also getting
  • 00:02:00 optimized in compiled during during
  • 00:02:04 development to some extent but then it
  • 00:02:07 works in conjunction with the library or
  • 00:02:09 framework package react angular or view
  • 00:02:12 adds so you have to ship both your
  • 00:02:14 optimized application and the optimized
  • 00:02:18 framework code that obviously means more
  • 00:02:20 code than just a bunch of instructions
  • 00:02:22 and indeed one of the advantages of
  • 00:02:24 swell'd
  • 00:02:24 is that it gives you a super small
  • 00:02:28 bundle in this case in this example
  • 00:02:30 which you find in another video I
  • 00:02:32 created it's only four kilobytes small
  • 00:02:34 and if you would create a similar
  • 00:02:35 application with you angular or react
  • 00:02:39 you might still end up with small
  • 00:02:41 applications but they would be bigger
  • 00:02:42 than that so you have a very small code
  • 00:02:45 size which you get in the end and that
  • 00:02:46 code is also a highly optimized and very
  • 00:02:50 fast during production so from these
  • 00:02:54 options swell gives you the smallest and
  • 00:02:56 very fast bundles now react also gives
  • 00:03:00 you small and fast bundles angular also
  • 00:03:02 gives you medium sized but also at
  • 00:03:04 runtime very fast bundles fast code and
  • 00:03:07 for viewing we
  • 00:03:08 have small and fast code so it's not
  • 00:03:11 horrible for the other options but they
  • 00:03:13 are certainly bigger than swelled so
  • 00:03:16 this is already all we have a clear
  • 00:03:19 winner right well that's not all
  • 00:03:22 actually having a small bundle and
  • 00:03:24 having fast code of course matters but
  • 00:03:27 it's not everything and swelled you get
  • 00:03:30 a certain core set of features you can
  • 00:03:31 work with when you develop you have a
  • 00:03:34 core syntax for outputting data for
  • 00:03:36 reacting to events and so on but that's
  • 00:03:38 basic yet it's very similar and react
  • 00:03:41 react is all about creating components
  • 00:03:43 and then rendering something to the
  • 00:03:44 screen and reacting to user input for
  • 00:03:47 angular and view it that would be
  • 00:03:48 different there for angular for example
  • 00:03:50 you have a huge set of features angular
  • 00:03:52 includes its own HTTP client validation
  • 00:03:56 routing all that stuff view also has its
  • 00:04:00 own state management library view X and
  • 00:04:02 its own router though it does not
  • 00:04:04 include validation or its own HTTP
  • 00:04:06 client so angular is to complete a
  • 00:04:09 solution which is why it's extremely
  • 00:04:10 popular amongst enterprises view is in
  • 00:04:13 between reacts very lightweight focused
  • 00:04:16 on components and swell'd also is very
  • 00:04:18 lightweight focused on components and on
  • 00:04:20 getting something onto the screen if you
  • 00:04:23 need HTTP you need to bring your own
  • 00:04:25 package or use the built-in fetch
  • 00:04:26 function if you need validation build it
  • 00:04:29 on your own or add some other javascript
  • 00:04:31 validation library this is how it works
  • 00:04:33 although as well it doesn't give you any
  • 00:04:35 additional improvements it gives you a
  • 00:04:38 highly optimized code but it does not
  • 00:04:40 give you extra features like react does
  • 00:04:43 it for example there you have lots of
  • 00:04:45 additional improvements and more
  • 00:04:46 improvements to come over the year
  • 00:04:48 something like react suspends and so on
  • 00:04:50 where react actively controls your code
  • 00:04:54 and how it runs and tries to optimize
  • 00:04:56 when the Dom is updated might
  • 00:04:59 automatically display a loading spinner
  • 00:05:00 if you're waiting for some data these
  • 00:05:03 are all time behind-the-scenes tasks
  • 00:05:06 where react helps you which is well
  • 00:05:07 doesn't give you you also have
  • 00:05:10 additional or comparable improvements in
  • 00:05:12 angular maybe not an automatic loading
  • 00:05:15 spinner but there you have features like
  • 00:05:16 differential loading which means that
  • 00:05:18 angular will give you a production ready
  • 00:05:21 application
  • 00:05:22 which detects in which environment
  • 00:05:24 you're running so in which browser and
  • 00:05:26 depending on the browser the app is
  • 00:05:28 loaded into you it will load more or
  • 00:05:30 less code taking advantage of more or
  • 00:05:33 less modern JavaScript syntax and view
  • 00:05:36 also has some additional improvements
  • 00:05:38 for example you can also create
  • 00:05:40 different bundles for different browsers
  • 00:05:42 and therefore these are all things which
  • 00:05:44 well doesn't have and that is what I
  • 00:05:46 meant small and fast buttons are nice
  • 00:05:48 but of course we also have to think
  • 00:05:50 about the ease of development with
  • 00:05:51 additional features and also if we're
  • 00:05:54 getting additional help for the
  • 00:05:55 application which might actually improve
  • 00:05:57 the runtime experience for our users
  • 00:05:59 there is more than these points though
  • 00:06:01 let's have a look at popularity swell'd
  • 00:06:04 is very popular but also very new and
  • 00:06:07 small if we have a look at the community
  • 00:06:09 it's growing rapidly especially over the
  • 00:06:12 last couple of months and it's really
  • 00:06:14 gaining some traction but of course it's
  • 00:06:16 still small especially compared to these
  • 00:06:19 alternatives react is extremely popular
  • 00:06:21 and relatively mature of course it's
  • 00:06:24 still highly actively developed for
  • 00:06:26 example react hooks were just added a
  • 00:06:28 couple of months ago but it's been there
  • 00:06:31 for a couple of years now it's getting
  • 00:06:33 used by major big enterprises it
  • 00:06:35 definitely is there to stay it's the
  • 00:06:37 same for angular angular also is
  • 00:06:39 extremely popular and also very mature
  • 00:06:42 it's also getting used by a lot of
  • 00:06:45 enterprises and will not go anywhere and
  • 00:06:48 do is also very popular even more
  • 00:06:51 popular than angular and react are and
  • 00:06:53 it's not quite as mature but still
  • 00:06:56 relatively mature
  • 00:06:58 it's maturing more and more and it's
  • 00:07:00 also getting used by more and more
  • 00:07:02 bigger companies and compared to these
  • 00:07:04 alternatives swelled really is smaller
  • 00:07:07 but I believe it's still worth a look
  • 00:07:09 and I'll come back to this in a second
  • 00:07:11 first of all let's have a look at who is
  • 00:07:13 developing these solutions and first
  • 00:07:16 well it's basically a one-man show rich
  • 00:07:17 harris employed at the new york times is
  • 00:07:20 developing it it's open source so you
  • 00:07:22 can contribute but it's mostly him doing
  • 00:07:24 all the groundwork the foundation work
  • 00:07:26 and the development especially in the
  • 00:07:28 past four reactors obviously developed
  • 00:07:31 by facebook for angular by Google and
  • 00:07:33 for review there is no big company diva
  • 00:07:36 helping it but it's actually open source
  • 00:07:38 team effort initially when it first came
  • 00:07:41 out it also was a one-man show by Avenue
  • 00:07:44 but since then it matured and now it has
  • 00:07:46 a really big team splitting the work and
  • 00:07:49 working on you so dad has really
  • 00:07:50 developed into something bigger and now
  • 00:07:53 is that the obvious question is should
  • 00:07:55 you learn it and in my opinion swelled
  • 00:07:58 is worth exploring or adding it to your
  • 00:08:00 next project as well that has a very
  • 00:08:02 intriguing syntax it gives you very fast
  • 00:08:05 and small applications it has some very
  • 00:08:07 interesting ideas which I haven't seen
  • 00:08:10 like this in the other frameworks and
  • 00:08:12 libraries and even though it's small it
  • 00:08:15 might definitely be worth for Look Now
  • 00:08:17 to not give you any illusions you'll
  • 00:08:19 probably not find a swell job posting
  • 00:08:22 it's too small for dad but you might be
  • 00:08:25 able to use it in your next project
  • 00:08:27 suggest it to your decision makers in
  • 00:08:29 your company and maybe employ it in a
  • 00:08:31 smaller project and a part of a project
  • 00:08:33 or if you're working on your own alone
  • 00:08:36 if you have a project you want to
  • 00:08:37 realize well then you should definitely
  • 00:08:39 have a look at swell'd because it then
  • 00:08:41 really is a decent alternative to
  • 00:08:43 deserver frameworks and libraries now of
  • 00:08:46 course if your primary goal is to get a
  • 00:08:48 job with what you learn here then this
  • 00:08:51 swell'd knowledge might help you get a
  • 00:08:53 better understanding for JavaScript in
  • 00:08:55 general and it also has similar concepts
  • 00:08:57 like react and angular and view does so
  • 00:08:59 it might still help you there but of
  • 00:09:01 course react to angular and view will be
  • 00:09:03 your better options your better
  • 00:09:04 alternatives because these are all
  • 00:09:07 established especially react and angular
  • 00:09:09 and view is also more and more
  • 00:09:11 establishing so if that is the primary
  • 00:09:13 goal jobs well then take the other ones
  • 00:09:16 if you want to explore something
  • 00:09:18 exciting you though if you're working on
  • 00:09:20 your own if you want to suggest it in
  • 00:09:22 your company or if you simply want to
  • 00:09:24 broaden your horizon and get a better
  • 00:09:26 JavaScript developer dense wealth
  • 00:09:28 definitely is worth a look though and I
  • 00:09:30 would strongly recommend learning it