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
   

   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