Building plugins for Vue and Vuex - Arnav Gupta

um hi guys so I'm bad enough I can't have work at so my toe and my work has nothing to do with you Jess I mobile team it's my toe but so that's why I start with why I made plugins in language so let me show you example of a side project building so it's a website called share time dot in its it helps me should you meetings with people in different time zones and then he did a component that would abate itself every second and website so I build something like this you have time object data you have a method called update time and there is something called timers now if you have used view before you know that there isn't the key called time was inside the instance by default but that's what my plugin does if you add a timer for update minutes with an interval of say 30 seconds repeat it through it every 30 seconds that function is and in fact if you use typescript it's even easier so that's the first time I actually made a plugin for view itself and and then eventually Suvorov once I had to build so I founded a startup where we had an online ID and it has to say it'll save a lot of things last input last output it's like you know it's an ID so it has to save a lot of stuff it has to save something the local storage some local forage etcetera and I wanted basically my entire view its state to get saved to storage that website so for that I built something called view X persist which again my end goal was that it should be like only two three lines to incorporated and my we would store it same using it is very simple you just construct an instance of it you as the storage to it and as long as it is of the storage data die which is it has get item and item functions inside it you can attach an object to it and when you create your view X store you pass that on as a plugin and that's it in fact you don't even need to be using view with view CLI even if you are using view just by writing script SRC in your HTML file you can still use this so this is something that actually got pretty popular after I released it it has a lot of downloads a lot of projects on it use it and so that's when I thought maybe I can plug in an expert enough to say that so started the basics so what are plugins so in the world of view when we use the word plug-in there are three kinds of things we mean and we should of course differentiate so there are view plugins which you know adds functionality to the view framework itself or the view components okay then there are view X plugins now buicks plugins of course you can use only when you are using view X and what they can do is you can trigger certain things happening when the state and finally there are view CLI plugins which has been popular ever since UCLA was released so you can basically create recognized support for new languages basically the entire of UCLA build step your project is compiled and bundled you want to make any changes in that pipeline you can create a view CLI plug-in for that so I would not be speaking a lot about view CLI plugins because it's a very different kind of a thing it's about how you project is compiled and not about how it is we will be discussing more about view and view x plugins in fact new X and view router use themselves are also view plugins so how do you recognize what is the view plug-in what's of your expression so when you whenever you see documentation which looks like this that say example plug-in called view boom you import that and the documentation says that you write view dot useful so this kind of things our view Buicks plugins you would usually see documentation which goes along the lines of this and when you are constructing the store you pass it into the array of plugins and view CLI plugins usually you would find documentation which looks like this that you do view ad or usually you install it using NPM and then invoke it it can run some code generation it can add some steps and all of that stuff so what exactly can these plugins do so what a view plugin can do is that it can add some you know global methods a prop is to the view object itself it can add new directives filters or transitions so we have got a lot of transitions in view by default like slide in transitions and transitions exist if you want to add your own ones you can do that directives like V if V for you can add your own ones like that and they are in fact you know there are a lot of libraries out there will do specifically these things you can add some mixin so I think last stop there was some discussion about mix-ins so you want a particular mixture to be available to every view component in your project you can put that mixin inside a plug-in and put that plugin into view so that mixin is available on every and finally you can add things into view dot prototype which means those methods will become available to every instance so usually people do that with Axio stay put view dot prototype got Axios in every instance of view you can use this dot Axios it is a reference to like that so those kind of things that's usually what are things that you plugin can do so what of UX plugin can do it does really very simple thing it can listen to mutations and when the mutation is triggered the view X plug in can decide to do something like save the state into local storage like my plugin does or you might want to trigger a new mutation or you might you know valid validate the user token every second so you can do that and you see lie plugins like I said they can add new webpack plugins into your build structure they can add result configs and they can add or modify the order of tasks in which and they can also have transformers which can transform your code so if you install the view type script plug-in into a few J's project your existing JavaScript code gets transformed into those kind of do by that so let's take a look at how do we build view plugins first of all we need to you know answer these questions which of these things we need do we need robot methods properties do we need filters directives do we need any global mixin or do we need instance methods so plugin usually looks like this you export your plugin from your npm module it is supposed to contain an install function that install function is going to get run when the view dot used line is getting and at that stage you have the access to the view object and with which you can do these things you can add function like this you can these are things that you can do at every component level also but if you do it here it is available across your entire application write final and then if you want to add a mixin so you can add a mixin like this and there's a created function so this created function will get run for every component inside and you can use there's a shorthand syntax that exists if then P module that you're building contains only the plug-in and nothing else sometimes you might be exporting the view plug-in plus some other things so in that case you can add those things into the my plugin object apart from the install function but if the install function is the only thing that you want to export then you can just export that function the syntax also works if the order is a function then you treat it as the install function we will actually build a but both of them so when you build of events plug-in these are the things that you need to think about what do you want to do an amputation office do you want to do different things for different rotations and do you want to commit another notation when one mutation happens and it's very important to escape the recursive cycle you might end up because the mutation that you will run will trigger your plug in getting run once again so you'd figure those things out so everybody who has used knew about this so your component can disguise actions actions can do a synchronous stuff like the API then they can commit a mutation mutations are the only place where you can change the state and when the state changes there might be some rerender that's happening on the component one direction what in this green box the only place where our plugin can hook into this life cycle is at the mutation level that's where do anything so plugins you write like this you can subscribe to rotations when you subscribe you get this function which has what happens is that you can read the value of mutation dot type which gives you the name of the mutation and mutation dot payload will give you the value of any payload if there was an A mutation notations can be payload less and the value of state that is coming into the function just keep in mind that that is the state after the mutation has taken place so this is going to run after taking place so you get this change state you don't get the previous state so if you want to prevent a mutation from happening that is not you can reverse it maybe but you can't block a mutation from happening you just get to know that it has happened and you can do something else okay if you need a plug-in to block a mutation probably properly one thing to keep in mind is that like I said you can commit further notations from here that would result into this function running again so you need to filter I you need to not run it again for the my mutation being done because that's a mutation and keep in mind that if you are on strict mode that when you are developing usually people don't also it is so changing objects inside the state directly state dot X equal to I that those things do not work in the strict mode and that's why like if you don't use strict mode you might end up writing like this and sometimes it might work but sometimes you will lose reactivity of your store if you write like this so it's best that you have strict mode turned on and when you build your plugins you automatically will end up creating mutations for making changes and do it via the proper route said okay so recently yeah so so years of presenting at conferences has taught me not to actually do a live demo so I our back so you're gonna make it a plug-in called CSS debug and I don't type that fast that's 2x and we are going to export a function that function is going to have the view objects in global mixin so what I will do is an element set mounting and we have publish this module already you can install view plug in CSS debug and above all you CSS we will see that life happening but before that how about we take this evil approach so okay so let's make a view expect so it's called X plug-in store flash and again this is also to its so sorry for that so every time there is a mutation the background is going to go red and as well see so actually have a project this is a website called real world at i/o it's a it's a copy of medium you can build it using any framework just do it no brush your skills framework I really up that project to try things out let's go to this website so it's how it looks like it's it's a medium flow and their articles and trash articles of course so let's do is we'll go to in your JS and what did we name our import it and let's do good for the store one import that as well import store flash from and we will add that into plugins here do we have if it's changed state so you can debug your like this I mean of course you guys have better ideas of making plugins but I just wanted to show something that you can really quickly build with one line this fights back to my mission so just for your information I do use nano I don't use women because I'm not a 10x engine yet and I'm not even a 2x engineer I just play my videos into X okay okay so coming to some of the important aspects of when to make plugins now this is a really important that you should not just because I have built a few plugins which like these two ones nobody uses them because so should we make a mix in and we put it into plug-in and we make the only way to use it is by the plug-in or can we actually make the mixing separately available as well that's also question in mind so you just decide whether the functionality that you introduced make sense only to some components in your project or to all components in your project and that way or the best thing you can do is for example the view plug-in timers if you go and take a look at the readme I export the mixer and the plug-in both the audio so you can use it as a again in which case it will be available on every component even use it as a mixin in only those components that you want as well okay and we were talking about some enterprise-grade projects you get 100 500 the view files some places should not introduce mix-ins into them because that function is going to get run every time big runtime costumer team car should you make a plugin or should you just create a function and exploiters and that also is something that we need to think of and what you're built does it make sense only in the view construct of things or what you have built is something that is very general to web development in nature and I think this is a very deeper question is that a lot of times when we're building app with the framework we forget that we are just doing web development almost there javascript there okay well does not crushed so sometimes you just make something really generic it can be a function you can be important just a simple and commodity don't need to make up plug-in but yeah if it is if it is related to how the view life cycle works or if it is related to how people will create filters like directives in that case feel free to go ahead and write so threading test for your plugins so now that you have built a plug-in how do you write des for your plugins I just drop down yeah so this is this is my view [Music] timer one so thing is the the the test that I have written they they are not only like how you write a test for a plug-in I think the best way to do it is in your plug-in inside the test directory create a sample view app Jesus you plug it and then test the components of the end functionality that you need it so it's similar to that so create a normal timer component it's written in typescript though but I think hopefully it makes bit of sense so I have just written my normal tests I've used J's Dom I don't need to run this test on find them or something like that it itself and in just we just check we mount the timer component and the timer component supposed to update in 200 milliseconds so in my test after 500 milliseconds I just test that the value has changed so I mean I'm not really testing my plug-in itself I'm putting my plugin into a view component then testing that components that's you will get like that again does similar things we have got created a store which has some values of the number of dog barks and number of cat Mews and it runs for mutations and then I just check if the inside the same store whether the value has updated or not in this simple node level test in fact this test does not require view itself and just use view it just uses view X to test it so it just is the part of it so that's about tests and think this is very important is that when you have written a plug-in our distribution when you distribute your plugin you put distributed as common J's or yes M or UMD okay now if you distribute it as only common J's then people would be able to use it only when they build their project I have UCLA but if they simply want to you know script SRC they your or do you just want to so in fact if you have looked at your documentation you can use view and view X together without using views here like you can just script SRC unpackaged / view script SRC on package / ux and you don't even need to write view dot use vivix the CJS script automatically includes itself into view you just need to write the lines first import view and then and you have we were set up already so if you look at the stats so sometime back there was an article on like whether view is used over or where the act is used more a lot of people commented on some frameworks like view and reacted that these frameworks a lot of people do not necessarily go and install it from NPM so then M starts might not be a reflection if you go and look at the charts of J's deliver or unpackage there are there are like the number of downloads a month they're going to billions so a lot of people do use view directly inside their browser although that's not very good for performance but if it is solving their purpose your plug-in so what we should do is I will give you an example of my plugins where I have written them actually in typescript and I have distributed them in such a way that they can be used by people for using J's or TS and they can be used inside the browser or with the you know if you see like structure so what happens is when my modules the dist folder it generates a c JS folder inside which there is the common J's version of this again there is a SM folder which contains the ESF version of this plugin and then there is a UMD folder which generates the UMD version of this packet finally the dot d dot d s files are also separately supported types and my package or json i have specified all of these things so my main points to CJ's because when somebody using it why not that is what they want if my module one points to the ESM one so if somebody is using a fully es6 way of using it babel will import it from the module one rather than some mean one if somebody is using something like power nobody uses it anymore but if somebody does or so browser we have a remapping so if somebody tries to access disk C J's index dot J's they are getting the UMD one if somebody tries to access yes M this to you today and I have linked to the min files for unpackage and J's deliver so when I published they pick up the min files so if you can simply read unpackage slash buicks position they don't need to specify the mini fire than minified and all that stuff got me pick that up and the Taipings folders are also specifically mentioned out there usually building something like this is not as complex as you might think distributing these things I have used roll-up so they just just define the output the format and and the same so [Music] most of the documentation and that should be there but and so we looks exactly like you know yeah definitely again that so yeah I think that's it from my side thence online so we can have about five questions for our now before we break for lunch you specified for the mute for the mutations like plugins for the mutation specific attempting the mutations are mostly application specific right and those existing in the plugin seem a bit I wouldn't say you can the consumer of supply a list of on which it is supposed to be safe so you plug in is at a stage when the patient happens I am plugin can't know from beforehand when it is going to get consumed what mutations will happen so then - also you can take the user because you can add a configuration step or your so what happens is like the easiest way to use this persistent again is we can just write against and you can add that but what I have is there are some ease in when I am extracting it there are certain for example there is one filter so this new nation filter is a function that people can add and this will basically take the mutation is another boolean so you can add your own filter function and for those notations you want to say the state as those those who don't want to so those things you can add as but yeah your luggage should not be of any ended on yeah so when you are building plug-ins and sipping some view components so what you say this you should ship dot view files or bundle files that's a good question I think we had a discussion about that sometime back also so I think some places what I do is I don't know about V U+ bundle but I do ship both the es6 and the s5 questions usually and the dimples they are in es5 and C J's ESM once they are in es6 and I usually write the line inside my reach me that you know you have for this module so because I feel that there are lot of projects which are not unsmiling down to the effect so if they use the es6 version of my plugin they will save a bit on the abandoned sites like those polyfills will not get at it for them but there are a lot of people who are inspiring their project to yes fine and when then I'm spelling there and not 1fps why my not transparent my module has been along with that so that's like what I feel but I have not I have not dot view files directly I have I did that with one of my plugins and a lot of people came up with problems like they are not able to view files directly so notating like adding a global mixin basically if your plugin is adding a global making it affects all the components and it can the performance of that application so or if you are using it can use the DB that is empty so that is there i used because it was being shown there are going to be at any point of time of the screen there might be and there is hardly going to be any functionality that is needed for all those 2000 and if there is then probably those kind of things get added to view so in that sense I think pretty conviction inside a plugin is not really one of the best views cases from be adding a transition already so what keywords so taxes assessed for plugins on NPM and github so that they are visible and discoverable when you search them so I mean I don't know I mean I'm just happy one of them gets used a lot I mean I just followers because I write them in the format of view - in tags I just find you again sometimes like even a lot of search on NPM

Channel: Hasgeek TV

Views: 2,493

Keywords: hasgeek, Vue, Day, 2019, JSFoo

Id: 6SqDehO0seU

Length: 32min 7sec (1927 seconds)

Published: Mon Sep 02 2019