Support for ES6 (modul-concepts) and SystemJS

[Asc2011]

Hi evrbd, i'm writing this into the blue, so maybe theres no real issue here. I recently found a nice solution to build Javascript-Browser-Apps with SystemJS as the main infrastructure-tool. This way one can use the ES6 modul-concept today. I do my stuff in Coffeescript which is supported via a (transpiler)-plug-in. I think a python-2-JS (ES6 or-5)-plugin would be a nice thing to have. SystemJS builds a bridge between CommonJS and AMD and cares for ES-standards. To me its the first 'framework' that really helps in organizing 3rd-party-libs from npm or github. I'm just getting into the details of ES6-modules but from what i've seen so far it seems to be a subset of Pythons-modul-capabilities. So lets start a discussion :)

[axgkl]

Hi, but isn't systemjs based on in browser transpilation?

[Asc2011]

yes, during dev one transpiles in the browser. Later it's just Javascript :) In my setup i use D3.js and a REST-driver to get data from a graph-DB. I just did two CS/JS-classes myself. These could have been easily done in python :)

[axgkl]

Hi, I use in browser transpilation a lot for myself for riotjs and sometimes even babel - but for Transcrypt this can't work: TS depends on availabilty of Python (Py3 or via a simple hack still also Py2) to analyse the user code (using the original python AST parser). For me and hopefull many others thats great, no huge webpack, what not javascript toolchains on the server - but downside is that transpilation must happen there. There are though quite some in browser python tools, which do the transpilation in js. I find transcrypt better than these, since the result of the transpile on the server just puts a very very thin layer of framework between javascript and your original code, its totally debuggable and transparent.

[Asc2011]

hmm, i surely have a Python-binary on my system. So it would be possible to translate Python to JS for the server-side, e.g. Node.js. Is it just the complicated communication from browser to a system-binary. Just thinking - maybe that could be a local websocket, CPython-driven, waiting for a script to translate/compile into JS ? or build a AST for that. I appreciate Transcrypts source-maps and thus the enhanced debug-ability.
Does the transpilation on the server-side result in one/some 'plain-javascript'-files ?

BTW, riotJS is interesting, didn't knew that one.

[axgkl]

hi, before I discovered transcrypt i was also very happy with riot, never looked back to react :-) Now with transcrypt I think currently, that I don't need any js component framework anymore, Transcrypt does take care of all hte name spacing pretty well and life cycle events are a no brainer in python, have a look into my riot demo here. Maybe a rendering engine only, e.g. riots one...

Combining transpiled python with node js libs for the server side is in deed a valid use case and Jacques created an example for this one already (see demos).

The websocket thingy: Not sure, would be only required if you need to dynamically create js from python which itself is created dynamically on the browser, e.g. in a little js.. i mean pyfiddle thingy, rite?

Otherwise you can compile it on the server, yes, into valid ES 5 js.

I think Jacques looks currently into compiling into ES6 though, then we need babel as well I guess for non evergreen browsers in some air tight security concerned enterprises (currently have an annoying case with an otherwise important customer - where I ship now with nearly 1 megabyte in browser babel :-( ) .

---

When I have some time and nobody else did it I'll have a look at using Transcrypt for hot transpilation in an Electron app, there it seems to make sense . The transpiling is rocket fast btw.

[Asc2011]

Hi Günther, nice demos u have there. I'll keep an eye on the node.js- and riot-demos. I'm fine with anything that results in ES5 and the only reason for me to try/use jspm/SystemJS is the CS-integration and the ES6-modul concept. So i'm fine with ES5, don't need more ES6-features right now. Dynamic-JS is not an issue for me - so forget about the webSocket idea. I just saw, that the jspm/SystemJS-plugin for CS makes ~20-lines of code. I guess this is what u call 'hot-transpilation'. All 'plug-ins' speak JS. Maybe one needs a node-process to trigger the transcrypt-binary to do the transpilation ? I'm no nodeJS-expert and new to jspm/SystemJS, too. SystemJS enables me to use CS in the browser during dev. Besides that i can use any 3rd-party lib from the nodeJS/npm/github-universe. Since there is no equivalent to the python-like standard-lib, one has to grab the needed parts where-ever they are buried. I'm quite happy with my setup for know and i can stay away from the attempt to roll-my-own, like "Look mama, i did my own asset-pipeline-tool - it's called webGulp and it has green whistles and smells really awesome." :) Concerning Babel and loading-times/mem-consumption - i realized my project did not excactly gain a speed-bump :) but the delays are not too bad. As soon as browser-vendors support ES6 - hopefully by the end of this year - i can safely divorce from Babel. Besides that, once i want to move parts of my code to the server-side, that should be a painless effort. I'm intrigued by Transcrypt - the d3-demo is nice, too. I'll keep an eye on that :)

