Most used plugins with VueJS Application

Base of the app

Base of the large enterprise application impacts major role for its performance. If your application has isomorphic behavior then you should choose nuxt. In web development, an isomorphic application is one whose code (in this case, JavaScript) can run both in the server and the client. Javascript was traditionally the language of the web browser, performing computations directly on a user’s machine. This is referred to as “client-side” processing. With the advent of Node.js, JavaScript has become a compelling “server-side” language as well. If your application isn’t isomorphic then you can choose either es6 or typescript. Obviously typescript is superset of Javascript it has so many new features over ECMAScript like generics and type annotations, Interfaces, Enums, Readonly properties and Mixin etc. So Always choose typescript over ecmascript.

Data flow (Vuex v/s RxJS)

vue.js offers an official plugin called vuex, if you want to build a large scale application with highly maintain you can use it. Vuex is a state management pattern and library for vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. In short, vuex is useful to separate process with component, so it can be easier to handle.

For RxJS, there’s no official plugin available but there are many other third party plugins available for RxJs like vue-rx 

Though it has good stars on Github still you  need to check support for it. But I would suggest go for Vuex.

API (Axios v/s Fetch)

You might be familiar with guzzle or jquery ajax to making web requests and handle responses. Vue.js has plugin named vue-resource, it was official plugin from vue to create web requests. But recently, it has been removed from official. Here’s the alternative vue-resource, it is Axios. Axios is promise based HTTP client for the browser and node.js. Axios so popular in node.js and can be used in other javascript framework. You can install via npm package to use it. Here is the official axios page!

Another feature that it has over .fetch() is that it performs automatic transforms of JSON data.

If you use .fetch() there is a two-step process when handing JSON data. The first is to make the actual request and then the second is to call the .json() method on the response.

UI Library

Vuetify

At over 13k stars, Vuetifyjs provides a UI layout according to the material design specs. The V 1.0 Alpha release provides over 80 reusable components with an easy-to-remember semantic design based on type-as-you speak properties that have simple and clear names. It has great support from team.

Vue Material

A Vue component library implementing Google’s material design to the pixel. At 6.8k stars, it provides components that fit all modern Web Browsers with built-in dynamic themes and a clear goal to make its API as simple as possible. Simple, lightweight and built exactly according to the Google Material Design specs.

Bootstrap-Vue

At 6.2k stars bootstrap-vue enables you to build mobile-first, responsive UIs with Vue.js and Bootstrap 4. Available for Vue.js 2.4+, it comes with an automated WAI-ARIA accessibility markup.

Buefy

Buefy provides components built with Vue.js and Bulma. At nearly 3.6k stars, it provides lightweight components that are responsive out-of-the-box. Although component selection is somewhat limited, it kind of makes you want to give it a go.

Vue-Blu

Vue-Blu is an ui components library base on VueJS and Bulma that helps you build your web application easily.They have taken idea from element-ui and ent-design. This library has so many features but they don’t provide support anymore.

There are many other framework like Element, AT-UI, Fish-UI, Quasar, Vux etc. you can use any of the framework  but I would suggest vuetify is more reliable, popular and has great support from team.

Testing Framework

In large scale application, Unit testing is more important because it is one of the earliest testing efforts performed on the code. Sooner the bugs are detected, sooner they would be fixed and chances are less that they would be transferred over to other places in application. It gives you confidence that you’ve done enough for now and can stop tweaking and move on to the next thing. Unit Tests give you instant visual feedback, we all like the feeling of all those green lights when we’ve done. It’s very satisfying. So We always follow the best practise to write unit test cases on our project.

AVA

A minimalistic testing library, AVA takes advantage of JavaScript’s async nature and runs tests concurrently, which, in turn, increases performance.

  • AVA doesn’t create any globals for you, therefore you can control more easily what you use. I think this brings extra clarity to the tests ensuring that you know exactly what is happening.
  • Taking advantage of the async nature of JavaScript makes testing extremely beneficial. The main benefit is minimizing the wait time between deployments.
  • Contains a simple API which provides you with only what you need. This can be nice if you would like mocking support, but you’ll have to install a separate library.
  • Snapshot testing is provided via jest-snapshot which is great when you’d like to know when your application’s UI changes unexpectedly. for more detail you can checkout my blog for initial setup and basic information.

