Category: Vue JS

Vue vs Angular Framework Comparison

Selecting a front-end framework can be a tricky and time-consuming process, and many would be developers encounter this dilemma whilst getting “information overload in the process! In today’s article, I am going to quickly compare a couple of JavaScript frameworks which are popular choices, Vue vs. Angular. Let’s look at their history, job market, and learning curve, and other characteristics that will help us determine the winner. After that, I guess, you’ll be able to decide which one to pick for your front-end or full-stack development project.

Library vs. Framework

Let us get the terminology clear before we dive into discussing the features and practical uses of the frameworks in question. Some developers use these terms ‘library’ and ‘framework’ interchangeably, but they’re actually different. A Library is a collection of reusable code that is used to solve common problems.

There are various libraries out there for addressing different problems. For example, we have libraries for performing mathematical calculations. We also have libraries for machine learning, and so on. A framework provides us with a lot of reusable code, just like a library, but it also gives us a structure or a skeleton for application development.

So when using a framework, we have to build our application according to that framework. Frameworks have opinions in terms of how we should structure our applications, how the application should get started, how various components should interact with each other, and so on.

Why Use Frameworks and Libraries?

Angular and Vue are both examples of popular frameworks for building front-end applications. One of the questions we get most often is,
“Why do we have to use a framework or a library to create our apps? Can’t we get by with plain old JavaScript?”

The answer is, “Yes, you certainly can.” But that would be a waste of a lot of  time. Here is the reason. Imagine you want to build a desk. Would you buy pieces of wood and put them together? Or you’d prefer to go to the forest and cut the trees first to get wood? There’s no reason to cut the trees, of course, when there is plenty of wood ready for you to reuse.

We use frameworks and libraries to maximize our productivity and speed up the web development process. There is a lot of code that’s tested and ready for us to reuse without having to reinvent the wheel, in a similar way to some of the well known CSS Frameworks.

The concept with the above is to shorten the development time of a site or app by using pretested and laid out blocks which just make life a lot easier.

Vue.js vs. Angular: Popularity

Vue and Angular are among the top tools used for building web apps these days. But which of the two participating in the Vue vs. Angular duel is better? Let’s find out right now.

We suggest that you look at the results of this StackOverflow developer server in 2019. Here’s the list of the most loved web frameworks.

Angular vs. Vue graph

As you may see, the winner is React, which we’re not going to discuss in this article. But it was closely followed by Vue.js last year, and Angular seems to be losing its popularity compared with 2018.

Still, when it comes to large businesses, Angular is definitely a favorite here. It’s used not only by Google but also by other big companies like Nike, Lego, and The Guardian.

Notwithstanding its being extremely popular with developers, Vue is somewhat neglected by large corporations. Still, it’s gradually picking up and being adopted by more and more companies. Now small businesses like GitLab, Repro, and 9Gag use Vue to create their projects, and chances are other companies will soon follow their example.

Angular vs. Vue: History

Now that you know which of the two frameworks is more popular with developers, it’s about time we took a quick look at their history.

Angular is one of the oldest frameworks. It’s developed by Google and was initially released almost ten years ago. Until 2016, it used to be called Angular.js.

In 2016, the Angular team released Angular 2, which boasted lots of improvements, including the support for Ng Modules. But, in fact, the second version had nothing in common with Angular.js. It’s possible to state that it was a completely new framework. So, to reduce confusion, the Angular team decided to drop the “js” from the original name, and they called the new framework “Angular.” This made a lot of developers unhappy. Their apps, which were developed with Angular.js, had to be rebuilt using the new version. Also, over the last three years, there have been several other releases, including Angular 4 that came out in 2017.

Unlike Angular, Vue wasn’t created by a huge tech company. It was designed by an ex-Google employee six years ago. Presently, it’s maintained by a group of enthusiasts. Even though it’s a new tool, it has gained a lot of popularity over the past couple of years and is on the increase among many web technology outfits due to its clear documentation, which makes it easier to be used by large teams.

Angular vs. Vue: Differences

As you know, Angular is not just about creating and rendering components. Though it has components too and also follows a components-driven approach, Angular has earned the reputation as a complete framework or even platform. It boasts a rich set of tools that help you with developing modern web apps.

All these tools you need for very large apps ship as part of Angular developed by the Angular team. So, you don’t even need to rely on some third-party vendors. Additionally, it uses the native API, HTML templates for the components, and CSS, which you can easily add if need be. On the downside, it uses Typescript as a language, which is pretty hard to master.

Just like Angular, Vue is a complete solution. Though Vue boasts fewer features than its counterpart, this is increasing, for example with the introduction shortly of Vue 3 and the Vue Composition API, and it’s widely used for building UI components in the web application market. It also has routing and state management solution courtesy of the Vue team. Similar to Angular, it uses native API, HTML templates, and CSS. As you see, Vue is quite similar to Angular, especially from the syntax perspective.

6. Angular vs. Vue: Learning Curve

Angular has always been famous for having a steep learning curve because it’s a full-blown framework. In contrast, because Vue is less complex and , it has fewer concepts that you need to learn and understand with less complicated syntax. I would say, learning Vue requires a smaller amount of time and effort than its counterpart Angular.

So, if you’re starting out, I would say – start with Vue. Moreover, it gives you tons more job opportunities Once you learn Vue, if you want to expand your career options or just curious, you can proceed to master Angular.

7. Angular vs. Vue: Performance

We can rightly note that both Vue and Angular offer pretty good performance to users. They might differ on your machine or your exact requirements, or in your web app, of course. But, in general, both tools are darn fast and efficient.