cheers, andreas

[axgkl]

Hi Andi,

Besides that i can use any 3rd-party lib from the nodeJS/npm/github-universe.

currently I'm working on a redux / stream processing backed app framework, based on KendoUI widgets for the DOM ops, which is old style jquery - in 100% pure Transcrypt. Will ping you once ready (because hopefully relevant regarding howto using 3rd party js libs within Transcrypt).

You see a very very small but "telling" example in the jquery demo from Jacques already.

Regarding server side: I absolutely don't see the need for node and any js tool chain , since my app server is anyway in python and in dev mode I have a simple filesystem watcher running which triggers transcrypt. Minification as you know is triggered by transcrypt as well, including all 3rd party js libs, which you can therefore have in non minified versions while developing.

Whats left ? CSS preprocessors - but that could also be done within python and I personally don't need it, have my styles in place, no need to recreate all the time.

All in all: No, don't see the need for a javascript based pipeline ... mabybe I'll change my mind but for now I'm happy.

---

PS: Forgot one thing, which might invalidate all I wrote in your eyes: the Transcrypt minifier is requiring java...

[JdeH]

The Transcrypt minifier is in fact the Google closure compiler. It takes care of minification, some checks as well as converting from JS6 to JS5. Since it's backed up by Google I've assumed it to have some continuity.

[axgkl]

I find the thing absolutely great, its just a bit of a burden that you need a full blown jdk on the build system. I must admit, that I found it very assuring about how serious Transcrypt is, that Paul Irish did involve in Transcrypt with this tool. Btw: Any idea what he is doing here ? Seems to be sth really serious built with Transcrypt....

[JdeH]

I think Paul Irish took a brief look at Transcrypt for conversion of some tool but decided it to be too much work at that time (or, as it happens, other priorities took over...)

[Asc2011]

Hello again, just saw the announcement on github. And as a friend of mine asked me yesterday, if i could do a little course during the project-week that is planned at his school during october, i thought this might be a nice thing to do with python and transcrypt. As these students are 14-16 yrs. old, very mobile-phone addicted, i'm wondering now what could be fun for them ? PyGame was my first idea, but thats prbly to much arcade/2d und not 'modern'-enough for them. Then i thought smth. more historically oriented, like talking about Tufte, presenting Enronic from J. Heer, but thats probably too academic and not enough hands-on/'doing' for these students. My time-frame is 4-day a' 4-hours ? I've never tought student of that age, before ? I'd be happy if smbd. could spent an idea, or point me to some material how to design such a course. It should have a presentable 'result', based on students work. It should involve some sort of 'programming', maybe for a mobile-device ? and as they do have a MS-infrastructure it would be nice, not to spend hours to get the environment up and running. As transcrypt is server-based that should make a easy setup ? Any idea welcome, though entirely off-topic. sry for that :) Maybe smth. involving LOGO - RIP Seymour Papert..

[JdeH]

If you don't want any setup, they can start right away at:

http://www.transcrypt.org/live/turtle_site/turtle_site.html

