Pro Yearly is on sale from $80 to $50! »

Modern JavaScript for Python Developers by Cory Zue

7b0645f018c0bddc8ce3900ccc3ba70c?s=47 Pycon ZA
October 09, 2020

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.

7b0645f018c0bddc8ce3900ccc3ba70c?s=128

Pycon ZA

October 09, 2020
Tweet

Transcript

  1. Modern JavaScript for Python Developers Cory Zue

  2. Who am I? CTO, Dimagi 2006 - 2017 Side Project

    Entrepreneur 2017 - today
  3. JavaScript?!?!

  4. None
  5. None
  6. But... JavaScript is necessary to do anything on the web

    in 2020. Also, modern JavaScript ain’t so bad (more later)
  7. None
  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!