I am developing a new theme for our storefront using vue.js and SASS for frontend components and brunch as the build system.. Thought I would keep people posted in case anyone else is doing something similar.
I have my configuration setup pretty nicely now. And I am confident that it will at least result in an operational website with scoped modules, simpler TPL files and a much more clearly defined components with single responsibility.
I have not had to modify any core controllers and my original TPL files become a simple portal into vue.js land. E.g. my views/checkout/checkout.tpl file now looks like this
Of course I have other vue.js components "step-one" that all do their job... so far so good.
Other considerations I am making are:
- I am using brunch as my build system and of course webpack would work nicely too. This is just personal prefernce as I always struggled to get a clean setup with webpack and always found it hard to come back to my config files later on and figure out why I was doing what.. Our requirements are quite simple, so brunch hasn't fallen short yet.
Benefits I have noticed:
- Loading time of theme. Previously we have used a store bought theme and these themes come with a lot of baggage that you don't always use. By developing our own cut down theme, site load times are much faster
- Cleaner template files and much more self explanatory components. I am not sure about you, but I always found Smarty template files (no matter what syntax highlighter you have enabled) hard to read. This is no longer the case
What do you think? Anyone else been down this path and hit any roadblocks after the honeymoon period? i would be interested to hear your thoughts.
Cheers... Apologies for any typos / grammar errors in this post. I better get back to work!