Recently, our very own Rijk Van Zanten, the CTO of Directus, had the privilege of joining the Views on View podcast.
In this insightful session, Rijk talks about the technical history of Directus - from its early days to becoming the versatile and composable platform for data management that it is today.
He delves deep into the technical side of things, discussing topics that are at the heart of what we do here at Directus. From the intricacies of unit testing and code coverage to the critical role of user-friendly UI component testing, there's a wealth of knowledge packed into this conversation.
Listen in and/or follow-along with this AI summarized transcript of the conversation:
Views on Vue Podcast Transcript
Views on Vue: Today, we're excited to welcome our guest, Rijk Van Zanten. Rijk, how are you?
Rijk Van Zanten: Doing really well, thank you.
Steve Edwards: So, Rijk, you work for Directus and use a lot of Vue.js. Can you give us a little background on yourself and your development history?
Rijk Van Zanten: Absolutely. I started as a UX designer and began developing about 12-14 years ago to implement my own designs. Over the years, I've done a lot of website and agency work, leading me to develop Directus. We've been using Vue.js from the start, and it's been a fantastic experience.
Views on Vue: Interesting! I come from a backend perspective, so design is not my forte. It's great to have someone with your design expertise in our discussion.
Rijk Van Zanten: For sure.
Views on Vue: What about your experience with other frameworks? Have you worked with React or Angular before focusing on Vue.js?
Rijk Van Zanten: It started with vanilla HTML, CSS, and Javascript. I did some Wordpress development, then dabbled in React and Angular. But as projects became more interactive, frameworks became essential, and Vue.js has been my primary platform. I also work with React, Svelte, and Astro to ensure compatibility in my current role.
Views on Vue: Did you ever use jQuery in your projects?
Rijk Van Zanten: Oh, yeah.
Views on Vue: I remember starting with jQuery in the early days. Then I shifted to Vue.js after moving away from Drupal. What are your thoughts on the evolution of these technologies?
Rijk Van Zanten: Oh, the wonderful world of browser incompatibility.
Views on Vue: How did Directus come about, and where does the name come from?
Rijk Van Zanten: Directus, Latin for 'organized and orderly,' started in an agency in Brooklyn as an internal admin tool. I partnered with the CEO in 2016, bringing in improvements and incorporating Vue.js. It's evolved from there.
Views on Vue: So, Directus is like a headless CMS?
Rijk Van Zanten: Yes, but it's more. Directus is a composable platform for managing data, whether it's for a CMS, inventory system, or something else. We also offer full REST API, GraphQL API, Websockets endpoints, and a Javascript SDK to cater to different user preferences.
Views on Vue: What back-end data stores do you support in Directus?
Rijk Van Zanten: We started with SQL databases and now expanding to document, vector, and graph databases. Directus sits alongside the data store, providing tools without completely abstracting the underlying data.
Views on Vue: How do you compare Directus to platforms like Supabase or Sanity?
Rijk Van Zanten: We're sometimes compared to Supabase and other back-end services, but also to CMS-focused platforms like Sanity. Directus offers more than a headless CMS—it's a versatile data management platform.
Views on Vue: Is Directus open-source or licensed?
Rijk Van Zanten: It's a bit of both. Directus began as fully open-source, but to sustain the project, we've introduced a model where it's free for individuals and smaller companies. Larger enterprises with higher revenue would require a commercial license.
Open-source projects need to sustain themselves. We've seen different models, like advertising or conferences. Our approach with Directus is to offer it free up to a certain size, and then a commercial license is required for larger operations.
Views on Vue: That's a fascinating approach to sustaining open-source projects. I'd like to switch to discussing Vue.js. The project initially started with Vue 2, right?
Rijk Van Zanten: Yes, it began with Vue 2. Before that, it was an early JavaScript framework, which I can't recall the name of. When we moved to Vue 2, it was a natural transition for us, keeping in line with the separation of concerns philosophy.
Views on Vue: Why did you choose Vue 2 over React at that time?
Rijk Van Zanten: The decision was mainly because Vue's single file components seemed more accessible for contributors new to the framework. Vue's structure made it easier to transition from generic web development compared to React.
Views on Vue: How has the journey from Vue 2 to Vue 3 been for Directus?
Rijk Van Zanten: We embraced Vue 3 from the start, especially excited about the composition API. We contributed to early drafts and started preparing early on. The migration process involved gradually shifting components to the new syntax and ensuring robust testing.
Views on Vue: Is the Directus.io website also open-source?
Rijk Van Zanten: Yes, the website's repository is open source and built using Nuxt 3. The Directus app itself is still in Vue 3.
Views on Vue: With the switch from Vue 2 to Vue 3, what challenges did you face?
Rijk Van Zanten: The main challenge was adapting to Vue 3's composition syntax. Our approach was to start moving components gradually, testing extensively, and making the full switch once we were confident.
Views on Vue: What's your take on using TypeScript with Vue?
Rijk Van Zanten: We use TypeScript for almost everything now. While migrating to Vue 3, we faced some challenges with prop types, but we're gradually refining the code. Our approach is to improve typings as we update components. The Directus SDK is also fully TypeScript aware.
Views on Vue: Do you use your own Directus platform for your frontend website?
Rijk Van Zanten: Yes, our website is built on Directus. Our entire SaaS runs on it too, which is quite meta. It helps new developers learn on the job as they have to connect to our SDKs and use our APIs.
Views on Vue: For those unfamiliar with TypeScript, could you explain the use of any in TypeScript?
Rijk Van Zanten: Using any in TypeScript is like temporarily disabling TypeScript. It tells TypeScript to accept any type for a variable, which negates the point of using types for type checking. We occasionally use unknown intentionally, but any should be used sparingly.
Views on Vue: How do you handle code linting in your project? Do you block PRs on linting errors?
Rijk Van Zanten: Linting is quite opinion-based in our project, and we change rules very carefully. We block PRs on linting errors and also rely on Prettier for code formatting. This helps maintain a consistent style across the codebase.
Views on Vue: What's your approach to code coverage in your project?
Rijk Van Zanten: We initially had near full test coverage for Vue components, but major upgrades in testing tools forced us to rewrite many tests. Now, for new functionalities, we include unit tests. Our approach is to integrate testing more thoroughly as we update or replace parts of the codebase.
Views on Vue: Do you use any front-end testing tools like Playwright or Cypress for end-to-end testing?
Rijk Van Zanten: We mostly focus on unit and component testing using Vue's testing utilities. End-to-end testing with tools like Playwright or Cypress is a discussion we often have. It's about balancing the time investment against the return, especially in a rapidly evolving project or startup.
Views on Vue: How do you manage the balance between unit, integration, and end-to-end testing?
Rijk Van Zanten: Unit testing is essential as it offers high returns for low costs. However, achieving full coverage with end-to-end tests in a highly configurable app like ours is challenging and often not worth the investment. The goal is to find a balance that covers critical flows without incurring excessive costs.
Views on Vue: In a highly configurable app, how feasible is it to write extensive end-to-end tests?
Rijk Van Zanten: It's difficult to cover every possible user configuration with end-to-end tests, especially in a customizable app. These tests are more suited for fixed flows. In our case, it might be more practical for users to write tests for their specific applications.
Views on Vue: Given the evolution of front-end development, how has the approach to testing changed over the years?
Rijk Van Zanten: Testing has become more crucial in front-end development, especially compared to the earlier days of jQuery. Now, both backend and frontend testing are seen as vital for ensuring application robustness.
Views on Vue: With Directus focusing on SQL databases, do you use any ORMs for communication?
Rijk Van Zanten: We don't use traditional ORMs since Directus dynamically generates schemas based on user configurations. We use Knex.js for database abstraction, but the ORM-like functionalities are custom-built for the flexibility required by Directus APIs.
Views on Vue: Can you share where people can follow you or learn more about Directus?
Rijk Van Zanten: I'm mostly active on GitHub under my full name. I'm also on Mastodon on the Fosstodon server and can be found in various places on the internet under the same name. And for Directus, visit directus.io.