We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Pythonic JavaScript for Web Developers

00:00

Formal Metadata

Title
Pythonic JavaScript for Web Developers
Title of Series
Number of Parts
160
Author
License
CC Attribution - NonCommercial - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Pythonic JavaScript for Web Developers [EuroPython 2017 - Talk - 2017-07-12 - PythonAnywhere Room] [Rimini, Italy] Having a basic knowledge of JavaScript is obligatory for every Web developer in todays world. Most of us are familiar with the pain of having to write some simple hide/show logic and ajax queries with jQuery on a page that is mostly rendered server-side. Nowadays, however, there are lots of great JavaScript frameworks and build tools that not only make these things very easy to do The Right Way, but also make the whole process quite painless. I spent past year in a small startup writing only front-end code and evaluating different tools and best practises. Bringing these tools to old Django projects has been eye-opening. There are practically no documentation or code examples on how to integrate these things to Python backend projects, so it’s very hard to get started from scratch. In this talk we’ll go trough some of the tools, examples on how to get started, and also some coding guidelines on how to make JavaScript look and feel more sane and Pythonic. The current state of JavaScript frameworks is notoriously bad; there are more of them than blog engines written with Django. We’ll focus on Vue.js (https://vuejs.org) which is a lightweight, very easy to get started and yet powerful tool. We’ll also take a look at new end-to-end browser test tools and modern build tools that enable us to take full advantage of the huge NPM package universe (Cheeseshop for JS) and write modern ES2015/ES2016 JavaScript that has more powerful and cleaner syntax
95
Thumbnail
1:04:08
102
119
Thumbnail
1:00:51
Software developerCode division multiple accessSoftwareIntelWeb-DesignerProjective planeVideo gameXML
Software developerProjective planeData managementBitProgrammer (hardware)Scripting languageSinc functionWeb 2.0Real number
Web pageBitTerm (mathematics)System callWeb pageScripting languageLecture/ConferenceComputer animation
Web pageScripting languageJava appletWeb pageFront and back endsProcess (computing)BitComputer animation
Digital signalExecution unitBitPerspective (visual)Revision controlWeb 2.0Moment (mathematics)Scripting languageComputer animationXML
Color managementDigital signalAnnulus (mathematics)Web 2.0Revision controlProcess (computing)Mereology
Web 2.0MereologyScripting languageReading (process)Goodness of fitProcess (computing)Object (grammar)Revision controlFunctional (mathematics)Dynamical systemType theoryInsertion lossSource codeXMLProgram flowchart
Social classModul <Datentyp>Electric generatorString (computer science)SynchronizationStandard deviationVariable (mathematics)Point (geometry)View (database)Direction (geometry)Programmer (hardware)Scripting languageFormal languageCategory of beingString (computer science)Open sourceIterationConsistencyElectric generatorModule (mathematics)Object (grammar)Template (C++)Real numberLecture/ConferenceXMLComputer animation
Social classModul <Datentyp>Electric generatorString (computer science)Scripting languageProgramming languageProper mapState of matterProjective planeScripting languageVideo gameWeb 2.0Query languageWebsite
Revision controlPoint (geometry)Web 2.0MereologyComplex (psychology)Web pageWeb applicationLecture/Conference
SoftwareProduct (business)Data managementJava appletOpen sourceRevision controlSystem callTrailWindows RegistryScripting languageRight angleComputer file
Stack (abstract data type)Web browserProduct (business)Scripting languageCode
Software frameworkLink (knot theory)Module (mathematics)Cloud computingCodeFigurate numberProduct (business)Fiber bundleMoment (mathematics)Line (geometry)Inclusion mapStandard deviationCommunications protocolCodeSoftware frameworkFluid staticsMultiplication signPoint (geometry)Term (mathematics)BitMereologyDifferent (Kate Ryan album)Network topologyProjective planeGoodness of fitXML
Software frameworkProjective planeDampingBookmark (World Wide Web)CASE <Informatik>Data modelSoftware frameworkView (database)BitGenderXMLJSON
Configuration spaceConfiguration spaceGoogolWeb pageComputer animation
Projective planeMultiplication signSoftware frameworkCodeScripting languageStack (abstract data type)
Electronic mailing listMeasurementReal numberSign (mathematics)Scripting languageCodePerspective (visual)BitLecture/Conference
Scripting languageLibrary (computing)Function (mathematics)Module (mathematics)NamespaceCodeScripting languageFunctional (mathematics)Library (computing)Asynchronous Transfer ModeFormal languageComputer fileComputer chessLecture/ConferenceJSONXML
Computer fileProgramming languageExpressionComputer programmingLibrary (computing)Module (mathematics)WindowProper mapMultiplicationFunctional (mathematics)CodeFigurate number
CodeCryptographySoftware developerJSONXMLLecture/Conference
ConsistencyRepository (publishing)Right angleCodeCodeView (database)Computer fileLink (knot theory)
Modul <Datentyp>Scripting languageCodeProjective planeLecture/Conference
Modul <Datentyp>Software testingScripting languageComputer fileProjective planeFlow separationSoftware repositoryCodeMultiplication signPoint (geometry)Control flowProduct (business)Front and back endsDemo (music)Endliche ModelltheorieJSONXMLComputer animation
Cursor (computers)CodeTouchscreenLecture/Conference
SummierbarkeitRepeating decimalCloud computingTouchscreenSource codeMereologyExact sequenceSkeleton (computer programming)Computer fileProjective planeCloud computingDemo (music)Mobile appRight angleComputer animation
Computer iconCommodore VIC-20Cloud computingWeb pageDemo (music)Similarity (geometry)CodeMathematicsSoftware developerServer (computing)Asynchronous Transfer ModeWeb 2.0Greatest elementSource code
State of matterWeb pageStructural loadView (database)Web browserServer (computing)Mobile appScripting languageControl flowMedical imagingWeb 2.0
ComputerCloud computingVideo game consoleObject (grammar)Query languageHTTP cookieView (database)Token ringForcing (mathematics)Web 2.0CodeElement (mathematics)MereologyInstance (computer science)Plug-in (computing)Computer fileVariable (mathematics)
Computer wormEmailCloud computingRepeating decimalCategory of beingVariable (mathematics)Object (grammar)SummierbarkeitTotal S.A.View (database)
Computer wormRepeating decimalEmailCloud computingExecution unitData typeDesign of experimentsScale (map)Product (business)Social classDifferenz <Mathematik>Computer iconEndliche ModelltheorieMoment (mathematics)Instance (computer science)Form (programming)
View (database)Web pageInstance (computer science)Multiplication signPoint (geometry)Source code
Video game consoleFingerprintDrum memoryComputer wormCloud computingContent (media)Scale (map)Executive information systemWeb pagePoint (geometry)Bit rateView (database)Right angleTablet computerProgram flowchartLecture/Conference
Social classFree variables and bound variablesData typeoutputScalable Coherent InterfaceMultiplication signProduct (business)Revision controlWeb 2.0Scripting languageModule (mathematics)Hash functionConfiguration spacePlug-in (computing)Source code
Content (media)Computer fileScripting languageProjective planeSource codeComputer animation
Computer fileMobile appPositional notationWeb 2.0Electronic mailing list
Hash functionContent (media)Patch (Unix)Demo (music)Cloud computingError messageNetwork topologyBootingRule of inferenceProduct (business)Hash functionUsabilityFiber bundleCodeServer (computing)Web 2.0Fluid staticsRule of inferenceSource codeMeeting/Interview
BootingBoolean algebraSoftware testingComputer fileExecution unitView (database)Software developerElectronic mailing listPlug-in (computing)Demo (music)Hash functionProduct (business)Scripting languageServer (computing)Local ringTouchscreenLogic gateSource code
Traffic reportingMultiplication signSoftware repositoryPresentation of a groupTransponderComputer animationLecture/Conference
WritingGoodness of fitTransportation theory (mathematics)Scripting languageSoftware frameworkProjective planeHand fan
Formal languageProduct (business)Field (computer science)Multiplication signLecture/Conference
Multiplication signGoodness of fit
Source codeMereologyMultiplication signModule (mathematics)Meeting/InterviewXML
Moment <Mathematik>Software frameworkWeb 2.0Product (business)Loop (music)Lecture/Conference
Integrated development environmentProjective planeProduct (business)DebuggerRoutingDrop (liquid)Multiplication sign
Computer animation
Transcript: English(auto-generated)
So yeah, Pythonic JavaScript for web developers or how to get modern JavaScript into your already existing Python projects would be the almost
more aptly name. So good hello, my name is Ville aka Uninen and like Python I like DJing and both are my passions in life and past year I have been working with JavaScript but I've been working on web since 1995 and with
Django over 11 years so I already feel a bit old here but I code for fun and sometimes for work but I don't really consider myself as a programmer per se.
I've worked with mostly with small teams and as a project manager and tech lead and like I said last year I worked spent with a small Finnish startup bootstrapping a five-person team development team with agile
methods and writing JavaScript and this was my first contact with real JavaScript if you will and I learned a lot and I think I learned stuff that maybe some other persons would like to know also and that's why I wanted to
give this talk to you. So let's start with you. How many of you have heard at least one of these terms? Okay so almost all of you. How many of you actually know what they mean? Okay a little bit less. So the idea of this
talk is to give like a really basic basic introduction to modern JavaScript and related things. The call of this talk is to get you an idea what's going on with modern JavaScript and to get you enough knowledge to get started
with writing good stuff and also to learn where to learn more. So according to Wikipedia 95% of the top 10 million most popular web pages use JavaScript.
That means that you actually need to know it even if you work in the back end and unfortunately we are at the Euro Python we are Pythonists so why or why does JavaScript need to look and feel a little bit like this i.e. not very
friendly or beautiful. So to get a little bit perspective let's take a look at the history. I think I skipped a few. So JavaScript was developed
basically in ten days in 1995 when web looked like this and to compare Python was at the moment in version 1.2 and Netscape Navigator was just released 2.0 and fast forward few years in 1999 web looked like this and our
JavaScript was forwarded to version 4 which was on par with Python 1.5 and
based on the news article I found there everything else were worse except the presidential problems. Anyways we've been using basically the same JavaScript since then even now when our web looks totally different and this
is why the definitive book of JavaScript is really huge and the good parts of the JavaScript is not so huge. This by the way is a good book and worth a read if you want to learn the good parts of JavaScript. It talks about functions and lose typing and dynamic objects and stuff like that but
there's more. So recently there was yet another version of JavaScript called ES6 or ES2015. ES stands for ECMAScript which is the standard for JavaScript and these new features are basically moving the language in really
really good direction from the programmer's point of view. We are getting latent const variables which mean that you can actually now have not global variables and you can have constants. You have real classes, object
literals, better object literals. You have modules, iterators, generators, map and set and promises, template strings, destructuring and async and await. So it pretty much already starts to look more like Python and more like a
proper programming language. And if we then go back to the way that we have used to at least I've used to develop JavaScript which I call here the old
school way. It's basically just adding jQuery to the site and then some script tags and that's about it. And this is the whole life that I've been working on the web. This has mostly been the state of JavaScript on the web and on the projects I've been working. And fortunately we now do have
a better way as Raymond Headinger would want to shout at this point. So the modern version is way more complex for obvious reasons. We now live in 2017 and our web apps and web pages are constructed in more complex
ways and the JavaScript part adds to it itself. We start with NPM which is a package manager for JavaScript and it's the world's largest software
registry which is open source but the registry holder itself is a incorporation so that's a kind of interesting thing right there. Anyways NPM gives you a file called package.json which is basically
requirements txt for your pip in Python and NPM has dependency tracking and stuff like that so you can actually know what versions you are shipping with
your product. Then we move to transpilers. Babel is the one usually used. This transpiles your new code when you move things to production to old code that most browsers can understand back to the ES5 or even ES4
and we need to use that because you know browsers and IE and stuff like that but Babel is with our JavaScript stack. Then linters if you
want to get like really busy with JavaScript and be good at it you need to lint your code and in my opinion it makes your coding experience but also reading the code and doing code review and stuff like that way more pleasurable as you know that you can maintain standards. enslint is a
JavaScript linting package which is in my opinion way better than flake8 for example. There are at the moment no official guidelines like pepper8 but there is a project called JavaScript standard style which is a
NPM module you can install and it has standard recommendations also and for the moment I think the most used standard style or most used coding
guidelines are Airbnb coding guidelines. By the way I have links to everything I'm mentioning here and I'll give you a link at the end of the talk. Then we have lots of different JavaScript modules and packages and we need to ship them out so webpack is at the moment one of the most prominent tools
for that. Webpack also does lots more we've already had a talk here at Europe Python about webpack. It's really powerful tool but it's also quite complex and still not very stable at least in my opinion in like
documentation terms and stuff like that so when you bundle your assets you need to invest a little bit time to get this one going on. Also at this point you probably want to collect and bundle all your other static
data assets like CSS and sass and stuff you want to pre-process and webpack can do that for you too. Also webpack includes some kind of pretty amazing
stuff like tree shaking which automatically can eliminate some dead code from your JavaScript that not included in the production bundle if you just configure it right and then after all these like build tools you of
course want to use some framework this is the same kind of deal that usually when you start a Python project you probably don't want to start from scratch you select your favorite framework and start working so the top
three contenders in my book are angular react and vue and if in your company one of these are already in in use you should just use that or if you know one already just use that it doesn't really matter but in case that you are
not familiar with any framework so far I would warmly recommend vue which is a I've been working with vue a lot and I'm also been working with Django a lot
and I think vue is a little bit like a child of Django and flask only it changed its gender to JavaScript so it's really easy to get started it has good documentation which is unheard of in JavaScript world it's lean and fast
but still robust enough to get you going with the really brick project if you if you need to and it has vue X which is kind of react it looks kind of a data model too if you need one so these new shiny things require new
tools and they require a new configuration which is obviously kind of a pain in the butt and whenever I usually have needed to delve into
JavaScript configuration I end up to the wrong page in Google and it makes me shame of myself and the world so to help with that I have created an example project that uses Django and this tact I mentioned and I just pushed
it on the kid lab project but it's not quite there yet but we might have time to look at the code really quickly the idea here is that you can get an idea what you need to get started with this kind of stack if you don't know what what's going on examples from the JavaScript world with
using the kind of frameworks like Django are really really rare or they are non-existent and definitely no documentation exists anywhere so I think this will help you help you to start start away if you want to so
what about the actual topic of the of the talk what is Python in JavaScript this is by the way a real sign from Norway I was very pleased when I saw that in obviously this is a quite opinionated list this is my
opinion and your mileage may vary but for me Pythonic code is something you feel rather than measure I think this comes down to the talk we had about
beautiful code and I think Pythonic is a little bit same but from JavaScript perspective I think bundling your code into packages and into modules is the first thing you need to do namespaces are a honking great idea
and stuff like that so just use NPM how many of you have worked with code like this in HTML when you have lots of script tax importing something and then in the HTML itself a script tag which has the actual code I have yeah
so most of us the better way of doing is it is to put everything in one one file with ES6 plus syntax and start with using strict mode it
prevents you from writing bad code and disable some bad features of the language and then you start importing the libraries this first import is a require function which you say no chess function and this is a not native
JavaScript some of the older libraries and some well some library still need this require and won't work well with the native imports but some do and then I added just to point out that it still might be hairy that sometimes you
need to like explicitly set something to window because some libraries just don't work but this is what it is and then you have like the native module imports native imports in JavaScript look quite familiar for
Pythonists and this is actually I I really enjoy when I see this kind of JavaScript code and the last one we put everything our code itself in iffy which is immediately invoked function expression aka a a fe so everything puts
in to here won't leak outside and now that I after I wrote this I figure it out that when we are actually writing new JavaScript it doesn't matter so much but this is this is the way the old schoolers like to do it and
then at the end it gets the program gets run so all you need to do on your HTML is at the one minified and uclified and stuff JavaScript file that was bundled with webpack so that's the first thing you have you bundle
their files and instead of doing multiple imports and and stuff like that you collect MPM packages and you handle them in one place that's kind of a kind of a way of working that we have been used to in like proper
programming languages and now we can do it in JavaScript too so that's kind of nice coding guidelines and the linting stuff is really important in my opinion JavaScript obviously doesn't work like Python which in Python you can read
other people's code quite easily in JavaScript you can't unless you have really good guidelines on how to write your code so if you write for example for your company and you have several developers in your team it
really helps a lot if everybody everybody writes consistent code and after you check the code in to the repository and it's been peer-reviewed no one should be able to tell who wrote the code and when you lint the code it's quite easy to do and a strict code review of course helps
it's amazing how how much better looking and better feel you get to a JavaScript file without doing it anything else but just like arranging it
differently via the coding guidelines it's it's amazing and then the maybe obvious maybe not thing but semicolons are optional in JavaScript so in my opinion why use them we are transpiling our code so the
transpiler adds them where it needs to automatically even if we do use them or don't use them it's the transpiler doesn't care so why should we so like those lisp parenthesis these might be elegant weapons like your father's
parenthesis but we don't need them so let's not use them so to recap Python in JavaScript in my opinion is modular it consists of packages just like your Python projects it has a package JSON you can import stuff there you can keep separate projects in separate repos if you want to it's
testable and it's tested you can actually test the code when you write it this way and it's easy to test and this is this is a big big thing even if you have that one small JavaScript file in your in your project if you write it this way you can actually test it and then you you
know that when you change your Django model or whatever when you run your front-end JavaScript tests if they don't break you are losing less sleep when you are pushing things to production and when you link the code it actually
looks good and it looks similar to everybody else's code and extra bonus it's semicolon free so I'm not really sure how much time we have left 20
minutes we can do at this point I think a short demo of the short demo of the of the code I pushed if I find my cursor from somewhere is it
here we go now we are sharing the same screen so let's do this can you see
this all right um let's start with the project so this is the demo project it's not quite finished yet but it's just a basic Django skeleton with one app and it has some static files it has sass file and a JavaScript file the
sass file how many of you know sass okay almost also sass is a CSS kind of thingy that you can pre-process to CSS we use this to render the CSS for the
demo page which look like looks like this it's just a really really simple
HTML page and the whole JavaScript here is here so if we go from top to bottom we are in strict mode and this hot module thing is a webpack helper that is actually quite awesome thing when you develop with webpack serve
development server and you change your JavaScript code the code gets updated in the browser automatically and it doesn't mean the Django run server kind of refresh the whole page it just refreshes the JavaScript and it's
it keeps the state so imagine like developing huge JavaScript one page app that has loads of state and it just changed one thing one little thing you don't need to refresh the page everything stays the same and webpack
just reloads it for you then we are using view and jQuery and we are using the cookies module because we want to use this Ajax post method from jQuery with Django's CSRF token in the requires this is pretty weird thing
about webpack that I personally don't quite understand nor like but if you can require anything that webpack can read if you have a plugin for
SAS you can require SAS and webpack just it just eats it for you and so if you want to do CSS with or a SAS with webpack you need to require the files and then the actual code is really simple view instance so you
attach the view instance to any HTML element and this one has data element so it's just like object variables here this is totally not like finished
or even thought out yet but I put something to get started computed methods are think of them as Python properties so they this total sum acts like a property that automatically updates when your
variable updates and then you have methods that are methods we also have in view these special methods like created which as you might guess gets
run when the when the instance is created at the moment this doesn't do quite nothing yet it's good it gets put into this main container and then I
think we have here we have this V-model which is where's my heart to say this one here when we change V-model in the form itself it
automatically updates in in the view view instance and this would be really better if I could show you the actual page but I I think I'm not going
to get it running at this point before we run out of time but the idea here is that to get the view going you only need this really really small instance of clean and easy to read and understand JavaScript and other point
here I wanted to explicitly made is that you can use it with your existing jQuery thing is you can have your page full of jQuery thing is but you can just add the view you view thing right next to it and it just works or
you can start with clean slate like we did here and just do it there's one more special thing here this is something I wrote for myself as a helper for the webpack and production pushes because we might next want to see the
webpack config so here we have webpack config which is a JavaScript module that actually just requires another module based on the end variable we keep it from the command line and if we have dev and we require some webpack
things first and some plugins and then we get git hash explain it in a minute and then webpack wants entries that it reads and I've imported them from here
so you might have we only have here just one JavaScript file but for example in a typical Django project you you'd have one or two JavaScript files for
every Django app you have for example and you can grow this list as large as you want and webpack just with this notation you you get each one file for each entry and you can bundle those entries too and it really it gets
really complicated this is really really simple stuff here and for caching and for ease of production pushes we use git hash in the bundle name so
automatically when you push your code and then build the static assets with webpack the assets get named with the git hash and then there are some dev server things and rules how to how to use JavaScript what to do with
JavaScript files use them with Babel and then there are tests for view
files which we didn't get to see yet and then there are SAS files and the list of plugins and if I show you really quickly the template tag I wrote the idea here is that in the template tag we do the same thing we
get the git hash and then the template tag outputs the script name for us so in development we we can use this demo file and in or in development we can have it on local server and in production wherever we want and this is
just it just works automatically so this is something you'll find from the from the git repo I uploaded and now if we can quickly back into the
presentation to recap semicolons in JavaScript are totally unnecessary when you use transpilers note when you don't use transpilers it's not
sure but if you use transpilers if you build this tag it's pointless to use semicolons there are tons of good tools and packages for JavaScript so don't write stuff yourself don't reinvent the wheel the NPM is full of
good stuff also unfortunately bad stuff there are easy to use frameworks and there are hard to use frameworks just like there are in Python and turn on linting to every project and it kind of is lipstick on a pic but hey that's
JavaScript but with good tools you can actually have quite fun with JavaScript too so yeah when you do it like this you can like automate everything you can have it in your like production QI builds just like
every other language so investing to this is it's a good thing I think that's about it thank you do we have time for any questions yes we have
time for questions so any questions no yes it's only a little question when
to use require and when to use import that's a good question use require when the import doesn't work JavaScript packages are really really poorly documented but if the package is good it it works with import if the package
is older it probably doesn't work with import but if it if it uses like write spec it just works with import but you need to you need to look at documentation and you need to basically almost every time you need to look at the source because there is no documentation so yeah that's
JavaScript for you but that's a really good question when you build your own stuff and when you try to evaluate what packages you want to use select those that are like you can use with native imports and modules
because they are obviously better written and maintained hello thank you for the talk so there are certain actual Python Python but then into web compiles yes okay have you ever considered that for for actual production use or just for shits and giggles like pipe by jazz and such I
mean I I got to eat it lots of those frameworks and I I didn't even know that they existed there are there are interesting takes on the topic and I think that if that's your thing you want to write like for example if you like typescript and that kind of stuff then it might be for you and why not
use it in production if it works so I myself haven't wanted to go down to that route because I think the the tools that are built with JavaScript when you
have the stack working it works really well and you all the all the tools and all the all the IDEs and stuff like that and debug tools and stuff like that already work so I don't quite need to feel the need to keep in Python in in that low level but if it works for you great and yeah I would like to
know if some like big project actually uses that kind of transpiler any other questions no thank you okay thanks again