SLIDE 1
Tweak twig with awesome Vue.js
by Tejomay Saha
Tweak twig with awesome Vue.js
by Tejomay Saha
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 - - 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
SLIDE 2
SLIDE 3
Hello!
I am Tejomay Saha
@tejomayonline
I am here as I love learning and expressing new techs stuffs to ease coding.
SLIDE 4
Working at Srijan Technologies pvt. Ltd . As a Full Stack Developer
SLIDE 5
1. What is vue?
SLIDE 6
“
Vue.js (pronounced /vju /, like view) is a library for building interactive web interfaces
SLIDE 7
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
SLIDE 8
Vue based on MVVM
What is MVVM and reactive?
SLIDE 9
Vue flow of MVVM
SLIDE 10
SLIDE 11
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>
. SLIDE 12
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)
SLIDE 13
Vue v/s React v/s Angular
★ Performance ★ Learning Curve ★ Purpose ★ Architecture ★ Scaling up/down ★ Ease factor
SLIDE 14
Every component is responsible for managing a piece of DOM
Nav Content Item Sidebar
SLIDE 15
The entire UI can be abstracted into a tree of components
SLIDE 16
Custom reusable nested vue components
<fab-button> </fab-button> <tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab> </tabs>
SLIDE 17
large scale management with vue
SLIDE 18
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
SLIDE 19
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.
SLIDE 20
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.
SLIDE 21
Sources
- Evan you’s slides.
- Muhammad Rizki Rijal
- Toshiro Shimizu
- etc.
SLIDE 22
Thanks!
Any questions?
You can find me at @tejomayonline
SLIDE 23
Hello!
I am Tejomay Saha
@tejomayonline
I am here as I love learning and expressing new techs stuffs to ease coding.
SLIDE 24
Working at Srijan Technologies pvt. Ltd . As a Full Stack Developer
SLIDE 25
1. What is vue?
SLIDE 26
“
Vue.js (pronounced /vju /, like view) is a library for building interactive web interfaces
SLIDE 27
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
SLIDE 28
Vue based on MVVM
What is MVVM and reactive?
SLIDE 29
Vue flow of MVVM
SLIDE 30
SLIDE 31
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>
. SLIDE 32
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)
SLIDE 33
Vue v/s React v/s Angular
★ Performance ★ Learning Curve ★ Purpose ★ Architecture ★ Scaling up/down ★ Ease factor
SLIDE 34
Every component is responsible for managing a piece of DOM
Nav Content Item Sidebar
SLIDE 35
The entire UI can be abstracted into a tree of components
SLIDE 36
Custom reusable nested vue components
<fab-button> </fab-button> <tabs> <inner-tab></inner-tab> <inner-tab></inner-tab> <inner-tab></inner-tab> </tabs>
SLIDE 37
large scale management with vue
SLIDE 38
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
SLIDE 39
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.
SLIDE 40
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.
SLIDE 41
Sources
- Evan you’s slides.
- Muhammad Rizki Rijal
- Toshiro Shimizu
- etc.
SLIDE 42
Thanks!
Any questions?
You can find me at @tejomayonline