Vue.js

Vue.js

Application and Data / Libraries / Javascript UI Libraries
Avatar of jeyabalajis
CTO at FundsCorner ·

At FundsCorner, when we set out to pick up the front-end tech stack (around Dec 2017), we drove our decision based on the following considerations:

(1) We were clear that we will NOT have a hybrid app. We will start with Responsive Web & once there is traction, we will rollout our Android App. However, we wanted to ensure that the users have a consistent experience on both the Web & the App. So, the front-end framework must also have a material design component library which we can choose from.

(2) Before joining FundsCorner as a CTO, I had already worked with Angular. I enjoyed working with Angular, but I felt that I must choose something that will provide us with the fastest time from Concept to Reality.

(3) I am strong proponent of segregating HTML & JavaScript. I.e. I was not for writing or generating HTML through JavaScript. Because, this will mean that the Front-end developers I have to hire will always be very strong on JavaScript alongside HTML5 & CSS. I was looking for a Framework that was on JavaScript but not HEAVY on JavaScript.

(3) The first iteration of the web app was to be done by myself. But I was clear that when someone takes up the mantle, they will be able to come up the curve fast.

In the end, Vue.js and Vuetify satisfied all the above criteria with aplomb! When I did our first POC on Vue.js I could not believe that front-end development could be this fast. The documentation was par excellence and all the required essentials that come along with the Framework (viz. Routing, Store, Validations) etc. were available from the same community! It was also a breeze to integrate with other JavaScript libraries (such as Amazon Cognito).

By picking Vuetify, we were able to provide a consistent UI experience between our Web App and Native App, besides making the UI development ultra blazing fast!

In the end, we were able to rollout our Web App in record 6 weeks (that included the end to end Loan Origination flow, Loans management system & Customer engagement module). www.jeyabalaji.com

READ MORE
Advanced features of Vue using Vuetify in 10 minutes (medium.com)
21 upvotes·2 comments·164.4K views
Avatar of tim_nolet
Founder, Engineer & Dishwasher at Checkly ·

Heroku Docker GitHub Node.js hapi Vue.js AWS Lambda Amazon S3 PostgreSQL Knex.js Checkly is a fairly young company and we're still working hard to find the correct mix of product features, price and audience.

We are focussed on tech B2B, but I always wanted to serve solo developers too. So I decided to make a $7 plan.

Why $7? Simply put, it seems to be a sweet spot for tech companies: Heroku, Docker, Github, Appoptics (Librato) all offer $7 plans. They must have done a ton of research into this, so why not piggy back that and try it out.

Enough biz talk, onto tech. The challenges were:

  • Slice of a portion of the functionality so a $7 plan is still profitable. We call this the "plan limits"
  • Update API and back end services to handle and enforce plan limits.
  • Update the UI to kindly state plan limits are in effect on some part of the UI.
  • Update the pricing page to reflect all changes.
  • Keep the actual processing backend, storage and API's as untouched as possible.

In essence, we went from strictly volume based pricing to value based pricing. Here come the technical steps & decisions we made to get there.

  1. We updated our PostgreSQL schema so plans now have an array of "features". These are string constants that represent feature toggles.
  2. The Vue.js frontend reads these from the vuex store on login.
  3. Based on these values, the UI has simple v-if statements to either just show the feature or show a friendly "please upgrade" button.
  4. The hapi API has a hook on each relevant API endpoint that checks whether a user's plan has the feature enabled, or not.

Side note: We offer 10 SMS messages per month on the developer plan. However, we were not actually counting how many people were sending. We had to update our alerting daemon (that runs on Heroku and triggers SMS messages via AWS SNS) to actually bump a counter.

What we build is basically feature-toggling based on plan features. It is very extensible for future additions. Our scheduling and storage backend that actually runs users' monitoring requests (AWS Lambda) and stores the results (S3 and Postgres) has no knowledge of all of this and remained unchanged.

Hope this helps anyone building out their SaaS and is in a similar situation.

READ MORE
20 upvotes·410.9K views

Quasar Framework FeathersJS Node.js Vue.js SendinBlue Zeit Now GitHub

It was almost too easy to build a complete Feathers Rest API combined with Quasar SSR and reactive form that we are serving through an i-frame within our main site for serving our newsletter signup and opt-in page. Total time: 15 hrs. Check it out:

https://quasar.dev/newsletter

READ MORE
The Quasar Method - Quasar Framework - Medium (medium.com)
20 upvotes·104.7K views
Avatar of lazercaveman
Creative Web Developer at Ali Soueidan ·

