VueJS Amsterdam — In the loop with Alex and Sebastien Chopin

Gerard Sans
Vuejs Amsterdam Conference Publication
6 min readFeb 13, 2018

Get to know speakers before meeting them at the conference

Alex and Sebastien Chopin brothers creators of Nuxt.js

We are very excited. The VueJS Amsterdam conference is here! For this interview we will be trying something different. They are brothers and go together like Twix. They are the creators of Nuxt.js: Alexandre Chopin and Sebastien Chopin. They love frontend and basketball. Let’s find out more about them and what are they planning for the conference!

Note: questions and answers have not been transcribed, but adapted from notes.

Hi guys! What can you tell us about you?

Alexandre — I am Alexandre Chopin. You can call me Alex. I love Frontend. Since my brother and I had our first computer, it became our passion. Soon after, we created our first website. It was about our favourite sport, basketball. We wanted to learn everything about Web Development, so we could improve our site.

Alexandre — We travelled a lot and worked at different companies. After university, we didn’t got the chance to work together, but thanks to Nuxt, we are working together again. We really enjoy it! The coming year, we plan to work full-time together so we can fully focus on our Open Source projects.

Sebastien — I am Sebastien Chopin. I live in Paris, but before, I was living at a little village in the South of France, Lourdes. I share with Alex: parents, a brother and a sister. I love frontend. I started using PHP to create the basketball website together with Alex. We were just kids! After that, we wanted to add more features like a chat. So, I started looking into Web Sockets and communicating with the backend. We learned a lot during that time. Some time later, we also developed some games. We had lots of fun!

Sebastien — We enjoy a lot working together, but we couldn’t do it for a while. Today, I am spending a lot of time working on Open Source, but also creating websites. As Alex was saying, next year, we are planning to work together again!

Alex — Besides programming, I like nature and open spaces. If the weather allows, you can find me hikking in the Pyrenees. I also enjoy playing basketball.

Sebastien — I love to play basketball, same as Alex, and I like dancing a lot. My favourite dancing style is Shuffle. Anyone up to dance some shuffle with me in Amsterdam?

Sebastien Chopin — Everyday I’m shufflin

Awesome! What are you talking about?

Alex — I will be talking about the benefits of using Nuxt to create Vue projects. I will spend some time explaining the philosophy behind it. Nuxt tries to make Server Side Rendering (SSR) development more productive and enjoyable. I will also cover its core in depth and how you can extend your Vue projects easily leveraging the module system.

Nuxt.js tries to make Server Side Rendering development more productive and enjoyable

Sebastien — My talk will be also focused around SSR, but from a more technical point of view. I will explain how you can create a full featured, production ready, SSR Vue Application from scratch using best practices. I will also examine common pitfalls and how you can avoid them. We will have a look at security and life cycle issues. These are the ones causing more issues right now. I want to explain how SSR works and why is important for some features like SEO, performance and social sharing.

Great! So what is Nuxt.js about?

Nuxt was initially focused on SSR, but today is a framework built on top of Vue, Vue-Router and Vuex for Rapid Vue Development.

You can create the following types of Vue Applications without ever touching a configuration file:

  • Server Side Rendering Apps
  • Single Page Apps
  • Statically generated Apps

Using Nuxt you just need to write your components into .vue files and let it handle the rest while applying all sorts of cool optimisations.

When using Server Side Rendering, Nuxt sets up a Node.js Server with all the required settings for vue-server-renderer. Besides that, it will also expose some useful APIs like asyncData and nuxtServerInit to cover common scenarios to fetch and share data between server and client side. Nuxt also provides components, like <no-ssr>, so you can isolate incompatible Vue libraries and improve User Experience.

Nuxt can work in Single Page App mode by running nuxt --spa. This will disable SSR, so you can enjoy other Nuxt features like: Hot Module Reloading, Code Splitting, ES6 transpiling, pages routing, Store Module and more! It can also deploy to any static hosting using nuxt build --spa. Using this command, it will create a dist folder as the official Vue/Webpack CLI template. As a bonus, you can also enable one of our fancy loading indicators, while your SPA is bootstrapping, or use your own. It’s very easy!

Finally, Nuxt also supports Statically generated Apps by running nuxt generate. This uses the universal mode by default. It traverses and generates the corresponding HTML files for each route in your App. The resulting files will be created in yourdistfolder, so you can upload them to any static hosting. By using this mode, you will ripe the benefits both from SSR: SEO, social sharing and quick time to first paint (FP); and SPA: CDN hosting, low latency and scalability.

Cool! What are you working on at the moment?

We are working on few ideas, but probably the one that we want to talk about is CMTY (reads as community).

CMTY is an Open Source project to help Open Source authors. It helps to keep communities and GitHub repositories nice and tidy. Structuring and tracking all the data produced, by both the core team and community contributors, can prove to be very demanding. This usually involves switching between different tools. Onboarding is also cumbersome and requires multiple steps which can be improved. Following conversations and progress is also difficult.

Besides the above, one of our worries was to acknowledge all types of contributors. We wanted to give them recognition for their support. Most of the time, it can get buried beneath the myriad of activities. Usually, these contributions are not being tracked by tools like GitHub.

CMTY manages all of the above, so authors and members can further engage in creating more connected communities and lift some of the weight from maintainers.

That’s a great project! As a last question: what talks or topics are you looking forward to at the conference?

Alex — I am interested in the keynote from Evan You. I am looking forward for his retrospective of last year, what he has worked on and what features are coming to Vue.

Sebastien — I want to hear from you, Gerard Sans, for your talk on migrating an Angular project to Vue. I did a similar talk a while ago at my company and I am curious to see how you approach this topic.

Thanks for your time Alex and Sebastien!

You are welcome Gerard. We are looking forward to be in Amsterdam and meet all speakers and attendees. We have seen some images of the venue and it looks awesome.

--

--

Gerard Sans
Vuejs Amsterdam Conference Publication

Helping Devs to succeed #AI #web3 / ex @AWSCloud / Just be AWSome / MC Speaker Trainer Community Leader @web3_london / @ReactEurope @ReactiveConf @ngcruise