Why Vue 🤔 – Praveen Puglia "
Praveen Puglia Sainthia, West Bengal Senior Software Engineer @praveenpuglia
The State of JavaScript Framework
…and The State of Build Tools
Yet Another Framework Syndrome 🙉 🙈 🙊
🤑 Sell
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community 🤓 🕺 🏎 💗 😎 🛠 📖 ❤
Beyond The Chasm Image Courtesy - https://medium.com/@shahmm/crossing-the-chasm-and-the-early-majority-7ae8966b0cab
Popular Source - https://github.com/vuejs/awesome-vue
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community ✅ ✅ 🤓 🕺 🏎 💗 😎 🛠 📖 ❤
Performance Source - http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts/table.html
Documentation Source - https://vuejs.org/v2/guide/
What’s In There? Great Examples On Point Language Talks about caveats Solutions when you need them Learning Cookbook
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community ✅ ✅ ✅ ✅ 🤓 🕺 🏎 💗 😎 🛠 📖 ❤
Lets Try It Out
The Obvious How do I include it in my project ? How to do that first Hello World ? How do I bind element attributes? How to conditionally hide or show something ? How do I generate elements from an array ? How do I bind an event to an element ? How do I pass parameters to that event binding ? How do I access the instance inside methods ? Can we do two-way data binding ? How do I disable/enable a button/input ?
The Not So Obvious Can I use JS methods inside the moustache bindings ? Are there multiple ways to set classes or styles on an element ? Is there a way to do else or else-if in templates ? What happens when I use v-if and v-for together ? How can I compute a property based on other properties ? Can I watch when a property changes & do something about it ?
“Good Design is as little design as possible”
“What’s Unimportant is Paramount”
Delight
Treats Shortcuts Event Modifiers Computed Properties Computed value caching One-time interpolations Iterating over Objects Under the hood template performance optimisation. Do I have to tell you how to do filters? Typecast, trim in v-model.
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community ✅ ✅ ✅ ✅ 🤓 🕺 🏎 💗 😎 🛠 📖 ❤ ✅✅
Component System How to create a component ? How do I use one component inside another component ? How do I pass data from parent to child component ? Adding class to component. Emit events. Non parent-child communication.
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community ✅ ✅ ✅ ✅ 🤓 🕺 🏎 💗 😎 🛠 📖 ❤ ✅✅ ✅
Tooling
First Class Support vue-router for Routing vuex for State Management vue-rx for RxJS Integration vue-devtools for Components, Events, States & Store debugging. TypeScript Support vue-cli so you can quickly scaffold projects with sensible defaults. Axios for AJAX
The Boxes to Check Easy PerformanceDelightful Popular Progressive Tooling Docs Community ✅ ✅ ✅ ✅ 🤓 🕺 🏎 💗 😎 🛠 📖 ❤ ✅✅ ✅ ✅
🎉 All Checked
Praveen Puglia Sainthia, West Bengal Senior Software Engineer @praveenpuglia Thank You

Why Vue JS