Application and Data: Since my personal website ( https://alisoueidan.com ) is a SPA I've chosen to use Vue.js, as a framework to create it. After a short skeptical phase I immediately felt in love with the single file component concept! I also used vuex for state management, which makes working with several components, which are communicating with each other even more fun and convenient to use. Of course, using Vue requires using JavaScript as well, since it is the basis of it.

For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.

To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.

DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.

Side note: I used npm for package management. 🎉

*Business Tools: * I use Asana to organize my project. This is a big advantage to me, even if I work alone, since “private” projects can get interrupted for some time. By using Asana I still know (even after month of not touching a project) what I’ve done, on which task I was at last working on and what still is to do. Working in Teams (for enterprise I’d take on Jira instead) of course Asana is a Tool which I really love to use as well. All the graphics on my website are SVG which I have created with Adobe Illustrator and adjusted within the SVG code or by using JavaScript or CSS (SASS).

READ MORE
17 upvotes·233.4K views
Avatar of johnnyxbell
Senior Software Engineer at StackShare ·
Recommends
ReactReact

I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.

It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.

READ MORE
17 upvotes·2 comments·1.2K views
Avatar of hootener
CTO at Codecov ·
Shared insights
on
Vue.jsVue.jsPythonPythonvuexvuexJestJest
at

We chose Vue.js at Codecov to replace a front end that was based mostly on server side rendered Python templates, and was getting fairly long in the tooth. The move to Vue.js allowed us to take a more component driven approach to our front end, providing greater flexibility and reuse when creating new pages and refactoring old ones. Another bonus was how easily we could integrate Axios with VueJS for making AJAX calls within Vue.js components and their associated vuex stores. We were also able to easily integrate Vue.js with the Jest testing framework, which allowed to provide test coverage for a front end where none previously existed.

The move to Vue.js has allowed us to be more agile in our front end development by further decoupling our front end from our back end. Additionally, by fully embracing a component-driven approach, we're able to more easily isolate and test functionality, leading to a more readible, maintainable, and extensible front end codebase.

READ MORE
16 upvotes·57K views

For the frontend of https://www.rsvpkeeper.com I went with Vue.js.

I've been using Vue for about 4 years now and it's been awesome. The reactivity, easy to grok structure, the speed, and the ease-of-use - it's just fun to work with.

And for a large app - vuex comes in clutch. Back in the day I built a few apps completely in jQuery - jeez just thinking about it makes me sweat. It was no fun dealing with "state" back then - now it's a dream with vuex getters, actions, and mutations.

These days - it's a no-brainer which frontend framework I'm going to use - Vue all day baby!

READ MORE
16 upvotes·19.7K views
Avatar of appurist
Developer and Owner at Appurist Software ·

I'm building most projects using: Server: either Fastify (all projects going forward) or ExpressJS on Node.js (existing, previously) on the server side, and Client app: either Vuetify (currently) or Quasar Framework (going forward) on Vue.js with vuex on Electron for the UI to deliver both web-based and desktop applications for multiple platforms.

The direct support for Android and iOS in Quasar Framework will make it my go-to client UI platform for any new client-side or web work. On the server, I'll probably use Fastly for all my server work, unless I get into Go more in the future.

Update: The mobile support in Quasar is not a sufficiently compelling reason to move me from Vuetify. I have decided to stick with Vuetify for a UI for Vue, as it is richer in components and enables a really great-looking professional result. For mobile platforms, I will just use Cordova to wrap the Vue+Vuetify app for mobile, and Electron to wrap it for desktop platforms.

READ MORE
15 upvotes·1 comment·185.9K views

When Redash was created 5 years ago we chose AngularJS as our frontend framework, but as AngularJS was replaced by Angular 2 we had to make a new choice. We decided that we won't migrate to Angular, but to either React or Vue.js. Eventually we decided to migrate to React for the following reasons:

  1. Many in our community are already using React internally and will be able to contribute.
  2. Using react2angular we can do the migration gradually over time instead of having to invest in a big rewrite while halting feature development.

So far the gradual strategy pays off and in the last 3 major releases we already shipped React code in the Angular.js application.

READ MORE
React migration · Issue #3071 · getredash/redash · GitHub (github.com)
14 upvotes·145.5K views
Avatar of realtimeappsolutions
Realtime App Solutions ·

Coming from a non-web development environment background, I was a bit lost a first and bewildered by all the varying tools and platforms, and spent much too long evaluating before eventualy deciding on Laravel as the main core of my development.

But as I started development with Laravel that lead me into discovering Vue.js for creating beautiful front-end components that were easy to configure and extend, so I decided to standardise on Vue.js for most of my front-end development.

During my search for additional Vue.js components, a chance comment in a @laravel forum , led me to discover Quasar Framework initially for it's wide range of in-built components ... but once, I realised that Quasar Framework allowed me to use the same codebase to create apps for SPA, PWA, iOS, Android, and Electron then I was hooked.

So, I'm now using mainly just Quasar Framework for all the front-end, with Laravel providing a backend API service to the Front-end apps.

I'm deploying this all to DigitalOcean droplets via service called Moss.sh which deploys my private GitHub repositories directly to DigitalOcean in realtime.

READ MORE
14 upvotes·49.7K views