Pythonic JavaScript for Web Developers
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| 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 | 10.5446/33810 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
EuroPython 201715 / 160
10
14
17
19
21
32
37
39
40
41
43
46
54
57
70
73
85
89
92
95
98
99
102
103
108
113
114
115
119
121
122
130
135
136
141
142
143
146
149
153
157
158
00:00
Software developerCode division multiple accessSoftwareIntelWeb-DesignerProjective planeVideo gameXML
00:33
Software developerProjective planeData managementBitProgrammer (hardware)Scripting languageSinc functionWeb 2.0Real number
01:42
Web pageBitTerm (mathematics)System callWeb pageScripting languageLecture/ConferenceComputer animation
02:32
Web pageScripting languageJava appletWeb pageFront and back endsProcess (computing)BitComputer animation
03:02
Digital signalExecution unitBitPerspective (visual)Revision controlWeb 2.0Moment (mathematics)Scripting languageComputer animationXML
03:35
Color managementDigital signalAnnulus (mathematics)Web 2.0Revision controlProcess (computing)Mereology
04:08
Web 2.0MereologyScripting languageReading (process)Goodness of fitProcess (computing)Object (grammar)Revision controlFunctional (mathematics)Dynamical systemType theoryInsertion lossSource codeXMLProgram flowchart
04:53
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
05:40
Social classModul <Datentyp>Electric generatorString (computer science)Scripting languageProgramming languageProper mapState of matterProjective planeScripting languageVideo gameWeb 2.0Query languageWebsite
06:22
Revision controlPoint (geometry)Web 2.0MereologyComplex (psychology)Web pageWeb applicationLecture/Conference
06:55
SoftwareProduct (business)Data managementJava appletOpen sourceRevision controlSystem callTrailWindows RegistryScripting languageRight angleComputer file
07:42
Stack (abstract data type)Web browserProduct (business)Scripting languageCode
08:16
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
11:11
Software frameworkProjective planeDampingBookmark (World Wide Web)CASE <Informatik>Data modelSoftware frameworkView (database)BitGenderXMLJSON
12:41
Configuration spaceConfiguration spaceGoogolWeb pageComputer animation
13:09
Projective planeMultiplication signSoftware frameworkCodeScripting languageStack (abstract data type)
13:47
Electronic mailing listMeasurementReal numberSign (mathematics)Scripting languageCodePerspective (visual)BitLecture/Conference
14:51
Scripting languageLibrary (computing)Function (mathematics)Module (mathematics)NamespaceCodeScripting languageFunctional (mathematics)Library (computing)Asynchronous Transfer ModeFormal languageComputer fileComputer chessLecture/ConferenceJSONXML
16:10
Computer fileProgramming languageExpressionComputer programmingLibrary (computing)Module (mathematics)WindowProper mapMultiplicationFunctional (mathematics)CodeFigurate number
18:09
CodeCryptographySoftware developerJSONXMLLecture/Conference
18:43
ConsistencyRepository (publishing)Right angleCodeCodeView (database)Computer fileLink (knot theory)
19:30
Modul <Datentyp>Scripting languageCodeProjective planeLecture/Conference
20:15
Modul <Datentyp>Software testingScripting languageComputer fileProjective planeFlow separationSoftware repositoryCodeMultiplication signPoint (geometry)Control flowProduct (business)Front and back endsDemo (music)Endliche ModelltheorieJSONXMLComputer animation
21:29
Cursor (computers)CodeTouchscreenLecture/Conference
22:05
SummierbarkeitRepeating decimalCloud computingTouchscreenSource codeMereologyExact sequenceSkeleton (computer programming)Computer fileProjective planeCloud computingDemo (music)Mobile appRight angleComputer animation
23:02
Computer iconCommodore VIC-20Cloud computingWeb pageDemo (music)Similarity (geometry)CodeMathematicsSoftware developerServer (computing)Asynchronous Transfer ModeWeb 2.0Greatest elementSource code
23:50
State of matterWeb pageStructural loadView (database)Web browserServer (computing)Mobile appScripting languageControl flowMedical imagingWeb 2.0
24:22
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)
25:35
Computer wormEmailCloud computingRepeating decimalCategory of beingVariable (mathematics)Object (grammar)SummierbarkeitTotal S.A.View (database)
26:18
Computer wormRepeating decimalEmailCloud computingExecution unitData typeDesign of experimentsScale (map)Product (business)Social classDifferenz <Mathematik>Computer iconEndliche ModelltheorieMoment (mathematics)Instance (computer science)Form (programming)
27:04
View (database)Web pageInstance (computer science)Multiplication signPoint (geometry)Source code
27:35
Video game consoleFingerprintDrum memoryComputer wormCloud computingContent (media)Scale (map)Executive information systemWeb pagePoint (geometry)Bit rateView (database)Right angleTablet computerProgram flowchartLecture/Conference
28:08
Social classFree variables and bound variablesData typeoutputScalable Coherent InterfaceMultiplication signProduct (business)Revision controlWeb 2.0Scripting languageModule (mathematics)Hash functionConfiguration spacePlug-in (computing)Source code
28:50
Content (media)Computer fileScripting languageProjective planeSource codeComputer animation
29:21
Computer fileMobile appPositional notationWeb 2.0Electronic mailing list
29:48
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
30:28
BootingBoolean algebraSoftware testingComputer fileExecution unitView (database)Software developerElectronic mailing listPlug-in (computing)Demo (music)Hash functionProduct (business)Scripting languageServer (computing)Local ringTouchscreenLogic gateSource code
31:25
Traffic reportingMultiplication signSoftware repositoryPresentation of a groupTransponderComputer animationLecture/Conference
31:53
WritingGoodness of fitTransportation theory (mathematics)Scripting languageSoftware frameworkProjective planeHand fan
32:45
Formal languageProduct (business)Field (computer science)Multiplication signLecture/Conference
33:13
Multiplication signGoodness of fit
33:52
Source codeMereologyMultiplication signModule (mathematics)Meeting/InterviewXML
34:43
Moment <Mathematik>Software frameworkWeb 2.0Product (business)Loop (music)Lecture/Conference
35:18
Integrated development environmentProjective planeProduct (business)DebuggerRoutingDrop (liquid)Multiplication sign
36:10
Computer animation
Transcript: English(auto-generated)
00:05
So yeah, Pythonic JavaScript for web developers or how to get modern JavaScript into your already existing Python projects would be the almost
00:20
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
00:45
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.
01:02
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
01:22
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
01:42
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
02:06
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
02:23
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.
02:42
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
03:07
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
03:24
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
03:49
JavaScript was forwarded to version 4 which was on par with Python 1.5 and
04:00
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
04:20
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
04:42
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
05:06
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
05:22
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
05:44
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
06:01
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
06:25
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
06:51
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
07:05
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
07:24
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
07:40
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
08:05
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
08:21
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
08:44
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
09:03
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
09:20
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
09:45
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
10:03
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
10:26
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
10:42
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
11:06
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
11:22
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
11:44
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
12:00
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
12:21
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
12:46
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
13:00
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
13:20
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
13:45
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
14:07
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
14:27
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
14:41
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
15:06
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
15:28
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
15:46
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
16:03
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
16:25
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
16:41
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
17:05
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
17:24
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
17:45
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
18:05
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
18:25
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
18:41
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
19:07
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
19:21
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
19:41
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
20:03
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
20:25
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
20:43
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
21:03
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
21:24
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
21:44
here we go now we are sharing the same screen so let's do this can you see
22:22
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
22:49
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
23:10
demo page which look like looks like this it's just a really really simple
23:20
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
23:46
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
24:03
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
24:20
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
24:49
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
25:04
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
25:25
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
25:43
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
26:04
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
26:24
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
26:42
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
27:08
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
27:23
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
27:46
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
28:04
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
28:26
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
28:47
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
29:09
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
29:22
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
29:45
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
30:01
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
30:30
JavaScript files use them with Babel and then there are tests for view
30:42
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
31:04
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
31:23
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
31:44
presentation to recap semicolons in JavaScript are totally unnecessary when you use transpilers note when you don't use transpilers it's not
32:02
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
32:22
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
32:43
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
33:02
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
33:23
time for questions so any questions no yes it's only a little question when
33:46
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
34:04
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
34:24
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
34:40
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
35:03
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
35:25
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
35:41
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
36:04
know if some like big project actually uses that kind of transpiler any other questions no thank you okay thanks again