View
5
Download
0
Category
Preview:
Citation preview
VueJS on top of Knockout frontendOctober 4th 2018
@MartinSH_@MartinSH_
About me
“It always seems impossible until it's done”
@MartinSH_
● Magento JS Changes ● Future for Magento 2 JavaScript ● Why we need to put VueJS? ● How to prepare for PWA?
What I want to share with you today?
@MartinSH_@MartinSH_
Don't look at Magento 2 frontend
with Magento 1 experience...
@MartinSH_@MartinSH_
@MartinSH_@MartinSH_
@MartinSH_@MartinSH_
How we get there?
@MartinSH_@MartinSH_
@MartinSH_@MartinSH_
AMD (Asynchronous Module Definition)
@MartinSH_@MartinSH_
ES6 with PWA
AMD
@MartinSH_@MartinSH_
The PWA way
@MartinSH_@MartinSH_
This is how we can prepare
@MartinSH_@MartinSH_
Why we need VueJS ?
@MartinSH_@MartinSH_
Let's see it on action by extending Magento 2 Newsletter block.
@MartinSH_@MartinSH_
@MartinSH_
package.json
@MartinSH_
@MartinSH_
webpack.config.js
@MartinSH_
Newsletter subscribe extended template file
@MartinSH_
view/frontend/templates/subscribe.phtml
@MartinSH_
@MartinSH_
view/frontend/web/js/script.js
@MartinSH_
Newsletter component
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
Connecting to Magento
@MartinSH_
view/frontend/web/js/module.js
@MartinSH_
Let’s see it in action…
@MartinSH_@MartinSH_
Translate mixin Newsletter mixin
@MartinSH_
view/frontend/web/js/mixins/
@MartinSH_
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
@MartinSH_@MartinSH_
after plugin for \Magento\Customer\CustomerData\Customer
@MartinSH_
Plugin/Customer/CustomerData/Customer.php
@MartinSH_
@MartinSH_
view/frontend/web/js/storage
@MartinSH_
@MartinSH_
view/frontend/web/js/module.js
@MartinSH_
……..
@MartinSH_
view/frontend/web/js/components/Popup.vue
@MartinSH_
@MartinSH_@MartinSH_
What about
@MartinSH_
@MartinSH_
complete module in my GitHub - https://bit.ly/2x7Z4Ac
martinssu
@MartinSH_
Questions ?
@MartinSH_@MartinSH_
Recommended