 Thank you very much. So yes, hello. I'm here to talk about Dash. And so this is a, 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. 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, how it works and what you can do with it, discuss what we've learned at DecisionLab from using Dash across our various different projects, and kind of identify all sort of sherps 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. Just putting those links up there again because I'm not sure that I've put them throughout the rest of the presentation, I'd say. 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. OK, final point about the slides as well. If you are viewing them on the web, because I know that this is recorded as well, every time you see one of those down emojis, 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 Plotli 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. So that does 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 DecisionLab. We're a London-based mathematical modelling consultancy. 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 also a Pycon UK, which is in Cardiff this year in September. It's great fun. Please do come along. 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 DecisionLab? Well, one thing you might have identified at various Python conferences or at your company or your organisation is that there are almost like two cultures of Python. I call this the Python data and the Python software cultures. You'll spot it in the developers that you meet or in the meet-ups that you attend. There are some Python courses that are very much focused on G-Python notebooks, pandas, sci-pi, TensorFlow, that kind of thing. 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 SQL Alchemy and various other database technologies and so on to actually 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 DecisionLab. But it can be very time-consuming. 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 going to 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 visualisation 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. It really is quite a challenge. So we wanted to minimise the new technologies that are maybe fresh PhD graduates or maybe interns even would be able to minimise the new technologies that they would need to learn in order to be able to get a project off the ground. But purely because if I'm building this very basic proof of concept, I want a data scientist to be able to take the lead in the early stages looking and exploring data, creating visualisations and so on. If their background isn't in web development, then they might not 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 summarise 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 the Thomas or Mark almost preparing to put together his Hello World React app. It's a difficult language to learn, especially if your background is more in a data science focus rather than a software engineer focus background. And so we found Dash. It's an open source project, although there are paid options for consultancy with Plotley. 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 on 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 and use Dash. So for the rest of the talk, I'll just give a quick introduction to Dash and how it works. Some examples are 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 simple syntax that hopefully if you're familiar with Python, you'll get to grips with quite quickly. Literally just install Dash by a pip. And this is a simple Hello World script. So you can see here 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 division in HTML. And the children of that tag are going to be this H1, or header1, so just a big header that says Hello, EuroPython. And there 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 you can see. Yeah, OK, so we've got a Hello World, or Hello, EuroPython 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. So that's the very basic Hello World of Dash. There are two bits of code there that are quite important that you should have a look at. 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. So how do you go about doing that? Now I'm going to detail 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 going to 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. I said there for the time being. But 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 going to take some text input from the user. And that has an ID of hello input. And the place that's going to 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 that you'll often hear me referring to the DOM. This is the document object model. I'm not vain enough to refer to web pages as myself. I just happen to be a web developer called DOM. So this is the document object model here. 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 inputs as well, which is hello input. 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, or respond to an event. But 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 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 of, 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 spam 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 going to put it inside of this spam. 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 have a slightly similar, well, a similar concept, but one that's also different. 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 kind of update it, you can see here that we're defining another layout. And so we've got that div tag that we had before. I've got this h1 that now I'm calling my h1, sorry, rather than hello name. And you can see here I'm going to set. We've also got this input. So this comes from another Dash module called Dash Core Components, which are 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. But 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. And 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... 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 optimised 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 app page. So that's a big performance impact, but like I said at the start, that's okay largely because I want to build a 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 outfer 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 my 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. So just to show how far you can go quite quickly if you wanted to display data for example, this is the Titanic data set 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 and giving an option here to filter it based on sex. And you can see here that I'm just using this components 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 dataset here, we've got a fully interactive dataset. This is a 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 dataset as well. Okay. Now, as I said at the start, this is a project from Plotly. Plotly is obviously one name for its graphing technologies and its ability to produce data visualisations. 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 graphical visualisations of data. So sticking with the Titanic dataset, 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 to just like a standard Plotly graph. So now I've taken the Titanic dataset and 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 webpage visualisation. 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 just taking little bits of data, if you wanted to start making changes to your dataset, 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, I'm able to get the value of the particular task and add that to a list. Again, if you can take a look in more detail at the code, if you'd like on that repository, I take the input to say whenever, 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 to do list, get me to your parcel. You can see here that we're able to literally start creating interactive software. So obviously that would be more useful here. I've just stored this in a global list, but obviously you could link that to a database of 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 visualisation. So moving on. 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 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 that. 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 an 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 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, what would my advice to you be? And so there are four tips that I'm going to suggest and go through at the moment. The first one is to organise your app. Be disciplined. I'll come to this in just a second. The second one is to actually start on, well, second, third and fourth, we're all to start kind of tooling up how you use Dash in your teams as well and to build your app using something called a 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, organise your application. And so 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 2000 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 within our team. Think about how you split up your code into kind of logical units and files. That's 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. So a standard Dash app or like a component inside a Dash app as we kind of, or module sorry, or 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 kind of manage how the app is 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 you separate your callbacks from your layouts from your app. Which allows you to run just like we do here and you know, 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 and because this allows, in my opinion, you see better control and to kind of better facilitate routing and navigation. Now, routing and navigation 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 6, you can see that we've abstracted the Dash interface from the standard callbacks and layouts decorators. And 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. Then we have a kind of a base route that allows us to control which particular component is displayed at which particular path in our 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 as a shopping list and one as 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 run it, decide which one is run using our kind of base layout here in art. We've got a callback that manages this. And so please feel free to kind of look through this, these examples are 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 a homepage that we're on at the moment. 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 then 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 unrealty code in them. And 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. 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 site. Well, in my position for my data scientist 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 is 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 interests you or that you might want to look at doing for your own projects, please do get in touch because I'd love to have the time to open source that properly and 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 proof of concept that you might use to iterate with a client or maybe an internal project. So dash is great. I really must stress this enough although I criticise or 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. It allows this 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 code or their idea to a software engineer and then see it either produce the way they want or not produce 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 a very rapid UI development and that's a big problem. I mean, you've got to ask yourself, are you creating a technical debt? If your app is going to be built in JavaScript eventually and 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 it'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 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. Another 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 please do get in touch. Thank you. Thank you. Ah. Well, you can... Thank you. Hello. I'm wondering if dash is at all a minimal to transpiling into a web assembly or something like that. Not to my knowledge at present, no, rather than taking like a transpilation approach, 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... 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 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, thanks. I have a comment and a question. First, it is clear that the developer cannot escape from understanding HTML. You are writing HTML in Python. 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. You are right that a developer has to have at least some basic familiarity with HTML, although that generally hasn't really been a problem. I think most people have been quite familiar with it. You are 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. 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 figure out what's going on. Thank you. I have a question. Have you tried Altair? Have I tried what? Sorry? Altair is another interactive library called Altair? No, but if you send me details that would be good. Thank you. Thank you very much.