- September 13, 2018
- Posted by: Bhoomi Bhalani
- Category: Enterprise Application, nuxtjs, vuejs, vuex, Web Development
Base of the app
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)
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.
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.
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.
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 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 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.
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 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.
- 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.
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
requireit 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!
- 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.
Error Reporting Tool
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 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 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.