It required quite some work and learning to switch the site's development path to a single page application. From researching if it would be a good path to follow, to learning, to setting up a development environment, to implementing and debugging. Finally I'm starting to get a hang of it. Makers don't always make things because the need them, or because the can make them. More often they make things because of the fun along the road.
Bit by bit all functionality gets moved to the SPA. I struggled quite a bit to get the footer integrated. Mainly because the footer needs to be at the bottom of the page, not at the bottom of the screen (or viewport as it is called technically). On the current site there was even an issue with the implementation. On smaller screens the text moved outside of the colored band:
This has now been fixed.
Moving the footer implementation to the application was an important step. Having it outside required some code outside of the application that shouldn't really be there. The result was that this common code was required twice. Once inside and once outside of the app, a maintenance nightmare and not very good for performance. It proved to be not so trivial as it looks at first sight. The biggest issue was that the vue.js template only allows for one outer element while almost every online example uses more. After a lot of digging and trial and error I finally got it working thanks to this flexbox article. I managed to copy the idea of this solution and got it working.
Another step in the development has been to further componentize the application. The article preview is a piece that can be reused in the blog overview, but also for the curated articles etc. Once that component was finished I started trying it out on the curated articles and started consuming the initial JSON api. The most difficult part was the asynchronous loading of the articles. For the blog this is not an issue because the steem api offers all content in one response. But for the curated articles overview every article needs to be loaded separately. Loading them one after another has a performance cost so I tried to do it asynchronously. I got this working quite fast but the view was not updating. After some digging in the vue.js documentation I found that there are some caveats with arrays. Instead of updating the array directly using:
vm.items[indexOfItem] = newValue
I had to use a special vue function like this:
Vue.set(vm.items, indexOfItem, newValue)
Once I made this little change the eureka moment came. If you take a careful look at the recording below you can see that not all articles are loaded at the same time, and not in a sequential order. Performance at it's best.
@podanrjA big warm thank you to
Go to steemmakers.com/test.php. Please report any issues you encounter. Thank you!
Now that the curated articles view is working I'm thinking about further componentization. Maybe a 'preview list' component would prove interesting to be used for the curated articles as well as the blog. Another feature that needs to be added is pagination.
Anyone interested is free to join and help out, all work is available on Github. More information can be found on our website www.steemmakers.com, have a look and join us on Discord!
Repository: https://github.com/JefPatat/SteemMakers/tree/master/website
My github account: https://github.com/JefPatat
Relevant commits: several commits from May 13th to May 15th: https://github.com/JefPatat/SteemMakers/commits/master