Sebastien Chopin - The State of Nuxt at Vuejs Global (Amsterdam)

[Applause] [Music] hello everyone today i'm going to talk about the state of next hello everyone today i'm going to talk about the state of next so my name is sebastian chopin i'm the co-author of nextgs the intuitive view gs framework and you can find me on the social network with the username attenux so next without the t i'm on twitter linkedin and hit up this username so let's talk about next v2.14 which is the last release of nox2 and you may have noticed but we introduced the full static mode for static we are actually mocking async data and fetch so it will be converted as a payload.js file and it will be fetched on the client side instead of calling ac async data and fetch we also integrated the crowder to generate all your dynamic pages so you don't have to define them and when next we'll see a relative relative link into your page it will directly generated as well and of course we support offline with the pwa module so you don't have to to do it yourself for the user so in order to have the full static mode you simply have to define in your lux.config.js the target to static the default value is server and then call nextgenerate and that's it we also introduce the smart generate so the smart generator will simply skip webpack the webpack build step when you didn't change anything into your code base this means faster redeployment for static generation it is also platform agnostic which means that it will work on versailles netlify or any ci platform without the need to add a plugin and of course it works with next content and any cms that you can use or any data fetching you you prefer and this is a graph of with and without the smart generate so on the blue graph it is the first build and the green one is when we only change the content and you can see at the top right the stats for the nexus.org website and we went from more than 100 seconds to 30 seconds which is around 3.6 times faster when we change some content into our documentation let's see a quick demonstration of this so here i'm having a blog and on my index page i'm using strappy here i also have articles and uh article page so you can see also in my index.config i'm using target static so let's start our next server with the next command so it will launch next in development mode so if i go to localhost 3000 we can see the webpack build and when it's done we can see our home page so i can navigate on my article and if you look at the network tab you can see that by navigating it will call our api which is trappy here so let's update our home page and remove one rocket let's say save i can refresh the page and i see i only have one rocket now because i'm in development it will code the api so let's start by calling next generate for the first time he will actually feed our application so he will do the webpack built for production minifying the javascript and transparently so it will work on ie and then we will generate all our routes so let's start next in production now we have a production server listening to the this directory which is generated and now when i navigate on client side i don't have any more api call to stripy i could shut down strappy here let's update our in our index page by adding three rockets this time if i refresh the page i won't have any more rocket i don't have the update so let's generate again it will actually skip webpack since we didn't change any of our view file and it took two seconds to generate all of our pages so let's start again refresh we have our rockets here another feature which is quite useful here if you don't want to wait for the generate it's a preview so we created a plugin here we are checking the query parameter.preview and if it's not undefined we will actually call the enable preview feature of next and what will happen here if when i go to the page with the preview preview parameter he will go back and unmock async date and fetch and he will directly call strappy here so if i navigate i can see my page updated and if i refresh it's still the old page so that is quite simple to activate the live preview for for your static generated application so this landed in nox 2.40 and i really recommend you to trade out let's talk quickly about the stats of next in august 2020 so last month we had 1.1 million download on npm that was really really nice to see in july we hit the first maximum which is 1 million so thank you a lot we had 200 unique 200 000 unique visitors on nexus.org so that means a lot of people are reading the documentation which is good news and we had one million project created so this come from next telemetry we will soon open some graph for for this and the global start we reach 43 000 followers on twitter and 30 000 stars on github thank you so much for this next i don't know if you saw but last week we actually released view telemetry view telemetry is a tool to discover website made with vgs it is a website and as well a browser extension for firefox and google chrome it is made by the next company for the vue community and we have the analyzer and the extension which are open source the analyzer is based on puppeteer and anyone can add a new plugin quite easily and of course it is 100 free i really dreamt of having a website like this and it was an opportunity to create it so so we did it so seven days later after launching we had 1 000 user using the chrome extension 8 000 unique visitors and four pull requests merge for uh analyzing new plugins like inertia gs or viewformulate and others and we analyze more than 3000 websites website so this is a screenshot of the explore page of view telemetry you may want to take a look and see if your website has been already added here and you can feature by framework we support all the view framework up there and most of the ui framework you can use with you next and i think you guys are waiting for for this is next version three first let's talk about the internet changes we have webpack five we are also upgrading to pro css eight it will be also um party to next two but since pcs has dropped support from node 8 and even numbers we may have to do minor real mineral release of next two as well as some breaking changes we also added esb so the bids are quite fast now we rewritten the coin type script like view 3 did view bundle renderer has been rewritten also on typescript and support for view three and more and i really recommend you to watch puya parser talk which is next after me [Music] and view three this is the major upgrade for next and we decided to change since when you start an x2 application you your entry point is the page now it starts with the app.view so this is the entry point of your next app now so this is like the basic example and it is optional if you are using the pages directory you can either choose pages or up or both it is perfect for global data fetching as well so you don't have to uh depend on lux server in it or any plugin to do this data fetching globally and it is great for landing pages or any application where you don't need if your router if you don't use pages your router won't be included so this means that the single atom view will produce 20 kilobyte of javascript jzipped which is the actual size of u2 let's talk about the routing now because this is one of the major features of next so we have now powerful routing system based on view router 4 thanks to eduardo work we decided to change the convention for dynamic pages so page underscore slug becomes page bracket slug this also allow to have multiple dynamic parameters into one single page you can also catch sub passes with this bracket and three dots inside we will also support the 404 page as well as the underscore error dot view that will move out from the layouts because now we uh we don't support the underscore anymore for dynamic the ignore prefix is now underscore so every page you want to ignore start with an underscore instead of dash and you can now add routes at runtime thanks to plugins which was difficult to do before and since viewrooter4 handled the sorting for us it's really really powerful now and next and next child component become next page so one single component for displaying a page as well as a child which is simply here now but but as much powerful as before and one of the biggest features after the pages for next was the data fetching so as you know we have async data and fetch these two will disappear for next three we we will support the legacy mode for next three to using data and fetch but this is way more powerful we imagine a new way to fetch data in next after a brainstorm with avenue and some core team member of the next team it is based on the composition api you can pause the page navigation until it's fetched like the current async data or you can defer it so it will actually feel like fetch and you will handle the loading state in your component it will support server side rendering and hydration so you don't have to api call made when you refresh the page and most of all it will work at the component level which means everywhere from app.view pages to the single component you can include in your pages and it will support caching so like swr so when you hit the back button on your browser it won't make an api call so you will feel even faster and we will support also a custom data fetcher so you can use your graphql endpoint or any of your library to directly fetch your cns so introducing use fetch which is from next composable so first you need to import it we are actually working with puya to make it global so you won't have to import it then you can directly define an async setup which is supported by vo3 thanks to suspense you don't have to worry about suspense since next three the next page component will directly support suspense as well as transitions then this is how it look like so you can use fetch and directly give an api endpoint use fetch will use the window fetch or not fetch internally and send back directly the data and it will return an object with data as well as a fetch method so you can reuse to record this use fetch and then you can directly return your mountains here my data that i can display in my template so let's talk quickly about this signature here use fetch is waiting for two arguments option is optional and request can be either a string a function returning a string function returning a promise and that's it so if we want to watch for props you can use a function so every time the prop will change it will call again use fetch and the data will be changed and the temp template will be updated you can use a custom feature here i'm using prismic to fetch my current page and as an option you can give the differ option to true and if we don't block the client side navigation so you will um the data return on client side navigation will be null by default so you will have to enter the loading state that will be seen right after and you also have the server option which is true by default to handle server side rendering if you want only client-side data fetching you can set server to force and of course differ and server can be combined together let's see a demo now of next three so here i have my empty directory and i started next so we can see on the right my current page which say welcome to nep3 this is not the final screen but you get the the id and it it states that you can start adding a page index.view or app.view so we will start directly adding an app.view page and i say hello next three when i will refresh the page i have my content here and i have automatic replacement so i don't have view router here yet so let's add our first page my index page and we will display a list of mountains let's add our title and now in order to display my page i'm going to use the next page component here i have my mountains and i'm just adding a header so we can quickly navigate between our pages so this app.view will also act as a default layout that's our dynamic page to fetch our mountain i will just display the actual slug param i can see mount everest so let's start using use fetch now so i'm importing it right now it's app composable but it will be next composable define my async setup and let's fetch our mountains so we have a developer development api for next that you can use and here i am fetching my mountain and let's display the json we got and here i have my mountains let's copy and paste some nice fancy block here i have my if if i don't have mountain it would be display loading otherwise v2 v4 and display the image and the ish title for the mountain with the link to the current mountain what you can see here is when i navigate to the home page the data will be blocking the use fetch will be blocking and it will stay on the previous page until use fetch is finished if i said defer to true this time when i navigate back to the home page i will have my loading state here then it will display so i can control inside my setup which data will block the navigation or not so let's go to our slot page i also passed some markup here so we have a nice mounting page so here what what i'm doing here i'm also calling use use next to get the current context seen inside setup you don't have access to this so i'm getting the dollar root here and now i'm fetching the mountain here i'm also getting fetch to call fetch mountain on a button so let's fetch my mountain and fetch mountain will be used here on the button so every time i refresh it will refresh the use fetch and refresh my template i have my mountain as you can see we have the progress bar at the top so when i navigate it is blocking the page like async data so what i want to do now is move this logic into a component so i'm creating my mounted node view component copy pasting instead of using use fetch i'm declaring a prop called slug that i'm going to use right inside my setup and i'm changing my select page to use my mountain component removing setup here displaying only my mountain component and giving the total param slug as the prop so let's go i have exactly the same behavior it is also blocking the page so let's define a prop called defer that i will give to use fetch directly so that way you can see how a view component can also act differently based on props for data fetching so now i define mountain defer so when i navigate i have my loading mounting state that is displayed let's show also first i remove you can see it is blocking before displaying the page now let's define another prop called server by default the value is true to handle server-side rendering i would define as option to use fetch and now when i refresh i can see that it is displaying loaded mountain on the server side and if i remove adding box server true i have the server side rendering displaying my mountain and that's it for the use fetch from this example i only display one usage of use fetch inside setup but you can have multiple use fetch inside setup which is really really powerful sorry next what are the other change for next three these are the most important one we will have autoimport of the plugins directory like we did for components in order to support this we are going to handle hooks inside so you won't have to handle any ordering inside your plugins static directory will become public which would make more sense and we also follow the convention uh by php or also next gs which i really like for this app.html will become document.html because we are talking about the html document and since now we have updated you it makes less sense to have app.html we will have hooks on the upside so you can directly hook into them like you do inside the modules so app created app mounted at before mount as well as page start and finish so this is how i implemented the progress bar using only hooks as by using a plugin we will also support multiple apps inside one app this is really useful for teaming or for any big company a project that needs to split the project into different modules like for e-commerce you will have cart directory as well as product and inside you will have pages directory and etc we'll have a functions directory that will be optional and it will be really useful for server only execution so you can think of it as a like notify function but inside your next application you will have access to dollar functions directly to make this api call and we will also have first class serverless support so you will be able to deploy to uh the popular serverless hosting directly and more and the biggest question is when will it be open source right now it's in private since we are doing a lot of change and it's not stable but it will be open as soon as it becomes usable and a bit stable and first we want to make sure it works for luxuries.org as well as beauty lemme tree so this how we dog food next three and then we'll open it as an alpha to get together as much feedback from from the community talking about the next community i discovered recently that we had 11 000 members on the discord server so this is really nice a lot of active member and i'm really happy to see such engagement from you and next and like i said before 43 000 followers on twitter we tweet a lot but mostly about news i like having this nice video or gifts every time we do a release i discover also we have 10 000 contributors on github and i'm not talking about uh the people that update the code but also the people that create issues and comment on issues across all organizations from next to next community and all these repository and we have 392 donator on open collective so we want to thank these people and companies for supporting us financially thank you very much i hope you enjoyed the talk and have a wonderful day

Channel: Vuejs Amsterdam

Views: 4,772

Rating: 4.9436622 out of 5

Keywords: Javascript, vuejs, react, reactjs, angularjs, angular, angular.js, react.js, frontend, front-end, frontend developer, developer, coding, programming, html, html5, css, css3, webdesign, web developer, code, tutorial, vuejs.amsterdam, frontend developer love, frontendlove, graphql, react native, mongodb, nuxt.js, nuxt, nuxtjs

Id: NyeFQ3JmDEk

Length: 25min 44sec (1544 seconds)

Published: Wed Oct 21 2020