We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Dash: Interactive Data Visualization Web Apps with no Javascript

00:00

Formale Metadaten

Titel
Dash: Interactive Data Visualization Web Apps with no Javascript
Untertitel
What you can, can't, should and probably shouldn't do with plotly/Dash
Serientitel
Anzahl der Teile
118
Autor
Lizenz
CC-Namensnennung - keine kommerzielle Nutzung - Weitergabe unter gleichen Bedingungen 3.0 Unported:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben
Identifikatoren
Herausgeber
Erscheinungsjahr
Sprache

Inhaltliche Metadaten

Fachgebiet
Genre
Abstract
Your data science or machine learning project probably won't just produce a written report. Instead, projects are increasingly expected to produce interactive tools to allow end-users to explore data and results with rich, interactive visualizations. Inevitably, this will be done in a web browser, meaning you'll need to add a quantitatively trained web developer to your team, or have your data scientists spend time learning HTML, Javascript and CSS. Dash, a project by the team that makes Plotly, solves some of these problems by allowing data scientists to build rich and interactive websites in pure python, with minimal knowledge of HTML and absolutely no Javascript. At decisionLab, a London-based data science consultancy producing decision tools, we've embraced Dash to produce proof-of-concept models for our projects in alpha. Although we're not officially connected to the plotly/Dash project, by using the library daily across many projects, we've learned many lessons and what we feel are best practises we'd like to share, and hear feedback on! This talk will give an overview of Dash, how it works and what it can be used for, before outlining some of the common problems that emerge when data scientists are let loose to produce web applications, and web developers have to work with the pydata ecosystem. The talk also covers effective working practises to start producing cool interactive statistical web applications, fast. We'll also identify some of the pitfalls of Dash, and how and when to make the decision to stop using Dash and start building a proper web application.
20
58
VerschlingungFramework <Informatik>VisualisierungBitCoxeter-GruppeWeb-SeiteInteraktives FernsehenWeb-ApplikationRechenschieberLokales MinimumCodeComputervirusComputeranimation
EntscheidungstheorieRückkopplungRechenschieberVerschlingungExpertensystemSoftwareentwicklerKeller <Informatik>VorgehensmodellMathematikEndliche ModelltheorieKollaboration <Informatik>BeweistheorieClientPrototypingKonfiguration <Informatik>Open SourceVersionsverwaltungGebäude <Mathematik>Projektive EbenePlotterQuick-SortSelbst organisierendes SystemCASE <Informatik>EDV-BeratungDifferenteBeweistheorieAggregatzustandWeb-ApplikationVersionsverwaltungEntscheidungstheorieVisualisierungVerschlingungFormale SpracheSoftware EngineeringGebäude <Mathematik>Open SourceApp <Programm>Coxeter-GruppeKomplex <Algebra>MomentenproblemSchreib-Lese-KopfBitHyperbelverfahrenFokalpunktKeller <Informatik>SoftwareentwicklerCodeKonfiguration <Informatik>DivisionBenutzerbeteiligungMathematisches ModellProgrammbibliothekWeb-DesignerSchreiben <Datenverarbeitung>Produkt <Mathematik>DatenbankPunktGüte der AnpassungMultiplikationsoperatorRückkopplungMAPHilfesystemKollaboration <Informatik>E-MailNotebook-ComputerOrdnung <Mathematik>FlächeninhaltSoftwareLokales MinimumRechenschieberAutorisierungWeb SiteSystemaufrufFundamentalsatz der AlgebraIntegralRechter WinkelMinimumMaschinenschreibenShape <Informatik>DatenanalyseGeradeExpertensystemSkriptsprache
Konvexe HülleKomponente <Software>BimodulModul <Datentyp>SpeicherabzugInteraktives FernsehenWeb-SeiteDOM <Programmierumgebung>KnotenmengeSkriptspracheSchnittmengeInnerer PunktBrowserFunktion <Mathematik>VektorrechnungEin-AusgabeBitApp <Programm>Ein-AusgabeZeichenketteZusammenhängender GraphFigurierte ZahlBimodulInteraktives FernsehenBenutzerbeteiligungWeb-DesignerProgrammbibliothekGeradeEinfache GenauigkeitComputerspielQuaderFunktion <Mathematik>PunktSkriptspracheDatensichtgerätRoutingMathematikMultifunktionDeklarative ProgrammierspracheQuick-SortDivisionÜberlagerung <Mathematik>FunktionalMultiplikationsoperatorInterface <Schaltung>ProgrammierungGraphTypentheorieSchlüsselverwaltungWeb-SeiteCodeTopologieObjektmodellAnfangswertproblemComputervirusE-MailKugelkappeEreignishorizontFramework <Informatik>SpeicherabzugHash-AlgorithmusCASE <Informatik>BitrateTUNIS <Programm>Objekt <Kategorie>Computeranimation
BrowserKomponente <Software>CodeServerDivisionCAN-BusFunktion <Mathematik>DatensichtgerätKonfiguration <Informatik>Web-SeiteInteraktives FernsehenDatensichtgerätApp <Programm>BrowserBeweistheorieServerDokumentenserverKonfiguration <Informatik>TabelleGlobale OptimierungSystemaufrufFunktionalCodePunktJensen-MaßMultiplikationsoperatorSoftwareBenutzerbeteiligungProdukt <Mathematik>BitEinsMathematikMAPSchnittmengeE-MailEin-AusgabeZusammenhängender GraphComputeranimation
Mailing-ListeBrowserInteraktives FernsehenComputeranimation
Suite <Programmpaket>Funktion <Mathematik>MultigraphVisualisierungSchnittmengePlotterMultigraphProjektive EbeneParametersystemGraphZusammenhängender GraphCode
Mailing-ListeAggregatzustandElement <Gruppentheorie>SchlüsselverwaltungTransaktionInterface <Schaltung>ZahlenbereichGraphGeradeSchnittmengeWeb-SeiteVisualisierungCodeDokumentenserverTaskBitFunktionalMathematikDifferenteMultiplikationsoperatorAggregatzustandInteraktives FernsehenEin-AusgabeMailing-ListeComputeranimation
SoftwareBenutzeroberflächeDeskriptive StatistikDatenbankMailing-ListeVisualisierungComputeranimation
App <Programm>Inverser LimesKomponente <Software>BenutzeroberflächeVirtuelle MaschineDeforestation <Informatik>Funktion <Mathematik>Faktor <Algebra>ImplementierungCodierungstheorieElektronische PublikationSchnittmengeVerzeichnisdienstMathematische LogikAbstraktionsebeneCodeDatenstrukturSystemaufrufGrenzschichtablösungTemplateDefaultZeichenketteModul <Datentyp>Interface <Schaltung>BitDeforestation <Informatik>Zusammenhängender GraphMailing-ListeApp <Programm>Notebook-ComputerInterface <Schaltung>MultiplikationsoperatorBimodulFaktor <Algebra>GeradeElektronische PublikationResultanteEndliche ModelltheorieSkriptspracheData MiningWeb-SeiteCodeKartesische KoordinatenStandardabweichungVirtuelle MaschineGamecontrollerMomentenproblemWeb-DesignerMathematische LogikTermSystemprogrammSoftwareSchnittmengeQuick-SortMAPReelle ZahlFlächeninhaltRechenwerkProgrammbibliothekDifferenteBrowserOpen SourceEntscheidungstheorieProjektive EbeneInverser LimesKlasse <Mathematik>AusnahmebehandlungEinfache GenauigkeitRoutingFunktionalSoftwareentwicklerDatenbank
Mailing-ListeKonfiguration <Informatik>App <Programm>Framework <Informatik>GrenzschichtablösungHomepageMomentenproblemComputeranimation
InjektivitätDesintegration <Mathematik>Funktion <Mathematik>Faktor <Algebra>Gebäude <Mathematik>PunktFokalpunktAnalysisSoftwareAuthentifikationSoftwaretestKomponente <Software>Interface <Schaltung>CodeSoftwareschwachstelleInjektivitätProjektive EbeneMultiplikationsoperatorWeb-ApplikationAuthentifikationSoftwareentwicklerFlächeninhaltEntscheidungstheorieProdukt <Mathematik>Kartesische KoordinatenApp <Programm>Klasse <Mathematik>Framework <Informatik>EDV-BeratungFächer <Mathematik>Open SourceIntegralVirtuelle MaschineCodePunktProzess <Informatik>ClientTaskFaktor <Algebra>FunktionalSoftware EngineeringInterface <Schaltung>Web-DesignerBitEndliche ModelltheorieDienst <Informatik>Elektronische PublikationEigentliche AbbildungLastSoftwaretestOrtsoperatorKomplex <Algebra>Interaktives FernsehenDatenbankProgrammbibliothekMaschinenschreibenFront-End <Software>BeweistheorieComputeranimation
BenutzerbeteiligungRechter WinkelSoftwareentwicklerFramework <Informatik>MomentenproblemProgrammfehlerInteraktives FernsehenMessage-PassingClientHilfesystemProgrammbibliothekZusammenhängender GraphFront-End <Software>Figurierte ZahlDebuggingMaskierung <Informatik>EreignishorizontComputervirusRichtungServerTranslation <Mathematik>HypermediaVorlesung/Konferenz
Transkript: Englisch(automatisch erzeugt)
Thank you very much. So yes, hello. I'm here to talk about Dash. And so Dash is a framework that allows you to have interactive data visualization web applications with minimal or no JavaScript. And so just before I go on as well,
these slides are actually themselves a web page. And so if you want to follow along or look at these slides either during the talk or a little bit later on, please do take those links down and use them to explore the various bits of code that are in this presentation. An alternative title for this particular talk
is what you can, can't, should, and also probably shouldn't do with Dash from the Plotly project. And so throughout this talk, I'm going to give a brief introduction to Dash and how it works and what you can do with it, discuss what we've learned at Decision Lab from using Dash across our various different projects, and kind of identify all sort of shirts and areas
that we think might be sort of good practice and lessons that we've learned. And I will be kind of looking for feedback on some of the thoughts and the ways that we're using Dash. And so please do ask a question at the end or grab me if you see me at the conference and start talking about Dash because it really is quite a young project and it's something that we're very interested in.
And I'd be very interested in collaborating with people to see how they're using Dash and where they can use Dash in the future. And just putting those links up there again because I'm not sure that I've put them throughout the rest of the presentation. And I should also say as well, if you're really keen, there's a Docker that you can start up in the examples of the Dash GitHub and the links in the slides
will link to the Docker so you can follow the presentation in the comfort of your own home. Okay, final point about the slides as well. If you are viewing them on the web, because I know that this is recorded as well, and every time you see one of those down emojis, just push the down button rather than the right hand side button.
So I should also prefix this saying that I'm not a Dash expert, I'm not an author on the project. And if you are actually from the Plotly Dash project and anything I say is out of date or wildly contentious, please do get in touch, I'm more than happy to correct anything or learn more about Dash.
And so actually that does kind of pose a question, why on earth am I here if I'm not a Dash expert? And more to the point as well, my background is in full stack web development. I'm a Python and JavaScript developer. So why am I using Python to write JavaScript? Well, to answer that question,
as was introduced before, I work for Decision Lab, we're a London based mathematical modeling consultancy. And before I go on as well, I should say, I'm very sorry about the state of my country at the moment and Brexit. Please don't ask me about Brexit, I have no idea what's going on either. But I should also invite you to another very fun Python conference, which is PyCon London,
which is, oh sorry, PyCon UK, which is in Cardiff this year in September. It's great fun, please do come along and don't be put off by everything you read in the news about the UK at the moment. So, why are we using Dash at Decision Lab? Well, one thing that you might have identified at various Python conferences or at your company
or your organization is that there are almost like two cultures of Python. I kind of call this like the Python data and the Python software cultures. And you'll kind of spot it in the developers that you meet or in the meetups that you attend. There are some Python courses which are very much focused on G Python notebooks, Pandas, SciPy,
TensorFlow, that kind of thing. And then there's also a community of software engineers that use Python and hate G Python notebooks. I sometimes fall into that camp. But we'll use tools more like SQLAlchemy and various other kind of database technologies and so on to actually kind of build production software. So collaboration between these two cultures
is very important and it's something that we try and break down as much as possible at Decision Lab. But it can be very time-consuming. And so what we were looking for, especially on a small project, I should say, so if you're building a big production web app, that's certainly something that you're gonna start on a very different approach. But if you've got a small project, a little bit of data analysis, and you want to do some visualization with it,
you don't want to have to get a software engineer to start building all sorts of custom JavaScript integrations between your Python code and your data science project. And it really is quite a challenge. And so we wanted to minimize the new technologies that are maybe fresh PhD graduates or maybe interns even would be able to kind of minimize
the new technologies that they would need to learn in order to be able to get a project off the ground. And it's purely because if I'm building this kind of very basic proof of concept, and I want a data scientist to be able to take the lead in the early stages looking and exploring data, creating visualizations and so on.
If their background isn't in web development, then they might, they're not gonna be naturally placed to create a web application for their data. And also, as a software engineer, I want to be able to facilitate members of my team to really go places and do exciting things with data without getting bogged down thinking about various different JavaScript callbacks
and the latest React library and that kind of thing. And so, just to summarize exactly why this was a problem for us, React has a, I hope you can see this, React has a very difficult reputation at times. It is quite a complex style of development
to get your head into. And you can see here that this is Thomas or Mark almost preparing to put together his Hello World React app. It's a difficult language to learn, especially if your data, if your background is more in a data science focus rather than a software engineer focused background. And so, we found Dash. It's an open source project,
although there are paid options for consultancy with Plotly. And it describes itself still as experimental, although recently, I think that was about three weeks ago, it hit version one. So, it's an established project, but like everything in JavaScript, it changes all the time. You can see the website here, it's kind of very flashy, and they describe themselves as being
lots of beautiful projects with minimal involvement from JavaScript. And that's a good thing sometimes. Not having to use JavaScript is, in and of itself, helpful. It certainly speeds up development for some project teams, but as I'll cover a little bit later on, it's not always desirable to only use Dash.
So, for the rest of the talk, I'll just give a quick introduction to Dash and how it works. Some examples of the really cool things that you can do with Dash. As I said before, some of those sort of tips on larger Dash projects that we've developed at Decision Lab. And also discuss, as I mentioned before, when to stop using Dash and to start hiring JavaScript engineers.
And so, let's start with the Hello World. It's a very kind of simple syntax that hopefully, if you're familiar with Python, you'll get to grips with quite quickly. And literally, you just install Dash via pip, and this is a simple Hello World script. So you can see here, we've got, you know, we're doing our imports.
We create an app on that line. We produce a layout, which in this case is a div tag, which is an HTML tag with a fundamental kind of division in HTML. And the children of that tag are going to be this h1, or header one, and so just a big header that says, hello, you're a Python. And at the bottom, we run our app.
And you just literally call it like that. Now if we, this is the moment of truth as to whether or not all of this works together. But here we can see, yeah, okay. So we've got a Hello World, or hello, you're a Python example app in Dash. I've cheated a little bit. I've put a style sheet on here to give us our logo and so on.
But that's just completely by the by. And so, that's the basic, very basic kind of Hello World of Dash. There are two bits of code there that are quite important that you should have a look at. And so there are two modules or libraries that are being used as Dash and Dash HTML components. So Dash HTML components is a module
which just wraps all the core React components. So every single HTML tag has a corresponding React tag. And now every single React HTML, React component has a corresponding Dash component. And so you can plug and play these together. And then Dash, the actual framework,
manages the relationships between these particular tags, which I'll cover in a minute. And it serves the layout just using a really basic Flask interface. And so you can actually provide your own custom Flask app as well and add all sorts of modules and routes onto there as well. But as I said in the title to this talk,
I want an interactive web page, not just a Hello World that serves some static data with a ton of Python on top of it. And so how do you go about doing that? Now I'm gonna detour very quickly to ask how would you do that in JavaScript? I'm not sure how familiar people in the room are with JavaScript. There might be some very experienced JavaScript engineers and some people who've never touched it in their life.
So I'm gonna give an overview of how this would work. But fundamentally, we'll have two things on our web page. And so you can see on the top line there, we've got this output, you might call it. So this is a paragraph tag that says hello. And I said there for the time being. Our aim is to be able to take the name of our user or the person on our web page and say hello to that person.
So we've got our output at the top there. And in particular, that span tag, which is just another HTML tag, which is where we're going to place our user's name. And then there's this input tag as well, which is gonna take some text input from the user. And that has an ID of hello input. And the place it's gonna go is ID hello name.
Sorry, I fell for my own mistake there and pushed right rather than down. So we can see here that if we look at the tree of those HTML objects, we've got, I should say as well, these are, you'll often hear me referring to the DOM. And this is the document object model. I'm not vain enough to refer to web pages like myself.
I just happen to be a web developer called DOM. And so this is the document object model here. And so there are three nodes here in our DOM. We've got our paragraph node. And then the child of that paragraph node is this span node with that ID, hello name. The hashtag indicates an ID.
And then we've got our input as well, which is hello input. And so we need to write a JavaScript that sets the value, or the inner HTML, as we call it, of the hello name span to whatever the value of the input is at that particular time. And now it's not good enough to just do this once as well.
We have to monitor it so that every time that that value changes, we update our user. Also, so that's what we need to do. Now JavaScript, we can write a program directly that would monitor it constantly, say every second or so will respond to an event. And that's really time-consuming and really quite difficult to keep on top of, especially in a larger app.
So what React does is it lets us do this declaratively. So rather than write our own scripts to do everything and kind of figure out everything that should go on the page, we just declare how the page should work and then React figures everything out, works out a graph of how things are dependent on one another and sorts everything out for us. And the important point to remember here though
is that we're going to have to define the behavior, or define how a change in the input should affect the display that we have at the end of our output. And so this syntax isn't really important, but in React terminology, we say that input, so the value of our input would be a prop
to this span component. And so we can define using this JavaScript syntax here that all that this does is say, I want to take the value that you give me from my input and I'm gonna put it inside of this span. So yeah, that's kind of an example of how it would work in JavaScript,
but if we wanted to see how it would work in Dash, we'd have a slightly similar concept, but one that's also different. And the key to interaction in Dash is a callback. And these define the relationships between the various different components. And you can think of this as being a little bit like Excel. So whenever the input to one particular component changes,
the functions run and its output is displayed somewhere as well. And so if we were to take a look at our hello world and update it, you can see here that we're defining another layout. And so we've got that div tag like we had before. And I've got this h1, now I'm calling my h1, sorry, rather than hello name.
And you can see here I'm gonna set, we've also got this input. So this comes from another Dash module called Dash Core Components, which are like the interactive Dash modules. And so we're giving this a name. I'm setting its initial value to Basel, and its type is text as well. Sorry, so next we set the,
we define how this relationship works using our callback. And I'm sorry that the text here is a little bit small because it's a little bit, just the way it's spaced out to be compliant with black. And you can see here we've got a decorator at the top, and we say what our inputs are. So in this case, it's just the value of that text box.
And our output is going to be the value or the HTML that's inside our header. And we get the value by running this function. And here I've just used an F string to interpolate whatever the value is with hello. So again, we just run it as we did before. And now if I open this up,
hopefully you can see, sorry, it's a little bit small, but I could change something like this to be Switzerland. Or something. So we have an interactive web page now that takes a value from a user, displays it, and we haven't had to touch JavaScript once. There is an important caveat to this before we kind of think about redesigning
all of the web pages and software that you make. And the code that defined this relationship now lives in Python, or it lives on our server. Whereas in a React app, all of this would be managed in the browser using React's kind of optimized algorithms to do that. Now this involves a call to the server. And that has a big performance impact.
So every time that a user presses a key or does something on our web page, it means that we have to go to the server, ask what should the new web page look like, and then display that in our web page. So that's a big performance impact. But like I said at the start, that's okay largely, because I want to build an app really, really quickly. I want to use familiar technologies for data scientists,
and I want to be able to make just a proof of concept app or an alpha of some kind. I'm not looking to make production software using Dash. So just to give another bit of a tour, what can you actually do with Dash? Some of the things that you can actually make are really quite impressive. So as the name kind of suggests, it's mostly geared towards dashboards.
But you can make some quite transactional and interesting pieces of example software using it as well. And so just to show how far you can go quite quickly, if you wanted to display data, for example, this is the Titanic dataset. And so it's example three in this GitHub repository
that you can take a look at. And all we're doing here is, there's a lot of code here, but it's not very complex. We've got our layout again, and we're just giving a header. I'm also giving the option here to filter all of the passengers on the, so this displays the entire manifest of the Titanic. I'm giving an option here to filter it based on sex. And you can see here that I'm just using this component,
and it's called the dash data table. And that will simply display all of the columns in my data frame. I've got this callback as well. And you can see that this callback provides the value to that dash table. And its input, it takes the value of the dropdown at that particular given point. So whenever the dropdown changes,
this function is run, and it will either give all of the passengers on the Titanic or just the ones that match this particular criteria. And so that's literally all there is to it. So now if we wanted to see our data set here, we've got a fully interactive data set. This is the list of all of the passengers that are on the Titanic and all of the columns
that are available. If I wanted to select just the women, you can see that's now just displaying all the females. And likewise with males. You can see here that we've got an interactive browser for our data set as well.
Okay, now as I said at the start, this is a project from Plotly. Plotly is obviously well-known for its graphing technologies and its ability to produce data visualizations. And so it's no surprise that Dash also has a really rich set of essentially Plotly graphs that you can use to produce your own,
your own graphical visualizations of data. So sticking with the Titanic data set, you can take a look at the code, but it's a very, very straightforward Dash component where I just provide it with a couple of arguments and to just like a standard Plotly graph. And so now I've taken the Titanic data sets and now this is the number of passengers
on the Titanic by the first letter of their first name. And again, that's just a couple of lines of code to make a web page visualization. No JavaScript involved, everything done in Python. You can also start to make some more interactive tools. Like I mentioned before, so rather than just displaying data or taking little bits of data,
if you wanted to start making changes to your data, say, and you can use this. So this is an example here that gives you a simple to-do list. So you can see here I've got a list that displays all of my tasks. I've got an input that takes the text for a particular task and I've got this button here.
And I can use the differences, so I can use the fact that whenever the button is clicked and I'm able to get the value of the particular task and add that to a list. And again, if you can take a look in more detail at the code, if you'd like on that repository. And I take the input to say whenever I need to call my function, whenever this button's pressed,
the state provides what the value of that function was at the particular time. And now I can see it live here. And so for example, if we did a to-do list, I can see here that we're able to literally start creating interactive software.
So obviously that would be more useful here. I just stored this in a global list, but obviously you could link that to a database or some description or anything else that you wanted to. So you can actually start to reduce very basic user interfaces really quite quickly, not just data visualization.
So moving on. And you can also build your own Dash components if you're familiar with JavaScript, but I should say that actually the Dash API does rather limit what you can do, in particular access to something we call Redux, which is kind of an internal database inside of your browser. And so apps can be a little bit jittery at times
without access to some of these kind of technologies. But you can still go very far with Dash and you can actually, I've listed a couple of the limitations here, you can actually really make some quite impressive and useful bits of software without having to have any real knowledge of web development or how those things work. For example, recently we had a project at Decision Lab
looking for detecting illegal gold mining in the Amazonian rainforest. And so we were able to make a tool that's used by Colombian police and military and so on to go and use a interface with a machine learning model to see whether or not it's likely that a particular area in the rainforest
is being illegally mined by gold miners. And that was all done with the exception of the map, which I had to produce, which is a custom Dash component. You can see that actually all of this was done by people with no real familiarity with web development or anything like that, just data scientists who are more happy with PCAing things than they are
with necessarily developing JavaScript libraries. We are also looking to open source that interface into the leaflet map over the next few months. And so kind of moving on towards the end, how is it that you should get the most out of Dash? If you want to start going and building Dash applications at the moment,
and what would my advice to you be? And so there are four tips I'm gonna suggest and go through at the moment. The first one is to organize your app, be disciplined. I'll come to this in just a second. And the second one is to actually start, well, second, third, and fourth are all to start kind of tooling up how you use Dash in your teams as well.
To build your app using something called factory function, and then that allows you to do something called, well, to do routing and navigation, which we'll come to briefly in a moment or so. And then at the end, I'll talk about how we plan to actually make the most out of Dash and tool up possibly with the community towards the end of this talk. So the very first one, organize your application.
And so it's, I think something that's become clear to me is Dash is a very novel and experimental technology. People refer to the documentation all the time, which, as they should. The docs, though, will always display an app in a single file. And so the result can be at times, especially with people who might be familiar with two-piter notebook coding,
is that we get kind of 2,000 line single file Dash apps, which obviously are somewhat unwieldy. It might seem like a very basic piece of advice, but that kind of two cultures that we've identified before, it's something that we've had to kind of talk about in our team. And think about how you split up your code into kind of logical units and files
as kind of very basic advice and so on. We also try to run apps at Decision Lab using the kind of the main interface there, so you can run something as a module rather than have to run a specific script. And so a standard Dash app or like a component inside a Dash app as we kind of, or a module, sorry, as we envisage it at the moment,
will generally have this kind of the main file to actually run the app, this sort of app file, which will manage how the app is kind of created and so on. And then we separate our callbacks from our layouts, and then often we'll have other associated utils files and that kind of thing. But I'd say the big thing here
is to make sure that you separate your callbacks from your layouts from your app, which allows you to run just like we do here as a module rather than as a script. The next one is to build your app using a factory function, which might be an unfamiliar term to some, but if you're coming from a Flask world, it's a very common thing to do,
because this allows, in my opinion, you to better control and to kind of better facilitate routing and navigation. Now, routing and navigation will allow you to have more than one, certainly in Dash have more than one kind of feature inside your app because you're able to have different pages. So at Decision Lab, and there's an example here in the code,
I think it's app six, and you can see that we've abstracted the Dash interface from the standard callbacks and layouts decorators. So we actually have our own class now, which just records all of our decorators that are coming into our app and all of our, sorry, all of our callbacks and all of our layouts
that are coming into the app. And then we have a kind of base route that allows us to control which particular component is displayed at which particular path inside our app. And so a standard app now would look something more like this, where we're importing a couple of different sets of features, which might have, so here I've got,
I've shamelessly stolen the code that I used earlier, so here I've got two lists, one is a shopping list and one is a to-do list. And so you can see now that we're just importing the two different modules there, and then we're able to decide which one is run using our kind of base layout here, and we've got a callback that manages this.
And so please feel free to kind of look through this, these examples at a bit more leisure, but you can see that if we actually run this app now, we're able now to have, so we've got, here we have three particular options for our layout, we've got our homepage that we're on at the moment, but we've also got our to-do list and our shopping list,
which are completely kind of separate from one another. So if I put something into my shopping list, it'll stay in my shopping list, but then I can also put it in my to-do list. So now we have two separate lists that you can use and sort of manage through a little, almost like pseudo framework
to keep your app kind of disciplined and lean rather than having huge files with them, rather than having huge files that have lots of unreadable code in them. Now finally as well, I want to touch on what I call it tooling up dash. If you implement the, like I said,
the factory function approach before and you're able to abstract actually defining what should go into your web application from actually executing it and running it, and so we have, like I said before, that class to manage the application and then build it. You can actually start to integrate lots of other useful tools and facilities for your data, well, my position for my data scientist
is to be able to use and exploit without having to worry too much about, for example, integrating with a MongoDB database or making an API request to another service. That can all be abstracted out so that data scientists can focus more on the important stuff, which is maybe a machine learning model
or how that model's going to be used. So we've done this through implementing dependency injection into all of our callbacks and our layouts using a Google dependency injection framework, and if this is something that kind of interests you or that you might want to look at doing for your own, your own projects, please do get in touch because I'd love to have the time
to open source that properly and kind of really make it available. So just coming to this final point now, there's a question that you have to ask yourself about when do you want to stop using dash and start building what I've termed here like a proper web application. So by that, I mean something that you might ship to production rather than something that's a proof of concept
that you might kind of use to iterate with a client or maybe an internal project. So dash is great. I really must stress this enough that although I criticize or say point out some of the weaknesses of dash and things that you can't do, on the whole, it is actually really good and I never cease to be amazed by what people can produce
and how quickly they can produce it using a very simple dash framework. And it allows this kind of like rapid development by non-specialists and it's also informed web development in a sense that rather than a data scientist having to hand over lots of their code or their idea to a software engineer and then see it either produced the way they want
or not produced the way they want, they can actually build it themselves and actually start to produce something that's really focused onto the particular mathematical task that we have in mind at Decision Lab and likewise with lots of other tasks that you might have. But it's also very rapid UI development and that's a big problem.
I mean, you've got to ask yourself, are you creating a technical debt? And if your app's going to be built in JavaScript eventually, why are you doing a proof of concept in pure Python? Like is it not better to invest early in JavaScript within your team? And there's also that point where, yes, it's UI development that's been informed by maybe your data scientist or the person leading your project
but are they the right person to do that? Is using the right framework to go about trying that? Surely, maybe you should start with a user researcher or a UX consultant to start building a production application. So these are all questions that you have to ask if you want to create your own dash app. There's also areas here that we should talk about
like authentication, testing, something I haven't covered here and other kind of complex interactions with third-party libraries are things that haven't really been to date properly addressed and covered in the dash community. There's also that issue with heavy loads and the performance thing that I mentioned before. And so, final point, dash is great for facilitating very rapid development
of data-driven interfaces and dashboards. Investing a bit of time allows you to go very, very far inside and creating a dash app but ultimately, front-end developers will still have a job after dash takes off. So thank you very much. And... Thank you. Please be done.
Thank you.
Thank you. Well, you can... It's out there. Yeah, yeah. Thank you. Hello. Oh. Sorry. I'm wondering if dash is at all a minimal to transpiling into a web...
What's it? A web assembly or something like that. Not to my knowledge at present, no. Rather than taking like a transpilation approach and dash is more focused on actually wrapping around react components. So there isn't direct transpilation at the moment. There are projects which transpile JavaScript into...
I'm sorry, which transpile Python into JavaScript. I can't remember the names of those or what they do. I know that that does exist. As to web assembly, not to my knowledge at the moment but with typing annotations now, the interaction and things like Oxide and taking Python, putting it into Rust and then putting it into web assembly could be a really interesting thing in the future.
Okay, thanks. Cool. I have a comment and a question. First, it is clear that the developer cannot escape from understanding HTML. You're writing HTML in Python. Yeah. So you need to understand HTML and a typical data scientist is not familiar with it maybe.
And a question is how debugging works because some of the events happens on the client side, the click listeners and the rest are in the server side. So how it is working?
Well, you're right that a developer has to have at least some basic familiarity with HTML and although that generally hasn't really been a problem, I think most people have been quite familiar with it. And you're right, there are certainly occasions where you'll get a complex bug that might be something to do with the front end and something that's happening in JavaScript rather than the back end.
And they tend to be bugs in the dash framework itself or in a custom component that you've made and rather than the actual established components which themselves are very, very stable generally and will often have a quite helpful debug message that allows you to kind of figure out what's going on. Thank you.
I have one question. Oh, look. Have you tried Altair? Have I tried what, sorry? This Altair, there's another interactive library called Altair. No, but if you send me details, that'd be good. Okay, thank you. Thanks. Thank you very much. Thank you. Cheers.