tweak twig with awesome vue.js by tejomay saha cdn for includung vue.js into you dom easily (makes...
TRANSCRIPT
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