Mocha

Arguably the most used library, Mocha is a flexible library providing developers with just the base test structure. Functionality for assertions, spies, mocks, and the like are then added via other libraries/plugins.

  • If you want a flexible configuration, including the libraries that you particularly need, then the additional setup and configuration required for Mocha is something you definitely need to check out.
  • Unfortunately, the above point does have a downside, which is having to include additional libraries for assertions. This does mean that it’s a little harder, if not longer, to set up than others. That said, setting up is generally a one-time deal, but I do like being able to go a “single source truth” (documentation) instead of jumping around the show.
  • Mocha includes the test structure as globals, saving you time by not having to include or require it in every file. The downside is that plugins just might require you to include these anyway, leading to inconsistencies, and if you are OCD like me, it will eventually drive you mad!

Jest

  • For smaller projects you might not worry about this too much initially, having increased performance is great for larger projects.
  • Whilst developers primarily use Jest to test React applications, Jest can easily integrate into other applications allowing you to use it’s more unique features elsewhere.
  • Snapshot testing is a great tool to ensure that your application’s UI doesn’t unexpectedly change between releases. Although more specifically designed and used in React, it does work with other frameworks if you can find the correct plugins.
  • Unlike other libraries on the list, Jest comes with a wide API, not requiring you to include additional libraries unless you really need to.
  • Jest continues to improve considerably with every update they make.

After looking into only a few of the many different frameworks out there I find myself coming to the conclusion that choosing a framework is not black and white.

Most frameworks (Mocha being the exception) provide you with what you need at the end of the day, which is a testing environment along with the mechanisms to ensure that given the X -> Y is always returned, with a few simply giving you more “bells and whistles.”

You should feel pretty confident in choosing any of them, and the choice in my mind depends what you and your particular project wants or needs.

  • If you require a broad API along with specific (perhaps unique) features then Mocha would be your choice as the extensibility is there.
  • AVA gives you the minimum requirements. Great for providing a solid minimal foundation for you to get going fast.
  • If you have a large project, or would like to quickly get started without much configuration, then Jest would be a solid choice.

I hope this helps you in choosing your JavaScript unit testing frameworks in the future

Error Reporting Tool

Sentry

Sentry is an open-source platform for workflow productivity, aggregating errors from across the stack in real time. 500K developers use Sentry to get the code-level context they need to resolve issues at every stage of the app lifecycle. more than 1000 companies are using it . some of are such as Instagram, Airbnb, Uber, Dropbox, Reddit, MailChimp etc. Immediate notification of run-time errors. We can attack the problem immediately. We can integrate it with Jira, hipchat, Slack, Github and many more. It has more than 18k stars on Github.

pricing from https://sentry.io/pricing (PS: It may vary. You check it out on given site. *)

Rollbar

Rollbar helps development teams find and fix errors faster. Quickly pinpoint what’s broken and why. View exceptions from all of your languages, frameworks, platforms & environments in one place. Get context & insights to defeat all errors. AngelList, InstaCard, lyft, bitly, Tilt, inVisionApp, zillow, Twitch etc are using the rollbar. It unified error notification across all of our products. We can integrate it with PagerDuty, Trello, Slack, Github, segment and many more.

Pricing from https://rollbar.com/pricing/ (PS: It may vary. You check it out on given site. *)

Bugsnag

Bugsnag captures errors from your web, mobile and back-end applications, providing instant visibility into user impact. Diagnostic data and tools are included to help your team prioritize, debug and fix exceptions fast.

Bugsnag lets you monitor and capture the various errors and exceptions inside your application, and try to distinguish itself by focusing on the tools you need in order to solve them. Or in other words, the company acknowledge that once you’ve identified an error, you’ll need tools and workflows in order to fix them. Linkedin, CoinBase, codeSchool etc are using bugsnag. We can integrate it with GitLab, Trello, Slack, Github, BitBucket and many more.

Pricing from https://www.bugsnag.com/pricing/ (PS: It may vary. You check it out on given site. *)

There are so many other tools are available in market such as Airbrake, OverOps, Raygun, StackHunter etc. You can check each option if you want. I believe sentry and Rollbar are most popular among them. Although You can check other option as per your requirement.

 



Leave a Reply