114Tuesday, October 9, 2018
Let’s collect some learning materials; how to optimise your SPAs and more!

Hello!

Filip Rakowski from the VueStorefront team is building a list of more advanced learning resources for Vue.js. It already includes some great links so make sure to check it out. You’re also all invited to create Pull Requests with your suggested content.

Also, Guillaume has released a new beta version of vue-virtual-scroller. Here’s the new demo page. It now supports scrolling elements with dynamic height. Great improvement!

— Damian Dulisz


Stories

Advanced and in-depth learning resources for Vue.js

A curated list of advanced and/or in-depth learning resources about Vue.js

Tips for building fast and light Vue.js SPA

A great article in which Cristi Jora shares several useful tips on how to make sure your single-page applications are blazing fast, not only on high-end devices. Those tips include: using async components, avoiding complex logic in watches, using GPU based animations and transitions. Additionally he talks about the “cost of JavaScript” and how to measure performance.

Deep Dive Into The New Vue Devtools v5.0

Here’s an article that covers most of the latest improvements that shipped in the Vue Devtools v5.0 beta. Those developments include the new router tab, where you can review router history as well as a list of all the routes. Also, you can now modify the store state inside the Vuex tab. Last but not least – the Performance tab, where you can now measure different aspects of your components performance like time-to-start.

How to unit test your first Vue.js component

If you still haven’t started to test your Vue components, here’s your chance. Sarah Dayan wrote a great tutorial to get you started with testing Vue components. It also nicely touches on the topics like: what to test and how unit testing differs from other types of tests.

Creating an interactive map with D3 and Vue

Here’s a tutorial on how to build your own interactive map (based on OpenStreetMap) with Vue and D3. This includes loading tiles based on the current location and zoom factor, as well as interacting with your map through dragging. Some D3 knowledge required here.

Is Vue.js a good choice for a large-scale application?

Anthony Gore asks how well Vue fits for large-scale applications. His concerns include: no template inheritance, the “magical” nature of Vue’s reactivity and the current testing experience. What’s your opinion? Do you agree with Anthony?

Testing real world Vue.js apps

Speaking of testing – here’s another article that will get teach you some good tips on how to test Vue apps. In this case – the Vue.js Hackernews clone that you might know from the Vue docs. The tests are using Jest and Vue-test-utils.

A simpler way to use Vuex in Typescript with DI

One common issue that TypeScript users have with Vuex is that it’s very hard to reach type safety. In this article, Sascha Braun shows how you can use his new library called vuex-simple for exactly that, using the dependency injection pattern. Definitely worth reading if you use TypeScript and Vuex.

$1m to pay open source maintainers on Tidelift

Tidelift is an interesting new service that looks to connect open-source maintainers with companies that use their libraries, offering benefits for both sides. If you happen to be maintaining an open-source project, you can check whether you’re eligible for a monthly payout right now on their website.


Libraries

GitHub - sascha245/vuex-simple

https://github.com/sascha245/vuex-simple

A simpler way to write your Vuex store in Typescript

GitHub - Saeris/vue-spinners

https://github.com/Saeris/vue-spinners

💫 A collection of loading spinner components for Vuejs