Modern JavaScript for Python Developers by Cory Zue

Slide 1

Slide 1 text

Modern JavaScript for Python Developers Cory Zue

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

JavaScript?!?!

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

How most front-end codebases evolve 1. Build out site using normal Django/ﬂask 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

Slide 10

Slide 10 text

Example Base Template source

Slide 11

Slide 11 text

Server-ﬁrst 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

Slide 12

Slide 12 text

Is there a better way?

Slide 13

Slide 13 text

Client-ﬁrst Commonly recommended by JavaScript devs Clean separation of back end and front end Back end becomes “API factory” Simple tasks are more diﬃcult Lose features/familiarity of the framework

Slide 14

Slide 14 text

source

Slide 15

Slide 15 text

Hybrid: Best of Both Worlds? Mix and match client-ﬁrst and server-ﬁrst pages as needed Combine power of modern JS with familiarity of Python web frameworks Requires understanding JavaScript build tooling

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

What Toolchain should I use?

Slide 19

Slide 19 text

What Toolchain should I use?

Slide 20

Slide 20 text

Elements of a Toolchain

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

Makes your code more performant by bundling it into single, small ﬁles 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

Slide 24

Slide 24 text

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 ﬁles to add to our pages

Slide 25

Slide 25 text

Using a Toolchain in a Hybrid Architecture

Slide 26

Slide 26 text

Django Example

Slide 27

Slide 27 text

Django template ﬁle React JavaScript ﬁle 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

Slide 28

Slide 28 text

Why bother with all of this?

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

JSX

Slide 32

Slide 32 text

Vue’s take Combining templates, logic and styles into a single ﬁle

Slide 33

Slide 33 text

And more!

Slide 34

Slide 34 text

For code samples and a complete write up on all of this go to saaspegasus.com and click “guides” @czue | coryzue.com Thank you!