Download as PDF, PPTX
Vue.js - An Introduction
- 1. Vue.js A talk onVue.js (pronounced /vjuː/, like view) Saad Ulde, Satish Shewale
- 2. Introduction - ● Numberof capable web frameworks. Three that stand out are - ● Angular ● React ● Vue.js ● Creator - Evan You. Ex-Google Employee. Worked on multiple initiatives within Google before working full time on Vue ● v1 Release - 2014 ● Gained traction after adoption by Laravel ● v2 Release - 2016
- 3. Current Trends inIndustry - Image Source - www.timiqian.com/star-history
- 4. ● Best ofboth worlds of Angular and React ● Agnostic - Works with ES5+, just a cdn link, with/without JSX, with/without TS ● Freedom to choose component structure - ○ Single file Vue components - HTML + JS + CSS (scoped) in 1 file - React’s approach ○ Destructured Vue components - separated out in different files - Angular’s approach ● Progressive - ○ Can be a small part of a larger system - Vue, Vue + Redux, Vue + MobX ○ Can provide complete solution - Vue + Vuex + Vue Router ○ It has the core libraries and the ecosystem to scale ● Officially supported core libraries ● Officially supported community libraries ● Simple - Learn it within an hour! ● Reusable components Why Vue.js?
- 5. Hello world - HTML- <main></main> JAVASCRIPT - var HelloWorld = React.createClass({ render: function() { return React.createElement("h1", null, "Hello React!"); }, }); var mainElement = document.querySelector("main"); ReactDOM.render(React.createElement(HelloWorld) , mainElement); React HTML - <body> <my-app> Loading… </my-app> </body> JAVASCRIPT - @Component({ selector: ‘my-app’, template:` <div> <h2>Hello {{ name }} </h2> </div>` }); Export Class App { constructor() { this.name = ‘Angular 2+!’ } } Angular HTML - <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ message }}</p> </div> JAVASCRIPT - new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }); Vue
- 6. Features of Vue- ● Component based ● Follows MV-VM approach ● Leverages Virtual DOM ● Server-Side Rendering ● Generator - vue-cli ● Built in features - v-if, v-for ● Life cycle hooks ● Navigation/Routers - vue-router ● State management - Vuex, Redux, MobX! ● Supported Libraries - Officially supported libraries ● Testable - Karma ● Weex - Native development (under development) ● Tiny - 26kb even with vue-router and vuex included!
- 7. Architecture - Image Source- www.codingexplained.com
- 8. Components ● Custom elementsthat help extend basic HTML elements to encapsulate reusable code HTML - <div id="example"> <my-component></my-component> </div> JS - Vue.component('my-component', { // options }) ● Can appear as a native HTML element extended with the special is attribute HTML - <table> <tr is="my-component"></tr> </table> ● All Vue components are also Vue instances, and so accept the same options object and provide the same lifecycle hooks ● Must be FIRST: Focused (single responsibility), Independent, Reusable, Small and Testable
- 9. Built-in Directives - ●Directives are specific attributes that are used to add additional features to html elements ● Built in directives - ○ v-bind - dynamically calls one or several attributes ○ v-if - specifies the conditions for element rendering ○ v-else - specifies “else” for v-if ○ v-for - checks arrays of objects one by one, in cycles ○ v-model - bounds the state with input element ○ v-on - bounds event listener with the element ○ v-once - renders the element in the beginning and then stops tracking it ○ v-show - switches the element’s visibility by changing CSS display property ● Custom directives - ○ Use components whenever you can! ○ When low-level DOM access is needed ○ Example - Show some events on scroll for a particular component
- 10. All Vue-directives comewith “v-” prefix. Directives get state’s values and use html attributes and events as arguments. Like this - HTML <div v-my-directive="someValue"></div> JAVASCRIPT Vue.directive('my-directive', { bind: function () { // preparatory activities // add event listeners and other heavy features, // which should be used only once }, update: function (newValue, oldValue) { // operations with updated values }, unbind: function () { // delete // delete event listeners added to bind() } }) Directives Continued -
- 11. State management -Vuex ● Wasn’t uncommon to have pieces of state spread across our application ● Shared mutable state is a pain! ● State management - One state that serves as the "single source of truth" across the application ● Vuex is a state management pattern + library for Vue.js application ● Centralized store for all the components in an application ● Small/simpler app - Can do with the built in global event bus ● Medium-Large scale app - Recommended to go with Vuex
- 12. Vuex - Architecture ImageSource - www.medium.com ● State - Serves as the "single source of truth" across the application ● Getters - Used to access data from the state tree of the store ● Mutations - Handler functions that perform modifications of data in the state tree ● Actions - Functions that commit mutations. The main difference to Mutations is that Actions can contain asynchronous operations
- 13. Common library integration- Vue has an amazing list of third party libraries - ● Forms ● Grids/Tables ● Charting libraries ● CSS ● Animations ● File Upload
- 14.
- 15. Case Study - Keypoints identified during our POC - ● License - MIT ● Learning Curve - Getting started experience was the best ● Runtime performance - Quicker than React and Angular in most of the comparisons ● Debugging - Time travel available through browser plugins ● Support & upgrade paths - Stable from v2 but lacks formal LTS support, deprecation policies ● Security - No formal guidance on security patches ● Corporate Support - None yet
- 16.