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_