Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern JavaScript for Python Developers by Cory Zue

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.

Pycon ZA

October 09, 2020
Tweet

More Decks by Pycon ZA

Other Decks in Programming

Transcript

  1. Modern JavaScript
    for
    Python Developers
    Cory Zue

    View Slide

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

    View Slide

  3. JavaScript?!?!

    View Slide

  4. View Slide

  5. View Slide

  6. But...
    JavaScript is necessary to do anything on the web in 2020.
    Also, modern JavaScript ain’t so bad (more later)

    View Slide

  7. View Slide

  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.

    View Slide

  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

    View Slide

  10. Example Base Template
    source

    View Slide

  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

    View Slide

  12. Is there a better way?

    View Slide

  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

    View Slide

  14. source

    View Slide

  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

    View Slide

  16. My experience adding React to a Django project
    I Need a Toolchain!

    View Slide

  17. Why JavaScript Toolchains?
    In short, to use modern JavaScript on legacy browsers.

    View Slide

  18. What Toolchain should I use?

    View Slide

  19. What Toolchain should I use?

    View Slide

  20. Elements of a Toolchain

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  25. Using a Toolchain in a Hybrid Architecture

    View Slide

  26. Django Example

    View Slide

  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

    View Slide

  28. Why bother with all of this?

    View Slide

  29. What’s the payoff?
    Use latest JavaScript frameworks (React / Vue)
    Better dependency management
    New features and convenient syntaxes
    Custom language / file formats
    X

    View Slide

  30. ES6 (a.k.a. making JavaScript more like Python)
    Arrow (lambda) functions Classes Template (F) Strings
    Default Argument Values

    View Slide

  31. JSX

    View Slide

  32. Vue’s take
    Combining templates, logic and styles into
    a single file

    View Slide

  33. And more!

    View Slide

  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!

    View Slide