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

Modern JavaScript for Python Developers by Cory...

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. But... JavaScript is necessary to do anything on the web

    in 2020. Also, modern JavaScript ain’t so bad (more later)
  2. 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.
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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.
  9. 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
  10. 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
  11. 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
  12. What’s the payoff? Use latest JavaScript frameworks (React / Vue)

    Better dependency management New features and convenient syntaxes Custom language / file formats X
  13. ES6 (a.k.a. making JavaScript more like Python) Arrow (lambda) functions

    Classes Template (F) Strings Default Argument Values
  14. JSX

  15. For code samples and a complete write up on all

    of this go to saaspegasus.com and click “guides” @czue | coryzue.com Thank you!