You can e.g. have them generate electronic paintings, like the Mondrian demo (but then different, of course). Take care that they regularly save their source code (either by cut/paste or by mailing it to themselves. A competition for the nicest painting may spark some energy... (Incentive: a non-negligeable chocolate bar for the top 3 paintings)

A simple mobile dice app is demoed at:

http://www.transcrypt.org/live/transcrypt/demos/ios_app/ios_app.html

However this has to be hosted somewhere for them to download. Once it's downloaded it stays on their phone, so the server can be taken down again.

As some will have experience and others won't, you either have to differentiate or work in groups that you put together, having about the same skill level in each group.

Actually I think the online turtle graphics painting is the most realistic thing to do. The fun is that it will also run under a local installation of Python 3.5 unmodified. So they can make it in the classroom without timeconsuming tools setup, but later use their sourcecode anywhere.

[JdeH]

By the way, I've made a Transcrypt tag on StackOverflow. Having any questions posted on StackOverflow with this tag will help it survive peer review. So if you have questions...

Thanks a lot! (And ok if you don't)

[Asc2011]

ups, links are not working ? working-link ios-app and it even does sound working-link turtle

thats really cute and even more than i expected - thx a lot Jaques. Having a tag on SO is great - so i can pass those nasty questions of the 'little hackers' over to you -:)- ok, i'm just kidding. Good to have a knowledge-base on SO. I found a nice 3D-chess-game - maybe for the more advanced students. It's not about the game of chess, but rather the method to get it going. One has to print and cut the chess-tiles and the board and then it becomes a 3D-browser-based chess-game. The Fraunhofer-people did some impressive examples. I'll try to hook them on chocolate, but as this a so-called 'hot-spot'-school, i guess they prefer different substances. Maybe they like Mondrian ;) - that would definitely improve spray-can-art here in town :) btw, switching topics again, i followed your suggestion and did a quick&dirty try to integrate brython into my JS-project - to have Python and JS side-by-side. It fails on the synchronous-modul-loading on the brython-side and no support for ES-Modules, yet. It loops and can do nice stuff from the py-std-lib which is fun to see - though it lacks the ability to expose/export FNs&Classes. I'll ping you as soon as i tried Transcrypt.

Thx again and greets from Freiburg, Andreas

[JdeH]

Alright, Andreas,

What's a hot-spot school?

And what exactly do you want to teach those kids? Programming?

BTW I hope the links work now, maybe you should refresh your page, I got them wrong the first time.

Kind regards Jacques

[Asc2011]

A 'hot-spot'-school is the school for the other-ones. Those who came from abroad, are somehow handicapped or have difficulties absorbing and enjoying education. In my friends class you find ~80-percent with a 'migration-background'(that is 2nd-/3rd-generation in germany) or just recently arrived (refugees etc.). I would not call this 'teaching programming' but rather 'using digital tools' and see if that sparks smth. To get the turtle running&painting one needs to understand some basic-concepts in programming. So this is a must-learn to achieve a result. Python as a general-purpose language, now in the browser and thinking of the ios-app, i could imagine to do a mini-music/drum-app. To get there, students need to grasp some basic-understanding of markup, events, loops etc. If i can hook them up with the prospect of having a app on their phone, to make music or draw beatiful things. Teaching children is not my profession, but as it turns out, during programming one gets into frustration, solves problems (alone, in a group, with a mentor) and then grows with the problem. I'd say, thats what its about - solving problems, within a group and with a little support from advanced people. To me this is the essence of programming and it can and should be fun in the first place. The chess-game is some 'high-tech'-thinggy (3d, camera-use) but very haptic at the same time. It only makes sense if some students are interested in playing this game later on. Then i'd care for the setup.

greets Andreas

[JdeH]

Good job you're doing!

I must say I find the drum app (on a phone or just in a browser) a very nice idea. Suppose in the 'dice' app, the buttons didn't refer to numbers or to one and the same sound file, but each button had a picture of a drum, brush, woodblock etc. and a sample from that sound attached to it (drum rolls etc. you can freely download from the internet). They would then have a kind of mini drumpad at their hands.

Programming this from scratch would just be too hard, maybe you should do that yourself, starting from the IOS 'dice' app and changing the sounds and pictures. Shouldn't be too much work, since you're not starting out with an empty slate.

The kids then could configure it (other pictures, other sounds). Or maybe you should just set up a kind of framework with some code missing. Well I don't know what's best...

But I guess drumming would be appealing anyhow on the age you indicate.

Good luck (and curious how it went).

BTW I teach astronomy to children of 12 -16. http://www.sterlicht.nl Almost every kid likes that. We make a scale model of the planets (out in the open, they like being outside in the summer, if the sun is an orange you still need 450 m from the sun upto neptune) and they look through a small telescope to a tiny model of saturn at 60m distance. I've been doing that for 8 years now on several schools.

Don't know if its any good to your target audience, but if so I can send you the slides. There are four lessons of 2.5 hours each.

[Asc2011]

Hi Jaques, i wanted to put it in as it really impressed me technically. So now i'm sure this one is for you and your students :) I'm busy right now. But i'll keep you updated.

greets & beatz, Andreas

[JdeH]

Thx