In the ever-evolving landscape of web development, choosing the right framework is crucial. Join Daniel as he delves into the realm of modern development practices. He’ll explore the power and versatility of Nuxt and the unjs ecosystems, as well offer more general insights that are relevant no matter what framework you decide to use. The talk will be sprinkled with live coding to show off the features and capabilities you’ll be able to put into practice.
thank you very much it’s a real pleasure to be here uh my name is uh Daniel row and I’m going to be talking about modern development with n which I very much hope is what the slide behind me says um if you want to by the way feel free to come to the front and fill in the uh space if if that would help um I’ll be doing a little bit of live coding later on so I want to talk about um a number of things but first I thought I’d give you a quick intro to uh some of the things I I do or am involved with so next is the main thing I do I’m a full-time open- Source maintainer I’m sponsored so I’m not employed by a company um I do this because I love it uh I also contribute to some other projects as well things like Fontaine which helps reduce cumulative layout shift with web fonts uh Magic Rex which aims to make regular Expressions type safe in uh JavaScript and typescript and is compiled the way at buil time so you write normal regular Expressions basically I have a website R.D uh I I’m on the core team of a Mastadon client called elk I’ll show you a bit of the codebase a bit later on but elk uh well Mastadon is a decentralized social network like Twitter but power to the people uh and a few other things uh there as well and probably uh more important oh do do check them out by the way first commit and Page speed are quite fun tiny little projects uh this is my cat barley I live in uh in Edinburgh in the UK and uh most of my my work is hindered to some degree by barley uh she she is not very tolerant of me doing other things that do not involve stroking her petting her or otherwise tending to her every uh whim and need uh and so I I’m talking about n and I’m aware I’m sort of going on the assumption that you know what that is but I’m also not assuming that you do so would you mind letting me know so uh if you scan a QR code it should hopefully work so this is does rely on internet access I’ve got a websocket server uh it’s connected to my laptop with a slide deck and hopefully when you all submit scan the QR code it should submit uh little API request this whole thing by the way is like five lines of code it’s not complicated it uses something called party kit which has just been bought by Cloud flare it’s a great little project do check it out if you don’t know it already by the way have you noticed how clever I am because I I’ve labeled this yes and not yet so uh little little subliminal Clues like that are going to sort of filter through you’re going to go home and think I would like to try N I don’t exactly know why there was something about that slide uh but this is is great so um you you’ve not uh not used n that’s that’s that’s fantastic I’m going to say a little bit about about what it is um so KN is a framework for building full stack web applications uh so that’s uh focusing on the server side and the client as well so for client side interactivity it uses a framework called view uh and for server side it uses something called Nitro which is actually a framework we built for n 3 but we’ve open sourced it separately as part of an organiz on GitHub called njs which is exists to make unified and Universal JavaScript solutions for an entire ecosystem um solutions that run anywhere and can be reused by lots and lots of different Frameworks and use cases so Nitro is now the foundation of a framework called analog which is an angular meta framework as well as solid start which is a a framework using solid uh as the front-end library and I would love to see that grow to more the part of the core philosophy of next and I’ll be talking a lot about philosophy uh later on uh is that it is uh it’s zero config to start with but it is it can be made your own as you go um that matters a lot to me because I’m the kind of person who customizes everything about my computer from the the terminal to vs code and if you’re like that then you’ll you’ll like n because you can customize it all um and here’s a little timeline so the first uh n commit was was a few days after I think the release of nextjs which is a similar framework for react testing oh okay is that any better is it more authoritative okay well maybe not uh and uh and and and and it’s grown since then the most significant um entry here is the beginning of work on version three uh because please don’t ever do this what we decided to do with n version three uh was rewrite the framework from scratch why did we do that it’s actually it’s a very good thing that we did that but don’t ever do it and and uh and it was we had a lot of breaking changes in the ecosystem there was V3 which is a huge breaking change webpack 5 came out postcss 8 came out all the things that we had built nux 2 on and each one sort of came out in a delayed fashion meaning we had to continually re uh build everything um but actually ended up forcing us to make it in to build nux 3 in a modular way which I’m going to talk a little bit I keep on telling you what I’m going to talk about I promise I will actually talk about it at some point but it forced us to build things in a modular way so that hopefully we’ll never have to do this again uh and this this is a little snapshot of KN I never exactly know what these numbers will say because I I built like this is live it’s just pulling it from GitHub so uh we’re sort of 50,000 stars and 29 million downloads uh and 63% of PE of downloads are are the new Nu 3 and that’s a little graph of the uh the sort of download count of NX 3 and this is much more important than those numbers because who cares about npm downloads and stars uh these are the people who’ve contributed to n so there are over 690 uh as of as of today um and N is very much a framework which is driven by the community because it’s not backed by a VC company it’s it’s an independent open source framework anyone can be involved in you don’t have to have permission to build the feature or fix the bug it is it is open and that’s how I got involved in N from the beginning I now lead the core team um but a few years ago I was um contributing because I had a company we used n and I wanted to see the fixes we were making go back Upstream to benefit other people too right that’s the beauty of Open Source so here are the things that I think I want to pull out about modern web development that matter to me that to KN and I think also will make a difference whatever framework you’re using uh so first of all agnostic I think it’s this is both a a really good thing and a terrible terrible thing right it’s it’s the uh uh the midwit meme or um it’s it’s something that every new developer does for anything like me um you you start by abstracting everything away right you you need to write one function to do something and you start thinking hm you know what would make make this one function better if it could be used in every possible way at any point in time and then you make a little sort of reusable function which is fully customizable and like premature abstraction is a terrible thing and so one of the things you see of course is that um as you become a better developer you stop doing it and you you start having a sort of uh waterfall type process that you you start by uh just writing the function and then the second time you write the function again but maybe a little bit different and then the third time you start thinking okay now I think maybe we could abstract this um but I think for a framework it’s really important that actually those abstractions are there um so abstractions for as much as we possibly can create so um the choice is so much a reality in the JavaScript world today that it’s almost a uh joke uh how many new things are coming out how many new SAS platforms are being launched what is going to be new this week and do you feel outdated yet which is terrible don’t ever feel outdated because new stuff is coming out that’s not we I’m sure we could all pick up anything um we don’t have to be up to date with everything and so the our objective one of our objectives within NX is to take away the pain of adapting to new providers and SAS platforms and uh and anything else that you might have so we try and provide abstractions which we do from everything where based on where you can deploy next so those are specific uh platforms but we also support just generic node or generic web worker or generic Lambda um different bundlers we even have V and weback support built into n with rsac coming soon different testing Frameworks we have a built-in n test utils that you can use which has different providers and uh let’s see what else database support we we can we have some called db0 which allows migrations um querying integration with ORS we have an image module which allows you to use any of those 20 plus uh image providers based on whichever you’re using so those providers will do things like transform images uh so that they can be loaded the minimum image uh size needed can be loaded in your project uh and so on now I don’t know if you look through that list and spot providers that you are using but our aim is that users shouldn’t have to pick where their deploying or what provider they’re using because of n so all of these are built in but you can also create your own custom version of any of these so you can create your own custom deployment preset your own custom image preset Etc a key Value Store Etc and the idea is we have a consistent interface that can be exposed um so you can actually access this anywhere so to give an example it’s going to work yes so to give an example um this is a el the project I mentioned um so in here we have uh we are using this uh used storage layer which is uh which is in here um and Elk is a a client for madon and I’ll just fire up a new window and I get across some and if we were to access this uh this elk Dev server there it is uh running locally um but people want to deploy it in different places they want to have their own fork and they might want to have a different place where they store their data so we can just uh add a little if else and configure different storage mounts um now these mounts can be layered and nested like a Linux or Unix based file system um and you can have different kinds of drivers so you could use memory storage in development mode uh we actually use a sort of file system based development mode um you could use cloud flare or Vel or anything else so this uh bunch of code is the only provider specific code we need to create in order to support deploying elk with a backend that integrates with any of these providers and we could really easily add more as you can see so that means that the the interface doesn’t change um and I think that should mean for users so for example if you’re dropped into a new project um and it’s a n project it doesn’t actually matter where that project has its uh KV store based um or which image provider it’s using it shouldn’t make a difference to you as a developer and I think that’s one of the things in that should improve velocity for devs in modern web development um we have over 90 uh and the idea is to add as many more as as possible so we depend on users who use them to create these presets uh and help us maintain them because we’re a community project but the idea is you shouldn’t have to worry about this a second um extensible not just agnostic but extensible so n allows in deep integration at every point of the build process uh using a library called hook which we developed for this purpose um which is used elsewhere now as well so we allow a waiting on running custom hooks at at lots of different points we’ve worked um with the Chrome Dev tools team to um ensure that you get beautiful logging no matter where which Hook is is uh is being run and Dev mode we support all kinds of different task Runners and strategies and you can debug Your Hooks uh in development when you’re when you’re creating it so n can you can build quite a lot with with n um this way and you can package up the whole code that you create into what we call a n module um so this is one of the things I think that sets next apart it means you can distribute that module either directly in your project through a private package or a GitHub repo um or publish it to npm we have tooling to build that um and we have uh a data set which is again publicly accessible in GitHub and an API uh and we also created for n 3 an SDK so for future versions of NX even major ones your modules should continue to work in the same way as if you write an app for Android or iOS you’re writing against an SDK that ensures it will keep working on newer versions of the platform and here’s some data uh which again I’ve just pulled um live so uh we have got over 210 different modules you can see them at nu.com modules um and hopefully there’s something for the CMS or the um orth library or the um script integration or whatever it might be that you’re looking for oh and I I’ll show you what what that looks like again so if you’ll forgive me I’ll just create a new next project so this is the experience of using a module uh of using n to hopefully um abstract away a lot of the pain that you might normally feel um so I’m going to create the new n project initialize a get repo uh open it up and run the dev server uh the the default next project is pretty minimal um and if I run that Dev server um it has a sort of welcome screen to start with and I’ll just say there we go it’s a bit small and I I’d like to start this with Tailwind so I’m going to open up the N Dev tools um which uh is actually running in line with my application and it allows you to see a lot of of your app uh and I’m going to add a new module so this queries that same um API that I was talking about um and in this case I’ll add Tailwind CSS so um I can actually install that from the dev tools here it’s going to add the package to my dependencies restart next it’s also going to change my config to add that module there um and that means that now I can start to style this say with in CSS so something like that Heavens I don’t even know what I’m doing Lex can you Center a div yes it turns out I can so that that’s the kind of thing that you can get with the modules ecosystem or um a new module that we released recently uh no fonts you could do something like this no fonts allows you to have zero config oh not script style I’m going to style this div oops we’ll make it um Family Po and we will okay so it’s it’s it’s read the the um the the font uh it’s pulled it from Google it’s downloaded locally into my project so that when I deploy I don’t have a third party link it’s added a preload link to the header header and it’s generated some font metrics so it will reduce the layout shift um You probably won’t see it in Dev mode but in production the layout shift um between the your browser’s default font and this custom web font will be at a minimum level so that’s the kind of thing that we can do with uh with Nu modules uh and I think that kind of modular approach is the future so it’s the basis of things like Unix or Linux the idea of small packages that work together and extend a common core um n is also composable so this was a change that happened um by the way are you with me so far just just checking um because I can totally dial back back on the cuz these things are interesting to me um but they might not necessarily be interesting to you can you just let no no judgment you know don’t look at anyone else if you if you if you’re sort of more detail less detail more detail raise your hand less detail raise your hand okay I’ve made a note and uh we’ll talk later um no actually we will talk later you can um come and ask me anything later you can also message me on my website or Twitter or whatever I would love to talk about any of this later um composes so one of the things with V3 is that a lot of the reactivity logic of view went from being a single object syntax where you would have a component and it would have a a key called computed and inside there it would have some methods that Define computed properties uh in view three the idea is you import a computed function and you call it which might be um familiar to you if you’re using like react you wouldd have like used state or solid would have a create signal and so on um and all of these things uh basically allow you to to import or opt into features that you want to use um and we’ve leaned hard into that with NX 3 with Nitro uh with H3 and the other Frameworks that we’ve built for n the idea is that we have all this functionality that you don’t have to use and if you don’t use it it’s not part of your bundle so a framework like Express anyone here used Express so it has things like it modifies the res and W objects from node so you’ve got like a Json method you can call to return Json um or you can uh you can you can access like other other functions but they’re they’re not they’re always going to be there they’re always going to be part of your build because of how it works um they’re just there so with n we actually only pull them in when you need them and we use something called un import to give your editor the information that these are available to you and mean you don’t have to import them yourself when you use them I mean you can if you want you can turn it off if you prefer seeing the Imports but it allows us to have a very frictionless approach to pulling in new parts of the framework um that you if you don’t need will be out of your build oops the whole thing the reason why stuff like you might think well that’s just D this is just DX it just makes your life a little bit easier what does this have to do with modern web development H how can this help an Enterprise uh adopting next um and I think for me a lot of it is about reducing cognitive load and unlocking the power of convention because the idea is when you parachute into a new project you immediately know how things work and you know how to be productive in it so you don’t have to figure out how to change things we we also ship some other things that allow you to do some something similar so for example if I uh nip back to that elk project over here and I again open the dev tools um you can access things like information on the rooting in the app see all the different pages that exist and if you’re in new Dev you’re trying to figure out what’s going on this is quite useful and you can actually just click uh to go between them actually it won’t work because I’m not logged in but you can click to go between them uh and see some of the different different features of the app um you can also access the uh the selector here like the component selector and directly click onto individual elements within the page um and it will be able to open the file that matches that in your editor so if again if you’re parachuting into a new project you don’t have to figure out with search like searching the project where to to load something you can actually directly do it just from the running project uh and there are a lot of other examples too um so you again we provide the magic but we don’t want to completely get rid of your ability to see what’s going on so for example you can see what Auto importable composes are available to you uh here for example uh and you can actually even have a look at the composable see the documentation on it U and directly click it to open in your Editor to see what that function will do for example and obviously that works in your IDE as well but sometimes it’s easier to do it in the dev tools um and finally um layerable so the idea is that you should be able to treat your n uh project and other n projects like building blocks that are part of a bigger hole um so you can separate your concerns if you’re working in a kind of micr front ends kind of way um and you want to have different teams building different bits of a project this is totally possible uh to do uh so if we open that basic next app I uh made a few minutes ago um we could do something like uh like this I’m going to copy this next config uh create a new version of it here I’ve created a little layer um and what I’m going to do is in this parent layer here get rid of everything in the parent layer I’m going to say that we’re going to extend this child layer and you can extend from an npm package from a directory from a git repository or anything else uh and that means as if in a monor repo context you could do the same kind of thing so I could do something like I pull this out and create a little component uh components welcome component uh paste it in there and we’ll say from a layer that’s Val you and then we’re going to actually use that now in our parent so we have got access to this welcome component which our IDE knows about um it’s coming in from this layer uh and it’s actually now being used in our parent project so you could easily see how you could build a component Library um how you could abstract different feature sets away into a layer uh and you assemble those at build time time into a final project and I’m not showing this in a manook because it would be a little bit more comp complicated to configure in in live coding but that would be totally be possible as well so the idea would be as much as possible you can swap things in and out from your actual code base um from n itself from the provider where you’re deploying n uh from the code that you’re using you can verion bits of your application using layers um and you should be able to take full control of that at the end of the day so that is a little bit about how we’re trying to to adopt and Foster modern development practices with KN I should say another thing which I haven’t listed as specifically a modern development practice is the whole concept of stability how we ensure stability with KN what we’re trying as much as possible is to have uh some guard rails in place so we have a stable release cycle which is we release a patch every week or so a minor release every month or so a major release every year and we’re just coming up to version four in uh June we test every release against uh Downstream projects that depend on it using something called ecosystem CI that tells us if it’s safe to release um and what we are able then to do uh is push out new features quite quickly knowing that they’re tested and won’t break people’s project and allowing people to opt into them with things like uh a future or features Nam space um and of course the fact that we’ve built uh test utilities to allow people to test things themselves is part of our strategy there um for NU 4 We’re actually proactively creating PRS to the modul ecosystem another reason it’s great to have a registry that opt in to forward and Backward Compatible changes and if you are using n uh or want to and you build a library maybe a View library or something like that please feel free to open a PR to ecosystem C and I’ll I’ll check your library against new versions and ensure we don’t break it so if you want to get involved um that’s you don’t really don’t have to At All by the way um but if you if you want to if if you think this seems cool and I’d like to help contribute in some way then actually we’d love love to have you um and that’s not just true of KN but any project um I’m involved with actually open source maintainers I’m not sure how many of us there are in the room we love it when new people contribute it’s a part of the reason we do what we do it’s it’s an amazing community and meeting people in person that you’ve only talked to online or you’ve seen this sort of GitHub Avatar it is one of the highlights of my life honestly it’s one of the reasons I love coming to conferences uh and and meeting and talking to people um so we’ve we’ve got some things that will help so our docs are uh type safe for example so you can hover over um variables and get little type hints that’s powered with Shiki and two slash which one of our core team team uh Anthony Fu um has sort of revamped so do check that out we have a Discord server and GitHub which are great places to come for help um you can always find me on Daniel row and Discord uh and uh if you have contributed you’ll get like a little Discord badge if you go to n. nu.com uh and finally one thing that that I want to say very much um is that if you in any way want to get involved in open source or want to get involved with next but just in general I would be delighted to talk to you about it so I have an open diary which you can book um and we chat uh online and particularly that is true if you look at the qu team or the contributors um to KN and you think I’m not sure I fit in I’m not sure I’m exactly like them would I be welcome and the answer of course is yes you would be welcome and I would really like to say that to you face to face so please book a call and um I’m I’m happy to answer any question I can or help you in any way I can um yeah uh and yes there are some other links to NX style things if you want to check them out um it’s been a real pleasure to talk about n and to talk about just some of the things that I think are important in modern weal development and what we’re trying to do and how we’re trying to adopt those in n i by the way really hope that you don’t think I think we’ve arrived um these are things we’re we’re striving for this is why we’re striving for them we won’t get them right always let me know if we don’t if you try an next out and you think this could be better I would like to hear from you please do message me that would be great we might not sure we might have time for questions yes we do we do it’s your lucky day no maybe it’s not but you can start thinking of questions while uh Maria are you going to come up or shall I just ask them I will ask them the power is mine you don’t know what that does okay uh does anyone have a question can I answer something thanks how but that’s not the question I’ll figure it out I’ll go to the do you show us where do I push it what’s your choice if you have a small be your so um one thing I should have said by the way is that wherever you do put push it KN will detect where it is so on Vel or NFI or cloudflare for example it will realize it’s being deployed in that environment and automatically enable the correct preset and output the correct files for that Focus so typically you shouldn’t have to configure it in any way um and in terms of which one is best the answer is I’ll I’ll answer your question but the answer is it it depends on your needs so there are two kinds of answers to that question so I could say it depends on KN and that would be me failing at my job because I think individual choice is the key thing here because this this is a free source it’s open source is the free software philosophy you should be able to pick and choose what you want and we shouldn’t be dictating that the framework shouldn’t be the limitation so the the things that affect your choice should be your needs uh everything from how biger your team is to what your budget is to how much you care like what your the cost of your time do you want to administer a VPS yourself would you prefer not to you know so those are are the kind of questions that I would say um you should think about um I think Vel netlify Cloud flare are excellent choices with if you’re if you just want to try it out um this isn’t a team a lot of the other factors don’t come into play those three offer zero config deployments very minimal setup and you’ll be able to get going and see what it’s like sort of instantly so that’s a it’s a good choice and if you need to change to another provider you should be able to do it without changing anything in next aome any more questions come on we’re having coffee right after this you have one uh so just to say uh n is obviously coming and that is not where we’re putting the exciting things so that we adhere to semantic versioning so uh patches are for fixes uh minor releases are for new features that’s where the exciting stuff is and major releases are for breaking changes uh which uh we aim to make minimal and gentle as possible um so one of the changes next for will bring us is for example a more performant kind of data store uh which is technically breaking but is going to be better for almost everybody um the things I’m excited about so um I’m uh in progress of working on on N multia support so I showed layers which were the idea of splitting a n app into different parts and then assembling them at build time uh Nu multi apppp is the idea of splitting an app into multiple uh parts and federating them so allowing them to be deployed separately but coexisting in one page or one uh domain something like that I’m pretty excited about that there are also some uh performance improvements that I will personally love to see so we in NX 2 had a the concept of a cache if you’d already built the app once and you needed to regenerate some pages you would just be able to do that without rebuilding the whole app and we have uh a work in progress on build cache support which means that we should be able to avoid rebuilding your app um if when parts of it haven’t changed uh and that should also work across deployments on providers who support it uh places like Vel or cloudflare for example have a build cache which is persisted between builds and we can actually uh if if you’ve only say changed a markdown file that’s part of your blog we shouldn’t need to rebuild your app um you should be able to get something like a couple of seconds to deploy so that would be something I’m pretty excited about too and I could point out more I’ve got a really long list of things that I would love to work on um but those are two great last question anyone no so yes so stand up so for me one of the things that really inspired me is the idea so I I see open source as about giving it’s not a it’s not transactional it’s not about uh sort of um I’m I’m I’m doing something and I want payment for it it’s it’s about I do this because I want to help this is my gift to you um and I do that partly because other people have given to me so it’s it’s it’s very much it’s a gift ecosystem and when something changes from transaction to gift I think it really frees you up because what you do it’s totally up to you it’s unconstrained no one is telling you what you should or shouldn’t do it’s not work there’s no performance review nobody is going to um say you did a bad job what you’re doing is you are giving something of your time and insight at and and doing that freely uh and as a maintainer that’s how I see it people are giving me gifts when they cont contribute and that’s what I’m doing I give gifts when I try and help um that was my sort of personal inspiration um I think I would advise if you want to get started pick something a project that you’re using yourself um and find either a a problem or a feature that you want so a bug for example would be you are following if you go home and you follow the docs and you try and make a XX project and it doesn’t work in some way that’s a bug in the docs because it wasn’t clear enough to get you going so you are one of the few people who can spot that bug because most I already have created lots of n projects so I’m not going to spot the bug I’m not going to see it because I don’t have that that uh Clean Slate background so you could if you wanted to give the gift of fixing that uh spot in the in the documentation um and just figuring out how to Fork a repo and and make a change um might be quite a helpful thing and and I I know I said you could book a you can also just message me if you have any questions is this something that KN would welcome is this a good PR to make what do you think about this approach how do you even create a fork on GitHub I’m really happy to answer those kinds of questions if if that’s a barrier to contributing in any way great presentation thank you so much Daniel