Modern JavaScript for Python Developers by Cory Zue

JavaScript is the lifeblood of the modern web application. You need it to do anything remotely complex on the web.

But, for many Python developers, the modern JavaScript ecosystem is intimidating. The tools feel complex. There are often several ways to achieve the same goals. It's hard to choose a framework—and then once you do, it's hard to know exactly how to integrate it into a Flask or Django project.

This talk aims to demystify modern JavaScript for Python-minded developers. It will cover major advances that have been made to JavaScript in recent years and how you can use the JavaScript ecosystem - including tools like npm, webpack and babel - to write Python applications for the modern web.

It will be based on this series of articles that I authored (https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/) - though will be less Django-specific.

Transcript

1. Modern JavaScript for Python Developers Cory Zue
2. Who am I? CTO, Dimagi 2006 - 2017 Side Project Entrepreneur 2017 - today
3. JavaScript?!?!
6. But... JavaScript is necessary to do anything on the web in 2020. Also, modern JavaScript ain’t so bad (more later)
8. My Goal Teach you what you need to know to use modern JavaScript in your (Python) web apps in 2020 This talk is based on a series of articles I wrote which have much more detail.
9. How most front-end codebases evolve 1. Build out site using normal Django/flask tools 2. Realize you need dynamic functionality on a page 3. Add some inline JS and maybe a library to your template 4. Go to 1
10. Example Base Template source
11. Server-first Most common “chosen” by Python devs JS included ad-hoc at the page level Gets more and more unwieldy over time Doesn’t leverage latest JS features
12. Is there a better way?
13. Client-first Commonly recommended by JavaScript devs Clean separation of back end and front end Back end becomes “API factory” Simple tasks are more difficult Lose features/familiarity of the framework
14. source
15. Hybrid: Best of Both Worlds? Mix and match client-first and server-first pages as needed Combine power of modern JS with familiarity of Python web frameworks Requires understanding JavaScript build tooling
16. My experience adding React to a Django project I Need a Toolchain!
17. Why JavaScript Toolchains? In short, to use modern JavaScript on legacy browsers.
18. What Toolchain should I use?
19. What Toolchain should I use?
20. Elements of a Toolchain
21. The Package Manager Is pip for JavaScript Main options are npm and Yarn Doesn’t really matter what you pick, if in doubt go with npm
22. The Compiler Takes new features and syntaxes and converts them to browser-friendly JavaScript Babel is the most popular one out there today, and will do everything you need.
23. Makes your code more performant by bundling it into single, small files Manages dependencies for you (so you don’t have individually include libraries) Often have ways of adding optional pre/post-processing (e.g. integrating a compiler) Lots of options out there, when in doubt, use webpack. The Bundler X
24. Putting it all together Npm manages library imports Babel compiles our code so we can use newer features and syntaxes and make them work in older browsers Webpack bundles everyting into a small number of JavaScript files to add to our pages
25. Using a Toolchain in a Hybrid Architecture
26. Django Example
27. Django template file React JavaScript file A “Single-Page” React App A much more comprehensive example of integrating a real single-page React app can be found in part 4 of the guide
28. Why bother with all of this?
29. What’s the payoff? Use latest JavaScript frameworks (React / Vue) Better dependency management New features and convenient syntaxes Custom language / file formats X
30. ES6 (a.k.a. making JavaScript more like Python) Arrow (lambda) functions Classes Template (F) Strings Default Argument Values
31. JSX
32. Vue’s take Combining templates, logic and styles into a single file
33. And more!
34. For code samples and a complete write up on all of this go to saaspegasus.com and click “guides” @czue | coryzue.com Thank you!