Pythonic JavaScript for Web Developers

Video in TIB AV-Portal: Pythonic JavaScript for Web Developers

Formal Metadata

Pythonic JavaScript for Web Developers
Title of Series
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 license.
Release Date

Content Metadata

Subject Area
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 ( 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
Intel Software developer Web-Designer Software Projective plane Code division multiple access Video game
Scripting language Programmer (hardware) Data management Software developer Projective plane Bit Sinc function
Scripting language Term (mathematics) Web page Bit System call
Scripting language Web page Process (computing) Java applet Web page Front and back ends
Scripting language Web 2.0 Revision control Execution unit Moment (mathematics) Bit Digital signal Perspective (visual)
Revision control Process (computing) Color management Digital signal Mereology Annulus (mathematics)
Web 2.0 Scripting language Dynamical system Functional (mathematics) Object (grammar) Mereology
Revision control Point (geometry) Scripting language Programmer (hardware) Standard deviation Process (computing) Direction (geometry) View (database) Variable (mathematics) Formal language
Module (mathematics) Programming language Electric generator Open source Consistency Proper map Category of being String (computer science) String (computer science) Synchronization Social class Iteration Modul <Datentyp> Electric generator
Web 2.0 Scripting language Revision control Scripting language State of matter Query language Projective plane Video game
Web page Windows Registry Scripting language Complex (psychology) Trail Open source Java applet Mereology System call Product (business) Web 2.0 Revision control Data management Software
Scripting language Module (mathematics) Point (geometry) Standard deviation Link (knot theory) Code Multiplication sign Moment (mathematics) Cloud computing Bit Web browser Line (geometry) Stack (abstract data type) Mereology Code Product (business) Fluid statics Inclusion map Term (mathematics) Different (Kate Ryan album) Figurate number Fiber bundle Communications protocol
Personal digital assistant View (database) Projective plane Software framework Software framework Damping Bookmark (World Wide Web)
Data model Projective plane Configuration space Bit Configuration space
Scripting language Code Multiplication sign Projective plane Configuration space Software framework
Scripting language Sign (mathematics) Code Real number Electronic mailing list Measurement Perspective (visual)
Module (mathematics) Scripting language Namespace Code
Scripting language Module (mathematics) Programming language Functional (mathematics) Multiplication Computer file Code Expression Proper map Computer programming Formal language Function (mathematics) Figurate number Library (computing) Window Asynchronous Transfer Mode Library (computing)
Software developer Cryptography
Link (knot theory) Computer file Code Repository (publishing) Consistency View (database) Right angle Code
Scripting language Code
Scripting language Computer file Projective plane Software testing Modul <Datentyp> Flow separation
Point (geometry) Code Multiplication sign Control flow Software testing Modul <Datentyp> Endliche Modelltheorie Cursor (computers) Product (business)
Touchscreen Shared memory Summierbarkeit
Web page Skeleton (computer programming) Exact sequence Computer file Demo (music) Projective plane Source code Cloud computing Similarity (geometry) Mereology Repeating decimal
Web page Scripting language Computer icon Server (computing) Code State of matter Software developer Structural load Cloud computing Control flow Web browser Web 2.0 Medical imaging Mathematics Commodore VIC-20 Asynchronous Transfer Mode
Code View (database) Forcing (mathematics) Computer Cloud computing Instance (computer science) Mereology Element (mathematics) Web 2.0 Query language Video game console Object (grammar) HTTP cookie
Email Category of being View (database) Cloud computing Computer worm Object (grammar) Variable (mathematics) Repeating decimal
Email Scale (map) Execution unit Moment (mathematics) Cloud computing Instance (computer science) Differenz <Mathematik> Repeating decimal Product (business) Computer worm Social class Endliche Modelltheorie Data type Design of experiments
Web page Computer icon View (database) Endliche Modelltheorie Instance (computer science)
Web page Point (geometry) Tablet computer Scale (map) Bit rate Executive information system Cloud computing Video game console Computer worm Drum memory Content (media) Fingerprint
Revision control Module (mathematics) Web 2.0 Scripting language Multiplication sign Social class output Product (business) Free variables and bound variables Data type Scalable Coherent Interface
Scripting language Computer file Projective plane Content (media)
Web 2.0 Mobile app Positional notation Computer file Patch (Unix) Hash function Demo (music) Electronic mailing list Content (media) Product (business)
Web 2.0 Rule of inference Fluid statics Server (computing) Error message Hash function Network topology Cloud computing Fiber bundle Content (media) Booting
Boolean algebra Server (computing) Touchscreen Computer file Demo (music) Software developer Execution unit Product (business) Hash function Software testing Logic gate Local ring Booting
Presentation of a group Multiplication sign Transponder Traffic reporting
Scripting language Goodness of fit Transportation theory (mathematics) Projective plane Software framework Hand fan
Multiplication sign Field (computer science) Product (business) Formal language
Goodness of fit
Module (mathematics) Web 2.0 Loop (music) Multiplication sign Source code Moment <Mathematik> Software framework Mereology Product (business)
Multiplication sign Projective plane Drop (liquid) Product (business)
that so yeah Pythonic JavaScript for web developers for how to get mortar and
telescript into your already existing Python projects would be the almost more aptly aptly named so good hello my name's the
letter A. K. and and likewise on a alike deejaying and both of our my passions in life and
last year I have been working with each other scripts but I've been working on web since nineteen 95 and which I go over 11 years so I already feel a bit old here but um I code for fond and and sometimes referred for work but I don't really consider myself as a programmer personally I've work with mostly with small teams and as a project manager and take lead and like I said last year I worked and spent with a small thing is started and bootstrapping a five-person team the development team up with a child uh methods and writing JavaScript and this was my 1st contact with its a real JavaScript if you will and I learned a lot and I think I learned stuff that's 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 and how
many of you have heard at least 1 of these terms OK so almost all of you how many of you actually know what they mean the OK a little bit less as so that the idea of this talk
is to give a like a really basic basic introduction to modern telescope
and and related things the call of this talk it is to get you an idea what's going on with more script and to get to enough knowledge to get started with writing good stuff and also to learn relative and learn more so according to Wikipedia 95 %
of the top 10 million the most popular web pages use java scripts uh that means that you actually need to know it's even if you work in the back end and I'm
unfortunately uh how we you are at the Europe Python we're a poisonous so why or why it does the job of creep me to look and feel a little bit like
least II not very friendly or beautiful so to get a little bit perspective let's take a look at the history the I think asked to be skipped a few
so I'm script was developed basically in 10 days and in 1995 when the web look like this and to compare quite and was at the moment in version
1 . 2 and Netscape Navigator was just a released 2 . 0 and fast forward a few years
in 1999 when look like this and that our job great was and the forward to version for which was in and in part by someone falling off and based on the news article I found there everything else had but where worse except the presidential problems but In this and we've been
using basically the same JavaScript since then even now when our web looks totally different and
this is where the definitive book of JavaScript is really a huge and the good parts of the Chola script
is not so huge and this by the way is a good book and worth agreed if you want to learn about the good
parts of telescopes and it talked about functions and typing and dynamic objects and stuff like that but there's more so recently there was yet
another version of the job after called the 6 or and is 2 thousand 15 years stands for EC
must script which is the standard for JavaScript and these new features are basically moving the language in really really good direction from the programmers point of view we are getting uh let const variables which means that you can actually now
have uh not global earlier prose and you can have consonants uh you have real Plessey's object literals better liberals you have modules iterators generators map concepts and properties the strings the structuring and basic and when and and away so it's pretty much already starts will more
like a wife and more like a like a proper programming language and if we then I'm go back to the way that we have used that at least all I've used to develop
job after but which I call here the old-school way and it's basically just adding J query to the side and then some script tax and that's about it and this is the whole whole life that I've been working on the web this is the has mostly been the state of Javascript on the on the weapon on the projects i've i've been working and fortunately we
now do you have a better way as women head injury would want to shout at this point and so the modern version is way more
complex for obvious reasons we now live in 2017 and our web absent web pages or and constructed in more complex ways and the JavaScript part adds to it itself
we start with an NPM which is a package manager for Java scripts and it's the world's largest software registry which is open source but the registry holder itself it's a and the incorporation so that's kind of interesting uh thing right there in this and the and gives you a final call back its chastened we it's is basically and requirements txt for people in Python and MPM has dependency tracking and stuff like that so you can actually know what versions you're sleeping with your product and then we move to
transpire layers Babel is the 1 usually used and this transpires your new coat and when you move things to production to also call that most browsers can understand back to the he has fibrous even use for and we need to use that because you know browsers and ii and stuff like that but they pose with our and cellist script stack and
then terrace if you want to get like really busy with JavaScript can be at it into links Croat and and in my opinion it make sure the coding experience but also reading the code and and doing code review and stuff like that way more pleasurable as you know that you can maintain standards he links is say and JavaScript linking of package which is in my opinion way better than placate for example and there are at the moment no official kind lines like paper age but there is a protocol called JavaScript standard style which is say and PM module you can install and it has a standard and recommendations also and for the moment I think the most used I standard style or more the more most use coding going lines are in a B and B going guidelines by the way I have links to everything I'm mentioning here and not here it's a link at the end of the talk then we have a lots of different JavaScript modules and bycatch is and we need to ship them out so I went back to this at the moment but 1 of the most prominent tools for that with goal so does lots more we've also already had the talk here at your question about whether part and it's really powerful tool but it's also quite complex and still not very stable at least in my opinion in in like documentation terms and stuff like that so and when you bundle your your and assets you need to invest a little bit time to get this 1 going on also at this point you probably want to and collects and bundle all your all for their static data assets like and CSS and sass and stuff you want to preprocess and would like can do that for you to but also went back to include something kind of some pretty amazing stuff like on the pre shaking which and automatically can eliminates some dead code from your JavaScript and not included in their production bundle if you just can't figure it right and then um after all these like build tools but
you of course want to use some framework this is the same kind of deal that usually when you start the Python
project you probably don't want to stop running from scratch to select
your favorites framework and start working so the top 3 contenders in my book are angular and reactant you and Eve in your company you 1 of these are already been in use user just use that or if you know 1 already just use that it doesn't really matter what's and in case that you are not familiar with an effective framework so far I would warmly recommend view
which is saying I'm and I've been working with lots and I'm also been working with jungle outlets and I think it is a little bit like a child of Django and flask only changed its Chandra to JavaScript so and it's really easy to get started it has good documentation which is that unheard of in gyroscope world and it's lean and fast but still robust enough to get you going with the really pretty project if you if you need to and eat has view X which is kind of react we looks kind of a data model to if you need 1 so these new
shiny things require new tools and they require require new configuration which is obviously a kind of a pain in the butt and
whenever only usually
have needed to to relevant to JavaScript and configuration I end up to the from Beijing 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 and this fact I mentioned and I just posted on the kid lab project it's not Harriette's but that we might have time to look at the code really quickly on the idea here is that you're going to have an idea what you need to get started with that this kind of stacked if you don't know what the what's going on and examples from the trouble script world we that using that 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 and help you to start to start away if you want to so what about the actual topic
of that of salt what is Pythonic Joe script and this is by the way real sign from Norway i've used very pleased and so the them In obviously this is a quite opinionated lists this is my opinion and your mileage may vary but for me by the code is from something you feel rather than measure I think this comes down to the talk we had about a beautiful gold and I think what anarchism built the same but some it from JavaScript perspective I think and bundling EUR
coding into packages and into modules is the 1st thing you need to do I'm namespaces or a honking great idea and stuff like that so just just use and and how many of
you have to worked with code like this in HTML when you
have lots of strip tax
importing something and then in the hood HTML itself a script-like which has to the actual code I have yes almost lost and the better way of doing this it is to
put everything in 1 in 1 file we have the IAEA 6 syndics and and the starkly using strict mode of it prevents you from writing bad cold and disable some about features of the language and then you start importing the libraries and this 1st imports this they require function which is a notice of function and this is not a native John script some of the older libraries and some well some libraries still need this week
wider and won't work well with the native imports but and some do and then I just to points out that it still might be Harry that sometimes you need to like explicitly set something to window because some libraries just don't work of this is what it is and then you have like the native ant module in birds native imports in JavaScript look quite familiar or by the nests and this is actually I really ensure when I see this kind of javascript code and the last 1 we put everything uh our code itself in an if which is immediately invoked function expression and make a baby AT at the so and everything put in to here won't but leak outside and another way after I wrote this on a figure above that when we're actually writing in new jobless get it doesn't matter so much but this is this is the way of the all cost like to do it and then at the at the end it gets the program gets the wrong so all you need to do on your HTML these and at the 1 you and occupied and stuff and JavaScript file that was a bundled with on went back so that's the 1st thing you have you bundled a files and instead of doing multiple imports and and stuff like that you collect and B packages send you handle them in 1 place and that's kind of a the and it kind of a way of working that we have been used to in like the proper programming languages and now we can do it in JavaScript to so that's kind gratifies going
guidelines and the linking stuff
is really important in my opinion that crypt
of obviously a doesn't work like Python which and in Python you can read other people's code quite easily in JavaScript you can't unless you have a really good guidelines on how to write your code so if you were right for example for the company and you have a several developers and noting it really helps a lot if everyone in everybody and
rights consistent code and after you checked according to the uh repository and it's been peer reviewed no no 1 should be able to tell who wrote the code and and when you link a link the code it's quite easy to do and streak go view of course helps it's amazing how How much better looking and better feel you get to a JavaScript file the without doing anything else but just like arranging it differently while the coding guidelines it's it's amazing and then there's
um maybe obvious maybe not not a
thing but the semicolons and are optional until a script so in my
opinion why use them and uh we are transporting our code so the Transpiler adds them where it needs to automatically and even if
we do use them or don't use them it's the Transpiler doesn't care so why should we on so I'm like those least parentheses this might be elegant weapons are like your father's Prentice's but we don't need them so let's not use them so as to have recovered by the majority of in
my opinion is modular it consists of packages just like your Python projects
it has about its taste and you can import stuff there you can keep separate project several repulsive wanted at its testable and tested you can actually test that go when you write it this way and it's easy to test and this is this is a big thing even if you have that 1 small Jovic script file in in your project if you write it this way you can actually tested and then you you know that when you
change your Django model or whatever and when you run your front telescope tests if they can don't break you are losing Leslie when you're pushing things to production and when you link the Croat it actually looks good and it loops and similar to everybody else's and some extra bonus it's cynical and free so 1 I'm not really sure how much time we have to left 20 minutes and we can do at this point I think a short due north the should
the mouth of the code by pushed if I find my cursor from somewhere the is it not and
it and it and in the here we govern
won't use knowledge sharing
saying screen so 1 the let's do this
at can you see this all and let's start with the project so and uh this is the Indian projects and it's not quite finished yet but it's just a basic chongo skeleton with 1 out and it has some static follows this sense file and they just get part of the source file how many of you know SES OK almost also serves a an see is this kind of thing is that you then preprocessed
to our of CSS we use this to render the CSS for the demo page which looked like looks like this it's just a really really simple the it's similar page
and the whole telescript here if here so if we go from top to bottom and we are in strict mode and this hot more dual thing is a wetback helper that is actually quite also think that when you develop with web survive development server and the change of javascript code or the code gets
updated in the browser automatically and it doesn't mean that Django runs are a kind of rephrase the whole page it just represses the channel script and it's and it keeps the states so imaging like developing huge charge give 1 page ad that has loads of state and it just and change 1 thing 1 little thing you don't need to repress breaks everything stays the same and web but just to relaunch it for you and
then reusing view and J. query and we are using the cookies module because we want to but use this attacks posts method from object where it with jungles see a soft token and In that requires this is pretty weird seen uh
about went back that I personally don't quite understand it more like parts if you can require anything that Web Web back can read and if you have a blocking force as you can require assessed and web but just it just have heated for you and so if you want to do CSS with or assessed with the web part you need to require the father on and then the actual code is really simple view instance so you you but that's the viewing stands to any HTML elements and this 1 has data elements so it's just some like
some object variables here this is totally not like finished or even tho it's quality at about so I put something to get started and computed methods or and I think of them as and Python properties so they have this still some acts like a property that automatically
updates when you're on and variable updates and then you have met that our methods we also have in view of the special some methods like created which as you might
I guess gets run when the when the instance is created at the moment and this doesn't do quite nothing it's it's get
it gets around quote into this main-container and then I think we have here you he he here our here we have this the and that's model which is the worst participants here and
when we change the model in the
and perform itself it automatically updates in in the view and the view instance and this would be a really on better if I could show you the actual page but I think I'm not going to get it running at this point and before we run out of time but and the idea here is that to get you going you only need
this really really small instance of clean and easy to read and understand telescript and the point here I wanted to say explicitly made is that you can use it with your existing Jake wearing thing is you can have your page full of take rating is what
you can and just add that few you using right next to
it and it just works or you can start with a clean slate like we did here and just do it there's 1
more time special thing
here so this is something I wrote for myself as a helper for the went back and production pushes
because we might next 1 to see the web but conflict so here we have with a conflict which is Saicho script module that actually just requires another module based on the end of the variable we keep it from the command line and if we have ever the end of we require some wetback things 1st and some blocking and then we get get cash and
explain it in a minute and then and went but once the increase that it it creates and I've found
important them from here so you might have we only have here just 1 cellist
file but for example in the typical Django project you'd you'd have 1 hour to each other from script files for
every app you have for example and you can grow this list as a lot of T 1 2 and web but just With this notation you you get uh each 1 file for each entry and you can have the the Honourable those entries to and it really gets really complicated this is really really simple stuff
here and for and caching and for the so far and production pushes the use and the in
the bundle name so automatically when you come Bush your code and and then
build their static Essex with web park and the assets get name with the key hash the and then there are some dev server thinks and down so but rules how to um how to use Javascript what to
do with JavaScript files and I use them with Babel and that then there'll be no test for review files which we didn't get to see units and then there are obsessed files and list of it's
and if I show you really quickly the template tag the world the idea
here is that the in the temple attack would do the same thing we get the gate hash and then the template tactical puts the screen name for us so in development really uh we can use this demo file and in our the or in development we can have it on a local server and in production where we once and this is just it just works automatically so this is something you'll
find from the from the gives report by the time of a ability and now operative quickly
packed into the presentation and to recap and semi-colons in JavaScript are totally unnecessary when use transponders
note when you don't use transporters and it's not 100 per cent but it's 9 2 9 per cent and sure but if you use Transpiler if you build this stack it's pointless to cynical and there are tons of good some packages Patel script so would you don't write stuff yourself don't reinvent the wheel and
the NPM is full of good stuff proposal unfortunate about stuff and they're all are easy to use fan frameworks and there are hard to use frameworks just like there and Python and then turn on linking to every projects and it kind of is lipstick on a pig but hey that's just but and with 2 tools you
can actually have quite fond which of the 2 so yeah when you do it like this you can like automate everything you can have it in Europe like production of Hugh I fields just like every other language so investing to this is on itself good thing I think and that's about it thank you if
it do we have time for any questions yes we have time for questions so and questions the it the no questions
you missed some that yes yeah so is the it's the only the 2 questions I want to use a decline and when to use in Puerto well that's a good question and use require that important to somewhere in the his of the telescope but is a really really poorly documented but if the package is good it and it worked with import and if the packet is folder it probably doesn't work with import but if it uh if it is like writes back it just worked with
part but you need to you need to look at the documentation and you need to have basically almost every time you need to look at the source because there is no documentation so but yeah that's just freedom but that's a really good question and when you build your own stuff and when you try to evaluate what packages is you want to use and select those that are like you can use with native imports and and modules because they are obviously better written and
maintained as hello thing for the torques so there are certain X. loop pipe in a Python but them into web compiles yes OK have you ever considered that fall Weisel production use legislative and beetles like have adjusted that I mean I I get to read it let's of of those frameworks and I I didn't even know that they exist if they're interesting and that 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 and then it it might be for you and why not used in production if it works so on by myself haven't wanted to go down to that true because I'm 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 time and i these and stuff like that and the book tools and stuff like that already were so and I don't quite need to I feel the need to keep in Python in in that low-level but if it works for you right and here I would like to know if some like big drop project actually use that kind of transport yeah
any other questions thank you discipline thank you