Tweak twig with awesome Vue.js by Tejomay Saha Cdn for includung vue.js into you dom easily (makes you dom bind to vue with script ) ………………..

Tweak twig with awesome

Vue.jsby Tejomay Saha

Tweak twig with awesome

Vue.jsby 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

Why using vue.js?

○ Reactive data binding

○ Composable view component

○ 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 MVVMWhat is MVVM and reactive?

Vue flow of MVVM

Start with vue

Use <script src="https://unpkg.com/vue"></script>

Cdn for includung vue.js into you dom easily

<div id="app"> (makes you dom bind to

vue with script )

………………..

</div> <script>

new Vue({

el: '#app'})

</script>

.

Reactive vue(jsfiddle link)

1.tree dynamic view(https://goo.gl/Qrt44N)

2.markdown(https://goo.gl/yi57Hk)

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

Every component is responsible for

managing a piece of DOM

Nav

Content

Item

Sidebar

The entire UI can be abstracted into

a tree of components

Custom reusable nested vue components

<fab-button> </fab-button><tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab></tabs>

large scale management with vue

Vue code flow

● Imported as a ES2015 module (thus easily testable)

● Collocation of Template, Logic & Style

● 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 tools & extras

● Vue-cli for command line first development.

● Official chrome dev tools for vue 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.

Vue with Drupal8/7

★ We can easily blend vue.js with twig templating with the cdn or 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

Why using vue.js?

○ Reactive data binding

○ Composable view component

○ 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 MVVMWhat is MVVM and reactive?

Vue flow of MVVM

Start with vue

Use <script src="https://unpkg.com/vue"></script>

Cdn for includung vue.js into you dom easily

<div id="app"> (makes you dom bind to

vue with script )

………………..

</div> <script>

new Vue({

el: '#app'})

</script>

.

Reactive vue(jsfiddle link)

1.tree dynamic view(https://goo.gl/Qrt44N)

2.markdown(https://goo.gl/yi57Hk)

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

Every component is responsible for

managing a piece of DOM

Nav

Content

Item

Sidebar

The entire UI can be abstracted into

a tree of components

Custom reusable nested vue components

<fab-button> </fab-button><tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab></tabs>

large scale management with vue

Vue code flow

● Imported as a ES2015 module (thus easily testable)

● Collocation of Template, Logic & Style

● 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 tools & extras

● Vue-cli for command line first development.

● Official chrome dev tools for vue 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.

Vue with Drupal8/7

★ We can easily blend vue.js with twig templating with the cdn or 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