Build and publish your D3.js charts with Vue.js | End2End Live Conference

we are over time frank and welcome today we are going to show you some niceties from view and e3 well we hope it will be a really beginner friendly talk however we will make it as exciting as yeah difficult if we want because we want to be everything to be interactive with you with all the listeners uh if you have questions please ask them we can open your microphone if you want let's make it interactive we have prepared something but we are not really that prepared that it's like a scripted talk so let's make it interactive and uh yeah let's have some fun tonight okay frank what are we going to build we are going to build an application a web app in view view uh three we've prepared it in view two but then we need some extra time to rebuild it in view 3 so the news of the newest we are going to use however it will be in yeah an app and demo app showing a chart component well you might know that if you want to build charts d3 is the way to go because d3 provides you really a lot of nice primitives to yeah create and render the charts however d3 is from i think 2012 the time that jquery was paula ryan jkuros the the standard way of doing things and then the three came and like d3 is it means data driven documents so you are rendering based on data for example a list of three things you are rendering three divs three lines in the charts whatever and well the the way it re-renders it's kind of old-fashioned nowaday because later came react angler and of course few and yeah we prefer to use the modern frameworks to do the rendering however d3 is still really really really valuable if you want to render visualizations like visual components on a web page for example in svg but also on canvas today we are going to build a small chart application and line chart in exception purple of course and well we use d3 to generate the lines and we use the newest of you to create the web app and as the nice source on our application we export it as a web component because that's also really exciting yeah yeah it's nice to see so actually this uh we did this before but then with view three a few two uh has been a while back um and actually it's it's nice to see that d3 also has has grown in the last few years so uh what we're going to show is we're going to build the application fully in typescript and d3 is uh is luckily fully typed and actually that's something that that i can advise to to to use in any project so type typescript gives you a lot of type safety and it doesn't really get in the way so yeah we'll show you how to to integrate d3 with types in your your view application but let's get back uh to the view application itself um because uh yeah view three well maybe you know it maybe you don't it's a pretty large library or framework uh to build uh or to build a single page apps or progressive web apps or any kind of uh of client apps um uh and and of course yeah it the the goal of a few is to to give developers a uh a pretty easy way of building uh of building an application um and uh yeah few uh well it surpassed the amount of stars of react uh for uh for a while now but yeah maybe that's not the the best metric that you can use to compare it with reactor react also has a very large community but i think that view has pretty much the same community or the same friendly community as react has yeah in general i think we could say that reacts angular and view are the three biggest players at the moment they have their own kind of ecosystem their own trade-offs uh however all three of them are really valuable in certain contexts most people say of you that's what angler should have been because it's really based on angularjs the simplicity and not a lot of boilerplate angular is kind of going in the direction of enterprise a lot of boilerplate a lot of tooling and react is more like yeah the lean small simple version with the super big community and yeah to us it feels like view is really sort of the sweet spot between angular and and react however i would never say that few is like oh you always have to pick view because it has all the benefits of the other two frameworks now there's there's a space for all three of them and yeah but we'd like for you a lot and you will see it of course in the application we are going to build yeah so let's kick off uh yeah we prepared a project of course but let me first show you how you how you can simply start the view project so actually a few comes in a variety of choices so you can start a view project by simply adding a couple of imports on your on your html page and then you can kick off with with view in the browser but of course then you don't have the benefit of typescript and and mainly of the single file component format so um i think that the the logical next step is to use a project setup and the project setup is for people who are coming from react or maybe or also angular yeah it's just a node project uh with some pakistation that defines the dependencies and it's pretty easy to kick to to to start a project you simply have the view view command line tool that you can install and with the view command line tool you get all kinds of options uh of course you can add extra functionality to this to this tool as well but let me just kick off one uh one uh one project and then we can see what what the tool can do interesting to know that compared to react for example it has also create react app the most familiar for most people however create reactive is a separate project from create from reacts uh it's not maintained by the the core developers react while view is also really driven by community however the fuse cli if i'm correct is really a part of the core of you yeah and uh yeah of course you have to install it separately globally if i'm correct yeah yeah yeah so yeah indeed it's uh most logical to install it globally uh it comes sometimes comes with some updates but it's a one command uh actually i can yeah the cli really like the terminal command but behind it is the view servers and that drives all the yeah all the logic right behind it yeah you can if you have node installed so go to if you don't have it installed your machine go to nodejs.org you can install node and then you can run npm install minus g for global add view cli so the add view is actually a name space for node packages and the cli lives under that node space namespace so if i run it then yeah not that much will happen because i already installed it but this is also the way of upgrading your your view cli so if there's a newer version out there then it will now try to install it if you're using yarn uh that's of course also uh that's that's also fine and probably even faster and uh well yeah i have some other local dependencies so it's actually checking all my dependencies for for vulnerabilities but yeah so the cli is vulnerability free but yeah so now if i run the view cli which i simply can do with view then you can see that we have the latest version so i think that minus v o minus v capital v 4.5 to 13 that's i think the latest so actually the cli uh is not in uh in sync the version number of the cli is not in sync with view itself so this is the cli version 4 and that supports view version 3. so that might be a an interesting one to note immediately but yeah um so if i want to create a project and uh we can create a boiler uh we can start with uh with uh creating a boilerplate project and uh yeah so i already tried that of course or should show that i've shown it but yeah so we can start off and you can use one of the presets so it comes with a couple of presets or create one yourself okay for yourself yeah so of course we want to create ourselves because we want to have typescript so by default the view project is not set up with typescript but actually you can add typescript later so all these things if you don't want them right now or you want to know how it looks when you don't use them you can add these later i'll show that in a minute so uh yeah i'll skip the the unit and end-to-end testing for now yeah we don't create books right so we don't create books now but that's a whole subject of its own right but we do want to create we do want to use the linter and formatter and if people like to write their css with sauce or less then you can also add a preprocessor if you want to have the official between quotes official state management tool you can use vux however vex is now in so the current version is now in compatibility mode with view three and a new version is coming up uh for uh that actually uses the uh the new uh composition api that that view is offering so i'm going to skip this because in a couple of months you can actually install the latest versions and then this will this talk will be entirely outdated so press enter and you can even start with 2.x 2.2.2.x of course doesn't come with all the new features but yeah it's fine to um if if you are in a conservative environment and you want to uh install a a a a major version uh holder but yeah with two dot x you will get a lot of features so you're you're you won't get a lot of uh new of the new features one thing is that we're going to show you something with the composition api and the composition api is actually backported as a library as an add-on for 2.x projects so you can actually use the composition api um sort of use it in your in your 2.x project but of course we're now going to use the 3.x style uh see a 3dx library so one thing that actually has changed this uh previously uh um it was kind of uh uh it was kind of uh the the standard way of creating a few components was by using the class style component syntax and actually uh that has been a while for react component as well however with the new composition api as you will see uh the uh uh the the component syntaxes has has been changed it's much more functional right now so uh you can actually uh they actually prefer you not to write class classes anymore yeah i remember that it was a proposal for few tree and then it was declined yeah and while i was at it i felt that yeah it's nice but then your typescript is totally messed up when you use the yeah yeah class-based syntax using some library helpers of course because it was not official but i'm happy that they are really only functional way because everyone understands function and class is really in javascript sometimes a pitfall and yeah fictional is really easy yeah so for for people who are coming from uh from angular it's often a bit weird maybe a bit weird to not write classes for your components some people think that underwater view there's all kinds of weird things and it's not instantiating objects and so vue is not object oriented or whatever but actually it's uh it's fine so a few uses a component a component syntax where you describe how your component looks like and underwater it actually uses that component syntax to create actual uh objects uh but they yeah they are simpler uh so this is the the content the the the story of you is constantly focusing on simplicity for the developers so keep your uh ways of defining a component as simple as possible and maybe if you have some extra time i can show you some of the future steps where the the we we you can actually write components with even less boilerplate so yeah some other questions so babel i won't go into that i'll just choose eslint and then you can well you as you can see you can configure almost every everything so you want to make sure to link your files when you save them and we want to have dedicated config files but this is also something that you can choose so some people like it more to have all their configuration in one package json but yeah i would say that the package.json is is a little bit too much and then you can even save this uh this preset for future projects so i could save it as a few three with typescript and one thing about the linters if i'm correct view cli decides to have prettier as part of these lint files right yeah yeah so the the setup uh out of the box they they have a sort of a zero config uh setup where they combine eslint and printer and the only thing that you need to do is uh for instance if you have an ide that you want to use to check your eslint you just install the eslint and the printer printer plugin in for instance in uh in in vs code and everything works yeah and it means that if you run eslint uh there's fix it will also format all your files for you yeah um so yeah i created the project so that didn't really take long and yeah as you can read as you can read it actually created a project i can show it that it contains some files i'll just show you browse through it let me close this one this is not really interesting so our d3 example uh well this is a normal uh uh a normal setup so everything evolves around the package.json i'll just collapse the terminal a bit and yeah so we uh i'll do this the because jason says something about the d3 example thank you martin this is the name that we gave the project it's still a private project so we have to change that if we want to publish it we have some scripts so we want so we can actually serve and build a linter project with with an npm script and we have some dependencies here it's always good to see one thing that has been split off since since view three is that you now have to specify gorgeous separately so you can actually update core gs uh next to uh to the view version that you use so corgis is used to transpile uh javascript functionality that is not yet ready in in all the browsers and you want to support all the browsers then you can actually spec transpile your javascript or your typescript just before you bundle it and this is a great option for uh supporting quite a lot of browsers one thing that fu3 doesn't support is internet explorer 11 11 and 8 and lower and lower and this is so sorry all girlfriend ends it's not going to happen few no no no only chrome firefox right new stuff yeah yeah the uh all the modern browsers uh are are supported and this mainly has to do with the switch from uh from reactivity system so fuel comes view three comes with a new reactivity system it's based on proxies right and that's based on proxies and proxies need to be implemented natively uh and there's no real alternative for it in older browsers but what happens when you run the npm script called serv it's serving a local dev server but underneath of course it's using webpack right or is it already on vitae no it's still uh running on webpack yeah so uh fight or vt yeah yeah yeah i think it's i think it's pronounced feet okay uh but maybe avenue now is uh tweeting in my timeline damn it it's feet uh well well that's uh let's say it's it's a bit experimental so webpack is of course the the way to go it's uh webpack uh uh the the view cli uh will make sure that the entire project is set up using uh using webpack and you can actually hook into into webpack uh and because webpack is such a mature product you can do almost anything and you have uh hundreds of plugins for webpack to choose from to yeah in my opinion that's really the power of view it's simple it's out of the box battery is included and my frustration mainly with create react app is that it's really hard to customize it of course there are forks of create reactive that still allow you to customize the weapon configuration but i think the view is yeah it's again it's a sweet spot right it's it's working it's simple and if you want to change like basic things just put it in the config file as if it's the weber config or you can go really all doing webpack that's also okay yeah yeah indeed uh yeah i'm pretty happy with this we'll we'll show how to configure uh webpack without touching any webpack uh files uh in a minute yeah so just skimming over the files oh now let's not skim over all these files so everybody could do this at home yeah it is anybody doing together with us or it's always the only one coding at the moment please put in the chat if you are also live coding because then we know if we can speed up a little bit ah i'm not seeing any responses yet for everyone who wants to review all the code it's on github we probably will show you the link afterwards and then you can play play together okay please speed up somebody's saying please speed up okay okay uh yeah so this is what you get out of the box so this is a fully configured project and uh well it's uh it's it's running yeah i'll i'll stop this one and use one of these i'll stop using this project so we just created the the project i'm going to switch to uh to the project that we actually prepared and this is actually this at the same point so i can also run uh wait uh npm room i can just run it to serve it wait for it a couple of persons so what are we going to do this is like the the initial app of course we are removing everything and we first i think have to create the new components that's bootstrapped on the root level like the demo components yeah yeah so yeah how does an ordinary this is so how does an ordinary component look like well we start with app components this is the single file format that that you are probably familiar with so you write your template scripts and uh and styles in together in one file and you can uh of course when the as the the dev surf is loading then you can actually modify this a bit so i can now change this and say hello end to end live save it and you'll see that my browser immediately changes and i did not even have to reload um and this is of course functionality that everybody expects nowadays from um from from from from any web development setup but actually i saw that angular only recently added hot reloading to angular so that's actually a puzzle piece that was missing there and this is actually the the component syntax that that has been renewed so instead of using a view.create you now say you now import the define component from view and you can actually you have to export the define component uh the the component syntax from it and this is still similar to what you previously did so there hasn't been that much change since view two and a few three but one thing that did change was that we now can add a setup function this is new i'll show that in a minute and we also have some other uh more uh yeah library uh or esoteric functionality so so for instance you have emits that you can use to actually specify the the contract between what you are pushing up to the parent component as an event for your regular apps it will be set up and that's the full body of your component right it's similar to the react render function or yeah let's say nowadays the react function itself however you are not returning the rendered template but you are returning everything you want to expose in the template at the top yeah but actually this this template is uh with with some pre-processing step is actually being recompiled uh to uh to to javascript of course to make sure that it can be uh re-rendered as fast as possible so this is not really that far away from using gsx in in react so actually with the setup function you can also return a function that uses the uses the render function for view called called h just as the render function from react and makes it possible to uh very functionally describe what you want to render so in some situations this is very handy but i think that uh yeah for normal day-to-day usage the split between the template and the script and the style is is pretty okay well it's like the two tastes right in react it's it's really uh functional and you are returning imperatively what you want to render yeah that's similar to the react render function and the template syntax we have now is declarative and it's similar to what angular does yeah so you have the two tastes and it depends on your situation which of the two is yeah the the best way to go forward yeah yeah i like it yeah well i'll switch back to my terminal yeah what would be the next step i think that uh i can jump to my next commit well of course we prepared some commits oh i need to reset first sorry for that okay so um we are something changed in your browser well actually uh we uh i jumped one commit uh ahead and uh in in the next commit we added uh we removed of course all that uh nice and then the boilerplate from our former index file or from our app component and now we are actually rendering a demo and our demo well let's enlarge this a bit so how does this look in the i think you can actually do this yeah okay and yeah so how does our area chart demo look like so actually let's go again from the beginning so we are importing in our script we are actually defining that it is in touchscript and we are importing the area chart demo here from our view component so you can simply import a few components and because of the setup that fuse the the view cli has delivered you can you have a special view loader inside of your webpack that understands how to import a view file just as you can have other imports like a css import or whatever and we still can specify um if a component is locally using a a component like in this case the area chart demo but you can also set or or use some other mechanism to globally define your uh available components so let's say that you have some kind of a style guide and you don't want to every time import some button button then you can simply define uh to to load the those buttons at once and you can use them freely in your template yeah for example when you would want a material design team you you would use futify which is the the major implementation of it then it makes no sense if you have a big component with all kinds of buttons and and text fields and whatever to include all the components locally in your component here and you really want to uh yeah register globally all those yeah common components and then they are just working in your template yeah yeah so i can remember from another project that that we had that we did previously did that that was that we had a file that imported almost uh the the uh i think what was it 100 components to be globally to be globally available yeah but that's your style guide right that's your living style guide and you can do anything anything with it um yeah um so let's go to the areas of our demo what what does this render we have a template that actually renders an area chart and it sends in some chart data so for for this is a special syntax for for in the template so we have some data and this data is actually coming from our define is actually actually created when this when this component is instantiated and this data is coming from our setup function which i will go over shortly but in this case this data is does not mean the string data but it means to the evaluation evaluation result of our data and you can see here if i hover over it that our data is actually a number array and this is fully typed and i'm very happy with this that this is possible nowadays and in our setup we actually uh create a ref um so let's maybe let's talk about setup so how um how would you do this previously previously you had a data attribute that you could use and with data you had some kind of a let's say a sort of opinionated way of defining data and this data was inspected whenever the component was created and then it fired some for some default behavior but this can all be replaced by by the setup function and you always would return a new instance of the data right else you would have the reference that will be reused and you had a lot of issues yeah yeah so there were some trick to trickery parts to to this uh to the to the life cycle of the component so you had the data you had watches you had computers and these were all very implicit so you had to read the docs to actually understand what this meant and of course you don't have only data but you had methods you had mounted all kinds of hooks as well that's similar to react the composition api is really a mirror of hooks in react why would uh yeah group all functionalities based on the functionality you could easily extract it into a util youtube file for example or servers or whatever and and with the old way it was really grouped by mounted hook yeah and everything relates to yeah multiple functionalities it was in mounted together and it's not a good way of grouping your code of course yeah and of course the the if you wanted to split uh that behavior uh uh by the concern that it represented then you needed to do tricks like use mixins yeah uh or or yeah do do some tricks with uh with how your classes were were created and that of course was not really nice um and uh uh they they the the the view team also thought about it and they also had a great look at the react of course react was then playing around with react to react hooks and they thought okay let's use the concepts of react hooks but mix this together with our new reactivity system and they so for this they created the composition api and the composition api is a very powerful api that you can use to specify behavior and group that behavior by by by its concern so one of the things that you often do is you create some state you and then you create some some transformations on that state for instance you want to have some some computed getter that calculates a new value based on the current state and you have some update functionality and you have some life cycle hooks that you want to mix together with the with the state and now you can all do that inside of the setup function and because this is just code we can also place a line like this we can place this in a separate function and so it's fine to create a function at the top level called create data and which returns uh which returns this and i can just call it and well it's simple as that right it's an array with five numbers but it's wrapped in ref and rev means i'm going to make this reactive for you so you don't have to care about all the automatic rendering and updates no a few knows about this and recognize where you are using reactive parts of your code yeah so this is also a difference between uh react and uh and view with react uh the uh the hooks they fire so in a functional component the render or the the hook function fires multiple times in view setup only fires once and that's when the function when the component has been created so you set up everything using these reactive data and add all kinds of reactive watchers listeners on top of it but after the setup function has run it's done so every time a new component is created again the setup function is only run once it's actually a very powerful way of thinking about how you would create your state inside of your component yeah it feels more like implicit right because you are sort of using composition you are combining reactive parts of your application to create new business logic effects yeah another uh a great advantage of this way is um that typescript support is uh is is yeah uh works works like a charm so of course they really took a long look at uh uh at how react does it but but also at how in typescript the functionality of typescript has been extended to support all kinds of react specific scenarios and they've again taken this to uh also use this on on for developers who are using it in a view project so in this case a data you can see here that it's typed as a ref as a reference to a number array so we can't make an error here so if i would accidentally try to call data it will say that data is not a function and it has no call signature so you get all kinds of extra functionality that is directly available inside of your ide and of course you yeah it also teaches you that in this case if we want to get to the actual data that a ref contains a value property so our data is an object and our data if we want to get to the value then we get actually the you can see here at the end that that we that the value part returns the actual number away so if we want to read the numeral array that is put inside of our ref then we have to use data.value yeah and this is not really a view thing right it's it's a part of the js javascript api behind it the proxy yeah if you have yeah not entirely yeah so this is a choice by few but but indeed to do it that way but the ideas of course else you would overwrite it and then you lost your reference yeah it's in fact the same problem that you would have in angularjs when you're passing props and then inside that component you are modifying the props then the reference is gone yeah so you would always wrap them in objects to do not lose the reference the value inside the object exactly yeah so and now to see the parts together so we have our defined component and the setup function can return one or more it can can return an object with with for instance refs or it can actually return a piece of state it doesn't really matter but that it looks at what you what you return here and it will make all the uh reactive and reference data directly available one thing that it luckily does is that it unwraps the data for you inside of the template so in this case we don't have to write data.value because actually data is already unwrapped and that's again what you see here that's a let's say a mistake easy easy mistake to make but but again typescript helps you a lot here so yeah how does our ariat chart loop then look like well you just saw it here in the browser we are not rendering any not not yet rendering anything here but we just want to make sure that we're uh grabbing the the correct pieces of uh of data and that we're using the right calculations so again if we look at this component we start importing things from from d3 so for people who have worked with d3 d3 is a really large library with all kinds of really broad a really broad spectrum of functionality and one thing that it does really good of course is help people to draw elements on the screen but you also have a set of utilities that can help you to process arrays or skills or determined skills etc yeah we can debate about for example max okay for calculating the maximum value of values in an array well this one i would i think remove and just use the structuring and or array dots apply for example yeah but okay this is a detail but scale is really a convenient way to do linear interpolation right you put a value in and it comes a value out based on the domain and a range you will use it a lot when you are creating charts because you have to map an x value or a y value onto an position on your screen right so if you have value from 1 to 10 that's your domain and your chart is 200 pixels wide yeah then it should map on a pixel from 0 to 200 right and and yeah when you create a skill d3 is really about functions you are using an api that that yeah you're importing a function generator most of the utils are like that you can use methods on them to configure the function generator and when you call it uh yeah then you call the function yeah yeah so skill linear is for instance a function and you can read it here and fees code help help functionality long story short is that it creates a skill linear which is actually a function and we're going to use this function to will render render some output so we actually have to call skill x sorry we have to call skill linear we have to provide it with a domain and range to influence the the the inputs and the outputs of the of the linear scalar and then we get that back a function that we can reuse all the time to pass in information the information in and then see the end result and what we're going to do here is we're going to mix this with view so we have this skill linear oh this can of course be a bit shorter so i'm sorry for yeah nowadays with the later version of skill linear you can even uh pass the domain and the range as parameters to the skill linear however this is a bit more explicit yeah i i like uh but if you know the api you would do shorthand but for this uh topic it's better to do a little bit more explicit right yeah yeah i like i like the the chaining of different uh the chaining of this api so i yeah i don't really mind so we know the char data is five values right so the domain would be an array from zero uh to five so zero is the lowest value five is that you have the highest value and this is index yeah yeah the x is the index yeah and the range is yeah how are we going to map it pixels so margin is i think a constant at the top it's just it's 25 so we start from the 25th pixel from the left until yeah the width of our uh our svg element yeah minus 25 again so we specify that we want to have an width of 300 pixels this is a bit implicit of course but we decided to use this then we can actually mutate it later yeah and we do the same for the skill y but this is of course a little bit different because now we don't have the uh the length of the char data but now we actually have to look at the numbers inside of our chart data array so we are in fact looking up the largest value in the array from zero to that largest value domain yeah so here you can see that mux is a helper function that you can use but of course you can also write modeled max and then these structures structure or not apply this structure data that's not really a big problem and again with the range we are processing the width and the height a bit and again we're returning skill x and skill y so i also am using computed here because well there is a part that is reactive and that's our char data so our char data is could be mutated so our char data is of course the number array that we get passed in but this is inside of the the proxy so our props are actually a a proxy object it's a little bit hard to read through all the helper typescript but uh the the props are reactive so if our chart data changes then we want to reapply or reapply recalculate the linear scaling so by putting it inside of this computed callback a few understands that we are reading the chart data which is reactive and it will again call this function whenever the chart data changes so if our chart data length changes or if any of the values change then it will uh again uh run the the skill x and skill y yeah it's really nice because it's super clean compared to for example use effect and react you always have to pass as a second argument oh what are we depending on what needs to be changed before we can re-render or we recalculate and view notes from what's being used inside what when to recalculate and it's really clean and really nice because you don't have to care yeah and react wants it they are jealous and of course yeah we land a little bit from left to right yeah yeah so actually there's not that much magic to it although the reactivity system is uh quite magic for for most people but uh the the thing is that you have to know is that computed will always call this function once while setting a flag keep track of all the dependencies that you see that that are being used so it calls this function and then after this function is done it knows that tar data was read and then it turns off that flag and then it marks okay this computed function is now bound to this uh reactivity dependency this reminds me of angularjs yeah that's exactly how the scope died this cycle worked i guess so i guess so yeah but then they didn't have proxies so no no proxies is right the engine behind it is natively implemented in browser yeah so we're doing that for both the skill access skill y and then uh by returning uh x and skill y which are then computed graphs that contain the skill linear which is actually a function that takes a number array that's a bit hard to read but that takes a number and then returns a number so skill x now if we now ask what is uh what would be our our uh skill if we put in the number zero and for x and y we want to do this and you'll see that uh for for 0 it's 25 which has to do with the margin that we set and with skill why it's 275 and that also again has to do with the margin that we set so it's actually the skill y is is flipped so uh we want to uh that's logical right because if you draw the chart the zero the y zero is at the bottom yeah your your uh x-axis is at the bottom of the screen however that coordinate system of your browser works upside down the zero code in it is at the top of your top left so that's why we deliberately define the scale in an inverted way and we don't have to think about it anymore because you just put in the value and the right pixel value comes out and of course that is what we're going to use when we are drawing the chart this is just showing how the function works but we want to see a nice chart right i guess so so we're going to flip through the next commit let me close this one don't save it so we changed some stuff so we'll just give a sneak peek of what we're building so now we want to use this skill x and skill y to take the data that we put in our area chart and actually produce a couple of paths and we're going to build an area chart as you can see and luckily d3 comes with some area chart functionality it comes with an area and a line so we're going to use the line to draw the darker line on top of our shape and the area to draw the area underneath yeah well it's kind of primitive right the area and the line yeah generator from d3 shape are just generating the the turtle part that you can pass into an svg path element so these are like straight lines that yeah maybe you could can even calculate them manually it's it's some work but you can do it however if you have really complex lines like bj curves or whatever yeah d3 does all of it for you uh yeah so if i would be able to hide this escape no this is not the uh trying to maybe uh downsize the font a bit okay but yeah it's uh so there's a number yeah the long number you see that the the d attribute that's what d3 is generating for you uh the path itself that's just what we do with view you see it in the template of a few components we are just plain rendering in view svgs is just supported same as html however the area path and the line path are yet generated or calculated for us by the area and the line functions that we have configured in d3 and those make use of our skills of course yes yeah again it's no problem to actually draw the svg elements that's fully supported of course by by view but yeah there are some intricate intricacies so for instance here you can see that uh yeah if you hover the path then it actually comes with a couple of properties that that are also known by the way so i had this d uh must exist on uh on my uh uh must be correct so it states that it expects a string or something undefined and our area path itself is is a string so that actually is going to work but if we would made it make a typo and then we would put in e or something then yeah this wouldn't work but also you don't see yeah or put in an example yeah yeah if we put in one then it starts to complain because these types are not compatible yeah so that's that that's already a very helpful uh in your template and that's actually something that i admire from the angular team so the angular team with the angular the the from from angular 2 and higher they they really invested in making sure that everything is type safe and that that's something that that was missing a long time but thanks to view three with its typescript capabilities that that's also not a problem anymore so let's see how we create this area path and this area path needs a generator and for this generator again is a computed property because this generator is actually a high order function that takes the uh the the inputs that we skill and then returns an area path generator and we then call that area path generator to to actually produce the area path yeah this is really the d3 api in fact that we are looking at right the area generator is imported and there you configure it okay what is the function that needs to be called with every data point to calculate the x code in it yeah and the same for the the y uh zero and y one because it's an area and for the line it's similar right you you need a line that that goes from a chord and to the next code into the next coordinates and this you pass in functions that will be called for every element in your yeah the data yeah and in this case it will be called five times because we have uh an array with five numbers in it yeah so here you can see that uh that we provided again with the nice chaining api with the the x uh an x function that actually uses the scale x to scale our value and y zero and y one to actually uh choose the uh the the zero uh point and the the path the point above it uh in in the area so it again this area path generator then takes an array of numbers which get passed in here and then we use that number uh well we use the index to scale the x and we use the number which is the d yeah to scale skilled its actual value and we just used the value zero for the bottom yeah at the bottom because the area starts at the bottom at the axis yeah and again you can see here that we added a small type hint and this is uh something that the d3 comes with with types with a lot of types i didn't show that we already added some some dependencies here um but if you want to use d3 with types then you also have to add the uh the types libraries uh as a death dependency but that's yeah pretty logical this is how it uh how it how it works yeah if you don't have them it will immediately complain yeah when you import something from the three arrays like okay i have no idea what you are importing here yeah yeah and also the the type inference is pretty strong but if i would remove this then it starts to complain about the fact that um it expected our value to be two numbers and not one number because the default format of of all everything is actually an array of arrays yeah if you would not configure this area uh generator the defaults expect you to pass an array of tuples with the two values so and it's it's a nice default but we are more in this uh particular chart that our x value is not that interesting we use the index yeah you just want to use the index yeah it's a little bit more simple but in practice you would configure however you like yeah so our area path again is a computed shaft so uh repeating ourselves a bit but we use computers a lot so actually computed is your day-to-day thing that you use in view to actually make a chain of reactivity um and this is actually great because uh it's almost high scale right it's so functional yeah yeah maybe the only thing that you yeah there's just one small thing here that i you wanted types to be correct so if our uh area path generator uh the value can actually return a null for some reason if the rendering context of the error generator is null yeah so we have to make sure with that it always returns a string so it it it needs to return an empty string if it can't generate a can't generate a path or if there's some reason it can't generate a path yeah for example if you uh the calculation of your scale results maybe not a number stuff like that yeah or you have gaps in your data and and you are not configuring your generator how to handle gaps what should we do show a gap or or crash or whatever yeah then i think in those cases you have to know value yeah so we can use the the knowledge coalescing operator so if the previous result the left-hand side result is knowledge so if it's undefined or null then it actually chooses the right-hand side which is actually a great addition to to javascript or to typescript now we return it again so we can use it and we just plot it using the d which is an svg specific functionality the interesting thing is that some people are really liking inline styles for example right because it's really explicit you do it in the template so in this case you could call the generator inside this template with your data and expose the data but now you have sort of pre-calculated this using computed and that is being returned and oh you plane you put it in the template can you name some of the advantages of this approach well yeah so the template is not again not really magical this just just defines how our component looks like when we render it but every time we render it we want to make sure that we're not doing too much operations so let's say that we would plot this area in multiple paths so if we plot this area path multiple times and we would need to call a certain function to grab results then you might want to use and then then it's an obvious choice to use computers because computers only calc recalculated recalculates it and keeps the track keeps track of it until it changes so computed is uh is really a powerful way to cache cache actually your operations yeah but also the template itself so because there's another thing this this template is not being re-rendered unless uh one of these reactive property reactive properties change so the fact that we return a set of reactive properties these are computed reactive properties but but as long as these do not change then our component is not re-rendered and that's also fair and if one of those changes only that one will be recalculated however if everything is in your template everything will be recalculated because the template doesn't know about what has been changed it only knows oh i have to re-render so let's call everything inside this template yeah but of course still in view it relies on on the virtual dom so uh in the case of rendering lists of data then it definitely makes sure to indicate it smart yeah not only not update every element inside of that list but just update the uh element with this with the same uh with a new key that this yeah you always have to provide the key right it's it's haunting us all the time in react if you in angular you have to provide a key so that yeah but the renderer keeps track of it yeah it's all for performance performance benefits yeah in the meantime i wonder is everyone happy about this code is it something we should do differently if you have some experience with you or do you like it what are your thoughts about it do you still have questions maybe uh please use the chat for it uh we're keeping an eye on it and if there's something interesting we should dive into or maybe more advanced topics yeah please yeah please say it in the chat so that we have more guidance on how to fill in this talk okay we're going to step and we're going to build or we already build it but we're going to add functionality to show the axis in our chart and that's really nice because well we have axes with the numbers on it and it looks clean and sharp and that's interesting because these are just the default x's from d3xs library yeah we deliberately choose not to render them themselves in view right this is really a sort of isolated part of d3 rendering inside view which is perfectly possible to to use dt rendering so d3 really touches the dom here we provide the g element which is a group element in in svg but yeah the inner context contents of the g element are really rendered by d3 in this case because yeah the defaults are nice and convenient and d3 takes care of showing all the tick marks in the space between them and stuff like that so that's uh what we chose for uh but you are free to render a really custom access if you want in a view yeah yeah so also this this uh points out uh that few mixes together on all kinds of levels with with third-party libraries so if you have a library that internally uses jquery to manipulate some part of the dom fine you can just don't think about it or close your eyes and use it but what does few do to make sure that it's not sort of overwriting your manually dom changes yeah well by the other library how is it protected this part of the template yeah so not not that much so actually it assumes that if if you provide it with for instance a dom node this g was rendered by view and the only thing that expects that this g is not removed from the dom but the rest everything that is inside of this g will be left alone by view you can append anything to it and actually a few also makes it possible to for instance if you would uh render a v4 uh render a list uh of elements uh it will reorder uh the notes and it will actually reorder then we'll then reorder the notes that were attached to it as well so in this case you you need to make same decisions where's my boundary between the view template part and and the yeah sort of parts that will be rendered by other libraries yeah yeah create wrappers like g or diff or whatever and then the other like we could take over from there okay time flies so uh we're already uh now we're in so let's just show how the how we can use the uh the ref to actually get a reference to the template and so we actually specify a ref here in our template and ref is actually a key reserved keyword for for usage in templates so it expects a ref object to be created inside of our setup function and then that is actually filled with the actual g element svg element when the component was mounted and so now we can also show off a part of the life cycle setup in our inner setup function because previously you had all kinds of outer mounted things and before mount but now in setup you can just again call a function that takes a callback and this callback is called whenever the component is mounted and before you move into these details we see a mounted is sort of new but i think it's clear when to use watch effect is new but it feels like similar to computer because it yeah it's like a callback and it does a recalculation and there's also a question by karen kimberg it's like what's the difference between computers and react's use effect so watch effect use effect computed all of them changed based on dependencies in view the dependencies are implicit but are there really differences between react's use effect and views uh computed and how does wedge effect relate to that yeah so uh the different the main difference between watch effect and compute it is that computed returns a value and watch effect only re reruns whenever one of the internal uh so that is creating a new ref based on something and watch effect is just side effects based on something yeah that's why it's also called effect right it reruns whenever one of the reactive values that you touched inside of this function has changed yeah it's like the wrapped isolated d3 code what we are calling here yeah but yeah the important part is of course that we want to make sure that if our skill acts again changes we have uh the the skill xref here and we are reading the value from it then we want to call this function again uh to actually update the uh the the skill uh when our when when that skill x changes yeah so few really tracks the dependency still in this piece of code yeah uh because there of course is a d3 code in here but there is a small piece of view yeah that you are using yeah that's why we wrap it in wash effect and what's the difference with use effect from react or is it exactly the same um well i think that use effect also takes in some parameters for for optimization purposes yeah you have to define the season here they are all implicit however in yeah i would say in use effect you use maybe two dependencies but you are only one to re-render based on one yeah yeah so if you want to be very explicit about what you're watching but because you could of course have some function that reads out some values that are important to render but are not which are not which should not lead to a re-render yeah you can actually use watch instead of watch effects so watch effect and watch are similar to use effect from react yeah and watch is the more specific one and which effect is like the all-purpose yeah common scenario yeah so watch actually takes at least two parameters the first one needs to be a ref or an array of refs or an array of functions or a function and that needs to return something and watch also comes with some extra options so in this case if we save this then actually you will see that our it seems that something has broken but this is actually the default behavior of watch because it's a little bit different from watch effect because watch effect watch which effect is greedy or not lazy by default and uh watch itself is lazy so we have to trigger an initial run of our code when we actually mount it yeah so watch is really similar to the angularjs watch if i remember correctly yeah initially you have something on scope it renders and then watch the dots yeah and if something changes oh we need to re-render and here a watch is similar and watch effect immediately renders yeah also skill x now is uh the whole reference to a function which can change this is a pretty simple object but you can also watch larger objects you can for instance use reactive instead of ref and with reactive you are approximating an entire object of reactive properties and then if you want to also have the watch trigger on on deeper ah scenarios so you have for instance also a parameter called deep uh to to actually uh listen to changes that are deeper in practice people always do deep too right they don't want to think about it or is it really performance intensive it could be very performance intensive so if you're loading uh megabytes of of data and you're deeply watching that that will of course yeah or big trees right yeah with large objects you don't want to to watch the the the leaf of the big objects yeah but yeah no yeah so it's all relative right but you have to know that this is in your tool belt right yeah but in this case it's really simple right a flat array with data with numbers not even objects the scales are just simple functions created by d3 yeah so uh so i hope your question is answered by the way and then we yeah we dove a little bit into detail again but i hope this is clear uh yeah so i'm going to update again and now you're already seeing the result so our chart is actually being sort of animated we we did this before and add some animation code but yeah we left it out for now because we mainly want to focus on the few few and the d3 integrations so actually if you want to make an area chart be updated like this then we again can use something from d3 called randomint i found this actually yesterday and this actually takes gives us back a number between the first and the second parameter exclusive so we want numbers between zero and and open until uh 10. it's just mod.random right but uh it saves you uh five characters so that's nice yeah yeah so i think that uh yeah d3 is full of these kinds of gems but actually random is is the least interesting one you also have some random distributions that you can pick from d3 so you can actually uh you use all kinds of probabilistic uh yeah it's similar to scale linear right linear is not that interesting because you can just write the formula yourself and then you have a linear interpolator however the power with d3s it's not only have scaling interpolating between numbers but you can do string or even colors yeah and use multiple of color spaces and then d3 interpolates in that color space yeah that's that's way more complex yeah and then you would yeah you really feel the power of d3 yeah i would say that d3 is a gateway drug yeah it is it's a it when you uh get in uh you you start using a couple of functions at some point you want to entire library oh sorry entire library for uh uh for your uh uh uh for your disposal also there's an interval which also uh abstracts away a couple of uh yeah idiosyncrasies synchronized from from set interval so it actually takes our refresh rate and rents reruns whenever uh we want it to be we want our code our data to be refreshed and isn't this also leveraging the uh request animation frame api yeah so it's not only doing an interval but yeah it should be performed as well right so if your browser is really slow or you're you are your cpu is busy then it takes that into account and does not yeah recalculate numbers all the time but the browser is not ready for it yeah so uh also very interesting to see of course is that the only thing that makes our uh chart uh re-render entirely is by updating a value inside of this data data it's really assigning a value right not compared to react that you have to call the setter no it's just a signing and then the f script does the magic for you we just create a new array and dump the array inside of our data which is actually a proxy so our data is reactive and because we then pass that data via the setup function to our props to our chart data prop in area chart i can open an open area chart sorry this one i mean oh this one i mean delegating delegating and that actually leads to uh to the props on this component and this hasn't changed from view to two but some things have changed by the way so the type is now a bit more improved so previously we had to wringle types in if you too are really the javascript types like the the primitive array string yeah and now you are like yeah it's an array fine but there are some extra typescript magic we want to put on top so that it's more specific yeah so in the docs this is uh more or less explained how you use this so you can actually type a heady array so the array it means that this is the uh the the javascript uh array and now we're typing it as what then actually is inside of that that array you can also still provide a default so you still need to provide a function that returns a default yeah or requires rule because an empty array makes no sense yeah it might even does it crash with an empty array because uh the domain of the of the scales need values i i cannot calculate the max value from an empty array so it would be another number or no yeah something like that i think that it doesn't crash but uh the the charts look way back so yeah of course at least it won't render a nice axis because our x's both of them depend on our data and that yeah to make it a bit more resilient we could set some defaults for example as a fallback but whatever it's more important that we have a simple codebase at the moment to show the power of u and d3 yeah you can also see that default behavior so here eslint is triggering it actually says that this is an error you have to set a a function uh have to have to create a function to provide you with the default value yeah this is really based on the ease lens plug-in for view right because that plug-in provides some extra checks for you yeah within the eastlint engine but also here you can see that we define a width inside of our define component and this seems uh this is a prop but actually typescript isn't is the typescript in the uh in the typescript layer is inferring that we need a width as a prop inside of our template so if i now go to our template and remove with uh you can you will see that our area chart says oh this is not matching the the types of this area chart are not matching matching up so you have again have to read through all the the the the type mumbo jumbo but it's really there that uh we are missing the property with in in in our area charts so that's pretty cool that we now have this and so this means that you have less issues with with writing components yeah so this is a nice interval and yeah i think that this is our our example chart so let's go to the next iteration we want to have uh well we of course want to show some interactivity so here you can see that we can actually set the amount of records that will be generated the next time we change this value so let's change this to 100 then you can see immediately that our chart is changing and we can also change the minimum value so this means that let's say that they do minimum 50 then our chart would only have values between 50 and 100 and we can also reduce this amount to even uh only a couple of one right yeah it's interesting to see so as we set the domain the the first value of the domain is always zero right it's hard coded so you see that the y-axis starts at zero always nevertheless what you mean value so what happens if you do the mean value to minus something well actually i uh or the mean value minus 50 whatever yes or yeah this so yeah of course you can type in uh uh something it probably tries to render outside the uh the grid outside of the coordinate system yeah yeah but that's up to you to make this a little bit more robust um yeah it's just playing javascript and react or d3 always tries to render so the skills are smart enough that if you are going outside the boundaries you can determine oh shoot it should it clamp to the min or the max value or do you allow it to return a value that's outside of that yeah and then your svg is messed up but it's still valid uh yeah vetted markup right so an interesting one part is of course well how does few get these values so how i just changed them and they were magically updating my state so again the answer is a bit of magic or a bit of reactivity so we're using v model which is a very specific uh uh it's syntax sugar right yeah it's it's a technically one attribute including the dot numbers to make it even more specific but it's one attribute that sets like the the the value and the listener yeah but i was looking for the the word directive which actually comes from angularjs is it called directive it was it was called directive so actually uh angular js really leaned on uh on directives a lot so actually all the things that you can write you also have a for loops and ifs and what so even switches but you can also write a fee model directly inside of your template and this v model binds our item count which is actually uh the now inside of our state and oh yeah we actually added some state here so we now introduced uh a state which is an object or an evil this is a this is a type the type of the state which now contains the data but also the item count that should contain and the minimum and the maximum yeah it's just a way to not have to write four separate refs right now we wrap them together in one object and then wrap it using reactive which is similar to ref yeah so here you can see so ref was actually just for wrapping one value and that this also has to do with the fact that the proxies only work on an object level so if you want to wrap a single object as a single value as a simple value like a string then you have to wrap it inside of an object that contains a property to actually watch changes on it yeah this is one object with four keys that is reactive so you don't have uh state.data.current anymore because the data itself yeah the state of the data.value are free to name your own keys that's nice because sometimes value is really generic yeah similar to react dot current yeah it is so generic yeah so now we have uh whether state we can now access it using state of data to set it that's happening here but we also return our state as separate refs so we can and so we could actually also return the entire state object but then we would have to type state.data inside of a template and that's not really nice so you actually want to yeah destructure it but the structuring of a proxy means that the the this is by javascript design that the proxy is gone so actually what you want to do is you want to grab the initial individual properties outside of your reactive object and put them inside of a ref for that there's a helper called two refs and so this makes it possible to actually generate an object with refs instead of reactive one one object with reactivity and then expose those separately for usage in your template just picking all the keys of your reactive object and making four separate refs of them and then your proxy is not lost yeah because that is destructible because it is just a list yeah that's destructible and the cool part is that those refs are still reactive and so if that ref changes then the original state where that value lived in is also updated because this is again pointing to the same memory address in the end yeah this is awesome because if you make a change in the form the native browser listener triggers v-mobile takes care of that that the listeners registered the rev updates and you get re-rendering for free without writing any code yeah exactly noise yeah that's really cool um yeah the the the declarative approach here is i think what makes it powerful you have not a lot of code but still it's really readable of course you have to understand the view api and you have to know that something is a ref but the syntax highlighting with the typescript really helps you to quickly understand what's happening in in your component and how things relate together and how things are connected uh yeah go to we have 10 minutes left almost maybe even there are even some questions i see i don't know if you i can't read this from here yeah i can read it uh let me see dylan asks does d3 work well when you require a responsive chart and that's a nice thing at the moment we are rendering on svg in svg is by definition using absolute coordinates for everything so you can wrap a g inside the g inside the g for example and then put transforms on them so in that sense it's sort of relative but it does not use things like percentage or like flexbox stuff so that's uh that's really hard but that's not the fault of d3 it's the fault of svg so if you want to create a responsive chart that yeah automatically based on css updates when you change the browser window then you should use a different way of rendering for example render using a plain html elements or whatever but this is not really something with d3 however if you want to make this fg chart responsive the easiest way to do this is setting a listener on your container or your on your window the thing that that listens for the scroll or another scroll for the resize event and based on that you can explicitly trigger a re-render or well you are not explicitly triggered in the rear end of course you are explicitly changing the configuration of your skill because um at the moment the width and the height of our chart is fixed it's at the moment 300 by 300 pixels yeah but if you let it depend on the width of the outer container for example that changes when you're resizing the window yeah then the proper update re-rendering will be triggered and everything goes automatically however yeah one while you are resizing your window it's triggering a lot of updates so it's not really that performant um so if you really want to go responsive like css responsive you really need to pick a different way of rendering uh using the primitives that are available in html yeah so i think that svg uh supports some of your uh sort of but not your path for example yeah yeah but but what i would what i would not do is change our coordinate system so i would say that our chart is being drawn with some coordinate system and that coordinate system doesn't have to reflect the actual pixels on the screen so you can change the coordinate system using the view box attribute on svg for instance yeah it would scale the svg itself it would still scale proportionally based on the size that it is yeah but you don't want your uh access lines being thicker or thinner right so yeah yeah so for that solution yeah you have some choices there but uh yeah another way would be to indeed do something with canvas or but yeah and there's a similar question about about this how mobile friendly is it mobile is also about uh responsive right mobile screens are usually smaller so that part is being answered i hope yeah but on the other side mobile is also about touch right yeah are there any specifics within the tree and view that we have to take in the code when we are developing for mobiles yeah well yeah so uh view is only a slight rapper around all the events that the browser does so all the native events are supported so you can also easily listen to and not only listen to a click event which is more of a desktop event but you can also listen to a touch touch touchdown touch up a pointer move pointer down pointer up event so this really boils down to the web in general and and not too few specific or specific now if you tries to keep keep up properly with all the the the the browser native native concepts also by thinking about mobile one thing that is pretty important of course is that our build size is is fairly low and well i would say that the d3 is not that tree shakeable so the webpack uses when you build your project using webpack then it tries to remove all the code that is not used but of course if you have code that you use that is dependent on some other code that it actually doesn't really use then it's really dependent on how good that library is is made has been made three shakeable to keep the download size uh down so i'll just uh i'll just run the build and see how how dramatic our size right now is yeah so i don't think that it's that good right now hey what about different render engines yeah we have react native is there also something like view native yeah or can we use view for example to render to uh to ios apps native apps really native apps uh yeah so we can use native script i haven't used it but it's but it's possible to use it and that is similar to uh well let's look at the middle size so yeah our bundle now is uh 49 kilobytes that is including uh all the functionality from vue and all the functionality from d3 that we included yeah and our app is automatically uh being tuned off yeah by the view compiler and it's only 2kb yeah that's pretty small but yeah so we have 49 kilobytes which is acceptable i think that react is similar to uh to to that size maybe it's a bit smaller but i think the d3 uh is a big part of yeah might add a lot yeah we can actually use the uh view cli uh to open the ui and this opens a graphical user interface yeah if you don't like cli everything is in the user interface this is i think a community project this is community project yes yeah so if you really like to use your mouse instead of your keyboard the view ui is really something you like to use even to update your dependencies your node modules uh yeah for angular same exists right but view of us first yeah and for some people this is really convenient so you can see here for instance that that our project is configured with the latest versions of the plugins and you can easily add a new plugin or you can install plugins that you where you can search for so you can search for i want for instance just unit testing then you can add view just which is actually in alpha right now for a few three but that's fine if you go back to the command line you could use a view add and then the name of the library write instead of npm install so what's the difference yeah so also view the command line comes with indeed comes with add which takes a plug-in name and then installs it so actually this ui is just a ui for your for your command line but i if i'm correct the view ad really does npm install and on top of it it tries to integrate it in your project if if the library supports post install script like that right yeah that's right it's like npm install but a little bit smarter but in practice most of the time you don't think of using that you are on npm.org or mpmds.org or you're on github and then you're just installing it using npm installed yeah actually this is pretty cool and we also have an analyzer for instance that can show you how large our components are and i can choose the fender chunk for instance not sure if my zoom level is right yeah and here you can see that for instance uh we have some uh d3 selection these uh skills uh taking care of the majority of your bundle but yeah i think that it's uh almost uh half is is few and the rest is uh so only one four one fourth is d3 and uh a quarter is core gs for supporting uh older brows older browsers but yeah so if you don't want to support uh older browsers you can actually throw away almost everything of course yes so that's uh that that's that's fine cool let's move on yeah let's uh we have uh just uh just enough time to show uh a next step so in practice this is the app right so you're done building that of course there are many features we want to do like responsiveness and mobile and everything yeah but that's more like a generic uh software engineering problem and not something really a view or d3 specific you really need the ux person here to improve this yeah so uh as a last step i want to show how you could could create a web component outside of a few components and yeah web components are all let's say the browser's standard way of encapsulating a component and defining its borders and trying to encapsulate everything in it and actually the the view three web component out of the box experience is still uh under development but for now uh i have cooked cooked up something just to think of a practical example when you want to do this i think most people are we if you just create a bundle put it in a scriptdeck and here's my single page app right or yeah or is there a use case like uh create a web component put it on a floppy disk and bring it to someone and here you can use it or well yes in this case what you can do is uh you can build a version of your component and make it available through one of the cdns that are out there or via package.org and then people can simply load a url and by loading that url they have well some components available and here you can see i've created a web component html and we want to be able to use this custom area chart component and this area chart component gets some chart data and it looks eerily similar to the area chart view components yeah and this is not a view app this is like the plain vanilla old-fashioned this is yeah this is just a vanilla using the web component itself for example if i'm in an angular project and i'm completely vendor login but i want to use something from view i can just use the view web component inside my angular project for example or in any javascript or html project yeah so so here you can see that we actually dropped all the d3 uh stuff where just take take the component and we grab an element and this is a custom element in the browser and we're going to update the chart data yeah do we precise this is the area chart exported as web components and not the complete app not the demo component not the app component no the inner component that we've been building the area chart itself yeah so let me start up again a development server because of course if we develop a web component we also want to be able to develop it using hot code reloading and that's actually happening right now and you can see here that if i open up my inspector which is pretty large of course but then we have an area chart one and and another one maybe make this a bit smaller it still is visible right and i can hide this escape no no this is the other one you know i think i'm going to do this um yeah i'm just going to put my [Music] sidebar here yeah yes yeah so i have an area chart and i can actually store this as a global and then you can see that i now have a temp 1 which is actually yeah this is just a component and we have two components so i created two of course so i can also use get element by id to grab my uh chart 2. was it chart2 not sure i remember yeah i thought so oh wait get the element by the i always mix up i'm always mixed up um so and this area chart so this is our custom element and uh we can actually send in information and we can also receive information from it so we can actually read out the the chart data i'm sorry that's not right we can only set it i thought i made the setter but maybe i should i don't think that works uh but we're going to update the chart data a bit uh is uh well one two three ah that does work so maybe yeah so actually i i for for this presentation i uh cooked up a uh a web component wrapper um but this is more or less how you how it should work so i think that i have to look into that setter but the the the sorry the getter but the setter at least works but this is really vanilla javascript in your browser right this is just vanilla javascript so from the outside it doesn't look like a fuel component and that's the great thing so it actually in on the inside it renders the svg and it even it doesn't even do that with shadow dom because shadow dom is uh then then you also have to take care of injecting all the styles and i never came uh came to that but yeah something that you had you you get the basic element api so you can also for instance change the chart data uh from this place and update it i hope that that works no no i didn't let's say if this does work oh this does work but maybe because the char data was overwritten by yeah element does not reflect or maybe does reflect but it's not connected there's no reference anymore yeah but these are really the web component specifics and so the interesting thing for me i see you are drawing two area charts here you are using two instances of this web component is are those connected in some way or are those really separate references so they are two separate instances of of the view area chart and they indeed both have two different views that that are backing them so um it could be that um we could create one area chart or that we could create one component with an older version of you and create another component with a newer version and load both on the same page and that would not be any conflicting uh problem so this is often a problem that you want to fix with legacy apps and with web components you have a great way of doing uh of making sure that this is available but i have to look into this is not entirely working as it as i expected it i didn't test it enough yeah web components are like a new area and then the ecosystem is not that mature and you can use libraries for it there are some libraries that export your view into web components but those are really not mature we found out this week so you created something new we could dive into the code but we could also answer some questions based on what we've seen previous hours so if you uh have any questions or thoughts or opinions yeah please speak up if you want we can open a microphone or we can uh webcam everything's possible and else i think albert can show you a piece of the web component export library yeah not sure if anyone is responding right now but uh not yet i also don't see uh blah blah typing so yeah i don't know no idea but at least there are no short questions because there's nothing yet in the screen yeah there's one a long one so memory wise when it comes to cloud computing how much memory will i need to render charts let's say showing how many customers buy from a store just as an example um well when it comes to cloud computing it's interesting because we are just in the browser here yeah right the the chart is being rendered by in the in our case by svg the main bottleneck would not be uh yeah computations i think the main bottleneck would be how many elements are we rendering in the browser yeah so i have a side project myself i'm rendering millions of elements and then it became a little bit slow and i also included animations and that was the bottleneck of course and my laptop was making a lot of noise so in that case you you generally want to move to canvas comfort is just one element in your on your dome in your browser and had the api of canvas is drawing on the conference and that's of course uh needs some computation but it's just in memory javascript computations but the rendering itself by a browser is really cheap so if you want to render charts that are large or using uh yeah thousands of data points and thousands of yeah svg shapes and just go for canvas and your your performance problems are really gone um the hardest thing in comfort is interactivity right svg is interactive because it's an element you can put click handlers on them hovers and stuff like that yeah i found out that d3 comes to the rescue again there's a data structure called a quad 3 it's just from quad 3 is like like a data structure that's from mathematics or computer science and it can be used to find the closest coordinate based on your screen position for example okay so you can look up data in your list of data points based on the position of your mouse and based on that you know what is the closest bar in your bar chart that you are offering for example and that is really quick because the the algorithm is is a nice algorithm it's uh i think uh ola and something like that so uh interactivity is still no problem with canvas but it's a little bit more like a challenge yeah you have to do everything you're by yourself yeah so you actually have uh uh hit uh hit areas yeah a little bit of hit areas hit areas but uh still the hitter is not perfect so the most questions about charts are about okay but d3 is too low level right we've seen it today d3 and a few in this case for the rendering but to construct the chart it's low level we have to define scales axis colors everything and most people think okay let's go for any chart high chart all of those libraries or maybe open source libraries based on d3 that just wrap d3 yeah and expose a bar chart generic bar chart component line chart all of those but if you want to go custom then you are always screwed with high chart you have like super large configuration objects yeah after a year you have super super large configuration object because the customer always wants to do theming and like custom nice looking charts so i definitely in those cases would not recommend to use high charge or a similar high level library for basic charts it's perfect it's same for google charts etc but if you want to go custom visualization because the chart is a visualization yeah then you would definitely go for a framework like view and then use d3 to generate all the primitives required for rendering those charts yeah yeah so it's really a half product that you can use to to actually build your own products yeah that's that's actually great and d3 is not that hard that's the major drawback for a lot of people but it is not hard the d3 utils are not hard yeah rendering at the indie3 is sort of hard but you can skip that part and use fuel for rendering yeah yeah yeah yeah so uh what i wanted to note is yeah for drawing on a canvas you might want to also choose to have some library on top of canvas so there are some conference libraries out there i've used fabric es and i've used confirm yes and actually conveyors is now being used extensively at my current client and that's actually bringing everything like hit functions and performance optimizations back to the back to compass and then you would i think you still use d3 to generate added primitives and then use that higher level library to draw on the composition yeah exactly drawing itself re-rendering everything but then you yeah you just have to integrate uh drawing shapes using that's comfort libraries yeah it's similar to three as right it's for three three the rendering but still it's it's running on the conference so you don't have to take care of that yourself yeah okay well i think we're over time already um if there are any if there aren't any questions anymore then uh well i can say that i had a great time yeah me too showing off what we built let's make the repo available do we have for the people that are only listening the repo will be at github.com you see the screen slash albert brandt and then it will be view d3 area charts wait out dashes really yeah area chart there it is oh wait what's this my repo yeah it's yours okay and you can fork it play around uh ask questions later it's always possible and yeah yeah here's a repo uh if you are going to take a look in it the version 2 of a few is also in there so it's almost the same but at least it's nice to compare the two folders so that you also can see the differences between how you would implement it in view two and the same application in view three like we did today yeah yeah so everything is in the uh view three uh branch yeah master is only the view to a project and in future tree branch you have this okay well great let me take a look quick look at the chat again no questions anymore only thank you very much so uh yeah thank you for your uh thank you for watching for watching um online or maybe offline at a later stage and we are really happy to do this if you have questions just contact us at xibia and we hope to see you really soon thank you all right bye bye

Channel: Xebia

Views: 955

Keywords: Xebia, IT Consultancy, Agile, Quality & Test Automation, DevOps, Full Stack Development, Continuous Delivery, Big data, Deployment Automation

Id: gZ5J-GlfMZE

Length: 102min 30sec (6150 seconds)

Published: Mon Jun 28 2021