Vue.js
For a relatively new front-end framework, Vue.js has already gained a fair amount of popularity and appreciation. This lightweight, fast, progressive and open-source JavaScript framework can be used for adding new components into existing apps, building complete user interfaces or Single Page Applications.
Vue is approachable - it is fairly easy to learn and get started with. If one knows JavaScript, HTML and CSS, it’s just matter of reading a guide, API docs and launch its adventure with Vue.js straight away. The documentation is very well-written, coherent and clear. What’s more, Vue’s source code is very comprehensible. To start working with Vue.js you don’t need external libraries, additional plugins or jQuery. Of course you can use them - and there are plenty of plugins available - but it is not required. A simple Vue.js project can be run directly in a browser.
Vue has very small footprint - core library weighs only 30kb after gzipping. In comparison React’s core , is around 40kb gzipped and Angular’s is 51kb gzipped. While Ember is 123kb after gzipping, it’s the fullest SPA framework of the other ones.
Vue is fast and very performant with minimal optimization efforts. Benchmark tests shows that rendering 10,000 items takes in Vue.js system as fast as 23 ms, whereas in React 63 ms. Test was run 100 times and the slowest result also shows significant difference in speed - Vue recorded 343 ms, React 453 ms. Vue is also top performer on the mobile devices.
Let’s have a look at other pros of this front-end framework:
Additionally, Vue offers official libraries for routing, state management, wrapper for hammer.js, support for Typescript and CLI which bootstrap web applications (including version for progressive web app).
What distinguish Vue.js from other frameworks is the fact that it was designed to be incrementally adoptable - hence it’s called progressive JS framework. Its core library is a view-layer only - this is a huge advantage of Vue.js over frameworks like Ember or Angular - it can be easily adapted into projects that use other JavaScript libraries. It has the ability to keep all component’s structure, logic and style in single file, thus it is convenient to create web components that can be easily re-used in multiple projects. Vue.js also works excellently in adding reactive web components to existing templates. With the aid of supporting libraries and additional tools, Vue.js is also capable of boosting even sophisticated Single Page Applications.
Vue takes a lot from its predecessors - React and Angular. It has component-based approach, props, one-way data flow for components hierarchy, high quality performance, virtual rendering ability and understanding of importance of proper state management of apps as it is in React. Whereas from Angular it takes similar templates with good syntax or two-way data binding. Vue.js mixes it all together, while learning from mistakes and good points of these two technologies. At the same time it has this freshness of a new IT technology and a little baggage.
This web app framework is quite big in China with public companies - a platform for global wholesale trade Alibaba, one of the largest gaming company in the world Tencent and the most popular search engine in China Baidu known to be relying on Vue.js. Also Chinese private companies with over 1 billion dollars of valuation like Xiaomi, Didi Chuxing, DJI, Ele.me use Vue, as well as established and popular brands like Japan’s Line and Nintendo or UK-based Sainsbury’s. Open source projects with Vue.js include Laravel, GitLab, PageKit.
Vue’s community is growing fast - in 2016 Vue.js was one of the fastest growing JavaScript frameworks.
Vue.js is a front-end framework built with intention of organizing and simplifying web front-end development and we believe it achieved this goal. If you are working on a new app or want to improve your existing application and feel like Vue.js might be useful - contact us.
Creating a GraphQL Client With the Vue.js Framework
In part 3 of our GraphQL series, its time to put our API into action - this tutorial will guide you through creating a simple GraphQL client web app, all...
Deploying Vue.js Applications built with Webpack to Heroku
Built your interactive web application using Vue.js with Webpack and wondering how to deploy it? We explain how to deploy Vue.js Single Page Applications to Heroku.
Single Page Applications with Vue.js
At iRonin, we have a vast amount of experience in creating interactive web applications. In this piece, we would like to show you how to write Single Page Applications with...