Vue.js Live Conference

Vue.js London 2023

Improving Performance of Vue or Nuxt apps is not an easy task. However, there are some quick wins that you can implement easily that will drastically improve the performance of your website. One of such quick win is Image Optimization. In this talk, I will teach you how to optimize images on the fly with Digital Asset Managements services like Cloudinary or Content Management Systems, utilize the concept of Lazy Loading, use compressed format of images like WEBP, and many more!

Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps

Jakub Andrzejewski

Vue.js London Live 2021

Building an online store these days is not an easy task. With so many competitors Time to Market is the key to success. That's why we decided to build an integration between Vue Storefront- Lightning-Fast Frontend Platform for Headless Commerce, and Vendure - modern, headless GraphQL-based e-commerce framework. Both tools are built using modern JavaScript stack (Nuxt.js and Nest.js) and have several out of the box integrations like search engines, CMS's, payments, and so on. Also, both projects have a huge community of Open Source contributors who support the development process. In this presentation, I will show you how fast you can create your store with VSF and Vendure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Vue Storefront + Vendure = Fullstack Open Source Ecommerce

Hi VGNs London. Let's talk about full stack open source e-commerce, shall we? My name is Jakub and I am a technology leader at Vue Storefront. I am also a core team member of Storefront UI, which is a UI library for e-commerce, and I'm also a core maintainer of Vue Storefront and Venger integration. Apart from work, I'm also a technical diver and currently doing a cave dive course, and I'm also a mountain hiker, and in the second picture there is me on the top of Volcano Teide de Tenerife, which was actually our Vue Storefront location this year. And yes, we are hiking. Now let me tell you a short story. In August this year I set myself a long-term and ambitious goal. I told myself next year I would like to join Filip Rakowski, who is Vue Storefront CTO, in one of the greatest Vue.js conferences and give a speech. So right now in two months I'm here giving a speech instead of next year, so everything is possible guys. Just make this first step. Have you ever wondered what it's like to build an e-commerce store from scratch? Handling all these orders, products, categories takes time, and time is the resource that you may not have as someone who wants to be a market leader. And what if I told you that there are all these solutions on the market that you can just pick and play in minutes or hours instead of waiting for the developers to develop the solution from scratch, which would basically take weeks or months? And what if I told you that these tools are free, open source, and backed by the huge community of contributors that are doing their best to make the project as good as possible? So I want to present to you something what I'm calling a dream stack for open source e-commerce, which is Vue Storefront and Venger. Vue Storefront is a lightning-fast front-end platform for headless commerce. But what exactly is headless commerce? If you have been playing some computer games in the recent years, you might probably know this character. This is a character from the game Team Fortress 2 and his name is Headless Horseless Horseman. And why am I bringing this example as a comparison to headless commerce? So Headless Horseless Horseman was a very powerful character and so is headless commerce. But in more details, what is headless commerce? So headless commerce basically means that you are separating your front-end or the UI part of your e-commerce store from the back-end. And it allows even mature businesses to have flexibility and maneuverability of a startup. So it basically means that, for example, Vue Storefront can connect to many different e-commerce platforms, headless CMSs, payment gateways, search engines, and many, many more third-party services. And what about technology stack? So basically Vue Storefront is built using three main tools. NaxxJS, which is a framework for Vue.js. We are using also TypeScript and GraphQL, but Vue Storefront works with REST API as well. Some basic concepts of Vue Storefront. Vue Storefront uses concept of composables, which are used to map certain functionality of your e-commerce or map certain domain of your e-commerce. So in this case, we will be taking a look at product domain. Each composable will contain from four main functions or four main elements. The first one will be a variable, in this case products. This products variable will contain a value of your product domain. Next, we'll have a search method or the load method that will be used to fetch the data from your e-commerce platform to Vue Storefront. Composables might have several methods, like for example, use product or use address. Might have add address, remove address, update address, get address. So it might have more than one method, but it must have at least one method which will be used to fetch the data. Next, we have an error object, which will be used to each property of this error object will be mapped to the certain methods that this composable has. So in this particular case of the use product composable, error object will contain only one property, which will be named search. And it will contain an error that might occur in a situation where you are fetching the data from your e-commerce platform. Last but not least, we have the loading property, which will be used to indicate whether we are still waiting for the data to be fetched from your e-commerce platform. This was some basic concepts. Now into customizability. Let's take another look at the use product composable. We have a search method that is used to fetch this certain product by ID. This will result in a object that will contain our product data. However, what if we would like to have a different object or a different structure or different properties? For this particular case, we could use a concept of custom queries. These custom queries will be used to override the default query that we are sending to the e-commerce platform. And how does it work in more details? In middleware.config.js, which is basically the main configuration file for Vue Storefront, we could define in an object of custom queries, we could define these custom queries, which are basically, for example, GraphQL, queries. Apart from custom queries, we can also customize Vue Storefront or our shop built using Vue Storefront by using extensions. So instead of just customizing the certain query, we can extend the API methods that are used to fetch the data or modify the data. We can extend the app itself and also the lifecycle hooks of the whole application. So as Adam Jarr and Greg Pollack used to say, let's review. So Vue Storefront is built using modern technology stack. Vue Storefront can connect to various external services and provides full e-commerce functionality. It's highly customizable, as I explained previously. Yeah, and going next into Venger. So Venger is also related to headless commerce, but in this case, it is a framework for, let's say, the backend stuff, backend part of your e-commerce. If you'd like to get more into what is Venger and how it connects to Vue Storefront, we have recently recorded an interview with Michael Bromley, who is a founder of Venger. And yeah, you can listen more about what is Vue Storefront, what is Venger, how they connect together, and what are the plans for the future releases. So Venger supports many functionalities out of the box. So we have inventory management, we have commerce, like checkouts, promotions. We have multiple languages, currencies, taxes, and sales channels. Venger is also scalable, so cloud-ready and auto-scalable. We have some media management, so image cropping, cloud storage support. And we have some team support for role-based permissions and admin UI. So technology stack. Venger is built using NestJS, which is a framework for Node.js and Express. It is also built using TypeScript, and it's built using GraphQL, and it also comes with the Elasticsearch support and the database of your choice. Some basic concept of Venger. So how Venger really works. So we have two GraphQL APIs. We have the admin API and the shop API. Shop API is used mainly for your shop operations, like fetching the data about products, collections, users, and customers. And admin API will be used for more advanced stuff, like managing roles, managing products, and so on and so on. So if you are requesting the data from GraphQL API, it will go to Venger server, which will start a queue. And this queue will create a worker, which will then access the database and return the data to Venger server. And this Venger server will return data to your GraphQL API. So we have an admin dashboard that is built using Venger. And we have a custom query. So we have an admin dashboard that is available for you, where you can add products, add collections, modify users, and so on and so on. And we also have the GraphQL API, which allows you to fetch the data to your storefront. In terms of customizability, Venger supports similar pattern as your storefront, because in terms of Venger, instead of custom queries, we have custom fields, which allows us to extend the default structure of the domains or the entities in our database. So in this case, we have a product, which we want to extend so that it will contain a new property, which will be named info URL. And it will be type of string. So next, what we can do is we can fire a or create a mutation in our GraphQL, where we will update the product with a new property info URL. So thanks to that, we don't have to create a new entity, we are just extending the default one. We can also customize the order flow, which allows us to not use the default one. But let's say we want to have a step between the adding items and arranging payment. So the default one is adding items, we will move to arranging payment. Adding items means that we are visiting the store and just, for example, adding products to our cart. And the arranging payment, which will mean that we are arranging some payment data and proceeding to checkout. So let's say that before arranging payment, we would like to have a step where we will be validating the customer. How we can do that? First of all, what we will do in the transition, we will create a new process. This process will contain a, it will be an object that will have some properties that in the big picture, what they will do is they will allow us to create a new flow. So we will add the validating customer and we will also modify the existing adding items, which will allow us to move to the step from adding items instead of going to arranging payment. And then in the validating customer, we will say that from this step, we can move backward to adding items or forward to arranging payment. And then we can just register this new process in venture config. As simple as that. Venture also supports plugins, which allows you to extend the default functionality. So we have core plugins, which is the admin UI that you have seen previously, the elasticsearch support, the email support, and also the asset server, which are provided by default. Next, we have the enterprise plugins that will be coming soon. And this is advanced search, gift card, wishlist, and so on and so on. And we also have the community plugins, which allows for Stripe, Braintree, so payment gateways, reviews, social auth with Auth0, for example. So let's review once again. Venture is built using modern technology stack. It can connect to various external services using plugins, provides full e-commerce functionality, and is highly customizable. So you might be thinking, there is some similar pattern here, and you are completely right. So both tools are built using modern frameworks like Next.js and Nest.js. They are customizable by default using custom queries and custom fields. They provide full e-commerce functionality, and they are configured to integrate with external tools and services, so payment gateways, headless CMSs, and so on. And they are open source and backed with a huge community of contributors. So I would say that this Fustralfan and Venture actually sounds and looks like full stack open source e-commerce dream. And let me show to you how it works. So basically, what we are doing here is we are creating an online store from scratch with Venture. So we are setting up a project, defining some database, a language, mailing provider, and we are also creating a new store with Fustralfont and setting a template to Venture. Next, what we are doing is installing dependencies as always and setting some environment variables in order for the store to work as expected. So here, GraphQL API and the method for authentication, and we also have to add this method to the Venture config. So two simple steps that allows us to run our store. So let's wait a second for that. Okay, we have a Venture store running, and we have a Vue store also running. So we can scroll down to listing, add some products, define some configuration, modify the quantity of the products, add some customer data to our checkout, set up some shipping data, as well as shipping method, some billing, in this case is the same, payment, and make an order. So let's go ahead and run our store. So we have a new store, we have a new customer, in this case is the same, payment, and make an order, and that's it. So in less than one and a half minute, you have a online store set up and ready to accept some orders and to play around. So if you like what you see, make sure to give a star to both Fustralfont and Venture projects, because they are open source and this is how they, let's say, live, thanks to these stars. So make sure to give a star to them. And also if you'd like to contribute, make sure to visit Slack channel of Venture or Discord channel of Fustralfont. And that will be it. Thank you very much for your attention and make sure to contact me on GitHub using the Paroshen handle or on Twitter Andrzejewski handle. See you.
