vuejs on top of knockout frontend - reacticon.org · newsletter subscribe extended template file...
TRANSCRIPT
![Page 1: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/1.jpg)
VueJS on top of Knockout frontendOctober 4th 2018
@MartinSH_@MartinSH_
![Page 2: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/2.jpg)
About me
“It always seems impossible until it's done”
@MartinSH_
![Page 3: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/3.jpg)
● 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_
![Page 4: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/4.jpg)
Don't look at Magento 2 frontend
with Magento 1 experience...
@MartinSH_@MartinSH_
![Page 5: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/5.jpg)
@MartinSH_@MartinSH_
![Page 6: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/6.jpg)
@MartinSH_@MartinSH_
![Page 7: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/7.jpg)
How we get there?
@MartinSH_@MartinSH_
![Page 8: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/8.jpg)
@MartinSH_@MartinSH_
![Page 9: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/9.jpg)
AMD (Asynchronous Module Definition)
@MartinSH_@MartinSH_
![Page 10: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/10.jpg)
ES6 with PWA
AMD
@MartinSH_@MartinSH_
![Page 11: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/11.jpg)
The PWA way
@MartinSH_@MartinSH_
![Page 12: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/12.jpg)
This is how we can prepare
@MartinSH_@MartinSH_
![Page 13: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/13.jpg)
Why we need VueJS ?
@MartinSH_@MartinSH_
![Page 14: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/14.jpg)
Let's see it on action by extending Magento 2 Newsletter block.
@MartinSH_@MartinSH_
![Page 15: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/15.jpg)
@MartinSH_
package.json
@MartinSH_
![Page 16: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/16.jpg)
@MartinSH_
webpack.config.js
@MartinSH_
![Page 17: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/17.jpg)
Newsletter subscribe extended template file
@MartinSH_
view/frontend/templates/subscribe.phtml
@MartinSH_
![Page 18: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/18.jpg)
@MartinSH_
view/frontend/web/js/script.js
@MartinSH_
![Page 19: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/19.jpg)
Newsletter component
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
![Page 20: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/20.jpg)
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
![Page 21: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/21.jpg)
Connecting to Magento
@MartinSH_
view/frontend/web/js/module.js
@MartinSH_
![Page 22: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/22.jpg)
Let’s see it in action…
@MartinSH_@MartinSH_
![Page 23: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/23.jpg)
Translate mixin Newsletter mixin
@MartinSH_
view/frontend/web/js/mixins/
@MartinSH_
![Page 24: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/24.jpg)
@MartinSH_
view/frontend/web/js/components/Newsletter.vue
@MartinSH_
![Page 25: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/25.jpg)
@MartinSH_@MartinSH_
![Page 26: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/26.jpg)
after plugin for \Magento\Customer\CustomerData\Customer
@MartinSH_
Plugin/Customer/CustomerData/Customer.php
@MartinSH_
![Page 27: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/27.jpg)
@MartinSH_
view/frontend/web/js/storage
@MartinSH_
![Page 28: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/28.jpg)
@MartinSH_
view/frontend/web/js/module.js
@MartinSH_
![Page 29: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/29.jpg)
……..
@MartinSH_
view/frontend/web/js/components/Popup.vue
@MartinSH_
![Page 30: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/30.jpg)
@MartinSH_@MartinSH_
![Page 31: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/31.jpg)
What about
@MartinSH_
![Page 32: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/32.jpg)
@MartinSH_
![Page 33: VueJS on top of Knockout frontend - reacticon.org · Newsletter subscribe extended template file @MartinSH_ view/frontend/templates/subscribe.phtml @MartinSH_ @](https://reader031.vdocument.in/reader031/viewer/2022041216/5e05087109ddc91e77152d91/html5/thumbnails/33.jpg)
complete module in my GitHub - https://bit.ly/2x7Z4Ac
martinssu
@MartinSH_
Questions ?
@MartinSH_@MartinSH_