Tweak twig with awesome Vue.js by Tejomay Saha Tweak twig with - PowerPoint PPT Presentation

Tweak twig with awesome Vue.js by Tejomay Saha

Tweak twig with awesome Vue.js by Tejomay Saha

Hello! I am Tejomay Saha @tejomayonline I am here as I love learning and expressing new techs stuffs to ease coding.

Working at Srijan Technologies pvt. Ltd . As a Full Stack Developer

1. What is vue?

“ Vue.js (pronounced /vju /, like view) is a library for building interactive web interfaces

Reactive data binding ○ Composable view component ○ Why using vue.js? Mix and match small library ○ Progressive framework! (router, resource/ajax ○ stuff, state management and many more) Simple API (easy to learn) ○ Lightweight ○ Rapid grow community ○

Vue based on MVVM What is MVVM and reactive?

Vue flow of MVVM

Use <script src= "https://unpkg.com/vue"></script> Cdn for includung vue.js into you dom easily Start with vue <div id= "app"> (makes you dom bind to vue with script ) ……………….. </div> <script> new Vue({ el: '#app'}) </script> .

1.tree dynamic view( https://goo.gl/Qrt44N ) Reactive vue 2.markdown( https://goo.gl/yi57Hk ) (jsfiddle link) 3.latest github commits( https://goo.gl/mKyx4H ) 4.grid component( https://goo.gl/vMgBT1 ) 5.modal component( https://goo.gl/4QXYEU ) 6.todos( https://goo.gl/7AMCYW )

Vue v/s React v/s Angular Performance ★ Learning Curve ★ Purpose ★ Architecture ★ Scaling up/down ★ Ease factor ★

Nav Every component is responsible for managing a piece of Content Sidebar DOM Item

The entire UI can be abstracted into a tree of component s

Custom <fab-button> reusable nested vue </fab-button> components <tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab> </tabs>

large scale management with vue

Imported as a ES2015 ● module (thus easily testable) Collocation of ● Template, Logic & Style Vue code flow Just use what you ● already know: HTML, CSS & JavaScript Embedded ● pre-processor support: seamlessly use Babel, SASS or even Pug in the same file Component-scoped ● CSS with a single attribute

● Vue-cli for command line first development. Vue tools & ● Official chrome dev tools for vue extras support. ● Awesome vue.js community. ● Built in Laravel support from Laravel 5.3. ● Tiny learning curve. ● Based on between react virtual dom and angular data binding. ● Awesome for building ui components,animations. ● 2 way data binding looks like realtime. ● etc.

We can easily blend vue.js with ★ Vue with twig templating with the cdn or Drupal8/7 else Using npm dependencies. ★ ★ We can use it in .tpl files ★ directly. ★ We can use in custom module ★ development ★ Creating Reactive theme with ★ vue.

Sources ● Google ● Evan you’s slides. ● Muhammad Rizki Rijal ● Toshiro Shimizu ● etc.

Thanks! Any questions? You can find me at @tejomayonline

Hello! I am Tejomay Saha @tejomayonline I am here as I love learning and expressing new techs stuffs to ease coding.

Working at Srijan Technologies pvt. Ltd . As a Full Stack Developer

1. What is vue?

“ Vue.js (pronounced /vju /, like view) is a library for building interactive web interfaces

Reactive data binding ○ Composable view component ○ Why using vue.js? Mix and match small library ○ Progressive framework! (router, resource/ajax ○ stuff, state management and many more) Simple API (easy to learn) ○ Lightweight ○ Rapid grow community ○

Vue based on MVVM What is MVVM and reactive?

Vue flow of MVVM

Use <script src= "https://unpkg.com/vue"></script> Cdn for includung vue.js into you dom easily Start with vue <div id= "app"> (makes you dom bind to vue with script ) ……………….. </div> <script> new Vue({ el: '#app'}) </script> .

1.tree dynamic view( https://goo.gl/Qrt44N ) Reactive vue 2.markdown( https://goo.gl/yi57Hk ) (jsfiddle link) 3.latest github commits( https://goo.gl/mKyx4H ) 4.grid component( https://goo.gl/vMgBT1 ) 5.modal component( https://goo.gl/4QXYEU ) 6.todos( https://goo.gl/7AMCYW )

Vue v/s React v/s Angular Performance ★ Learning Curve ★ Purpose ★ Architecture ★ Scaling up/down ★ Ease factor ★

Nav Every component is responsible for managing a piece of Content Sidebar DOM Item

The entire UI can be abstracted into a tree of component s

Custom <fab-button> reusable nested vue </fab-button> components <tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab> </tabs>

large scale management with vue

Imported as a ES2015 ● module (thus easily testable) Collocation of ● Template, Logic & Style Vue code flow Just use what you ● already know: HTML, CSS & JavaScript Embedded ● pre-processor support: seamlessly use Babel, SASS or even Pug in the same file Component-scoped ● CSS with a single attribute

● Vue-cli for command line first development. Vue tools & ● Official chrome dev tools for vue extras support. ● Awesome vue.js community. ● Built in Laravel support from Laravel 5.3. ● Tiny learning curve. ● Based on between react virtual dom and angular data binding. ● Awesome for building ui components,animations. ● 2 way data binding looks like realtime. ● etc.

We can easily blend vue.js with ★ Vue with twig templating with the cdn or Drupal8/7 else Using npm dependencies. ★ ★ We can use it in .tpl files ★ directly. ★ We can use in custom module ★ development ★ Creating Reactive theme with ★ vue.

Sources ● Google ● Evan you’s slides. ● Muhammad Rizki Rijal ● Toshiro Shimizu ● etc.

Thanks! Any questions? You can find me at @tejomayonline