<iframe src="https://www.youtube.com/embed/NUXUmv-aeG4" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> <blockquote>Appsilon Tech Talks - each Wednesday we hold internal meetings where we discuss technology. By sharing our tech talks with the community and contributing to open source, we inspire discussion and growth that allow others to learn from our accomplishments and to share with us.</blockquote> Lately, I had a chance to present a tech talk about <a href="https://plot.ly/products/dash/" target="_blank" rel="noopener noreferrer">Dash Python framework</a>. Dash is a reactive framework for building Dashboards. They are like ones build using <a href="https://appsilon.com/making-shiny-apps-awesome/" target="_blank" rel="noopener noreferrer">Shiny R framework</a>. At Appsilon we’ve already build complex dashboards in Shiny. We also deployed them for <a href="https://appsilon.com/alternatives-to-scaling-shiny/" target="_blank" rel="noopener noreferrer">thousands of users</a>. Python community is catching up and we are happy to explore opportunities. It is worth to compare the two. We’ve started with several internal tests. We already delivered Dash projects for most innovative clients. Starting today we deliver business projects written in Dash for a broader audience. Below you can see a quick summary of our lessons learned! This tech talk covers basics and more advanced topics. You will start simple to finish with building custom components and scaling. The broader list of topics covered in the tech talk: <h2 id="1-what-is-dash">1. What is Dash?</h2> <ul><li>Dash is a productive Python framework for building web applications.</li><li>Created and maintained by Plotly. https://plot.ly/products/dash/.</li><li>Written on top of Flask, Plotly.js, and React.js.</li><li>Dashboard is implemented in pure Python.</li><li>Dash is an open source library, released under the permissive MIT license.</li></ul> <h2 id="2-what-you-get-with-dash">2. What you get with Dash</h2> <ul><li>Frontend generated in Python</li><li>Reactive computations abstraction</li><li>Component class for every HTML tag as well as keyword arguments for all of the HTML arguments implemented in dash_html_components package</li><li>Interactive HTML elements implemented in dash-core-components</li><li>Plotly python API implemented in dash-core-components available through Graph class</li></ul> <h2 id="3-dash-demo-application-with-source-code-explained">3. Dash demo application with source code explained.</h2> A deeper look into Dash interactivity and description of how recalculations work. <h2 id="4-what-are-the-dash-core-components-how-to-build-customized-components">4. What are the Dash core components? How to build customized components?</h2> You can implement your own components in Dash. For more information on how to do that visit <a href="https://dash.plot.ly/plugins" target="_blank" rel="noopener noreferrer">https://dash.plot.ly/plugins</a> We have started implementing our own components and helpers: <ul><li>Leaflet map</li><li>Timeline (react horizontal timeline port)</li><li>Mixpanel hook (to allow using Mixpanel with frontend plugin that identifies user by cookie)</li><li>IncludeScript (includes and runs an external script on demand - useful if app runs in local mode)</li></ul> <h2 id="5-single-threaded-dash">5. Single threaded Dash</h2> Graph recalculation is blocking and is single threaded. However, we can extract the flask server that is generated and use gunicorn to make the computations concurrent. <a href="http://gunicorn.org/" target="_blank" rel="noopener noreferrer">Gunicorn</a> ‘Green Unicorn’ is a Python WSGI HTTP Server for UNIX. It’s a pre-fork worker model. The Gunicorn server is broadly compatible with various web frameworks, simply implemented, light on server resources, and fairly speedy. Seems to still have a limit on concurrent users. <h2 id="6-dash-limitations">6. Dash limitations</h2> <ul><li>We still explore how it scales for many concurrent users</li><li>At some point, you will need more sophisticated components than Dash provides by default</li><li>You’ll have to write your own components in React.js</li><li>Or you’ll have to port already existing components from React.js to Dash</li><li>You’ll quickly find out that some quick wins are still under development (Mapbox raster example)</li><li>There are no intermediate values in the reactive graph.</li><li>You have to add hidden div with intermediate data (as suggested by plotly)</li><li>You have to write separate function for every Output which forces you to restructure the code</li><li>There are some issues we may not be able to resolve without getting to know the way Dash works by heart</li><li>There may be still some issues with Dash that we don’t know about - we have to add a margin to our work</li></ul> <h2 id="7-questions-and-answers-session">7. Questions and Answers session</h2> <ol><li>Does state stay on the server or on the Client? Compared Shiny and Dash.</li><li>Using memoization as a workaround. Discussing threading with memoization.</li><li>How is specifying reactivity different between Dash and Shiny? Pros and cons of each model.</li></ol> I hope you like it! Please let me know in the comments what would you like to explore next! <h3 id="resources">Resources:</h3><ul><li><a href="https://github.com/DamianRodziewicz/dash_example" target="_blank" rel="noopener noreferrer">https://github.com/DamianRodziewicz/dash_example</a></li><li><a href="https://www.slideshare.net/secret/nnwCIXI6iBDOmG" target="_blank" rel="noopener noreferrer">Slideshare</a></li></ul>