VueJS Amsterdam — In the loop with Ives van Hoorne
Get to know speakers before meeting them at the conference
Tickets for 2019 now available: https://www.eventbrite.co.uk/e/vuejs-amsterdam-2019-tickets-45193495963
VueJS Amsterdam conference is almost here. Tickets are sold out already! On this interview we will be talking with Ives van Hoorne. He is the daredevil creator of CodeSandbox. An online editor that offers first class support for Vue and tries to make life easier for beginners!
Note: questions and answers have not been transcribed but adapted from notes.
Hi Ives! What can you tell us about yourself?
Hi everyone! I am a Computer Science student at University of Twente and part-time developer at CataWiki, an auction website. I am the creator of CodeSandbox, an online code editor for Web Applications using React or Vue.
These days, I don’t study that much as I got easily distracted. I play volleyball a lot. I like to create music and play few instruments including: the flute, the electronic keyboard and the guitar.
I work as a Software Developer but I’m still living in a student house. I totally embrace the student life so, as an example, after this interview I will go drink cocktails with all the other students!
Sometimes, I would be at a conference giving a talk in another country and realise that I was partying hard the night before with my friends. This is a big shift of perspective.
Student life is so much fun! I’d like to talk about CodeSandbox a little bit more. Can you tell us how it started?
I started working on CodeSandbox last November and released in April. I created it because I was very frustrated. As a student, I had to learn all these different basic concepts. I felt I needed to take on a more challenging project. I had covered the basics of programming working for CataWiki. I started working on CodeSandbox so I could learn more advanced concepts while building something useful. At one point I lost interest and stopped for a few weeks but after some consideration I was determined to work on it until completion.
At CodeSandbox we follow 3 principles:
- Lower the learning curve
- Local editor feel
- Easy to share and discover examples from others
From the first release, we had like 8 visitors during that day. It was quite interesting. I tried to put the word out on Reddit and Twitter but I had almost no followers. I was lucky the following day, Kent C. Dodds released glamorous and he agreed to use CodeSandbox to demo glamorous examples. From that point visits rocketed. That was very cool!
From that moment my motivation multiplied as I realised I could make a difference to people using it. I didn’t think that it would become so popular.
Awesome story! Let’s talk about the conference. What are you preparing?
For my talk I will explain what changes we had to do to CodeSandbox to support Vue.
We started implementing Vue support around last summer. At the beginning, this wasn’t as easy as I thought. During my talk, I will cover how we started, what we had to change in CodeSandbox to get it working and what Vue specific features we have today.
Initially, CodeSandbox only worked with React but, later on, we included Vue support. We wanted to have the full package. Pick a Vue project from GitHub, import it and continue working on it from the browser. After that we implemented Single File Component support.
Our initial bundler was very simple and only supported transpiling JavaScript files. We didn’t have any other system behind it. Because of this limitation, I had to rewrite the whole bundler using Webpack loaders to have loader support. After that I added all of these loaders: SASS, LESS, Stylus and TypeScript. That’s why it was a bit harder to implement.
Since August, we integrated Monaco. This is a web browser version of VS Code built by the Microsoft Team. It’s very impressive what they have done. It’s state of the art. You get TypeScript intellisense, type-checking, etc. Even imports information of all modules! So since then, we have native TypeScript support.
Recently, we also added full support for Webpack hot module reloading system. Vue loader uses this extensively. If you change a Vue Component the Vue loader will use the hot module API to reload only that file. Let’s say you change the template or the styles, that means that you will see the changes while keeping the same state. This took a little bit more than expected but now it can be used also in React projects.
That’s great! What topics are you interested at the moment?
There is a specific topic that I have been looking at a lot recently which is UI Driven Web Developer Tools.
For example, most developer tools we use are terminal based. Well, if we are mainly focused in Web Development, why don’t we have more UI driven Web Developer Tools? A good example would be Webpack Dashboard built by rebel Ken Wheeler at Formidable Labs.
If we think of Human Computer Interaction, we are very visual driven. If you tell someone to tell the difference between two data samples, one being a bar chart and another textual information. Looking at the bar chart, they will tell in a glance much faster than reading text.
Webpack Dashboard uses this visual approach pretty well showing all modules that are built showing their relative size and how they contribute to the total size. Using this visual information you can quickly identify any bundling issues.
As a last question: what talks or topics are you looking forward to at the conference?
I am interested in the talks from Sebastien Chopin and Alexandre Chopin. They are the creators of Nuxt. Using Nuxt you don’t have to do any initial setup or think of any configuration to enable Server Side Rendering or event build your Vue App. I like what they are doing and I am very interested in their talks.
Thanks for your time Ives!
Thanks Gerard! I am thinking I might be able to release some new features for CodeSandbox before my talk and between student parties. Stay tuned!