One thing to note, though, according to the benchmark test run on the frameworks in question, Angular was found to be a bit slower. Still, this is hardly surprising, since Angular ships with a pretty big codebase. Consequently, the apps you create with this tool are more heavy and unwieldy. Hopefully, this will drastically become better in the future versions (Angular 7 and higher), where Angular will use a more improved renderer leading to a smaller codebase. If you enjoyed this post, why not  check out this article on How To Build Vue Wordpress Rest API Websites

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more!

Filed under: Development, Trends, Vue JS, WordpressTagged with: ,

How To Build Vue Wordpress Rest API Websites

wpgridsome

Want to build a Vue JS/Wordpress Rest API backend hybrid, with superfast loading times? Here we take a look at Gridsome static site generator for Vue JS, which is a similar tool to React’s Gatsby generator, and build a site using the Vue Wordpress Rest API.

The use of Jamstack (Javascript, API’s and Markup) technologies is on the rise nowadays, as they provide a simpler developer experience, better performance and greater scaleability. Most React developers are familiar with the Gatsby site generator, however with Vue JS there are a number of different options. Here we take a look at the Gridsome cli for Vue JS, which has some cool features out of the box, and a lot more that can be added with the use of plugins.

Screenshot

Gridsome for Vue Wordpress

With Gridsome, you get the following out of the box, in a quick two minute install.

Local development with hot-reloading – See code changes in real-time.

Data source plugins – Connect to any popular Headless CMSs, APIs or Markdown-files.

File-based page routing – Quickly create and manage routes with files.

Centralized data management – Pull data into a local, unified GraphQL data layer.

Vue.js for frontend – A lightweight and approachable front-end framework.

Auto-optimized code – Get code-splitting and asset optimization out-of-the-box.

Static files generation – Deploy securely to any CDN or static web host.

Built-in component that outputs an optimized progressive image – resizes and crops in real-time when developing.

Everything Lives in Github

With a JAMstack project, anyone should be able to do a git clone, install any needed dependencies with a standard procedure (like npm install), and be ready to run the full project locally. No databases to clone, no complex installs. This reduces contributor friction, and also simplifies staging and testing workflows.

Modern Build Tools

Take advantage of the world of modern build tools. It can be a jungle to get oriented in and it’s a fast-moving space, but you’ll want to be able to use tomorrow’s web standards today without waiting for tomorrow’s browsers. And that currently means Babel, PostCSS, Webpack, and friends.

Automated Builds

Because JAMstack markup is prebuilt, content changes won’t go live until you run another build. Automating this process will save you lots of frustration. You can do this yourself with webhooks, or use a publishing platform that includes the service automatically.

Wordpress Rest API

Since the introduction of the Wordpress Rest API , it has opened up a whole new world of possibilities for Viue JS/Wordpress hybrids, utilizing the features above and combining them with the vast infrastructure and support available with Wordpress. Whilst this may not be suitable for many requirements, there are certainly some which will benefit from this approach.

Wordpress Vue Starter Templates

The Gridsome Wordpress setup (there are others) has the features you need to connect to a Wordpress back end to pull in data to display at the Vue front end, typically loading faster than normal and with a lot of other benefits.

For anyone interested in building a Vue JS front end and using the Wordpess Rest API Ive created some starter templates using Gridsome which have been enhanced from the standard Gridsome Wordpress starter with some extra bits, to get you up and running fast. Please note I haven’t used the g-image here, so remember to change those when inserting your own images.

The Wordpress API is https://vuewp.xhostcom.com/ and we use the endpoints from that to test some data. These are already in the config files, but if you have your own Wordpress setup you can obviously use that, just change the url in gridsome.config.js and netlify.toml

You will first need NodeJS and NPM installed, and Gridsome using the command

npm install –global @gridsome/cli

And then clone from Github any of the following starters, which will get you up and running quickly.

bulma1

Example

Code (Bulma CSS)

bulma2

Example

Code (Bulma CSS)

milli1

Example

Code (Milligram CSS)

Here’s a blank one with just a nav bar and no CSS or JS

Example

Code (No CSS)

And also my Avivo Bootstrap Vue Wordpress theme using Bootstrap & SASS/SCSS

screenshot1

Example

Code (Bootstrap 4)

Once cloned, just run Yarn to grab the dependencies, and gridsome develop command to run the test server. You can of course change the CSS and add your own Javascript as required, but these get you up and running ready to go with the Wordpress Rest API data as is.

You can just clear the markup in all the page templates back to the <Layout> tags and put in your own markup. Creation of extra pages, once added to the menu in /components/header.vue will be routed accordingly with the superfast router, one of the best features I’ve found, and a breeze compared to others such as Nuxt.

So these are just basic starter templates, there’s a lot more that can be done using the GraphQL data bindings and other functionality in Gridsome and Wordpress to create your site.

Feel free to contribute on Github.

Vue CLI 3 & UIKit

Finally, for those who prefer the official Vue JS CLI, here’s one using that, and UIKit CSS/JS Framework, with an awesome mobile nav bar! Its NOT configured for the Wordpress Rest API but can be with a little application, or you may want to port the styles using the Gridsome starter above.

Uikit

Uikit

Uikit

Example

Code (Vue CLI – UIKit)

So, there we have a few Gridsome Vue Wordpess Starters to have a look at, and also a Vue CLI with UIKit starter to play around with and get a feel for the Vue JS Wordpress API setup, although it can get a lot more interesting if we delve deeper in to Gridsomes GraphQL, extra functions and post template features.

Feel free to check them all out on Github at Xhostcomweb. If you enjoyed this post, why not check out this article on Wordpress Dynamic Content!

Post by Xhostcom Wordpress & Digital Services, subscribe to newsletter for more

Filed under: Vue JS, WordpressTagged with: , , , , , , ,