The VIA stack — Vue, Ionic & AppSync
At WorkHere LLC we are using Vue and GraphQL for our newest application. We are not using AWS Appsync (yet), but I think it holds great promise for rapid application development and the three comprise what I like to call the VIA stack. I recently gave a talk on this stack and this repo includes the code and slides:
This post is just an overview of the three parts of the stack. In the next post, we will begin to put the pieces together into an application.
NOTE: I am a big fan of React as well, but it seems that developers new to these sorts of technologies (React, Vue, etc.) tend to pick up Vue more quickly. The vue team is also making great strides in the tooling for Vue. Just to get an idea, check out the new Vue CLI and UI for the cli:
Benefits
VueJS:
One of the first things you will notice is the fantastic documentation that comes with VueJS.
Ionic and HTML Web Components:
AWS AppSync with AWS Amplify/Apollo/Graphql:
Schema transpilation/expansion
I had started working on some GraphQL directives to automatically generate all the boilerplate that is needed for AWS Appsync resolvers, etc. Well, on of my Christmas wished got answered early. Amazon just released such software and it looks great. Take a peek here:
https://aws.amazon.com/blogs/mobile/announcing-the-aws-amplify-cli-toolchain/
and here:
https://github.com/aws-amplify/amplify-cli/blob/master/graphql-transform-tutorial.md
Will will be using these new transformers in the demo app we will be developing.
Building an Application with VIA
This is what we’ll be fleshing out in the next few posts….stay tuned!
Vue/Ionic/Appsync Wish List
Vue…pretty much had everything I want. I do however have a few wishes for Vetur, the VSCode IDE extension for Vue. A very handy feature would be more intellisense for code navigation. In React with JSX components, I can right-click on a component in JSX and go to the components definition. I sorely miss this ability in Vue templates. Another is final prettier html formatting and Vetur using it. Right now the HTML formatting in Vue templates is iffy.
Ionic…get to release status and keep the apis fixed.
AppSync…support more datasource and resolvers for them. I know any of this can be done via a lambda at this point, but it would be more efficient if they were directly supported (no cold starts?). In particular AWS Neptune (graph database) and AWS Aurora (SQL Database). Support for offline development would be great too. Right now I am using these 3 below for deployment (via serverless-appsync-plugin) and local test/dev via the 2 packages from ConduitVC. They seem to work well, but it would be ice to have an official version form Amazon. For our demo app, I will need to figure out how to get the below working with the new Amplify GraphQL transformers.
