VueJS: First Impressions

With all the new libraries and frameworks it is pretty hard to keep up with all of them, and that is if you can even decide which ones are worth spending time one, over the last year or so I was exposed to many a new tech stack, with React for work and just personally playing around with React-Native, Aurelia and Angular2. Each of them attached to a new project, partly justified by wanting to try it out or form my own opinion. Previously I had written about Aurelia, which I was very impressed with after than Angular 2 disaster, if you like, you can read more about it here: _Recently had a small personal project that I wanted to rebuild, a project I had initially started quite some time back…_medium.com Aurelia: First impressions This time round I decided to dive into a lot of good things are being said about it on the web, with it apparently being faster than react, with it’s implementation of a simple and powerful Virtual DOM focused on performance. On top of that is is notably smaller than React sitting around 14kb. Vue.JS, Snabbdom, Of all the frameworks and libraries I have worked with over the years, one thing that stood out to me about Vue.JS was the documentation, very detailed and easy to follow, covering multiple use cases and all the various options, where applicable, for each of it’s built in methods. Now for a look at the code, the following example is for a very simple component, written in absolute bare-bones, just for you to get an idea of how things are structured.. Vue.JS uses a template file containing both the template body and a script section, and these files are saved with a extension. .vue Vue.JS itself is completely template agnostic, you can use handlebar/directive template as above, you can also use , or even build it up very manually using es5 or es6 string interpolation if you prefer. JSX This file pretty much handles it all, you will define the HTML structure as well as relevant scripting logic, and either define a block or import a style sheet like in the example. The script tag is where all the real work begins, we start by importing Vue and whatever components we intend on using within the component. name: 'Events',components: {'header-bar': Header,'search-bar': Search,'list-data': List,'footer-bar': Footer,}, Above we have a snippet from the default export object, we start with the components name, followed by a object. This object defines a key which is the tag name for the HTML element within our template with its value being the component we imported a little further up. components Next we have some of our methods to control initial logic and define usable functions. data() {return {data: [],searchTerm: {},}}, The function is used to setup default data for initial rendering of the component, here the data key is setting itself as an empty array as later when we fetch the data it will become and array of objects, and we do not want to break the render by defaulting with invalid data types. data() created() {// API/Service calls would go herereturn {data: [{},{}],};}, is similar to reacts life cycle method, this is the best place within the life of the component to go fetch any data that is not available on initiation of the component, in this case to go fetch the actual list items. created() componentWillMount methods: {search() {// Search method written here},} is where you define functions that will be used within the component itself, or passed down to a child component as props, as is the case with , the child component will receive this method via the props, and this will then be fired off when a user interacts with the search component. methods() search() Search One thing that was not specifically included in the example but was was referenced was props, like react and probably many other libraries at this stage, Vue.JS also supports props, and like react they can be anything that a child component needs, be it static text, a function, and array of data needing to be looped over, or an object with key value pairs for simple dynamic display. Props are quite simple to define, within the you would add another key, called ‘props’ with an array of all the props it is expecting to receive. default export Above would then be an example of the search component, as you can see it is taking in 2 props, the submit method and term, which is a model for handling the search value that will be passed into the function. This was just a taste of what is possible with Vue.JS, you will see many more examples by visiting their documentation at .If you wish to quickly spin up an application and start playing around with Vue.JS, I can suggest taking a look at the Yeoman generator created by . Vue.JS docs FountainJS Working with Vue.JS was a great pleasure, I found the learning curve very shallow, however that could purely be based on my experience, as mentioned before I have worked with a few in the past. The default template structure feels very similar to how it was working with Angular, so developers coming from that background may pick it up a bit faster than they would react. I cannot really go un-learn react to see if it influences how easy it was to pick up Vue.JS. _This is really exciting: our team has just wrapped up the work on State of Vue.js -a comprehensive report crafted for…_www.monterail.com State of Vue.js - Key Takeaways from the Report _You probably already know this: the first step to learning something in any subject is acknowledging that you don't…_www.monterail.com People to Watch If You're a Vue.js Developer [Infographic] | | Twitter Instagram YouTube